지난 글에서 node.js 버전 업그레이드 오류를 해결했으나, 이번에는 npm i가 작동하지 않는 에러가 발생했다.. 이 오류 해결하는데 한시간 반은 걸린 것 같은데.. 아무리 서칭해서 적용해도 해결되지 않아서… ㅎ흙흑 겨우 해결방법 글을 발견하여 에러를 해결했다!! 미래의 내가 같은 에러를 마주치면 그때 쉽게 해결할 수 있도록 글을 적어본다..
문제의 에러 화면
어떤 에러인지 확인해보자면 해당 파일에 권한이 없음! 과 파일 이미 존재하니까 삭제하고 다시 해보셈! 그리고 --force 사용해보셈! 인걸로 나는 이해했다.
그래서 --force를 붙여서 해봤다. (대부분 이렇게 하면 해결된다고 하더라) 응, 근데 난 해결이 안됐다 ^^! 그래서 파일도 삭제해봤지만.. 해결이 안됐다.
그러던 중 발견한 정말 나의 구원글..ㅜㅜㅜ 정말 친절히 작성해주셔서 덕분에 해결할 수 있었다.
(자고 싶었는데 해결 안하면 도저히 잠이 안 올 것 같아서 해결방법을 찾던 나에게 자도 된다고 선언해준 글..)
permission denied 에러 해결
원인
해당 에러가 발생한 이유는 이거였다. “접속중인 local 계정이 npm 설치 경로에 권한을 가지고 있지 않다.”
아마 추측하기로는 다른 에러 해결한다고 sudo를 좀 많이(?)사용한 것 같은데 그래서 이 에러가 발생한 것 같다. (해당 글에서도 node를 sudo를 사용하여 설치해서 에러가 발생할 가능성이 높다고 했다.)
해결방법
해당 에러를 해결하는 방법으로 택한 것은 “npm install -g 로 설치되는 디렉토리 경로를 현재 계정의 home directory로 변경” 하는 것이다. (참고한 글의 분이 선택한 방법이다!)
-
npm global directory 생성
mkdir ~/.npm-global
-
생성한 디렉토리에 npm config set 설정
npm config set prefix '~/.npm-global'
-
‘.npm-global’ 파일에 library path 설정 추가
nano ~/.profile
해당 명령어를 입력하면 편집기가 켜지는데, 파일에 다음과 같은 코드를 추가한다.
export PATH=~/.npm-global/bin:$PATH
-
‘.npm-global’ 파일 설정 적용
source ~/.profile
위 단계를 모두 한 후, npm 명령어를 실행했는데도 에러가 계속 발생한다면?
이 모든 명령어들을 수행 한 후, npm i를 실행했더니…..!!!! 설치가 됐다 흠엄ㄴ럼ㅇ러구ㅜㅜ
참고로 나의 경우에는 default directory 권한을 변경하는 것까지 수행한 후에 에러가 해결 됐다..
마치며
정말… 험난했다.. 하.. 그래도 해결하니 기분 좋게 잘 수 있겠더라!ㅎㅎ 이런 맛에 코딩하는 거지… 항상 느끼는 거지만 코딩은 수학문제 같달까… 이 정답을 맞췄을 때의 쾌감.. 내가 이래서 수학을 좋아했지.. 이래서 코딩이 좋은가 보다..헿
참고
[2019.09.01] 오늘의 TIL - npm install 중, permission denied 에러 해결방법
본격 미션 시작하기에 앞서 기본 셋팅을 하던 중… 발생한 에러를 적고자 한다..
나의 브랜치에 fork랑 clone은 매우 간단하게 했고, Node.js와 NPM 버전을 업그레이드 하는 것이.. 시작전부터 날 힘들게 만들었다…
Node.js 버전 업그레이드는 매우 간단하게 성공했다.
n (npm n)을 사용해서 Node.js 버전을 업그레이드 했었는데, 맨 처음에 Node.js를 설치했을 때 NVM으로 했어서 installed와 active 경로가 일치하지 않아 일치시키는 것까지 완료하여 매우 간단하게 해결했다. (미래의 내가 블로그에 글 작성해둔거.. 정말 잘했다 ㅜ)
근데? npm은 자동으로 업그레이드 되지 않았다. 그래서 npm install -g npm 명령어를 통해 업그레이드를 진행하려 했다. 그러나 아무리 터미널에 버전을 확인해도 업그레이드가 되지 않고 이전 버전이라고 나왔다.. 아무리 해도… 그리고 삭제 하고 다시 설치하려고 해도.. 에러 뜨고… 그야말로 1시간의 멘붕시간이었다.
아래 사진 에러 말고도 굉장히 다양한 에러가 나타났다
그러다가 문득 떠오른 것이 Node.js의 installed(npm n)와 active(nvm)의 경로가 다른데.. 그냥 Node.js의 버전 업그레이드를 NVM으로 해보자!였다.
기존에는 n으로 설치하니까 자꾸 두 경로가 다르게 뜬다는 생각이 들었다. Node.js를 NVM으로 설치하면 installed 경로도 active처럼 NVM으로 될 것이라고 생각했다.
그리고 이 생각은 맞았다.
NVM으로 Node.js를 설치하니 모든게 간.단.하게 해결되었다… Node.js 업그레이드와 NPM 업그레이드까지…
그렇다면 왜 NVM으로 Node.js를 설치했을때 NPM도 업그레이드 된 걸까?
N과 NVM
N
n은 npm의 패키지로, npm을 이용해 n을 설치하고 n으로 Node.js 버전을 업그레이드한다. 여기서 주의할 점은 n으로 버전을 업그레이드하고 싶다면 일단 Node.js가 설치되어있어야 한다.
n으로 Node.js 업그레이드를 하는 방법은 해당 링크를 참고하자.
NVM
NVM은 n과 달리 npm의 패키지가 아니라 개별적인 존재이다.
그렇기에 NVM은 Node.js에 의존적이지 않다. 오히려 Node.js가 NVM의 의존적이다. (NVM이 Node Version Manager인 이유랄까…?)
그리고 이번 에러를 통해 느낀 n과 달리 NVM의 가장 큰 장점은. NVM으로 Node.js를 업그레이드하면 NPM의 버전또한 같이 업그레이드가 된다는 것이다! (따로 업그레이드 안해도 되니까 너무 좋더라..)
NVM 사용 방법
N과 NVM 둘 중 무엇을 사용?
이번에 느낀 건데, 둘 중에 뭘 사용하는 것이 좋냐?라고 묻는다면 난 NVM을 하겠다.. 일단 Node.js에 의존적이지 않아서 좋은 것 같다. 그리고 NPM도 같이 업그레이드가 되고…
이번에 느낀건 사람들이 많이 쓰는데는 이유가 있다~^^ 라는 것이다.
마치며
미래의 나.. Node.js 업그레이드… N아니고 NVM으로 했다.. 자꾸 N으로 업그레이드 하지 말아라… 에러 또 날라..ㅜ
+추가
해당 에러는 잡았지만 npm i가 안되는 에러 해결 안됨… (추후에 계속)
참고
Node.js 버전 변경하기 (with NVM 사용법)
node.js 버전 관리 매니저::nvm과 n 비교 및 nvm 설치 방법 정리
이번주 월요일, 밤을 새우며 자소서를 작성해서 우아한테크코스 6기 모집에 신청했다. (모집하는 것을 늦게 알아서 오전 10시까지 자소서 작성하느라 힘들었다..)
우아한테크코스는 6기 선발을 하기 전에 프리코스를 진행하는데, 4주동안 주어진 미션을 수행하는 것이다.
우테코에 선발되면 너무너무 좋겠지만.. 선발되지 않더라도 프리코스 참여로 배우는 점이 굉장히 많을 것 같아서 망설임 없이 신청했다.
글을 작성하는 현재 날짜로 오후 3시에 메일로 1주차 미션 내용이 도착했다. 기본 설정과 미션내용이 주어졌는데, 미션을 본격적으로 시작하기 전에 커밋 메세지를 제대로 작성해야 할 것 같다는 생각이 들었다. 기존에는 나만 확인하기 때문에 대충 작성했…다..ㅎ.. 프로젝트의 경우에는 간단하게 적었고.. 팀원이 이해하지 못하면 말로 설명해주면 되니까! 라는 마음으로 ^^.. 열심히 작성하지 않았었다.
하지만 프리코스의 경우에는 내가 설명을 해줄 수도 없는 상황이니까…! 이 기회를 삼아 정석대로 커밋 메세지를 작성해보고자 글을 작성한다.
커밋 메세지를 잘 작성해야 하는 이유
일단 우리는 왜 커밋 메세지를 잘 작성해야 할까?
그 이유는 프로젝트는 대부분 팀단위로 이뤄지기 때문이다. 만약 개인 프로젝트라면 솔직히 내가 알아볼 정도로만 작성하면 된다고 생각한다. (남이 볼거 아니니까?)
하지만 대부분의 프로젝트는 개인이 아닌 팀단위로 이뤄지고, 팀원마다 맡은 역할이 다르다. 결국 각자 개발한 코드를 합쳐야 하는데, 이때 분명 다른 팀원의 코드를 확인하게 되는 일이 진짜 무조건 최소 1번은 발생한다. (UNIVE.US나 DrawMap을 진행했을 때도 셀 수 없이 다른 팀원 코드를 확인했다.) 다른 사람의 코드로 인해 내 코드가 충돌 날 수 도 있고, 다른 팀원이 개발한 기능을 가져다 사용하는 일이 많기 때문이다.
그렇기에 다른 팀원이 개발 혹은 수정한 내용을 쉽게 확인하기 위해서 히스토리 (커밋한 내용)를 확인하게 된다. 이때, 어떤 기능을 개발했는지 수정했는지 커밋 메세지만을 보고 명확히 알 수 있다면? 보고자 하는 내용을 정말 간단하게 찾을 수 있을 것이다.
그렇다 위의 내용은 내 경험담이다 ^^. 다른 글을 참고하지 않고 순수 나의 경험담을 작성한 것이다.. 그렇기에 이번에 두 프로젝트를 동시에 진행하면서 느낀 것은… 커밋 메세지… 잘.. 명확히.. 작성하자… 그리고 커밋… 한번에 하지 말고… 기능마다 커밋하자… 정말 뼈저리기 느낀 사실이다.
좋은 커밋 메세지
그렇다면 좋은 커밋 메세지란 무엇일까?
해당 로그에서 어떤 것을 수행했는지 (기능 추가, 수정 등), 기능을 추가했다면 어떤 기능을 추가했는지와 같은 내용 등
해당 메세지를 통해서 어떤 것을 수행했는지 명확히 알 수 있어야 한다.
개발에 개도 모르는 사람이 봐도 음~ 이런 걸 수행했군!을 메세지만 보고 알 수 있어야 한다고 나는 생각한다!
좋은 커밋 메세지 작성 방법
프로젝트마다 커밋하는 방법을 따로 규칙으로 정했을 수도 있다. 지금부터 내가 설명하는 것은 ‘대체적으로’ 많이 사용하는 커밋 메세지 작성 방법이다.
커밋 메세지 구조
type(타입): title(제목)
# 예시
# feat: 음료 선택하기 기능 구현
위와 같이 작성하면 된다. 저 부분을 header라고 하는데, body나 footer도 존재하지만 대부분 사용 안하는 것 같다. 그래서 위에 header 부분만 작성하면 될 것 같다.
Type 키워드
- feat: 새로운 기능 추가
- fix: 버그 수정
- docs: 문서 수정
- style: 코드 스타일 변경 (코드 포매팅, 세미콜론 누락 등) 기능 수정이 없는 경우
- design: 사용자 UI 디자인 변경 (CSS 등)
- test: 테스트 코드, 리팩토링 테스트 코드 추가
- refactor: 코드 리팩토링
- build: 빌드 파일 수정
- ci: CI 설정 파일 수정
- perf: 성능 개선
- chore: 이 외에 자잘한 수정
- rename: 파일 혹은 폴더명을 수정만 한 경우
- remove: 파일을 삭제만 한 경우
대부분이 해당 타입 키워드를 사용한다.
추가로, 우테코에서 어떻게 커밋 메세지를 작성하나 확인해봤는데 위와 같이 type: title 형식으로 하더라! 앞으로는 위에 처럼 좋은 커밋 메세지를 작성해보겠다..!
참고
Git 커밋 메시지 규칙
[Git] 좋은 commit message 작성법
프로젝트를 진행하면 해당 에러 Uncaught TypeError: Array.map is not a function가 지속적으로 나타났다.
에러가 뜨는 이유는 배열이 비었기 때문이었다. 서버와 통신하기 전에는 임의로 배열을 만든 상태에서 테스트를 진행했기 때문에 해당 에러가 나타나지 않았던거였다. 통신을 진행한 후에는 게시글을 작성해야 배열에 값이 들어오게 되는데, 게시글을 작성하지 않았기 때문에 배열에 값이 존재하지 않아서 map 에러가 발생했던 것이다.
Array.map 에러 해결
해당 에러를 해결하는 방법은 매우 간단하다. 하지만 에러를 해결하기에 앞서 우리가 알아야 할 JS 지식이 있다.
array가 빈배열일때 boolean값
JS를 잘 모른다면 arr라는 배열이 존재하는데 값이 빈배열이라면, boolean값은 흔히 false라고 생각하게 될 것이다. (내가 그랬다)
하지만 아니다! 빈 배열이라면 boolean값은 true이다.
이유를 명확히는 알지 못하지만, JS에서 그렇게 정의한다. (그래서 그냥 받아들이기로 했다)
비교연산자(===)를 사용하지 않았을 때, false가 나오는 것은 다음과 같다.
- 0
- false
- undefined
- null
- ’’ 혹은 “” (빈 문자열)
- NaN
빈 배열은 위에 해당하지 않기 때문에 true가 나온다..! 이 뿐만아니라 {}, function(){}, "0", "false", "null" 등도 true값을 가진다.
여기서 주의해야 할 것은 위의 결과값은 동등 연산자(==)일 때의 값이라는 것이다. 비교 연산자(===)는 값과 타입을 모두 비교하기 때문에 빈 배열일때 false를 반환한다. 주의하도록 하자!
Chrome console에서는 arr == true는 false?!
사실 위의 이론을 직접 확인하고 싶어서 크롬 console 란에 코드를 작성해서 확인해봤다. 근데 빈배열이 false라고 하는 것이다..? arr == true라고 작성했는데.. 그래서 Boolean(arr)라고 작성해보니 true값이 나왔다.
왜 위의 개념과 다른 값이 나오는지 궁굼해서 Bard에게 물어봤다.
그렇다. 내가 동등 연산자(==)로 입력했어도 크롬 console은 비교 연산자(===)를 사용하는 것이다. 그렇기에 true가 아닌 false로 반환하는 것이었다. Boolean으로 했을 경우에는 값만 확인하기 때문에 true를 반환하는 것이고!
혹시 나 같은 사람이 또 있을까봐.. 적어봤다ㅎ
Array.map Error 해결하기
위 개념처럼 빈 배열 array는 true를 반환하기 때문에 map을 사용하는 조건으로 그냥 array가 아닌 array.length를 사용하면 된다.
빈 배열 array는 true이지만 array.length는 값이 0 이기 때문에 비교연산자에서 false를 반환한다!
따라서 빈 배열로 인한 map TypeError는 length를 활용하여 해결하자.
해당 코드를 확인하면 meetingList가 빈 배열일때 meetingList.length는 0이므로 false이기에 논리 연산자 (&&)의 조건(모두 true)에 성립하지 않는다. 따라서 map 함수가 실행되지 않기에 TypeError는 발생하지 않는다.
만약 meetingList가 빈배열이 아니고 값이 1개라도 존재한다면, meetingList.length는 최소 1이 되기 때문에 true값을 가져서 map함수가 실행될 것이다. 배열이 빈배열이 아니기 때문에 map TypeError도 발생하지 않는다.
참고
Array.map is not a function 에러
왜 텅 빈 Array는 true인가
Bard: Chrome console에서 빈배열이 false인 이유
프로젝트의 페이지중 하나인 게시글 작성 페이지에서 ‘소개글 작성’이라는 textarea 입력란이 존재한다. 해당 입력란에서는 placeholder가 사용되는데, 이때 작성하는 내용이 길기 때문에 줄바꿈이 꼭! 필요한 상황이었다.
그래서 “\n”이나 “br”태그 등을 삽입했으나 줄바꿈이 되지 않았다…
그래서 찾고 찾다가 발견한 방법. 유니코드를 삽입하여 줄을 바꾸는 것이었다.
유니코드로 줄바꿈을 해본적이 없어서 생소했으나, 친절히 어떻게 하면 줄바꿈이 되는지 작성되어있었다.
유니코드로 줄바꿈
유니코드로 줄바꿈하는 방법은 매우 간단하다. 줄을 바꾸고 싶은 곳에 을 적어주면 된다.
그럼 아래 그림과 같이 이쁘게 줄바꿈이 적용되는 것을 볼 수 있다.
은 무슨 의미?
해당 유니코드의 의미는 다음과 같다.
-
제일 처음 칸으로
-
다음줄로 이동
-> : 다음 줄 제일 처음칸으로 이동
위와 같은 의미를 갖기 때문에 줄바꿈이 정상적으로 작동될 수 있다.
참고
HTML: placeholder 에서 줄바꿈하기 placeholder line break character
ASCII 코드 값 10 , 13
HTML 특수문자 리스트