What I studied

서버를 새로 띄웠는데 갑자기 실행이 안되거나 에러가 날 때, 직접 로그를 보면서 어떤 문제가 있었는지를 파악하는 편인데 그 때마다 도커 명령어를 사용하게 된다. 그 중 로그를 볼 수 있는 docker logs 명령어를 통해 원하는 옵션대로 원하는 로그를 볼 수 있다. docker logs란?docker logs 명령어는 Docker 컨테이너의 로그 정보를 확인하는데 도움을 주는데 이 명령어를 통해 컨테이너의 표준 출력과 표준 에러 스트림에 기록된 정보를 확인할 수 있다. docker logs의 주요 옵션--follow, -f로그 출력을 실시간으로 계속 볼 수 있는 옵션--tail마지막 N개의 로그 라인만 표시하는 옵션--since특정 타임 스탬프 이후의 로그만을 표시하는 옵션--until특정 타임스탬프 ..

리액트를 사용하며 훅을 정말 많이 사용하게 되는데 기본적으로 내장되어 있는 훅이 아닌 커스텀훅을 제작해서 사용하는 경우도 많다. 일반적으로 사용하는 유틸함수와 커스텀훅의 차이에 대해서 공부하고, 각각의 상황에서 어떤 함수를 만들어 사용해야 하는지를 알게 되었다. 1. 리액트 훅이란?먼저, 리액트 훅을 가볍게 설명해보자면 함수형 컴포넌트에서 상태와 라이프사이클의 기능을 사용할 수 있게 해주는 것이라고 할 수 있다. 리액트 16.8 버전부터 새롭게 도입되었으며 대표적인 내장 훅으로는 useState, useEffect, useRef, useMemo, useCallback 등이 있다. 커스텀 훅이 아닌 리액트 훅에 대해서 좀 더 자세하게 알고 싶다면 아래 게시글을 참고. 리액트 훅과 자주사용하는 훅의 특징(R..

요즘 커스텀 훅을 만들어보고 해당 부분을 다시 공부하면서 내가 자주사용하고, 또는 자주 사용해보지 않았던 훅들을 정리해보려고 한다. 1. 리액트 훅이란?리액트 훅은 리액트 16.8 버전에 새롭게 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와 라이프사이클 기능을 사용할 수 있게 해준다. 기존의 클래스형 컴포넌트보다 훨씬 간결하고 읽기 쉬운 코드를 작성할 수 있도록 도와주며, 코드 재사용성을 높여준다는 장점이 있다. 리액트 훅을 사용하면 클래스 없이도 상태를 관리하고, 컴포넌트의 생명주기에 따라 작업을 수행할 수 있는데, 이를 통해 코드의 가독성이 향상되며 함수형 프로그래밍의 장점을 더욱 효과적으로 활용할 수 있게 된다. 2. 리액트 훅의 규칙리액트 훅을 사용할 때는 몇 가지 중요한 규칙을 따라하..

중요한 패치가 필요한 프로젝트를 작업중이었는데, 원래 내 브랜치에서 작업할 땐 문제가 없었다. 문제가 터진건 이제 최종 배포를 위해 다른 브랜치로 이동해서 확인 후, 빌드를 했는데... css가 깨지는 현상이 발생했다. 배포된 파일을 보니 내가 추가한 적도 없는 css와 vuetify 태그들이 들어있었는데 소스상에서는 문제가 될 부분이 전혀 없었다. vuetify를 사용하고 있었기 때문에 vuetify와 관련한 문제가 발생했음을 인지하고, 이 문제를 가지고 2일정도 삽질을 했다. 삽질 끝에 결국 package.json과 package-lock.json 관련 문제라는 것을 알게되었다. 1. 문제가 발생한 원인 문제가 발생한 원인은 우선 내가 계속해서 사용하고 있던 브랜치에는 기존에 쭉 사용하고 있던 pac..

평소 가볍게 개발을 공부하거나 무언가를 만들어볼 때는 빠르게 시작하기 위해서 React CRA를 이용해 개발환경을 구축하곤 했었다. CRA(Create React App) 역시 내부적으로 webpack과 babel을 사용하기는 하지만 이러한 설정이 숨겨져있기 때문에 초기 설정에 대한 고민 없이 편하게 시작할 수 있다. 하지만 확장성이 떨어지기 때문에 복잡한 프로젝트에는 부적합할 수 있으며, 내부적으로 관리하는 설정때문에 세부적인 조정이 필요한 경우, 제한이 있을 수 있어 webpack과 babel을 사용하여 개발환경을 구축하는 것이 훨씬 유리하다. 보통 회사에서는 CRA를 사용하기 보단 리액트, 뷰 등의 개발환경을 개발자가 직접 구축하는 경우가 많은데 나 역시도 웹팩과 바벨로 직접 구축한 프로젝트를 맡고..

vue3 프로젝트를 진행하며, json 데이터를 그 형태 그대로 화면에 예쁘게 보여주고자 방법을 찾다가 가장 먼저 적용해 본 방법은 태그를 사용하는 것이다. pre 태그를 사용하면 json 데이터가 화면에 예쁘게 출력되지만 css가 적용되지 않은 pre 태그는 정말 json 그 자체이다. 그래서 코드블록을 예쁘게 보여줄 수 있는 라이브러리가 있는지 찾아보다가 vue-code-highlight라는 라이브러리를 알게 되었고, 한번 적용해 보았다. 1. vue-code-highlight 설치 npm, yarn 등 내가 사용하고 있는 패키지매니저에 따라 해당 라이브러리를 설치해 주면 된다. npm install vue-code-highlight --save 2. vue에서 사용할 수 있도록 설정 그다음은 vue..

package.json에 작성해 둔 명령어로 환경변수를 관리할 수 있도록 빌드 구성을 통합하는 작업을 진행했는데 거의 2일 동안은 삽질의 연속이었던 것 같다. 여러 가지 방법을 시도하다가 내가 원하는 대로 환경변수를 활용할 수 있게 되었다. 1. html-webpack-plugin (templateParameters 사용) 가장 먼저 시도했던 방법이었는데, 뭐 때문이었는지는 모르겠지만 제대로 적용이 되지 않았었다. 그래서 다른 방법을 사용했다가 다시 돌아와서 처음부터 차근차근 적용해 보니 가장 쉽게 적용되었던 것 같다. 플러그인을 사용하기 전 환경변수와 명령어를 먼저 세팅해 줬는데, package.json 파일에서 아래와 같이 설정하면 된다. set HELLO=helloworld라는 환경변수를 세팅해 주..

오랜만에 리액트 프로젝트를 생성한 후 npm install을 했는데 계속해서 에러가 발생했다. npm install 이후, 에러가 발생한다면 아래와 같은 원인이 있을 수 있는데 에러 메세지를 확인하여 각각에 맞는 해결방법으로 해결해주면 된다. 1. npm install 에러의 흔한 원인 sudo 권한으로 명령어를 실행해야하는 경우 dependency 버전 문제 node와 npm 버전이 맞지 않는 경우 2. dependency 버전 관련 에러 해결 오랜만에 새로운 프로젝트를 시작한 후, npm install을 실행시켰는데 다음과 같은 에러가 발생했다. jieun@jieun-MacBookAir:~/Desktop/dev$npm i npm ERR! code ERESOLVE npm ERR! ERESOLVE un..

오늘은 CSS를 활용하여 특정 위치에서 말줄임을 실행하고 말줄임이 끝나는 줄의 오른쪽에 더보기 버튼이 위치하도록 구현해보려고 한다. 말줄임은 CSS를 통해 쉽게 구현할 수 있지만 특정 위치에서 말줄임이 되어야한다는 점이 반드시 필요했다. 1. 원하는 줄에서 말줄임 표시하기 원하는 줄에서 말줄임을 표시하기 위해서는 아래의 CSS만 활용해주면되기에 크게 어렵지 않다. .ellipsis { width: 200px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 2. 원하는 줄, 특정 위치에서 말줄임 표시하기 원하는줄이 끝나는 지점에서 말줄임을 ..

내가 원하는 파일, 원하는 설정대로 빌드하기 위해서 웹팩을 사용하는데 빌드 날짜와 시간을 추가해두면 어떤 파일이 가장 최근에 빌드된 것인지 확인하는데 유용하다. 그래서 자주 사용하는 플러그인을 통해 빌드된 파일 상단에 날짜와 시간을 추가해보려고한다. 1. BannerPlugin (js, css 파일 상단) BannerPlugin은 webpack에 내장되어있는 플러그인으로 webpack을 설치했다면 따로 설치할 필요가 없다. 주로 javascript 번들 파일 맨 위에 주석을 추가하는 용도로 사용되는데 webpack.config.js 내의 plugins에 banner를 추가하여 원하는 날짜와 시간 형식을 추가해주면 된다. const webpack = require('webpack'); module.expo..