개발일지

최적화 종류React.memouseCallbackuseMemo 리렌더링 조건1. 컴포넌트의 state가 바뀌었을 때 2. 컴포넌트가 내려받은 props 가 변경되었을 때 3. 부모 컴포넌트가 리렌더링되면 자식도 모두 리렌더링 된다  컴포넌트란? 어떤 기능을 모아서 독립적으로 사용하는 함수로, 기능의 집합 같은 것이다컴포넌트 내부에는 컴포넌트에 관한 것들로만 채워야 한다(독립적인 사용과 협업 시 혼선을 주지 않기 위해)컴포넌트 내부 함수들은 컴포넌트의 기능을 위한 메서드와 같은 것이다.반복적인 함수는 컴포넌트를 분리하여 관리하고, 하나의 컴포넌트만 사용하는 함수는 내부에 선언하여 사용된다.스타일의 경우, 전역으로 선언하여 다른 컴포넌트들이 접근할 수 있게 하거나, 스타일을 위한 컴포넌트를 생성하여 관리하는..

Hook state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행 되도록 만든 것 Hook 규칙최상위에서만 호출한다반복문, 조건문, 중첩 함수 내에서 호출 불가 (호출 순서에 의지하기 때문에 해당 부분을 건너뛰는 일이 생길 수 있다)React 함수 내에서만 호출이 가능하다, 일반적인 js에선 사용 불가 컴포넌트 내부에서만 사용할것 Hook의 종류useStateuseEffectuseRefuseContextuseState가장 기본적인 hook함수형 컴포넌트 내에서 가변적인 상태를 갖게한다문법 const [state, setState] = useState(초기값);원래 useState의 리턴값은 배열이다, [state, setState] 이렇게 구조분해할당을 통해 값을 받은 것배치 업데이트..

지역 스타일링전역 스타일링default style 제거 스타일 컴포넌트 설치 방법확장 > vscode-styled-components 설치터미널에 yanr add styled-components 입력(난 npm add styled-components 이렇게 입력했는데 보안 외에 문제는 없다 함) package.json에 "styled-components": "^6.1.8" 있으면 제대로 설치된 것지역 스타일링스타일을 입힐 컴포넌트를 만든다(지역 스타일링), 변수 선언 = 스타일. 스타일입힐 태그명 `백틱 내부에 스타일 입력`선언된 변수 명을 태그명에 넣는다 =>  border: 1px solid ${(props) => props.borderColor}; props로 borderColor 을 전달받는다i..

return ( 🔥Working {/* isDone의 상태에 따라 todo가 반환된다. */} {list .filter((item) => !item.isDone) .map((item) => { return ( // 필터링된 div 컴포넌트와 연결 ); })} 🌈Done! {list .filter(function (item) { return item.isDone; }) .map(function (item) {..

TodoList 과제 필수 구현 기능제목, 내용을 입력하여 Working에 추가, 삭제 완료 버튼을 누르면 이벤트를 받은 todo가 Done로 내려가고 취소를 누르면 다시 Working로 돌아올 것초기값 설정const [list, setList] = useState([ { id: 1, title: "todoList", content: "과제를 해봅시다", isDone: false, regDate: (() => { const now = new Date(); const today = now.getFullYear() + "년" + (now.getMonth() + 1) + ..

컴포넌트에 클릭 이벤트 적용방법컴포넌트에 버튼을 만든다onclick={(e) =>{ alert('이벤트'); }} 인라인으로 직접 이벤트를 작성해줘도 되지만, 함수를 작성하여 컴포넌트에 함수를 연결해주었다주의 * onclick 안에 함수를 연결해줄때 함수명(); 이런식으로 소괄호를 할 경우, 연결이 아닌 해당 함수의 호출이되어버린다    부모 자식 컴포넌트 연결하기값을 보낼 부모 컴포넌트의 return에 자식 컴포넌트를 입력하면 부모, 자식 컴포넌트가 서로 연결되어 "나는 아들입니다" 메세지가 화면에 나온다  컴포넌트에 props 전달하기props란 컴포넌트끼리의 정보 교환 방식이다부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터, 컴포넌트 간의 정보 교류방법이다props는 반드시 위에서 아래 방향으로 흘..

npm | Yarn  JavaScript 언어를 위한 패키지 매니저로, 프로젝트에서 필요한 패키지들을 관리하고 설치하는 데 사용된다. 이전에는 둘이 속도 부분에서도 차이가 있었다고 하지만, 이제는 거의 차이가 없다고 한다 npm은 의존관계를 (한 요소가 다른 요소에게서 필요한 것을 얻거나, 다른 요소에 영향을 받아 기능을 수행하는 상태) 가지는 다른 패키지들도 자동으로 설치됨으로 보안 문제가 발생할 수 있다 Yarn은 yarn.lock이나 package.json 파일에 있는 것들만 설치를 하기 때문에 보안이 더 안전하다.Yarn이 npm보다 용량이 더 큰 편이다. 리액트 첫 프로젝트  꼭 Node.js는 LTS 버전으로 설치할 것 프로젝트 폴더를 미리 만들어 준 후 폴더 내에서 Shift + 마우스 오른..

// 댓글 입력 폼 const commentForm = document.querySelector('.commentForm');// 댓글 목록 ulconst commentBox = document.querySelector('.commentBox');// 폼 submit 이벤트commentForm.addEventListener("submit", (e) => { // 폼은 기본적으로 새로고침을한다. 이벤트의 기본 동작을 취소시킴(새로고침 막기) e.preventDefault(); // 인풋 가져오기 const userName = document.querySelector('.userName') const comment = document.querySelector('.comment') const pw ..

Timestamp 타임스탬프현재 시간 또는 특정 시간을 가져온다일반적으로 1970년 1월 1일 00:00:00 (UTC)로부터 경과한 밀리초(milliseconds) 또는 초 단위로 시간을 나타낸다 팀과제 중 로컬스토리지를 이용한 댓글 구현 항목 중 삭제 기능을 구현하려면 로컬스토리지에 삭제 '기준'을 만들어서 삭제해줘야 했는데 작성자, 비밀번호는 중복이 허용되기 때문에 적합하지 않았다.대신 타임스탬프를 이용하여 id대신 고유의 값으로 사용하기로 했다 댓글 생성 시 new Date를 id변수에 담아 생성된 댓글마다 타임스탬프를 넣어준다. // 댓글 객체 생성(작성자, 댓글 내용, 비밀번호) const id = Date.now(); // 댓글 삭제를 위한 id값 const makeComment = {..

Github에 리포지토리 생성 로컬에 생성된 리포지토리 가져오기리포지토리를 넣을 폴더 생성  폴더 내에서 마우스 오른쪽 버튼 클릭  >  Open Git Bash here 클릭   git clone 리포지토리 url (shift + insert 주소 붙여 넣기 하는 방법)   code 리포지토리 이름 (ex Fi  입력 후 Tab 누르면 자동완성) 입력하면 VS코드가 실행된다  파일 수정 후 커밋하기변경 사항이 생길 경우 소스제어 버튼 클릭 변경 사항에 마우스 올리면 + 버튼이 보인다, + 버튼 누르고 커밋할 파일 선택 후 변경 내용 동기화 클릭우측 상단 ... 을 보면 브랜치 변경 또는 생성 풀, 푸시도 가능하다※ Git 명령어도 알아야 하니까 명령어에 익숙해지기 전까진 되도록 사용하지 말자