뉴히의 개발 로그

React Hooks [useState/useEffect/useRef/useContext/최적화(React.memo, useCallback, useMemo)] useState Hook : 리렌더링이 일어날 수 있게 상태를 변경해주는 Hook useEffect Hook : 컴포넌트가 화면에 보여졌을때, 컴포넌트가화면에 사라졌을때 어떠한 것을 실행하게하는 Hook useRef Hook : DOM 요소에 접근 할 수 있게 하는 Hook useContext : props drilling을 방지하기 위해 전역 데이터를 관리할 수있게 해주는 Hook React.memo : 부모컴포넌트로 인해 자식 컴포넌트들이 전부 리렌더링 되는것을 막는것(컴포넌트 memoization) useCallback : 함수형 컴포넌트의 ..

이번주는 새로운 팀원들은 만나고 React를 시작했다. React 강의를 듣고 새로운 개인과제, React로 Todo List를 만드는 새로운 과제도 진행 되었다! 새로운 팀원분들은 매우 스피디 하게 팀장을 뽑고 인사를나누고 바로 강의를 촤촤촤! 진행하셨다 ㅎㅎ 다들 실력있으시고 진도도 빠르신듯하고 개인과제도 빠르게 완성하시더라 ! ㅎㅎㅎ 어색어색하였지만 나도 빠르게 React 강의에 집중할 수 있었다. 새로배우는 리액트 너무나 재미있었당 ㅎㅎ 입문단계 수업이라 강의내용도 어렵지 않았고 개인과제도 강의에 나온내용이라 금방 진행했던것 같다 하지만, 강의를 돌려보며 따라한것이라 계속 복습이 필요하다. Learned | 이번주 배운 것 새로운 리액트 강의 주차! 자바스크립트 프레임워크 React를 시작했다. ..

button 태그는 type이 submit이기 때문에 데이터 전송이 일어난다. 아무런 값이 없어도 말이다! 이렇게 뒤에 '/?' 물음표가 생겼다면 데이터 전송이 일어난것 그걸 막아주기 위해서 우리는 preventDefault를 사용! const clickAddTask = (e) => { if (!title || !text) { e.preventDefault(); alert('입력되지 않았습니다'); } }; 클릭이벤트가 일어나도 빈값이라면 preventDefault로 데이터 전송을 방지한다. 내코드에 적용하기 ! todo list 추가하는 핸들러! // JS const clickAddTask = () => { const addTaskList = { id: randomID(), title, text, is..

지난번 팀과제 진행시에 댓글등록 기능을 구현하기 위해 localstorage를 사용하는 팀들도 있었다. 하지만 우리팀은 mongoDB를 이용했기에 사용하지 않았었는데 이번 과제로 localstorage를 하용해야해서 개인과제에 + 기능 구현으로 localstorage를 이용해서 새로고침시에도 화면에 남아 있을수 있도록 구현했다. 기본 사용법은 지난번 글에! localstorage 기본 사용법 https://newheee.tistory.com/27 사용하는 건 생각보다 어렵진 않았다! localstorage 데이터 저장하기 const clickAddTask = () => { const addTaskList = { id: randomID(), title, text, isDone: false }; const ..

warning: in the working copy of 'src/App.css', LF will be replaced by CRLF the next time Git touches it warning: in the working copy of 'src/App.js', LF will be replaced by CRLF the next time Git touches it warning: in the working copy of 'src/index.js', LF will be replaced by CRLF the next time Git touches it CR(Carriage-Return) 현재 커서를 줄 올림 없이 가장 앞으로 옮기는 동작 LF(Line-Feed) 커서는 그 자리에 그대로 둔 상황에서 종이..

터미널에서 새로운 폴더를 생성하고 yarn을 실행했더니 오류가 났다......? 내버전은 18.15 였는데 18.16으로 업데이트하니 오류가 해결되었다 ㅎㅎ 는 내 착각!!!!!!!!!!!!! 해결되지 않음 2)settings.json 파일에 코드 추가 "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, 실패. 3) npm 패키지 추가설치 npm i eslint-plugin-jsx-a11y 실패! 사실, 추가 패키지등의 설치 없이 실행되어야하는게 맞다. 아무것도 안한 프로젝트기 때문에.... 그래서 튜터님께 여쭤보니 yarn 설치 오류등이 은근 많다고 한다. 다른 프로젝트는 잘 열린걸 보니 무언가 프로젝트생성시에 오류인듯... 프로젝트를 ..

명령 프롬프트에서 드라이브 변경을 어덯게 하는지 몰라서 이렇게 저렇게 쳐봣는데 ㅋㅋㅋㅋ 엄청나게 간단했던 ㅎㅎㅎㅎㅎㅎ 드라이브안에서 폴더간 이동은 cd로 가능하지만 드라이브간 이동은 불가하다! 드라이브간 이동은 '드라이브 이름:' 이렇게만 적어주면 바로 이동된다 ㅎㅎ 새로시작한 리액트 폴더를 만들기 위함이었기 때문에 리액트 폴더도 만들어보자 명령 프롬프트에서 ls => 현재 내가 위치하고 있는 곳이 어디인지 확인 cd 폴더이름 => 리액트 프로젝트를 생성하고 싶은 폴더로 이동 yarn create react-app week-1 => week-1 폴더명을 가진 프로젝트 생성! 알아서 엄청 막 설치가 된당 ㅎ 해당 폴더로 들어가보면 이렇게 폴더 구조가 알아서 만들어져 있다! 명령 프롬프트에서 아래명령어로 프..

3주동안 팀원들과 함게 jsvascript 기초문법 강의 수강하는것부터, 개인과제, 마지막으로 팀과제까지 함께하고 javascript 스터디 섹션이 마무리됬다. 많이 배우기도 하고 많이 느끼기도했고, 내 부족함을 알고 더 노력하고 발전해야겠다는 생각이 많이 들었던 한주..!! Keep | 다음 프젝에도 유지했음한다 팀과제하면서 모듈화를 처음 진행해봤는데 모듈화를 함으로써 코드재사용성이 올라가고 부분적 수정이 더 용이해 졌다. 본인이 맡은 부분이 아니더라도 함께 고민하기 더좋은 방법이 없는지 묻고 의논하기 오류가 있다면 스스로 먼저 나서서 맡아서 해결하기 Problem | 이번프젝 문제점/해결방안 javascript로 슬라이더의 너비를 구할때 반응형이 리로딩없이 부드럽게 되기 내 하루 시간을 알차게 사용하..