코드코코

1. 파일 - 기본설정 - 설정 2. 검색창에서 terminal > integrated > Default profile: windows 검색 3. 기본값이 null로 되어 있는 것을 Command Prompt로 바꿔준다!

1. 파일 - 기본설정 - 사용자코드 조각 2. 검색창에서 javascript 검색후 클릭하면 javascript.json 파일이 열린다. 3. javascript.json 파일 내용이 전부 주석 처리되어 있다. 이 중 print to console 부분에 해당하는 것 주석 해제. - prefix : 자동완성으로 나오게 하고싶은 단축어 지정 { // Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be e..

//라우터 관련 라이브러리 설치 yarn add react-router-dom //BrowserRouter 불러오기 import { BrowserRouter } from 'react-router-dom'; //index.js ReactDOM.render( //BrowserRouter컴포넌트로 묶어주기 , document.getElementById('root') ); Route: 특정 주소에 컴포넌트 연결하기 Link: 누르면 다른 주소로 이동시키기 - 리액트 라우터를 사용할 때 a태그 사용금지 - a 태그의 기본적인 속성은 페이지를 이동시키면서, 페이지를 아예 새로 불러오는 것이다. a 태그의 속성때문에 앱이 지니고있는 상태들도 초기화되고, 렌더링된 컴포넌트도 모두 사라지고 새로 렌더링을 하게된다. - ..

styled-components -CSS in JS 관련 리액트 라이브러리 중에서 인기 있는 라이브러리 -tagged template literal 사용하여 컴포넌트의 props를 읽어옴. -CSS in JS 에서도 비슷한 유틸 함수를 사용하고 싶다면 polished 라는 라이브러리를 사용 ThemeProvider -styled-components 로 만드는 모든 컴포넌트에서 조회하여 사용 할 수 있는 전역적인 값을 설정

CSS module -CSS 클래스가 중첩되는 것을 완벽히 방지 -CRA 로 만든 프로젝트에서 CSS Module 를 사용 할 때, CSS 파일의 확장자를 .module.css 로 한다. -styles.icon 이런 식으로 객체안에 있는 값을 조회 >>만약 클래스 이름에 - 가 들어가 있다면 다음과 같이 사용: styles['my-class'] >>여러개가 있다면 다음과 같이 작성: ${styles.one} ${styles.two} >>조건부 스타일링 : ${styles.one} ${condition ? styles.two : ''} - Sass 에서도 사용가능 : 확장자를 .module.scss 로

Sass - pre-pocessor이다. pre-processor는 CSS 문서의 양을 효율적으로 처리하고 관리해 주는 통합적인 역할을 수행해주는 것을 의미. //Sass 를 CSS로 변환해주는 역할 yarn add node-sass - 변수 선언가능 : $변수명 - 함수 사용가능 : 함수명() - 반복이 되는 코드는 재사용 가능 : @mixin기능 - ...rest props 사용 : 지정한 props 를 제외한 값들을 rest 라는 객체에 모아주고, 태그에 {...rest} 를 해주면, rest 안에 있는 객체안에 있는 값들을 모두 태그에 설정 해줌. import React from 'react'; import classNames from 'classnames'; import './Button.scs..

에러내용 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 상황 설명 yarn add node-sass 로 최신 버전을 설치 후, yarn start 해보니 아래 문구가 나와서 Node Sass version 6.0.0 is incompatible with ^4.0.0 || ^5.0.0. yarn remove node-sass 후 yarn add nide-sass@5 를 설치하고 yarn start를 한 상황 에서 해당 에러가 등장. 해결 yarn add react-scripts 설치 원인 react-scripts가 제대로 설치되어 있지 않아서 발생

import * as React from 'react'; (* as 를 하는 이유) -export default 없는 애들이나 module.exports로 된 애들은 * as로 해야 합니다. * as는 자바스크립트에도 존재하는 문법입니다. 모든 export들을 모아서 하나의 변수 안에 모아줍니다. -import * as React from 'react';하면 React.useEffect, React.useCallback 이렇게 접근 가능합니다. 출처 https://www.inflearn.com/questions/110639 import * as React from 'react' 질문있습니다. - 인프런 | 질문 & 답변 * as를 붙이는 이유가 단순히 리액트는 export default가 없어서 붙이는 ..