todolist4 [WIL 2023.06.18] 내배캠 5주차 📝 Situation(상황): 이번주 목표 ES6 문법을 습득하였고 리액트 컴포넌트 안에서 map, filter를 활용할 수 있다. 모던 웹에서 리액트가 탄생한 배경을 알고 화면 내에서 재사용 가능한 컴포넌트 단위를 나눌 수 있다. 불변성을 지켜야 하는 이유를 이해하고 있으며 props, state를 활용해 함수를 전달할 수 있다. 리액트 입문강의를 활용해 투두리스트 페이지 만들어보기. 👀 Task(임무): situation 중 문제들 완료 취소 간 상호이동 id 값의 중복 input validation 적용 컴포넌트 분리 🔍 Action(접근방법): 해결시도 todoUpdateClickBtn(item.id)} > 완료 객체의 id값을 가져와서 const todoUpdateClickBtn = (id) =.. 2023. 6. 19. [TIL 2023.06.15] React 프로젝트 GitHub Pages 배포하기 / 컴포넌트 분리하기 💻오늘 배운 내용 React 프로젝트를 GitHub Page로 배포하기 리액트를 쓸 때 CRA(Create-React-App)을 설치해서 사용 하는데 이렇게 하면 깃허브 페이지가 호스팅 되지 않는다. 아마도 페이지 주소를 열면 Readme를 만나는 당혹스러움을 경험했을것.. github pages로 web을 deploy했을 때 가장 기본으로 나오는 메인 페이지는 자동으로 repository의 가장 상단에 있는 index.html을 기준으로 하는데 CRA에서 index.html은 public 폴더 안에 있기 때문 >> 그래서 React 프로젝트를 GitHub Pages로 배포하기 위해서는 몇가지 작업이 필요하다. 구글에 방법이 여러가지 있었지만 난 간편한게 가장 좋기 때문에.. 비교적 제일 덜 복잡하고 빨.. 2023. 6. 16. [TIL 2023.06.14] React로 Todo list 만들어 보기 ❓발생한 이슈/고민 CRA 설치 후 나만의 투두리스트를 만들어 보았다. [1] 완료 취소 간 상호이동 working 항목의 완료 버튼을 클릭 하면 done 으로 내려오게 하고 싶다. done 항목의 취소를 누르면 다시 working쪽으로.. [2] id 값의 중복 삭제를 누르면 해당 항목이 아닌 다른 항목이 삭제되고, 또 여러개가 갑자기 중복되어 생성되거나 삭제 버튼을 눌러도 삭제가 되지 않는 이슈 발생 삭제되고 생성되면서 id값의 중복으로 인한 문제였다. [3] input validation input에 값이 없는 경우 submit이 되지 않도록 validation 적용이 필요 💡해결과정 [1] 완료 취소 간 상호이동 //투두 완료&취소 버튼 함수 const todoUpdateClickBtn = () .. 2023. 6. 15. [TIL 2023.06.13] React 불변성/Rendering/counter 프로그램 만들어 보기 💻오늘 배운 내용 불변성 불변성이란 메모리에 있는 값을 변경할 수 없는 것 숫자, 문자열 등 원시 데이터 = 불변성이 있다 객체, 배열, 함수 = 불변성 없다 그 이유는 원시데이터: 수정을 했을 때 메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장 원시데이터가 아닌 데이터: 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 바꿔버린다. 리액트에서 데이터의 불변성을 지켜주는 것이 중요한 이유 리액트에서는 화면을 리렌더링 할지 말지 결정할 때 state의 변화를 확인한다. state가 변했는지 변하지 않았는지 확인하는 방법이 state의 변화 전, 후의 메모리 주소를 비교 따라서, setState 할 때 불변성을 지켜주기 위해, 직접 수정을 가하지 않고 전개 .. 2023. 6. 14. 이전 1 다음
