프로젝트 환경 구성 (eslint + prettier, babel) 🐀 ESLint는 Linter이고, Prettier는 Formatter이다 Linter는 js 소스코드에 직접적인 에러와 에러가 날만한 잠재적인 부분에 flag를 달아주는 코드 문법 보조 도구이다. 이러한, 🏴 ESLint는 직/간접적인 에러를 체킹해줄 뿐만 아니라, 코...

빌드 자동화 도구 🐀 빌드 자동화 도구, Gradle 빌드란 실행파일을 만드는 과정을 말한다. 작업한 파일들(소스코드, 라이브러리, 이미지)을 출시하기 적합한 형태로 포장하는 일을 말한다. 압축 변환 결국 빌드란 ✨ 소스코드 파일을 컴파일한 후 여러 개의 모듈을 묶어 실행파일로 만드는 과정이다. 빌드되어 나온 결과물을 🗿 artifact...

Vue2와 Vue3의 차이점 🐀 Vue2와 Vue3의 차이점 Composition API Composition API는 Vue2에서는 플러그인 형태로 사용가능했지만, Vue3부터 라이브러리 공식 API로 채택되었다. root element Vue2에서는 root element가 하나여야 되는 한계점이 있지...

타입스크립트를 점진적으로 적용해 나가기 ⚔️ 타입스크립트를 점진적으로 적용해 나가기 (1) 타입스크립트 환경 구성 (2) 명시적인 any 선언 (3) 구체적인 타입 정의 (4) 외부 라이브러리 모듈화 (5) 'strict' 옵션 추가 후 타입 정의 타입스크립트 환경 구성 🥯 타입스크립트 환경 구성 typescript 라...

제네릭(Generic)과 타입추론 🐁 제네릭은 재사용성이 높은 컴포넌트를 만들 때, 자주 활용되는 특징이다. 🗣️: “호출하는 시점에 타입을 넘겨, 그 타입으로 쓰겠다.” 즉, 타입을 마치 파라미터 개념으로 받게 되는 것이 제네릭이다. 제네릭이 없다면 인자의 타입마다 메서드를 따로 선언해야 하는데, 이는 유지보수 관점에서 좋지 않다. ...

타입스크립트를 사용하는 이유 🐁 타입스크립트는 자바스크립트에 타입을 부여한 언어이다 데이터에 타입이 정의되어 있을 때, 다음과 같은 효과를 볼 수 있다. 🎯 에러를 사전에 방지 🎯 코드 가이드 및 자동완성 해당 타입이 제공하는 api를 preview로 노출해준다. js와는 다르...

NodeJS와 npm (node package manager) 🐀 npm은 모든 자바스크립트 라이브러리가 있는 공개저장소이다 🍍 라이브러리: 개발자가 편하게 가져다 쓸 수 있는 미리 만들어 놓은 기능의 집합 npm 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있다. npm을 사용하면, 🧆 package.json에 설치한 라이브...

Issue: vuex state 초기화 🐂 Issue: 새로고침 후에 Vuex 상태 유지 x 🧾 로그인 후, 관련 데이터를 vuex의 state에 저장하려는 상황 로그인 후에 얻은 🪙 accessToken을 vuex store state에 저장하고 페이지 접근 권한을 따질 때 사용하려 했지만, 새로고침이나 페이지 이동 시, 🐖 state...

Apache / Tomcat 🐀 아파치는 아파치 소프트웨어 재단에서 관리하는 http 웹서버를 말한다 HTTP 웹서버는 정적인 데이터를 처리하는 서버를 말한다. 🐈 톰캣은 아파치 소프트웨어 재단의 자바 기반의 웹 애플리케이션 서버로써, 흔히 WAS(Web Application Server)라고 하는데, 해당 서버는 동적인 데이터를 처리...

HTTP 상태코드 🐙 HTTP 상태코드 HTTP 상태코드는 클라이언트가 보낸 요청의 상태를 응답에서 알려주는 기능을 한다. HTTP Status reason-phrase desc related-response-header 1xx ...