Front-End(Web)
-
[Next.js + TS] 초기세팅 - (4) Babel 설정Front-End(Web)/React - 프레임워크(React, Next) 2021. 11. 2. 02:39
Next.js + TS 초기세팅에 대한 글을 쓰면서, 마지막으로 Babel 세팅에 대한 내용을 정리하려고 하였으나 이전에 개념만으로도 글이 길어졌다. * [Next.js + TS] 초기세팅 - (3) Babel 개념 : https://abangpa1ace.tistory.com/196 이번 포스팅에서는, Babel을 실제로 세팅하는 방법, 그리고 Next.js 및 TS환경을 좀 더 낫게 사용하기 위해 내가 적용했던 몇 가지 항목들을 설명해보고자 한다. 💛 Babel 과 Typescript 바벨을 설정하기 이전에, Typescript 환경에서 바벨을 쓰는 것의 목적? 의의? 를 이해하기 위한 선행학습이 필요했다. 사실, Typescript tsc(tsconfig.json) 역시 TS를 JS로 컴파일하는데 관..
-
[Next.js + TS] 초기세팅 - (3) Babel 개념Front-End(Web)/React - 프레임워크(React, Next) 2021. 10. 22. 00:33
이번엔 초기세팅 마지막 시리즈가 될 것 같다! 주제는 Babel 이다. 이전, Babel과 Webpack 에 대해 간단히 공부하면서, Babel은 단순히 트랜스파일러의 역할 정도로 알고 있었떤 툴이다. 하지만, 프로젝트에서 절대경로나, SSR 등을 위해서까지 사용해보면서 Babel의 다양한 기능을 정리해보고자 했다! 💛 Babel 이란? 바벨(Babel)은 최신버전(ECMAScript 2015+) 의 JS코드를 상대적으로 구식 브라우저(IE 등) 환경에서 호환되도록 버전을 변환하는데 주로 사용되는 자바스크립트 컴파일러(트랜스파일러)이다. (그렇기에, 입력과 출력 모두 JS) 위가 바벨의 주된 기능이며, 현재는 JSX문법(React), TS같은 정적 타입언어, 코드압축, 제안단계(정식문법X) 문법 등을 사..
-
[Next.js + TS] 초기세팅 - (2) ESLint, PrettierFront-End(Web)/React - 프레임워크(React, Next) 2021. 10. 14. 05:15
지난, CRA 초기세팅 및 Typescript 세팅에 이은 2번째 글이다. 주제는 ESLint, Prettier! 뒤에서도 설명하겠지만, 이 툴들은 기능적인 부분보다는 동기들과의 프로젝트 협업을 위한 세팅에 사용되었다. 이들의 역할을 알아보고, 나도 단순히 적용만 하고 지나쳤던 설정들에 대해 자세히 알아보았다. 📓 ESLint - 개요 ESLint는 Javascript, Typescript 의 코딩 스타일 도구이다. JS코드가 ECMAScript Specification에 부합하는지 검사하는 툴이다. 코딩 스타일 가이드라인을 지정하여, 패턴을 준수하지 않을 경우 사후에 발생할 수 있는 잠재적 문제점을 사전에 방지하기 위해 사용되는 것이다. * 본래, TS는 TSLint 라는 코딩 스타일 도구가 있었으나,..
-
[Next.js + TS] 초기세팅 - (1) CRA, tsconfig.jsonFront-End(Web)/React - 프레임워크(React, Next) 2021. 10. 11. 03:49
😃 서론 지난달 초, Typescript 공부를 위해 OP.GG 사이트 클로닝 프로젝트를 간단하게 진행하였다. (리뉴얼 작업으로 최근까지 holding...) 오랜만에 React, Styled-Components를 쓸 뿐만 아니라, Typescript와 Next.js는 실전에 처음 사용하는 프로젝트였다. 이를 위해, eslint/prettier 부터 위 툴들을 사용하기 위한 프로젝트 초기세팅을 정리해두고, 이를 좀 더 쉽게 구성하고 사용하기 위해 고민했던 다양한 방법들을 포스팅을 통해 남겨보고자 한다! 📘 CRA (Create-React-App) React 프로젝트 초기세팅을 하는 가장 간편한 방법을 CRA(Create-React-App) 이라고 한다. 프로젝트에 필요한 기본적인 모듈들, 그리고 Babe..
-
[Typescript] Type Alias vs InterfaceFront-End(Web)/Typescript 2021. 8. 25. 20:44
Typescript 프로젝트를 진행하기 앞서, 토이클론을 진행하며 객체 등 타입선언에 Type, Interface 모두를 사용하였다. Type Alias는 "="을 같이 사용하여 선언하고, Interface는 불필요하다는 간단한 Literal 적 차이점부터, Interface는 Class처럼 확장이 가능하고, Type은 다르다는 등 둘의 비슷하면서도 다른점들을 얼핏 보아왔다. 하지만, 분명 Typescript에서 이 둘을 구분한 이유가 있을 것이며, 그렇기에 각각이 쓰이기에 적절한 경우가 있을 것이다. 이를 많은 소스들을 참고하면서 정리해보고자 본 포스팅을 올린다. 💙 개념 - Type Alias(타입 별칭) // string 타입을 사용할 때 const name: string = 'capt'; // 타..
-
[Javascript/lib.] LodashFront-End(Web)/Javascript 2021. 8. 17. 21:45
🧐 서론 lodash 역시 회사 실무를 접하면서, 처음으로 경험해본 Javascript 라이브러리이다. 사실, Javascript에서 제공하는 왠만한 메서드들을 표방한 것이다보니 필요성이 있을까 싶지만, _cloneDeep() 으로 객체를 깊은 복사하거나, _has() 로 객체의 필드 포함여부를 확인하는 등 다양한 기능을 수행할 수 있다. 현재 실무에서는, 더 다양한 Lodash 메서드들을 사용하고 있기 때문에, 이의 기원과 대표적인 메서드들을 정리해보고자 이 글을 포스팅한다. 📒 Lodash 란? Lodash는 Javascript 유틸리티 라이브러리의 일종이다. 즉, 모듈성, 성능 등을 제공하기 위한 라이브러리인 것이다. * Lodash는, node.js 에서 많이 쓰이는 underscore 라이브러리..
-
[CSS/Lang] LESSFront-End(Web)/HTML, CSS 2021. 8. 12. 02:10
😃 서론 오랜만에 CSS 라이브러리 포스팅을 진행하는 것 같다. Less 같은 경우엔 내가 선택했다기 보다, 현재 회사에서 쓰이는 언어이다. 리드 엔지니어님께서 쓰시는 패턴을 차용해서 작업을 진행하다보니, 확실히 CSS 코드가 눈에띄게 짧아짐을 느꼈다. 또, 믹스인들로 구성한 문법이 마치 또다른 언어같지만, 눈에 익다보면 CSS 약어와 비슷하여 금방 적응도 되었다. 앞으로 리뉴얼되는 우리의 코드에는 Less가 더 적극적으로 쓰이며, 나 역시도 Vue 개인 프로젝트를 진행할 때 Less를 많이 사용할 것 같아 좀 더 원론적으로 정리하고자 이 글을 포스팅하게 시작했다. 🔵 Less 란? LESS는 CSS에 script의 능력(변수, 함수, 연산, 중첩, 스코프 등) 을 덧붙여 확장한 언어이다. LESS는 C..
-
[Vue.js] 재사용 & 컴포지션 - (2) 플러그인 & 필터Front-End(Web)/Vue 2021. 8. 4. 01:12
이전에 정리한 재사용 & 컴포지션 세션의 나머지 부분이다. 딱히 나눈것에 대한 의미는 없다. (분량이 길어진걸 뿐) 💚 Plugin(플러그인) Plugin(플러그인)은 전역 수준의 기능을 Vue에 추가하는 문법이라고 소개하고 있다. 실제로, 우리 회사도 modal을 키는 기능도 mapMutation이 아닌 플러그인으로 구현하며 store 활용을 최소화했다. 이렇듯 일종의 모든 곳에서 활용성이 높은 메서드를 제공하기 위한 문법이며, 플러그인엔 다양한 유형이 있다. 약간의 전역 속성 혹은 메서드 추가 (vue-custom-element, HTML 태그를 커스텀하는 플러그인) 하나 이상의 글로벌 에셋 추가 : 디렉티브 / 필터 / 트랜지션 등 (vue-router, 라우팅 기능) 글로벌 mixin으로 일부 컴..