JSX 란? - JSX(JavaScript XML)는 js 에 xml을 추가한 확장 문법이다. - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. - 브라우저에서 실행하기 전에 바벨을 사용하여 일반 js형태의 코드로 변환된다. // 실제 작성할 JSX 예시 function App() { return ( Hello, GodDaeHee! ); } // 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다. function App() { return React.createElement("h1", null, "Hello, GodDaeHee!"); } - JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다. JSX 문법 1. 반드시 부모..

패키지 설치 npm i @emotion/react Emotion은 반드시 React 프로젝트에서만 사용해야 하는 것은 아니다. 일반 js프로젝트에서는 @emotion/css패키지를 설치하면 된다. 기본 문법 Styled Components의 꽃이 styled()함수였다면, Emotion의 꽃은 css()함수이다. 오랜 기간 동안 두 라이브러리가 서로 경쟁하면서 현재는 Styled Components도 css()함수를 사용할 수 있고, Emotion도 뒤질세라 styled()함수를 제공하고 있다. 함수는 css 선언 내용을 인자로 받는데 객체형으로 넘겨도 되고, 문자형으로 넘겨도 된다. 그리고 css() 함수의 반환 결과를 해당 스타일을 적용하고 싶은 HTML 요소나 React 컴포넌트의 css라는 pro..

React 컴포넌트 css 스타일링 기본 기본이라기 보다는, react컴포넌트를 별도의 css-in-js라이브러리 없이 순수하게 css로만 스타일하는 가장 기본적인 방법을 알아보겠다. Inline Style 가장 간단하고 쉬운 방법은 React 컴포넌트에 css인라인 스타일을 바로 적용하는 것이다. 일반적인 웹 페이지에서 인라인 스타일을 적용할 떄처럼 html엘리먼트의 style속성을 이용하면 된다. 하지만, React는 자바스크립트로 작성하기 때문에 웹페이지에서 인라인 스타일을 적용할 때와 약간의 차이점이 있다. -style 속성값에 일반 문자열이 아닌 자바스크립트 객체가 할당되야 한다. - CSS 속성명이 케밥 케이스(kebab case)이 아닌 카멜 케이스(camel case)로 작성되야 한다. 이..

코드 스플리팅 (code splitting) ? 페이지가 로드 될 때, 불필요한 컴포넌트는 불러오지 않고 필요한 컴포넌트들만 불러오도록 하는 기법. 리액트에서도 적용이 되지만, 웹팩(webpack)을 이용한 다른 어플리케이션에서도 모두 사용 가능하다. 웹팩도 간단 설명하자면, 어플리케이션의 모든 파일들을 묶고 압축하여 하나의 결과물로 만들어주는 웹개발 도구이다. 자바스크립트로 개발하고 배포하는 과정에서 빌드(build)과정을 거치게 되는데, 이 과정에서 모든 파일들이 하나로 합쳐지게 된다. 우리가 index.js, components들로 나눴던 소스 코드들이 하나로 합쳐지게 된다. 간단한 프로젝트라면 영향이 적겠지만, 거대한 프로젝트라면(특히 spa페이지에서) 길고 많은 js코드가 탄생한다. 이 경우 인..

폴더 구조 이것이 필수는 아님. 본인 취향껏 다양한 폴더구조 시도를 해보는 것이 좋음. - 페이지는 페이지이다. - 페이지간 검색되는 구성은 layouts - 커스텀 훅은 hooks, 기타는utils - 각 컴포넌트는 컴포넌트 폴더 아래 index.tsx(JSX)와 styles.tsx(스타일링) App.tsx> import React from 'react'; import {Switch, Route, Redirect} from 'react-router-dom'; import LogIn from '@pages/Login'; import SignUp from '@pages/SignUp'; const App = () => { return }; export default App; Switch 란? 여러가지 선택지..

webpack-dev-server란? webpack-dev-server는 매 코드 변경마다 빌드된 결과물을 확인할 수 있는 개발용 서버를 제공해준다. 실제 빌드는 시간이 오래 걸리기 때문에 webpack-dev-server는 실제 번들링 된 결과물을 파일로 생성하지 않고 메모리에 올려놓은 채 보여준다. 그래서 빠른 속도로 즉시 변경된 코드를 개발 서버에 반영하여 보여줄 수 있다. webpack-dev-serve 설치하기 npm i webpack-dev-server -D 여기서 -D 는 개발용 이라는 뜻이다. npm i webpack-cli 이것도 함께 설치! : hot reloading을 사용하기 위해 webpack-dev-server를 사용한다. : proxy 서버 요청도 webpack-dev-serv..