새로움으로 가득한,

꾸준한 사람이 되자😎

Blog/Git

GitHub Pages란? GitHub Pages는 GitHub가 제공하는 기능중에 하나로, 무료로 정적인 파일들로 웹 페이지를 만들 수 있도록 해준다. React 프로젝트 GitHub Pages에 배포하는 방법 1. 프로젝트에 gh-pages 패키지를 설치 npm install gh-pages --save-dev 2. package.json 파일열어서 homepage 내용 삽입 "homepage": "https://{사용지명}.github.io/{저장소 이름}" 3. script 부분에 predeploy와 deploy 추가 "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" } 4. 저장 및 변경된 파일 git push 5...

2022. 2. 23.

Blog/React.js

🛠 React Developer Tools 란? 크롬의 확장 프로그램으로 리액트 개발자들에게 유용한 도구를 제공한다. 💦 설치방법 크롬 웹스토어 - React Developer Tools 검색 - 설치 💦 셋팅방법 크롬 브라우저 상단 옵션 > 도구더보기 > 확장프로그램 > React Developer Tools 활성화 > 세부정보 > 사이트 액세스[모든 사이트에서]로 설정 > 파일 URL에 대한 액세스 허용 활성화(시크릿모드에서도 사용할 경우 시크릿모드 부분도 활성화 처리) > 브라우저 종료 및 재시작 > npm start시 크롬 확장에 아래 아이콘처럼 확인되면 완료! 💦 사용방법 - Components 리액트 개발시 크롬 개발자 도구의 더보기 부분에서 추가된 Components클릭하면, 만들어 둔 컴포..

2022. 2. 23.

Blog/React.js

목표 - useEffect를 이용해 컴포넌트 Mount 시점에 API 호출 - 호출된 API 결과값을 일기테이터의 초기값으로 이용 사용 API https://jsonplaceholder.typicode.com/comments JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com 1. API 호출 함수 생성 2. 마운트 후 바로 실행할 수 있도록 ..

2022. 2. 22.

Blog/React.js

🤷‍♀️ 컴포넌트의 생애주기(Lifecycle) Lifecycle은 컴포넌트의 탄생부터 죽음까지의 단계를 말하며, 여러지점에서 개발자가 작업을 수행 할 수 있도록 매서드를 오버라이딩 할 수 있게 해준다. Lifecycle은 클래스형 컴포넌트에서만 사용이 가능하다. 그렇다면 화살표 함수로 만든 함수형 컴포넌트에서는 못쓰는 걸까? 리액트의 기능인 React Hooks를 활용하면 함수형에서도 충분히 사용 가능하다. 🤷‍♀️ React Hooks 이란? 2019년06월 정식 출시된 기능으로, Class형 컴포넌트의 길어지는 코드길이 문제를 보완하고 중복코드, 가독성 문제 등등을 해결하기 위해 등장했다. 👉 리액트의 함수형 컴포넌트에서 라이프사이클을 제어 하기 위해서는 useEffect라는 React Hooks를..

2022. 2. 22.