본문 바로가기

Front

(30)
[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 = { ~~~ } } ..
PostCSS (CSS 전처리기) CSS 전처리기 간편한 문법과 언어(style sheet 언어)로 작성하면 순수CSS로 컴파일해주는 도구. 다른 브라우저 호환성을 위해 반복적으로 해주는 것들, 중복되는 코드 작성을 최소화하고, 좀더 코딩을 간편하게 하기 위해 사용하는 것. PostCSS, LESS, SASS, Stylus 등이 있음 PostCSS A tool for transforming CSS with JavaScript. create-react-app 을 사용할 경우, 자동으로 PostCSS가 적용됨. PostCSS 사용하기 컴포넌트 별로 css파일을 모듈화 하여 사용 순수css에서는 컴포넌트별로 다른 css파일을 사용해도 클래스 이름이 같다면 합쳐졌을 때 오버라이팅, 덮어씌워진다. 그래서 BEM*이라는 css 방법론을 사용해 클래..
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로 들어가서 아래로 내..
오브젝트의 가변성(참조형) & Spread Operator ([ ... ], { ... }) 오브젝트의 가변성 변수에 원시형 데이터(primitive type : number, String, boolean, null, undefined)를 할당하게 되면 데이터 자체가 변수에 할당되지만, 오브젝트를 변수에 할당하면 변수에는 오브젝트가 들어있는 메모리의 주소(참조값, reference)가 할당된다. a = 1 b = a b = 5 //결과 a=1, b=5 위의 코드에서 원시형 데이터는 number는 다른 변수에 할당한 후, 데이터를 변경해도 원본 데이터 a에 영향을 미치지 않는다. a = [ 1, 2, 3 ] b = a b.push(4) //결과 a=[1,2,3,4], b=[1,2,3,4] 위의 코드에서 배열오브젝트는 다른 변수에 할당한 후, 데이터를 변경하면 원본 데이터 a에 영향을 미친다는 것을..
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함수만 반복적으로 호출된다. 함수형 컴포넌트에서는 함수의 블럭안에 있는 코드 전부가 반복적으로 호출된다. (함수 내 ..