개발환경
[git/git-hub] 개발한 결과물을 관리해보자(Git)
Github을 지속적으로 썻지만, git을 CLI로 쓴적은 없습니다. 항상 github 홈페이지에 들어가서 페이지가 완성이 되면, 업로드하는 방식으로 개발을 자주 했다. 혹은 UI tool(Github Desktop)을 이용해서 그냥 commit을 하는 형태로 했다. 나의 스킬을 늘리기 위해서, Cli 환경으로 git을 이용해보는 연습을 해보려고 한다. Git hub에 흔적을 남기면서, 이제 프로젝트를 위한 준비단계라고 생각하면 좋을 듯합니다. Git Git은 분산버전관리 시스템입니다. 여러 대의 컴퓨터(여러 명의 프로그래머)에서 하나의 프로젝트에 대해서 "협업"을 위해 유용하게 사용할 수 있는 tool입니다. 그림으로 이해를 해보자면, 아래와 같습니다. 컴퓨터 A,B,C가 모두 같은 작업물에 접근하여,..
[ESLint/Prettier] 프로젝트에 EsLint와 Prettier 적용하기
EsLint 코드를 정적분석해서 JS를 실행시키지 않더라도, 안티패턴들(호이스팅 , Closer 등등)을 미리 감지하여 문법적인 "오류"를 수정하는 Linter입니다. 추가적으로 Formatting 기능을 제공합니다. Prettier 프리티어는 코드 컨벤션을 위한 Formatter입니다. 사람들의 코딩하는 스타일이 다 다르기 때문에, 코드의 가독성과 코드간의 통일성을 위해서 적용합니다. * 코드 컨벤션이란 프로그래머들이 코드를 작성할 때, "~~게 작성하자"라고 약속하는겁니다. ESLint & Prettier 설치하기 // ESLint npm i -D eslint // Prettier npm install --save-dev --save-exact prettier Prettier은 Formatter이기 ..
[FE/Webpack/config] Webpack 설정하기
Webpack이 왜 필요한지 알게되었다. Webpack은 수많은 JS,CSS를 Bundling해서 최적화와 변수가 겹치는 문제를 해결해준 친구였다. 그럼 이제, Webpack을 한번 설치해보고, 다뤄보도록하자. Node.js 설치하기 https://nodejs.org/ko/ Google에 Node.js를 검색하고, LTS를 다운로드 받아도되고, 최신버전을 다운로드 받아도된다. 자신의 운영체제에 맞게 Node를 다운로드 받아주자. Webpack은 Node Module로 등록되어 사용되어지기 때문에, Node(구동환경)이 필요하게 된다. Webpack 설치하기 VsCode를 기준으로 설명하겠습니다. 우선, Terminal을 열어주고, 아래의 명령어를 입력해줍니다. npm init -y package.json..
[FE/Web/Module] Webpack이란 무엇일까?
Webpack(웹 팩), FE 공부를 하다보면 한 번은 꼭 듣는 단어이다. 하지만, 웹 팩을 다루어 보거나 실제로 Webpack을 사용해본적은 없고, 필요성을 느끼지도 못했다. 왜그런지 생각을 해보았다. 정확한 개념을 모른다. Webpack을 쓰면 편하다라고 하지만, 왜 편한지 ,왜 써야하는지 모른다. Webpack이 없더라도 충분히 훌륭한 WebApplication을 만들 수 있다. React에서는 친절하게도 Webpack을 create-react-app을하면 자동으로 설정(app.js,index.html...)해준다. Webpack은 한번은 짚고가야하는 과정이기 때문에, 위의 이유들을 하나씩 스스로에게 납득시키며 Webpack에 대해서 스스로 공부를 한번 해보려고 한다. WebPack Bundle y..