What I studied

중요한 패치가 필요한 프로젝트를 작업중이었는데, 원래 내 브랜치에서 작업할 땐 문제가 없었다. 문제가 터진건 이제 최종 배포를 위해 다른 브랜치로 이동해서 확인 후, 빌드를 했는데... 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..

기존에 쓰던 스킨에서 벗어나 정상우님께서 만들어주신 hELLO 스킨으로 돌아왔는데 다시 생각해도 이 스킨은 너무 잘 만들어진 것 같다. 무료로 이용할 수 있고 커스텀까지 가능하기에 개발자들에게도 인기 많은 스킨이라 지금부터는 직접 커스텀하여 나만의 블로그로 만들어보려고 한다. css도 연습할 겸! 좋은 스킨 너무 감사합니다~! hELLO 스킨을 적용하고 보니 가장 먼저 수정하고 싶었던 부분이 바로 code box 부분이었는데 조금 더 눈에 잘 띄는 것으로 변경해보고 싶었다. 그래서 highlightjs 라는 라이브러리를 사용해 원하는 테마로 변경했다. 1. highlight.zip 파일 다운 받기 먼저 아래 사이트를 통해 파일을 다운로드 해주면 되는데 zip 파일을 다운받아 압축을 풀어주면 된다. Dow..

기존에는 AES 방식으로 암호화를 진행했다면 이제는 jsrsasign이라는 라이브러리를 가지고 RSA 암호화를 구현해보려고 한다. 기존에 사용했던 AES 방식과 RSA 방식이 어떤 차이가 있는지를 먼저 알아보고, 자바스크립트와 리액트에서 사용할 것이다. 1. AES vs RSA 두 방식의 차이는? 1) AES 알고리즘 AES 방식은 대칭키를 사용하여 암호화, 복호화를 진행하는 암호화 알고리즘으로 클라이언트와 서버가 같은 키를 사용해야한다. 클라이언트와 서버 간 동일한 키를 공유해야하기 때문에 키 전달 및 관리에 어려움이 있다. 키가 노출되면 보안에 매우 취약해진다. 비대칭키 암호화 방식에 비해서는 키 사이즈가 작지만 암호화 알고리즘 구조가 간단하여 연산 속도가 빠르다. 2) RSA 알고리즘 RSA 방식은..