개발일기

React routet 설치법 npm install react-router-dom yarn add react-router-dom HashRouter 주소에 해쉬태그가 붙는다(#) -> index.html에서 index.html# 처럼 뒤에 붙는다. BrowserRouter와는 다르게 새로고침하여도 에러가 발생하지 않는다. 검색 엔진이 찾지를 못한다. 주로 정적인 페이지에서 사용된다. // HashRouter로 감싸주어 사용한다. BrowserRouter 태그를 통해 to 속성에 이동할 경로를 추가하여 이동시킨다 새로고침하면 경로를 찾지 못해 에러가 발생한다. HTML5 History API를 사용한다. 주로 동적인 페이지에서 사용된다. 메인 페이지 // BrowserRouter 감싸주어 사용한다. 두 라..

1. package.json 생성 npm init -y yarn init -y 2. 리액트관련 라이브러리 추가 npm install -D react react-dom yarn add -D react react-dom 3. 웹팩관련 라이브러리 추가 npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin 4. 바벨관련 라이브러리 추가 npm install -D @babel/cli @babel/core @babel/preset-env @babel/preset-react yarn add -D @babel/cli..

{ "compilerOptions": { "target": "es5", "module": "commonjs", "sourceMap": true, "outDir": "dist", "downlevelIteration": true, "strict": true, "noImplicitAny": false, "moduleResolution": "node", "baseUrl": ".", "paths": { "*": ["node_modules/*"] }, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true } } // tsconfig.json tsconfig.json에서 jsx라는 항목을 빼먹었기 때문에 발생하는 ..

컴포넌트란? 컴포넌트란, 기능별로 부분부분 잘게 나눠놓은 조각을 뜻한다. 리액트는 컴포넌트 기반의 라이브러리다. 하나의 프로젝트를 구성할 때, 여러개의 컴포넌트들로 화면을 구성한다. 로그인화면을 구성할 때, 아이디 입력칸, 비밀번호 입력칸, 로그인 버튼, 회원가입 버튼 등의 요소가 필요하다. 이러한 각각의 요소가 컴포넌트로써, 여러개의 컴포넌트를 결합하여 하나의 화면을 구성한다. 구성방법 아이디, 비밀번호 입력칸 const AuthBlock = () => ( return ( ); ); export default AuthBlock; 로그인버튼 const AuthButton = () => { return ( ); }; export default AuthButton; 아이디, 비밀번호 입력 컴포넌트와 로그인버..

0. JSX란? JSX란 JavaScript eXtension의 줄임말로써 HTML태그 (div, h1, h2 등)들을 자바스크립트 소스코드 안에 사용하는 것을 뜻한다. JSX로 작성된 코드들은 빌드될 때, Babel이 자바스크립트 코드로 변환시켜준다. 1. 장점 XML형식과 문법이 유사하여 중첩된 태그들의 구조를 파악하기 쉽다. createElement등의 태그들을 만드는 문법을 사용하지 않고 직접 태그들을 선언하기에 코드의 양이 감소한다 2. 특징 및 유의점 리액트와 궁합이 잘맞기에 함께 사용하는 것이 권장된다. 변수 선언 또는 출력시, {}로 변수를 감싸줘야한다. class와 for속성 대신, className, htmlFor라는 속성으로 이름이 바뀐다. 처럼 태그가 닫혀있지 않는 경우에는 오류가 ..