본문 바로가기

프론트엔드 로드맵

 (35)
프론트엔드 로드맵 33 - code Formatters : Prettier프리티어 Code Formatter 코드 포맷터는 에디터에서 보다 효율적이고 가독성 좋게 코드를 작성하기 위한 확장 extention 기능이다. 대표적인 formatter로 Eslint와 prettier가 있는데, 보통 두가지를 함께 사용한다. (기능이 비슷한 듯보이나 다르다) prettier는 들여쓰기를 맞춰주고, 세미콜론이나 콤마가 빠진 부분에 넣어줌. 그리고 '' 와 ""의 사용을 통일시켜준다. 여러명이서 협업을 해야하는데 코딩 스타일이 다를 경우 하나로 통일시켜주는데 도움이 된다. javascript(ecma2017 최신버전까지), JSX, angular, vue, typescript, css, HTML, JSON, GraphQL ,markdown, yaml 등을 지원하고 있다. Prettier는 작성자가..
프론트엔드 로드맵 32 - 모듈번들러 ParcelJS 앞서 설명한 Webpack과 Rollup 그리고 이번엔 Parcel이다. 프론트엔드 로드맵 31 - 모듈번들러 Rollupjs 웹팩과 마찬가지로 Rollup은 어플리케이션을 모듈화한 뒤 이 파일들을 번들하는(하나의 파일로 합쳐모으는) 모듈번들러다. 자바스크립트 파일들을 (main.js, sub.js 등) 각각 분리해서 을 넣으면 브라 bomango.tistory.com 프론트엔드 로드맵 30 - 모듈번들러 Web pack 자바스크립트 파일들을 (main.js, sub.js 등) 각각 분리해서 을 넣으면 브라우저에서 작동한다. 참고 사이트 : https://webpack.js.org/ https://ui.toast.com/fe-guide/ko_BUNDLER/ https://poie.. bomango.tis..
프론트엔드 로드맵 31 - 모듈번들러 Rollupjs 웹팩과 마찬가지로 Rollup은 어플리케이션을 모듈화한 뒤 이 파일들을 번들하는(하나의 파일로 합쳐모으는) 모듈번들러다. 프론트엔드 로드맵 30 - 모듈번들러 Web pack 자바스크립트 파일들을 (main.js, sub.js 등) 각각 분리해서 을 넣으면 브라우저에서 작동한다. 참고 사이트 : https://webpack.js.org/ https://ui.toast.com/fe-guide/ko_BUNDLER/ https://poie.. bomango.tistory.com (▲ 웹팩 설명 이전글 참고) 안정적이고 많은 이들이 선호하는 웹팩에 비하면 롤업은 아직 피래미 수준이지만, React를 비롯 Vue, Ember, Preact, D3등 많은 라이브러리에서 롤업을 사용하고 있다. 코드들을 쪼개거나 Co..
프론트엔드 로드맵 30 - 모듈번들러 Web pack 자바스크립트 파일들을 (main.js, sub.js 등) 각각 분리해서 을 넣으면 브라우저에서 작동한다. 참고 사이트 : https://webpack.js.org/ https://ui.toast.com/fe-guide/ko_BUNDLER/ https://poiemaweb.com/es6-babel-webpack-2
프론트엔드 로드맵 29 - npm script npm (Node Package Manager)은 Node.js 패키지들을 관리하는 도구다. 명령 프롬프트에 명령어를 입력해 설치 및 삭제 등 관리한다. 주로 쓰이는 명령어는 npm init, npm start, npm run, npm install 등이 있다. npm init : package.json 자동 작성 npm install -g (모듈명) : 패키지 설치 명령어 (-g : 글로벌 패키지) npm install --save (모듈명) : 해당 모듈을 설치함과 동시에 package.json dependencies에 자동으로 모듈 추가 npm update : 패키지 업데이트 npm dedupe : npm의 중복 패키지 정리. npm root : node_modules 위치 알려줌 npm outda..
2020년도 프론트엔드 로드맵 https://github.com/devJang/developer-roadmap/blob/master/pdf/frontend.pdf
프론트엔드 로드맵 28 - CSS 전처리기 SASS CSS 전처리기 (CSS Preprocessor)에는 Sass, Less 등이 있다. 전처리기는 말그대로 CSS가 실행되기 이전에 사용하는 기능을 말한다. 전처리기는 CSS 작성의 단점을 보완한 것이기 때문에 가독성이 높고 코드 재사용에 유리하다. 우선 전처리기로 작성한 뒤 CSS로 컴파일한다. 전처리기에서 작성한 것은 웹에서 작동하지 않기 때문에 css파일로의 컴파일이 필요하다. SASS는 {} braces와 ; 세미콜론을 사용하지 않는다. 네스팅이라고 하는데 .contents 자식 요소들은 그 아래로 붙여서 나열한다. .contents width: 100px height: 200px ul color: red li padding: 10px &:last-child padding-left: 20px 변수를..
프론트엔드 로드맵 27 - CSS 구조 방법론 BEM(Block Element Modifier) BEM(Block Element Modifier)은 CSS구조를 개선시키기 위한 방법론(convention)을 말한다. 클래스 이름을 짓는 것에 대한 방법을 제시하며 ID에는 사용이 불가하다(오로지 클래스명에만). BEM 방법론의 이점으로는 보다 쉽게 네이밍을 할 수 있다. 클래스명을 여러번 반복해 재사용하고 HTML과 CSS의 코딩 구조가 일관되도록 한다. 유지/보수가 쉽고 보다 유연한 코드를 만든다. BLOCK 블록 한 페이지 안에 구현되는 요소들을 영역으로 구분짓고 이에 따른 이름을 붙인다. 각 페이지마다 재사용할 수 있으면서 자체적으로 의미가 부여되어 있다. 블럭은 클래스명의 가장 처음 자리에 온다. ex) header, container, menu, input, button 등 ELEMENT 요..
프론트엔드 로드맵 26 - 패키지 매니저 yarn yarn은 npm과 동일한 자바스크립트의 패키지 매니저다. 기존에 사용하던 npm의 단점을 보안하기 위해 페이스북, 구글 등의 엔지니어들이 협력해 만든 것이다. 보다 빠르고 안정적이며 보안성이 뛰어나다고 주장하고 있다. yarn 설치하기. npm이 깔려있다면 npm을 통해 설치할 수 있다. npm install --global yarn 의존성 모듈 yarn add [package-name]@[version-or-tag] [option] 패키지 업그레이드 $ yarn upgrade [package]@[version] 패키지 제거 $ yarn remove [package] 이외에는 공식 사이트를 참조하면 되겠다. 참고 사이트 : https://www.vobour.com/yarn-%EC%B2%98%EC%9D%..
프론트엔드 로드맵 25 - 패키지 매니저 npm이란? 소프트웨어를 만들 때 다른 사람이 만든 모듈을 이용하는데, 이 때 사용하는 모듈이 많아지면 복잡한 문제가 발생한다. 패키지 매니저는 이러한 모듈들을 관리하는 도구다. 자바스크립트에서 필요한 패키지 관리자 툴에는 npm, yarn, brew가 대표적인 세 가지다. 이들 중 npm 개념을 이해하고 넘어가보자. npm (Node Packaged Manager)은 Node.js에서 주로 사용하는 패키지 관리자 툴이다. node.js를 설치하면서 npm을 같이 설치하면 된다. $ npm -v node.js 애플리케이션이 예상치 못한 오류로 종료되는 경우를 고려해 무중단 상태로 운영을 돕는 프로세스 매니저 PM2라는 것이 있다. PM2는 npm으로 설치가 가능하다. pm2를 설치한다. $ npm install pm..

티스토리툴바