리팩토링, 그게 뭔데?기존에 만들었던 프로젝트들이 주로 학술제 / 대회 용이라 기간이 한정되어 있었다.한정된 기간이다 보니 일단 '완성' 하는 것에 초점을 맞추다보니매우 지저분하고,,, 내가 이해하지도 못한 코드를 긁어오는 경우도 많았다. 그래서 전체적으로 내 프로젝트들을 전부 *리뉴얼* 하려고 한다!소위 말하는 '리팩토링'이라는 작업을 하려고 하는데,해본 적이 있어야지... 어디를 어떻게 고쳐야할지 엄두가 안났다그래서 '좋은 리팩토링을 위한 방법'에 대해서 여기저기 찾아보았고,블로그에 정리해둔 후, 이를 토대로 리팩토링을 진행하려고 한다처음부터 다 뜯어고쳐야 한다면?1. 기존 코드 분석현재 코드의 구조를 이해하고, 어떤 기능이 어떻게 동작하는지 살펴보기전체적인 흐름을 간략하게 문서화(메모라도)해두면 이..

[STUDY 진행 과정은 깃허브에 계속 commit 하고 있습니다] (많관부!)https://github.com/just-stopyoon/Seeds-study5주차 과제 내용장바구니 항목 업데이트하기"+" 버튼을 누르면 해당 숫자가 증가하도록 handleIncrease 함수 완성하기 useState 컴포넌트 저장소컴포넌트별 저장소를 state 라고 한다.지역변수는 컴포넌트가 렌더링 될 때마다 초기화가 이루어진다. 따라서, 지역변수의 변경 사항을 기억하지 못한다. 컴포넌트가 업데이트되어 변경하려면?렌더링 사이에 변경된 데이터를 저장하고 있어야 하고, 새로운 데이터로 렌더링 되도록 해야한다. - useState의 리턴값인 "state 상태변수"는 렌더링간에 데이터를 유지해준다.- useState의 두 번째 ..

[STUDY 진행 과정은 깃허브에 계속 commit 하고 있습니다] (많관부!) https://github.com/just-stopyoon/Seeds-study 4주차 과제 내용 버튼 클릭시 body의 색이 변경되도록 이벤트 핸들러를 작성하고 연결하기 이벤트 핸들러 (event handling)이란? 이벤트 핸들링은 웹 페이지에서 사용자 상호작용과 관련된 동적인 기능을 구현하기 위해 사용되는 기술이다. 그렇다면 이벤트는? 웹 페이지에서 '이벤트'는 사용자가 발생시키는 마우스 클릭, 키보드 입력, 스크롤 등과 같은 행위를 의미한다. 따라서, 이벤트 핸들링은 이러한 이벤트가 발생했을 때, 브라우저가 이를 감지하고, 이벤트를 처리할 수 있는 JavaScript 코드를 실행하는 과정을 말한다. 결국, 이벤트 핸..

[STUDY 진행 과정은 깃허브에 계속 commit 하고 있습니다] (많관부!) https://github.com/just-stopyoon/Seeds-study 3주차 과제 내용 과제 1. App.jsx 코드에서 card 컴포넌트를 추출하고, children prop으로 서로 다른 내용 전달하기 과제 2. 삼항연산을 사용해서 완료되지 않은 항복의 아이콘에는 X표시 넣기 props 란? props는 '객체' 이다. props는 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용하는 속성으로, 단방향 데이터 흐름을 갖는다. 따라서, 부모 컴포넌트에서 넘겨 받을 때, 자식 컴포넌트에서는 'props.이름'으로 접근할 수 있다. props는 읽기 전용 입니다. 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트 ..