본문 바로가기

JavaScript26

Prettier, ESLint 자동화하기 Prettier, ESLint로 협업 강화하기 글에 이어서 자동화를 시켜보자. 저번 글에서 설명한 것처럼 사용하지 않는 변수와 같은 '코드 품질' 검사는 ESLint에게 맡기고 '일관된 코드 스타일', '가독성'은 Prettier가 담당을 했다. 둘의 장점을 합쳐 통합까지 완료를 하고보니 매번 개발자가 명령어를 실행하기엔 비효율적이다. 이 효과를 제대로 보려면 자동화가 필요하다. 자동화를 하는 방법은 두 가지로 나뉜다. 깃 훅(Git Hooks)을 사용하는 방법 VS Code extension을 사용하는 방법 Git Hooks 깃(git)은 어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 할 수 있다. 다시 말해 깃 훅은 명령어 실행 전후에 특정 스크립트를 실행하게 만들 수가 있다. 이걸 좀.. 2021. 12. 27.
Prettier, ESLint로 협업 강화하기 협업을 위한 도구 협업에 있어 개발 외적으로는 적극적인 소통과 정보 공유, 사내 지식 문서화 등의 문화가 있다. 그렇다면 개발 내적으로는 어떤 것들이 있을까? 개발자마다 프로젝트 폴더의 구조, 코딩 스타일이 조금씩 다를 것이다. 이것은 협업 시 한 프로젝트에서 각기 다른 스타일의 코딩을 한다는 것을 의미한다. 이렇게 할 경우 추후 유지보수를 하기에 까다롭고 다른 팀원이 투입되거나 인수인계 시 서로 다른 코드 스타일에 당황하거나 어려움을 겪을 수 있다. 따라서 코드의 문법, 안티 패턴 검사와 함께 일관된 코드 스타일을 제공(formatting)하고 규칙을 정해주는 도구를 사용하는게 좋다. Prettier와 ESLint가 이에 해당한다. Prettier 프리티어(prettier)는 코드 포매터이다. pret.. 2021. 12. 24.
웹팩(Webpack) 이해하기 - 개발 서버 저번 글에 이어서 웹팩 개발 서버에 대해 알아보자. 웹팩 개발 서버 외에도 VS code의 Extension인 Live Server나 Node.js로도 로컬 서버를 구현할 수 있다. 이런 여러 선택지 중에서 웹팩 개발 서버를 통해 얻을 수 있는 이점은 무엇일까 생각을 해봤다. 운영 환경과 비슷하게 만들기 개발 환경에서도 운영 환경과 비슷한 환경을 만들어 주는 것이 좋다. 운영 환경과 맞춤으로써 배포 시에 잠재적 문제를 미리 확인하고, 예방할 수있다. 이런 노력은 타입스크립트를 사용하는 것과 비슷한 맥락이다. 협업에서의 이점도 있지만 타입을 지정하여 운영 환경의 문제들을 예방할 수 있다. 학습 비용 감소 처음엔 Node.js를 통해 서버를 구현하고 목업 API 작업을 했었다. Node.js를 공부하니 Ex.. 2021. 11. 22.
웹팩(Webpack) 이해하기 처음 리액트를 배울 때 이런 생각이 들었다. "이렇게까지 어려운 문법을 배우면서 굳이 써야하나? 내 개인 프로젝트에 쓰일 정도로 편하긴 한가?" 반은 억지로 하다보니 따라치기 수준의 학습밖에 하지 못했다. 그러다 Vanilla JS로 SPA 만들기같은 과제를 두 번이나 하게 되면서 리액트를 쓰는 이유를 알게 되었다. 아니, 좋아하게 되었다. 리액트에선 많은 것들이 추상화 되어 있었고 굉장히 편리한 도구였다. 이제는 "고작 이 문법으로 이렇게나 많은 것들을 할 수 있다니"로 생각이 바뀌게 되었다. 그렇다면 CRA에서 기본으로 깔려있는 이 웹팩도 알아볼 필요가 있다. 분명 이유가 있을 것이다. 내 평일은 물론이고 주말까지 시간을 순삭하게 만든 웹팩을 한번 살펴보자. ✏️ 웹팩을 배우면서 제가 개인적으로 느꼈.. 2021. 11. 16.
new 연산자로 재사용성 높이기 new 연산자와 생성자 함수 new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다. - MDN MDN에서 설명하는 new 연산자다. 여기서 설명하는 '사용자 정의 객체'와 '객체 타입의 인스턴스 생성'에 대해 알아보자. 객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있다. 하지만 유사한 객체를 여러 개 만들 경우엔 new 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다. 예를 들어 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현할 경우에 유용하다. 생성자 함수 생성자 함수는 다음과 같은 관계를 따른다. 함수 이름의 첫 글자는 대문자로 시작한다 반드시 new 연산자를 붙여 실행한다. 예시 function User(name) { // th.. 2021. 11. 1.
Node.js에서 스크래핑을 해보자 웹 스크래핑(크롤링) 하기 원본 URL의 콘텐츠를 스크래핑(크롤링)해서 상세 페이지를 구현할 일이 생겼다. 구글링과 여러 삽질 끝에 결국 성공했다. 직접 코드를 작성 해보면서 테스트 하는 것도 빠르고 좋은 방법인 것 같다. 시작 하기전 원본 URL의 HTML을 가져올 때 사용하는 라이브러리와 그 결과로 원하는 콘텐츠를 뽑아서 사용할 라이브러리 설치가 필요하다. 나같은 경우 브라우저와 Node.js 환경에서 둘 다 사용이 가능한 axios와 비교적 예제도 많고 문법이 익숙한 cheerio를 선택했다. axios 외엔 request cheerio 외엔 puppeteer, playwright 등이 있다. 설치하기 npm i cheerio axios 가져올 콘텐츠 정하기 예시로 CSR과 SSR 이해하기 글의 콘.. 2021. 10. 29.
ZUM 기술 블로그 Fade in, Fade out 구현하기 IntersectionObserver API로 Fade in, Fade out 구현하기 ZUM 기술 블로그를 구경하다 디자인이 깔끔하고 이뻐서 클론해봤다. 정확히는 사이트의 Fade in, Fade out의 동작 방식이 궁금해서 직접 구현해봤다. 근데 이제 UI/UX를 곁들인.. 기능 구현 외에도 깔끔한 UI/UX 덕분에 가독성도 좋았다. 뭔가 집중이 된달까..그래서 전체적인 분위기나 모바일 대응도 구현했다. 동작 방식 알아보기 해당 블로그는 첫화면에 노출되는 포스트는 shown 클래스를 생성해서 바로 보여주게 된다. ➡️ 동적으로 클래스를 만듦 그 후 포스트들은 스크롤 다운 시 animate 클래스를 생성해서 보여주게 된다. ➡️ moveUp 애니메이션 작동, 포스트가 올라옴 ➡️ 각각 다른 anima.. 2021. 10. 10.
IntersectionObserver API로 무한 스크롤 만들기 무한 스크롤(Infinite scroll) IntersectionObserver API로 TOC 만들기 글에 이어서 이번엔 무한 스크롤을 만들어 봤다. 이젠 구현만이 목적이 아닌 코드 스타일이나 프로그래밍 방식에 대해서도 신경을 쓰고 있다. '그래도 성장은 하고 있구나 🌱'라고 생각한다. 개발 전용차선 강의 사이트 다음과 같은 상황이라고 생각하고 구현을 했다. 내가 훗날 남을 가르칠 정도의 실력이 된다 느껴져서 나만의 개발 강의 사이트를 만들려고 한다. 편하게 강의 목록을 볼 수 있도록 무한 스크롤을 구현한다. 서버에서 받아온 응답 결과를 노출 시키기(강의 리스트 렌더링) 로딩하는 동안 로딩 중인 것을 표시하기 스크롤 바닥을 위치하면 새로운 강의 노출 더미 데이터 만들기 나는 일단 서버를 구현할 실력이 .. 2021. 10. 8.
함수형 자바스크립트 기본기 정리 함수형 자바스크립트에서의 기본기 평가란? 코드가 계산(Evaluation) 되어 값을 만드는 것 // 🌱 평가(Evaluation)하기 const log = console.log; log(1); // 1로 평가 log(1 + 2); // 3으로 평가 log(3 + 4); // 7로 평가 log([1, 2]); // 배열 [1, 2]로 평가 log([1, 2 + 3]); // 배열 [1, 5]로 평가 log([1, 2, [3, 4]]); // 배열 [1, 2, [3, 4]]로 평가 log([1, 2, ...[3, 4]]); // 배열 [1, 2, 3, 4]로 평가 일급이란? 값으로 다룰 수 있다. 변수에 담을 수 있다. 함수의 인자로 사용될 수 있다. 함수의 결과로 사용될 수 있다. // 🌱 일급이란? /.. 2021. 10. 3.
반응형