커뮤니티프로젝트 - npm과 yarn의 차이, package-lock.json의 필요성

TODO:

1) CSS

- 반응형: 화면크기 줄어들면 오른쪽 컬럼 밑으로 내려감->해결할 것

- 오른쪽 컬럼 로그인 했을 때 

- CSS고치기: LINK 파랑색글, 밑줄 없애기, 오른쪽 컬럼 아이콘 크기 조정, HOT게시판 조정

 

2) 백엔드

- 글쓰기 작성완료 했을 때, FIREBASE에 DATA저장시키기

 

3) 프론트엔드

- 작성된 글 눌렀을 때, 상세페이지로

- 글 작성하기 눌렀을 때 EDITOR 화면 

 

TODAY:

- 반응형: 화면크기 줄어들면 오른쪽 컬럼 밑으로 내려감->해결할 것

- CSS고치기: LINK 파랑색글, 밑줄 없애기, HOT게시판 조정

 

를 하려고 했으나, error를 한가득 만났다.

 

1. 반응형: 화면크기 줄어들면 오른쪽 컬럼 밑으로 내려감->해결할 것

네이버처럼 창 크기가 달라져도 스크롤바만 생기고 요소들은 제자리에 있도록 하고 싶었는데, 오른쪽 컬럼이 계속 밑으로 내려간다. 

해결방안으로 전체를 감싸고 width와 margin좌우 auto를 주라고 했지만, 실패

왼쪽 오른쪽 컬럼에 사이즈를 지정했으므로, 이것이 문제는 아니고

왼쪽 오른쪽 컬럼에 모두 있던 float style을 삭제했음에도 해결되지 않았다.

overflow:hidden를 삭제하니 그나마 작동되지 않던 가로 스크롤이 작동됐지만, 일정크기로 줄어들면 여전히 오른쪽컬럼이 밑으로 내려갔다. 

 

2. CSS고치기: LINK 파랑색글, 밑줄 없애기 

a 태그에 color과 text-decoration을 지우려고 했지만 reboot.scss가 우선적용돼서, 내 css가 무시되는 문제가 발생했다.

reboot.scss는 bootstrap module에 있는 파일이다. 

그래서 bootstrap module에 있는 reboot.scss에서 a태그와 관련한 내용을 지우고 patch-package를 실행하려고 했다.

여기서 오류가 발생했다.

Error: EBUSY: resource busy or locked, rmdir 'C:\Users\user\AppData\Local\Temp\tmp-13996NsbS06spA8Cq'

시도한 방법은

1) vscode 닫고 cmd에서 시도했지만 실패

2) cache 삭제해도 실패

3) C:\Users\user\AppData\Local\Temp경로로 들어가 tmp로 시작되는 파일을 삭제했지만 뒤의 넘버가 바뀌면서 계속 같은 오류가 발생했다.

4) package.lock.json이랑 yarn.lock이 둘다 있다는 메세지가 떠서, package.lock.json을 삭제했다. 그래도 실패

5) npm install을 이용해서 node modules를 설치했는데, package를 추가로 설치할 때에는 yarn add를 이용했기 때문에 둘이 충돌하는건가 해서 node modules삭제하고, yarn install로 node modules다시 설치했지만 여전히 실패다.\

 

우선 내일은 나머지 todo를 해결하고 오늘 해결하지 못한 오류들은 화요일이나 수요일에 다시 시도해보아야겠다.

 

오늘 배운 것:

1. yarn과 npm의 차이

yarn과 npm은 패키지를 관리해주는 매니저, npm이 먼저 나오고 yarn은 npm을 개선하기 위해 나온 패키지 매니저이다.

package 설치 시 yarn은 중복된 데이터를 다운로드하지 않아서 가볍고, 다운로드 속도도 빠르다는 것이 장점이지만, npm도 업데이트가 되고 현재는 그 차이가 근소하다고 한다. npm이 원조이기 때문에 자료가 많은 것이 npm의 장점이 될 수 있다. 개발자가 편리한 관리자를 택하면 되지만, 주의할 점은 yarn과 npm은 혼용해서 사용하지 않는 것이 좋다.

 

참고자료

https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-npm%EA%B3%BC-yarn

[개발상식] npm과 yarn

 

2. package-lock.json의 필요성

package-lock.json은 협업을 위해서 필요하다. 각자의 개발 환경에서 npm install을 했을 때 package 버전이 다다른 node moudles가 설치될 수 있다. 그러면 누군가의 개발환경에서는 잘 작동하던 것이 다른 누군가의 개발환경에서는 오류가 날 수 있는 것이다. 이것을 막기 위해 package-lock.json파일이 존재하는 것이고, package-lock.json를 통해 node modules를 설치하면 package-lock.json에 기재된 특정 버전으로 설치가 될 수 있다. 따라서 협업할 때는 package-lock.json도 함께 커밋해야 한다.

그럼 왜 package.json에 특정 버전을 기재하지 않고, 굳이 범위로 저장해서 package.lock과 나눠두는 것일까

특정 버전으로 기재한다면, package 버전이 업데이트 될 때마다 package.json을 수정해줘야하기 때문이다. 많은 패키지를 일일이 체크할 수 없기 때문에, 범위로 저장함으로써 그 수고를 덜 수 있다.

 

참고자료

https://junwoo45.github.io/2019-10-02-package-lock/