본문 바로가기

내마음대로만들어보자326

[복습]React 주요 개념 정리 - styled-components styled-component를 복습해보기전에 SASS, SCSS에 대해 간단히 알아보고 넘어가자. SCSS는 SASS의 3번째 버전에 추가된 친구인데, SASS의 모든 기능을 사용할 수 있고 CSS호환도 잘된다고한다! 이친구 사용을 위해 본격적으로 패키지를 설치해주자! yarn add node-sass@4.14.1 open-color sass-loader classnames 다행히 강의에서 필요한 패키지를 모두 가져다 주셔서 수월하게 진행할 수 있었다! 나 혼자만의 프로젝트를 진행하게된다면 필요한게 뭔지 파악하는것도 중요해 보인다. * 공식문서 & 테스트사이트 https://sass-lang.com/documentation Sass: Documentation Sass is a stylesheet lan.. 2021. 9. 22.
[복습]React 주요 개념 정리 - Component, state, props 1. Component란? 컴포넌트는 블록이라고 이해하면 쉽다. 웹사이트를 하나를 만들더라도 조각내서 보면 여러 블록들로 이루어져 있으며, 일반적인 웹사이트의 경우에는 header , container , footer 등등으로 이루어져있고 또 그안에 content , bannerimage 등등으로 또 이루어져있다. 2. state , props state는 Component가 가지고 있는 데이터다. state는 한 컴포넌트에서만 사용되는 데이터로써 주로 넣어놓고 생성, 수정하는 데이터라고 보면된다 (생성 , 수정도 한 컴포넌트에서만 이루어지기때문에 자유롭게 생성,수정이 가능하다.) props는 Component가 부모 Component로 부터 받아온 데이터다. 예를들어, 위와같은 구조로 되어있다고 하면 .. 2021. 9. 22.
[복습]React 주요 개념 정리 - JSX JSX문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜줌으로써 화면을 그려주기때문에 중요하게 알고 넘어 갈 필요가 있다! 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰 작업을 편하게 할 수 있게 하기위해 나온것이다. 1. JSX 규칙 - 태그는 꼭 닫아주어야 한다. - return 아래에 무조건 1개의 엘리먼트를 반환하기 - JSX에서 자바스크립트 값을 가져오려면 중괄호를 사용한다. (값 뿐만아니라 map , 삼항연산자 등 자바스크립트 문법을 JSX안에 쓸때에도 중괄호를 사용한다.) - class 대신 className 으로 사용한다. - style은 인라인으로 주기 orange → 중괄호를 두번주는 이유는 딕셔너리도 자바스크립트이기때문에 중괄호안에 사용해야하므로 두번 작성하도록 되.. 2021. 9. 20.
[복습]React 주요 개념 정리 - React프로젝트 만들기 - 첫 React 프로젝트를 만들기위한 폴더부터 생성해주자. macintosh HD 아래 사용자 폴더안에 만들어주자 필수 패키지에 대해서 설치해두었던 NVM에 대해서 간단히 알아두면, Node.js의 버전 관리자인데 수많은 버전을 마음대로 골라서 설치할 수 있도록 도와준다! 이걸 직접 관리하기란 쉽지 않기때문이다. - OS 내 터미널에서 NVM을 설치해줬기때문에 VS CODE에서 정상적으로 설치가 되어있는지 버전을 확인해보면된다. nvm --version - 이제 nvm 으로 노드를 설치하자. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 공식문서.. 2021. 9. 19.

티스토리툴바