Front/React (14) 썸네일형 리스트형 [React Native] 초초초간단 왕초보 앱 만들기(1) - 설정부터 앱 실행까지 들어가기 전에 배경지식을 공부하지 않고, 일단 내 핸드폰에서 실행되는 어플을 보고 싶다면 일단 한번 따라해보자. 앱개발 설정 1. 노드와 npm을 설치한다. 노드(node.js) 홈페이지에서 LTS 버전을 OS에 맞게 설치한다. 다운로드 페이지 : https://nodejs.org/en 위의 페이지에서 노드를 설치하면 npm(node package manager)은 자동으로 같이 설치된다. 이미 설치되어 있다면 생략한다. 설치되었는지 확인하는 방법은 아래와 같다. (설치된 버전의 확인방법과 동일하다) // node.js 버전 확인 node -v // npm 버전 확인 npm -v 2. VS code를 실행한다. VS code가 없다면 먼저 설치하고, (다운로드 페이지 : https://code.visua.. [ESLint - Airbnb] ESlint와 Prettier 적용하기 (with VS Code) ESlint와 Prettier 적용하기 (with VS Code) 방법은 다른 블로그에 많이 나오니까 크게 순서에 대해서 짚어보기!!! 1. ESlint & Prettir 설치 터미널에서 yarn, npm 등으로 설치 아래 블로그 참고 참고. - https://velog.io/@mayinjanuary/Next.js-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-ESLint-Prettier-%EC%84%A4%EC%A0%95 - https://feynubrick.github.io/2019/05/20/eslint-prettier.html 2. ESlint & Prettier 설정 설정파일 작성. .eslintrc (또는 .eslintrc.js 또는 .eslintrc.json) 2-1. si.. React - 네트워크 통신 주의할 점! 1. api key는 코드에 작성하지 말것. (No git upload) (1) 환경설정파일(.env)을 생성해서 key를 관리한다. REACT_APP_YOUTUBE_API_KEY = ~~~~ REACT_APP을 항상 prefix로 붙여야 한다. create react app을 에서 만들어 놓은 규칙이다. (2) .gitignore 파일에 추가하여 트래킹을 막는다. 2. 컴포넌트에서 네트워크 통신을 하지말것. 비지니스로직은 별도로 .js파일을 만들어 관리한다. 리액트의 경우 class로 관리 --------------------------------------------- class Youtube { constructor(key){ this.key = key; this.option = { ~~~ } } .. React - Netlify에 배포하기 GitHub Page는 현재 리액트 라우터에서 제공하는 브라우저 히스토리가 지원되지 않는다. 그래서 Netlify를 이용해 배포해보자. ( Netlify, Now, Heroku 등.. 많이 사용 ) 참고 create-react-app.dev/docs/deployment#netlify 1. Netlify 설치 터미널에서 netlify 글로벌로 설치 >> npm install netlify-cli -g 2. 계정 생성(가입) >> netlify deploy deploy 명령어를 호출하면 아래와 같은 가입창이 뜬다. github 계정으로 생성 3. 승인팝업 승인 4. 팀이름, 사이트 생성 승인이 허락되면 터미널에 아래와 같은 질문이 나오고, 답하면된다. (파란글씨가 질문) ? What would you lik.. React - GitHub Page에 배포하기 1. github 로그인 후 repository 생성 Repository name 작성 Public으로 체크 2. local에 있는 폴더를 github에 연결 (원격 레파지토리 설정) 로컬 터미널에서 해당 디렉토리로 들어간다. >>git remote add origin https://github.com/유저네임/레파지토리명.git 3. local에 작성된 코드 commit & push >>git add * >>git commit -m "add habit tracker" >>git branch -M main >>git push -u origin main **main으로 적으면 브랜치명이 main으로 생성됨. 4. github page 설정 4-1. repository의 Settings로 들어가서 아래로 내.. React - React Hook (중요 포인트) 공식 홈페이지 ko.reactjs.org/docs/hooks-intro.html Hook 이란 React에서 제공하는 기능. (React 16.8 이후 추가됨) 함수형 컴포넌트에서 state와 lifeCycle method를 잘 사용할 수 있게 만들어진 것 this를 사용하지 않아 가독성 및 편리성이 좋고, 코드중복을 줄일 수 있다는 장점이 있다. 출처 ko.reactjs.org/docs/hooks-overview.html state와 props가 변경될 때 호출 차이 (클래스컴포넌트 vs 함수형 컴포넌트) 클래스 컴포넌트에서 멤버변수는 클래스가 만들어질 때 한번만 만들어지고, render함수만 반복적으로 호출된다. 함수형 컴포넌트에서는 함수의 블럭안에 있는 코드 전부가 반복적으로 호출된다. (함수 내 .. React - PureComponent & memo PureComponent가 Component와 다른점 shouldComponentUpdate()의 구현이 되어있다. 해당 컴포넌트의 props와 state가 바뀌어서 업데이트가 필요하다면 true를 리턴하고, 바뀌지 않았다면 false를 리턴해서 컴포넌트를 업데이트 하지 않는다. Shallow Comparison (얕은 비교) props와 state를 비교할때, 얕은 비교를 한다는 것은 reference를 비교한다는 것이다. 객체를 가지고 있다면 그 객체가 가지고 있는 어떤 데이터가 변경되더라도 객체가 변경되지 않았으니 같은 객체로 본다. 출처 ko.reactjs.org/docs/react-api.html#reactpurecomponent 얕은 비교를 위한 데이터 수정 방법 객체의 데이터 값만 수정하는 .. React - 디버깅 tip 렌더링되는 부분 표시 설정 컴포넌트가 렌더링 될때 업데이트되는 부분을 하이라이트로 표시해준다. 크롬 개발자도구에서 components를 클릭. (크롬 웹스토어에서 React Developer Tools 설치후) components의 설정에서 아래와 같이 체크박스 클릭. 이전 1 2 다음
