Today I Learned
프로젝트마다 다른 노드 버전 사용하기
: 기존재하던 프로젝트를 clone 받아서 작업을 할 일이 생겼는데, 해당 프로젝트의 노드 버전이 >= 18 이었다. 하지만, 다른 프로젝트에서는 다른 노드 버전을 쓰고 있었기 때문에 나중에 심신의 안정(?)을 위해 해당 프로젝트에서만 18.18.0을 쓰고자 했다.
nvm use 18.18.0이 명령어를 프로젝트 최상단에 써줬고,
Now using node v18.18.0 (64-bit)정상적으로 실행되면 이러한 출력이 뜬다. 하지만, 이전에 
위와 같은 에러가 떴었는데, 이건 관리자 모드로 하면 해결할 수 있고,
위의 에러는 처음 겪어보는거였다. 분명히 해당 플젝 폴더가 빈게 아닌데 이런 에러 메시지를 리턴하니까 상당히 당황스러웠다.. 어쨌든 디버깅을 위해 구글링을 해봤는데, 
**출처 : Stack Overflow
솔직히 처음에는 이게 뭔 차이가 있을까? 하고 시도했는데.. 돼버렸다(?).. 댓글에도 이게 왜 되는지 묻는 글들이 있는데 그에 대한 답변은 없었다. 
궁금해서 좀 더 검색을 해보니 이런 해결책도 있었다.
여기서 힌트를 얻어서 생각해보니까 내가 해결한 방법은 이전 버전 nodejs 폴더가 제대로 삭제되지 않았고, 이를 nodejsx 라는 이름으로 변경함으로써 해결한게 아닐까? 라는 생각이 들었다. 그래서 C:\Program Files\nodejs 로 가봤다.
그랬더니 위와 같이 오늘 내가 nvm use를 쓴 다음에 생긴 nodejs 폴더가 있고, 이전에 있던 nodejs를 nodejsx로 바꿔놓은 폴더 이렇게 두개가 있었다. 그래서 nodejsx를 일단 삭제했다. 어쨌든 동작은 하니까 상관없을까 했지만, 그 끝이 궁금했다.
이전 버전의 node가 있는 경우 자동으로 버전 변경을 처리하지 못합니다.
이런 말이 있었는데, 좀 이해가 안가는게 nvm use 자체가 플젝마다 노드 버전을 다르게 쓰려고 쓰는건데 이전 버전 node 파일을 지워야 버전 변경을 처리한다?.. 뭐가 어떻게 되는걸까.. 아니면 파일 자체가 전체 버전을 포함하고 있는건데, 그 포함하는 버전이 업데이트된다는 개념일까?
어쨌든, 내가 생각한대로 사용은 잘되는지를 체크해보려고, 다른 플젝에서 nvm use 16.17.0 을 해보고, 다시 내가 18.18.0으로 했던 플젝으로 돌아와 node -v 를 해봤는데, v16.17.0 이렇게 떴다..(?)
근데 이건 내가 잘못생각했던게 node라는게 어차피 플젝을 node 엔진 혹은 환경으로 돌리는건데, 해당 플젝을 개발한 팀이 node version을 특정 버전으로 했다는거고, 나도 그 버전을 써서하면 딱히 충돌 같은게 일어나지 않으니까 그 플젝 작업을 하면서 구동을 할 때는 nvm use로 해당 버전을 쓰고, 다른 플젝을 할 때는 다른 버전을 쓰고 하는거니까 위에서 저렇게 나오는게 정상적으로 작동을 한거였다.
이전 버전의 node가 있는 경우 자동으로 버전 변경을 처리하지 못합니다.
그래서 이것도 이해가 됐다. 이전 버전이랑 현재 버전 동시에 각각 다른 플젝에 적용하는 등의 그림을 생각했던 나는 이 말이 좀 이해가 안됐는데, 잘못 생각했던거였다.
결론적으로 nvm use를 사용해서 v18.18.0 으로 팀 플젝 코드를 사용할 수 있었다.
Perfect Pixel 로 피그마 이미지 활용하여 UI 고치기
Perfect Pixel 에 대한 설명은 이 링크를 참조하는게 좋을 것 같다. 대략적으로 말해보면, 디자인 팀이 피그마에 올려주는 화면 전체를 따와서(?) opacity 조절을 통해 반투명 상태로 만들고, 실제로 만든 사이트 위에 해당 이미지를 올려놓아서 정확히 일치하는지 비교하면서 작업을 수정, 개선하는 용도로 쓰는 크롬 익스텐션이다.
사용법
- perfect pixel 크롬 익스텐션을 다운받는다.
- 피그마에서 비교할 영역 혹은 사이트 전체를 캡처 툴로 캡처한다(이 때, 피그마 배율을 100%로 해놔야한다 또한 비교하는 브라우저의 사이즈도 100%로 해놔야한다).
- 캡처를 해놓으면 아래에 동그라미 친 영역처럼 clipboard 버튼을 눌렀을 때 그 캡처한게 자동으로 perfect pixel에 뜬다.
- 그러면
이렇게 된다. Layer에는 캡처한 이미지가 떠있다. 그러면 이제 해당 이미지의 크기 비율을 1.0으로 해준다. x,y는 왼쪽 상단을 (0,0)으로 했을 때의 좌표값을 설정해주는 부분이다. opacity는 말그대로 투명도를 조절해주는 부분이다. - 그러면 브라우저 상에 캡처한 이미지가 반투명하게 떠있을 것이다. 이제 그걸로 해당 부분에 덧대어보면서 디자인이 잘적용됐는지 체크하면 된다.
