안녕하세요~ totally 개발자입니다. Spread Operator 오늘은 배열을 다룰 때 정말 많이 활용되는 스프레드 연산자(Spread Operator)에 대해 살펴봅니다. 스프레드 연산자는 ...으로 사용되며 신속하게 배열 또는 객체의 일부 또는 전체를 다른 배열 혹은 객체로 복사할 때 사용됩니다. 가장 기본적인 예시를 통해 어떻게 사용되는지 확인해보도록 하겠습니다. 1) 기존 배열을 복사하여 새로운 배열을 만들 때 사용 const array1 = ["a", "b", "c"]; const array2 = ["d", "e", "f"]; const array3 = [...array1, ...array2]; console.log(array3); array1과 array2를 a,b,c와 d,e,f로 선언..

안녕하세요~ totally 개발자입니다. Eslint 오늘은 Eslint에 대해 살펴보도록 하겠습니다. Eslint는 프로그래밍 코드를 작성할 때 문법에 문제가 있거나 오류를 찾아주는 도구이며 다른 개발자들과 같이 협업할 때 가독성 및 일관성 있는 코드를 작성할 수 있다는 점에서 매우 중요합니다. 설치 방법과 사용하는 아주 간단한 방법을 아래에 소개합니다. Step 1: 터미널에 yarn add -D eslint를 입력해줍니다. Step 2: 터미널에 yarn add -D eslint-plugin-react eslint-plugin-react-hooks를 입력해줍니다. Step 3: 터미널에 yarn add -D @typescript-eslint/parser @typescript-eslint/eslint..

안녕하세요~ totally 개발자입니다. Hot Module Replacement (저장 시 바로 반영) 개발하다보면 Ctrl + S했을 때 바로 수정사항을 반영해서 자주 봐야하는데 새로고침을 하게 되면 모든 요소의 상태가 리셋되기 때문에 좋지 않습니다. 그래서 Ctrl + S로 저장했을 떄 수정된 부분만 체크해서 반영될 수 있도록 설정을 해주어야 합니다. Step 1: 터미널에 yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh를 입력해줍니다. 만약에 permission denied 이슈가 있는 경우에는 node_modules 폴더와 package-lock.json 모두 root으로 되어 있기 때문에 사용자 이름으로 변경해주시면 됩니다. 커맨..

안녕하세요~ totally 개발자입니다. Development, Production Mode Configuration Webpack에서 Development(개발 용도) 모드와 Production(실제 서비스되는 배포용) 모드를 설정해줄 수 있는데 그 부분에 대해서 살펴보도록 하겠습니다. Step 1: 기존에 만들었던 webpack.config.js의 파일명을 webpack.common.js로 바꿔주고 새로 3개의 파일을 생성하여 각각 이름을 webpack.config.js, webpack.dev.js, webpack.prod.js로 명명해줍니다. Step 2: webpack.config.js에는 다음 내용이 들어가 있어야 합니다. const { merge } = require('webpack-merge..

안녕하세요~ totally 개발자입니다. 이미지 삽입 설정 이미지 삽입할 수 있게 설정하는 방법에 대해 바로 알아보도록 하겠습니다. Step 1: 이미지를 하나 준비해줍니다. 저는 pixabay에서 하나 가지고 왔습니다. 그리고 images 폴더를 만드시고 그 안에 넣어주도록 하겠습니다. Step 2: delcaration.d.ts 파일을 src 폴더 내에 하나 생성해주시고 다음처럼 입력해줍니다. Step 3: webpack.config.js 파일을 열어서 빨간색 박스에 내용을 추가해줍니다. Step 4: 2번째 줄처럼 이미지를 import 해주시고 8번째에 src={image}로 작성하시면 바로 이미지를 불러오실 수 있습니다. Step 5: yarn start로 테스트해봅니다.

안녕하세요~ totally 개발자입니다. style-loader, css-loader 이 2개를 설정해서 CSS 파일을 사용해보도록 하겠습니다. Step 1: 터미널에 다음을 입력해줍니다. Step 2: webpack.config.js 파일을 열어서 다음 내용을 추가해줍니다. Step 3: src 폴더 내에 styles.css 파일을 생성하고 다음처럼 넣어줍니다. Step 4: import './styles.css'; 해주면 됩니다. Step 5: yarn start로 테스트해서 되는 지 확인합니다.