유댕이의 개발공부일지

CLI이란 CLI는 Command Line Interface 줄임말이다. 명령줄 인터페이스라는 이름으로 번역이 가능하다. 사용자는 커맨드 즉 문자열을 통해 컴퓨터에게 명령을 하는데 컴퓨터의 응답도 문자열로 출력해주는 방식을 말한다. 맥에서는 Terminal 환경이 CLI 이다.

☘️ 참고한 오픈소스 GitHub - withspectrum/spectrum: Simple, powerful online communities. GitHub - withspectrum/spectrum: Simple, powerful online communities. Simple, powerful online communities. Contribute to withspectrum/spectrum development by creating an account on GitHub. github.com 폴더구조 spectrum/ ├── api # API server ├── docs ├── hyperion # Rendering server ├── public # Public files used on the fro..

Code Splitting (코드분할) 이란? 코드 분할(Code Splitting)은 SPA의 성능을 향상시키는 방법이다. 싱글 페이지 애플리케이션(Single Page Application)은 초기 실행시에 필요한 리소스를 모두 다운로드한후 해당화면에 필요한 스크립트를 실행시키는 특징이 있다. 때문에 초기 다운로드 비용이 매우 비싸고, 로딩속도가 지연될수 있기 때문에 필요한 시점에 분할된 리소스를 다운받아서 실행시키는 코드분할 기술을 적절히 사용하면 속도개선과 SEO에 큰 도움이 된다. 아래의 버전 기준으로 작성하였다. React 16.20.0 Next.js 9.0.5 번들링 대부분 React 앱들은 Webpack, Rollup 또는 Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 ..

Jest란? 💡 Jest는 페이스북에서 만든 Javascript 테스팅 라이브러리이다. Jest는 이전의 자바스크립트 테스팅 라이브러리와는 차별점을 가지고있는데 전에는 test를 진행하는데 있어서 test runner, matcher, mock등을 다른 라이브러리를 조합하여서 사용했었는데 jest라는 라이브러리가 나옴으로서 이런 모든 것 들을 지원해 줌으로 상당히 편리하게 접근할 수 있고 사용할 수 있다. jest 설치 npm install --save -dev jest jest 사용 이유 test란 우리의 코드가 정상적으로 우리가 의도한 방향으로 작동하는지 검증하는 작업이다. jest와 같은 테스팅 라이브러리가 없다면 우리는 우리가 구현한 기능을 직접 사용해 봄 으로서 테스트를 할 것 이다. 하지만 프..

☘️ 참고한 오픈소스 GitHub - outline/outline: The fastest wiki and knowledge base for growing teams. Beautiful, feature rich, and markdown compatible. GitHub - outline/outline: The fastest wiki and knowledge base for growing teams. Beautiful, feature rich, and markdown compatibl The fastest wiki and knowledge base for growing teams. Beautiful, feature rich, and markdown compatible. - GitHub - outline/ou..

ESlint란? 💡 Lint란 보푸라기를 말한다. ESlint란 ECMAScript에서의 보풀을 의미하게 되는데 우리가 옷을 입을 때 보풀이 있어도 입고다닐순 있지만 보기에 좋지 않다. 이렇듯 들여쓰기도 일정한 규칙에 맞게 하지 않고 선언한 변수나 함수를 사용하지 않는등 코드에 보풀이 일어나도 작동은 하지만 결과 적으로는 유지보수를 할 때 큰 어려움을 겪게 될 것이고 잠재적인 오류로 나중에는 큰 오류로 인해 개발하는데 어려움을 주게 될 것이다. 이런 것을 방지하고자 ESlint가 나오게 되었다. ESlint 기본 개념 린트의 목적은 ECMAScript 코드의 가독성을 높이고 잠재적 오류나 버그를 잡아내 더욱 견고한 코드를 만들어 내는 것이다. ESlint는 크게 두가지의 일을 하게 되는데 코드 포맷팅 코..

Redux-Toolkit이란? 💡 리덕스 툴킷이란 리덕스를 더 사용하기 쉽게 만들기 위해 리덕스에서 공식 제공하는 개발도구이다. 리덕스는 훌륭한 라이브러리지만 단점 또한 있다. 리덕스 툴킷은 이러한 리덕스의 단점을 보완하기 위해 등장하였다. 리덕스의 단점? 하나의 리덕스를 작성하는데 필요한 기본적인 코드양이 너무 많다(bolerPlate code) 많은 패키지 필요성 (의존성이 높다) 스토어 구성 복잡성 우리는 리덕스를 사용하면서 편리함을 느끼지만 한편으로는 너무 눈에 보이는 단점을 가지고 있다고 한번쯤 생각했을 것이다. 이러한 단점과 툴킷을 비교해보며 툴킷을 본격적으로 다루기 전 왜 필요한지 왜 현시점 리덕스를 활용하는 개발에서 툴킷이 필수라는 소리를 들으며 트렌드가 되었는지 알아보겠다. Redux-T..

## 프록시 서버 프록시 서버는 인터넷에서 유저를 대신해서 데이터를 가져오는 서버이다. 원래는 클라이언트가 서버에 직접 접근해서 요청한 내용을 가져와야 하지만 프록시 서버가 대신 서버에 요청하고 클라이언트에게 가져다 준다. 예를 들면 클라이언트에서 naver의 주소를 입력해서 접속을 시도한다. 이 요청은 서버로 가는게 아니라 프록시 서버로 간다. 프록시 서버가 네이버의 서버에 도착해서 웹페이지를 가져다가 클라이언트인 웹브라우저에게 보내준다. 프록시 proxy 에는 '대리' 라는 뜻이 있다. 클라이언트를 대리한다는 뜻이다. 중계인도 비슷한 말이다. ### 사용 이유 1. 개인정보를 보호할 수 있습니다. 프록시 서버 없이 클라이언트가 네이버의 서버에 요청을 할 때 나의 IP 주소도 전달이 된다. 프록시 서버..