본문 바로가기

분류 전체보기

(72)
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함수만 반복적으로 호출된다. 함수형 컴포넌트에서는 함수의 블럭안에 있는 코드 전부가 반복적으로 호출된다. (함수 내 ..
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의 설정에서 아래와 같이 체크박스 클릭.
React - Dom과 컴포넌트에 접근하는 방법(Refs) React에서는 Dom에 접근할때, document.querySelector 와 같은 api를 사용하지 않고 Ref를 이용한다!! Ref 사용방법 Ref를 생성해서, 생성된 ref에 원하는 돔 엘리먼트를 저장 저장 후 this.(ref이름) 으로 사용. 아래 코드 참고! -------------------------------------------------------------------------------------------- Class textForm extends Component { inputRef = React.createRef(); // Ref생성 focusTextInput = () => { this.inputRef.current.focus(); } render() { return ( /..