React16 [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. [TIL 2023.06.12] React Component / JSX / Props / State 💻오늘 배운 내용 본격적으로 주특기 주차에 들어섰다. 드디어! 자바스크립트도 아직 능숙하게 다루지 못하는데 걱정이 되긴 하지만 그래도 기대된다. Component JavaScript 함수와 유사하다. 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 리액트 컴포넌트는 함수형과 클래스형 두가지가 있지만 공식에서는 함수형 컴포넌트를 사용하기를 권장하고 있다. 부모-자식 컴포넌트 컴포넌트는 다른 컴포넌트를 품을 수 있습니다. 이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 한다. JSX JavaScript를 확장한 문법 : HTML을 품은 JS JavaScript의 모든 기능.. 2023. 6. 12. 이전 1 2 다음
