forestin_s2.log

package-lock.json 충돌 원인과 해결 방법

Sun, 10 Apr 2022 15:26:50 GMT

✅ package-lock.json은 무엇일까?

package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json.

npm 공식 문서에는 위와 같이 나와있다. 즉, node-modules 트리나 package.json 수정될 때, 자동적으로 생성되는 것이다.

⁉ package-lock.json의 충돌 원인

위에서 제시된 것에서 알 수 있듯 크게 1) package.json의 내용이 다르거나 2) package.json은 같아도 node-modules가 다른 경우이다.

이를 이해하기 위해 package-lock.json이 생성되는 시점인 npm install의 과정을 알아보자.

"npm install" -> package.json을 바탕으로 node-modules 폴더 생성 및 패키지 설치 -> node-modules 폴더의 정보를 package-lock.json에 담기

2) package.json은 같아도 node-modules가 다른 경우는 크게 3가지가 있다.

① npm 버전이 다른 경우 ② 의존성을 가진 패키지의 버전이 업그레이드 되는 경우 ③ 의존성을 가진 패키지가 의존하는 패키지의 버전이 업그레이드 되는 경우

👍🏻해결 방법

package.json을 수정해서 npm install로 해결
--package-lock-only 옵션으로 해결
npm-merge-driver 툴로 해결

!!! 협업을 하기 전, npm 버전을 미리 통일하자 !!!

❗ 주의할 점

package-lock.json은 형상관리에 포함시켜야 한다.

충돌을 방지하기 위해 이 파일을 git ignore하면 되지 않을까 생각했다. 하지만,

이 파일은 팀에게 정확한 디펜던시 버전을 알려주고, 중복된 라이브러리를 검사해주는 등의 역할을 하기 때문에 올려야 한다.

package-lock.json을 삭제하지 말자..

충돌을 해결하기 위해 이를 삭제하고, 다시 npm install을 하는 방식을 활용했었다. 하지만 이는 디펜던시 트리의 일부분을 의도치 않게 바꿀 수 있기 때문에 삭제하는 방식보다는 위에서 제시한 해결 방법을 활용해야 한다.

JavaScript로 그림판 만들기

Wed, 01 Sep 2021 04:35:51 GMT

*본 포스트는 노마드코더 강의를 보고 정리하는 글입니다.

canvas API로 그림판을 만들었어요!

Canvas API는 JavaScript와 HTML < canvas > 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다.
-MDN

1. Html

먼저 html은 위와 같이 작성했습니다. canvas 태그는 그림을 그리기 위한 판을 만든 것입니다. controls라는 영역 안에는 펜의 굵기(controls_range), 드로잉 방식과 저장 버튼(controls_btns), 색상(controls_colors)이 있어요.

펜의 굵기를 조절할 때는 input의 속성값으로 type="range"를 했습니다. min, max, value(기본값), step(얼만큼씩 움직일지)을 설정해 줍니다.

2. vanillaJS

다음은 자바스크립트로 어떻게 구현했는지 알아볼까요? 총 9개의 함수를 만들어서 구현했습니다.

1) stopPainting(), startPainting()

  //1. 그림 그리기를 멈추는 기능
function stopPainting() {
    painting = false;
}

//2. 그림 그리기를 하는 기능
function startPainting() {
    painting = true;
}

  canvas.addEventListener("mousedown", startPainting);
  canvas.addEventListener("mouseup", stopPainting);
  canvas.addEventListener("mouseleave", stopPainting);

캔버스는 document.getElementById 를 통해 canvas 변수명에 할당했습니다. 캔버스를 클릭할 때, 그림 그리기를 시작하고, 손을 떼면 멈추도록 구현했습니다. 또, 캔버스 밖으로 마우스가 나가면 그림 그리기를 멈추도록 했습니다.

2) onMouseMove()

const ctx = canvas.getContext("2d");

//3. 마우스를 움직일 때, x,y좌표를 읽고 선을 그리는 기능
function onMouseMove(event) {
    const x = event.offsetX; //event 안에는 offset X,Y좌표를 가져올 수 있음
    const y = event.offsetY;
    if(!painting){
        ctx.beginPath();
        ctx.moveTo(x, y);
    } else {
        ctx.lineTo(x, y);
        ctx.stroke();
    }
}

canvas.addEventListener("mousemove", onMouseMove);

마우스를 움직일 때, 선을 그리는 기능입니다.

const ctx = canvas.getContext("2d"); 이 코드에 관한 아래 설명을 확인해 주세요!

< canvas > 요소는 getContext() 메서드를 이용해서, 랜더링 컨텍스트와 (렌더링 컨텍스트의) 그리기 함수들을 사용할 수 있습니다. getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라메터를 가집니다.
-MDN

그림을 그리기 위한 기본 설정인데, 우리는 기본적인 선을 그릴 것이기 때문에 "2d"로 파라메터를 지정해 줍니다.

beginPath() 새로운 경로를 만듭니다. 경로가 생성됬다면, 이후 그리기 명령들은 경로를 구성하고 만드는데 사용하게 됩니다.
moveTo(x, y) 펜을 x와 y 로 지정된 좌표로 옮깁니다
lineTo(x, y) 현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그립니다.
stroke() 윤곽선을 이용하여 도형을 그립니다.
-MDN

각 메소드에 대한 설명입니다!

이 함수의 과정을 설명해 보자면,

먼저 마우스의 X, Y좌표를 가져옵니다. 그림을 그리지 않는 상태일 때(!painting), 펜의 새로운 경로를 만들고, 마우스가 움직이는대로 펜의 X, Y좌표를 옮겨줍니다. (마우스를 클릭하는 순간 그 위치부터 그림을 그려야 하기 때문입니다.) 그림을 그리는 상태일 때(painting), 지정된 위치까지 선을 만들고, 그림을 그립니다. (stroke()이 없으면 그림이 안그려집니다!)

마우스가 움직일 때, 이 기능을 사용해야 합니다. 따라서 ** canvas.addEventListener("mousemove", onMouseMove);** 로 구현했습니다.

3) handleColorClick()

색상을 정하는 기능입니다.

  const colors = document.getElementsByClassName("jsColor");

function handleColorClick(event) {
    const color = event.target.style.backgroundColor;
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
}

  Array.from(colors).forEach(color => color.addEventListener("click", handleColorClick));

색상은 여러가지가 있었죠. 이들을 배열로 묶어줍니다. forEach를 통해 배열에 있는 요소 하나하나에 접근해서 click이 되는 요소로 색상을 바꿔주는 과정입니다. ** ctx.strokeStyle = color; ctx.fillStyle = color;**

이 코드가 색상을 지정하는 코드입니다.

4) handleRange()

function handleRange(event) {
    ctx.lineWidth = event.target.value;
}

if(range) {
    range.addEventListener("input", handleRange);
}

펜의 굵기를 조절하는 코드입니다. ** ctx.lineWidth = event.target.value;** 를 통해 펜의 굵기를 설정했습니다.

5) handleModeClick(), handleCanvasClick()

// 6. 버튼 클릭하면 텍스트 변경되는 기능
 function handleModeClick(event) {
    if(filling) {
        filling = false;
        mode.innerText = "Fill"
    } else {
        filling = true;
        mode.innerText = "Paint"
    }
}

 //7. 캔버스 클릭하면 색 채워지는 기능 
  function handleCanvasClick() {
    if(filling) {
        ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
    }
}

이 기능은 캔버스 위에 그림을 그릴 것이냐, 클릭하면 전체가 칠해지도록 할 것이냐를 고르는 기능입니다.

버튼을 클릭하면 text가 변경되는 코드입니다. innerText로 구현할 수 있습니다.

** ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);**

캔버스의 크기만큼 채워진 직사각형을 만들겠다는 의미입니다. 즉, 캔버스 전체를 칠하는 것이죠.

6) handleCM(), handleSaveClick()

function handleCM(event) {
    event.preventDefault();
}

function handleSaveClick() {
    const image = canvas.toDataURL("image/jpeg");
    const link = document.createElement("a");
    link.href = image;
    link.download = "paintJS[EXPORT]";
    link.click();
}

  canvas.addEventListener("contextmenu", handleCM);

마지막을 jpg 파일로 저장하는 코드입니다. contextmenu를 클릭하면, 즉, 우클릭을 막아줍니다. handleCM()이 그 코드입니다! 우리는 저장 버튼을 클릭해서 저장하게 할 것이기 때문에 우클릭을 방지합니다.

handleSaveClick()이 함수가 jpg로 저장하는 코드입니다. 임의의 링크를 만들고, download 속성을 추가하면 다운이 가능합니다! 다운로드 속성에는 "저장될 파일명"을 정해줍니다.

이렇게 하면 완성입니다! canvas API를 살펴보고, 도형을 만드는 기능, 텍스트 박스를 추가하는 기능 등을 추가해보면 더 좋을 것 같아요!! 더 많은 기능이 있으니 꼭 한 번 찾아보시는 걸 추천드려요😉

포스트는 여기까지 하고, 전체 코드 올려두고 가겠습니다~

*본 포스트는 노마드코더 강의를 보고 정리하는 글입니다.

JavaScript로 Todo List 만들기

Fri, 06 Aug 2021 12:02:45 GMT

1. 프로젝트의 기능

1) 해야할 공부를 입력하고 enter누르면 리스트에 추가

input에 할 일 입력하기 -> enter키 누르면 -> ouput 리스트에 태그 추가

2) 완료한 공부를 리스트에서 삭제하기 위해서 복습 질문에 답하기

화살표를 클릭하면 -> 복습.html로 이동 -> localStorage에서 삭제

3) 야간모드

달 아이콘을 클릭하면 -> body의 클래스 day, night toggle -> if 클래스 === night => html 요소를 야간 모드로 전환

아래 내용은 코드 구현에 대한 것입니다!

2. strict mode

(function () {

'use strict';

...코드 생략(스크립트 전체)

}());

먼저 스크립트에 strict mode를 설정했습니다. strict mode는 자바스크립트의 문법을 좀 더 엄격하게 검사하여 잠재적인 오류 발생을 줄이기 위한 목적으로 ES5부터 추가된 기능입니다.

strict mode는 스크립트 단위로 실행됩니다. 엄격 모드가 있는 것과 없는 것이 혼용되면 오류가 발생할 수 있습니다. 따라서 위 코드와 같이 즉시 실행 함수로 스크립트를 감싸고, 선두에 적용하는 것이 좋습니다.

3. localStorage

투두리스트를 만들고, 새로고침을 하면 계속해서 초기화되는 문제가 있었습니다. 웹 브라우저에는 이 문제를 해결할 수 있는 localStorage가 존재하는데요.

개발자 도구에 application에 들어가보면 위와 같은 저장소를 확인할 수 있습니다. 이 저장소를 활용해서 투두리스트가 초기화되는 것을 막을 거예요.

let inputLocal = localStorage.getItem('items')?JSON.parse(localStorage.getItem('items')):[];
localStorage.setItem('items', JSON.stringify(inputLocal));
let item = JSON.parse(localStorage.getItem('items'));

위 코드는 items라는 공간을 할당하는 것입니다.

setItem('A', B): A라는 공간에 B를 저장.

getItem('A'): A공간에 있는 것을 읽음.

첫번째 줄은 items에 아무것도 없으면 [], 있으면 그것을 inputLocal에 할당하겠다는 의미입니다.

4. Create

document.querySelector(".studyList").addEventListener("submit", Create);

위 코드는 input에 값을 입력하고, enter키를 누르면 추가되는 것을 구현한 것입니다. Create은 직접 구현한 함수이고, 아래의 코드를 참고해 주세요! document에서 studyList라는 클래스를 가져옵니다. 이 클래스는 input을 감싸고 있는 form을 의미합니다.

if(input!="") {
    inputLocal.push(input);
    localStorage.setItem('items', JSON.stringify(inputLocal));
    item = JSON.parse(localStorage.getItem('items'));
    document.querySelector(".input").value = "";
  }

input에 입력된 것이 있으면 push를 통해 localStorage에 값을 추가합니다.

5. Read

var list = "";
  for(var i=0; i"+"→"+"";
  }
  document.querySelector(".output").innerHTML=list;

위 코드는 화면에 보여주는 것에 대한 코드입니다. 저장소에서 가져온 요소들을 innerHTML을 통해 추가해줍니다.

innerText가 아닌 innerHTML을 사용하는 이유 우리는 output이라는 영역에 li와 span 태그를 추가하고 싶은 것이죠. 만약, innerText를 사용하면 li와 span이 태그 형태가 아니라 문자열 형태로 추가가 됩니다. span -> /span 이런 식으로요! 따라서 innerHTML을 사용해서 태그를 추가합니다.

innerHTML의 단점 크게 3가지 단점이 있습니다. 1) 공격에 취약하다는 점, 2) 요소 노드의 모든 자식 노드를 제거하고, 새롭게 변경된다는 점, 3) 새로운 요소를 삽입할 때, 위치를 지정할 수 없다는 점입니다.
이 프로젝트의 경우, localStorage를 활용하여 리스트 형태로 값을 저장하고, 리스트의 인덱스에 접근하여 화면에 보여주는 방식이기 때문에 2번과 3번으로 인한 문제는 없습니다. 따라서 innerHTML을 사용합니다.

6. Delete

삭제할 때는 localStorage와 매치시켜서 지워줍니다. 삭제가 되기 전에 복습 페이지로 넘어가야 하기 때문에 그 부분을 먼저 실행하고, 지우는 부분을 구현했습니다. 아래 코드 참고해주세요!

function Delete() {
  NextPage();
  var i = this.getAttribute("id");
  item.splice(i,1);
  inputLocal = item;
  localStorage.setItem('items', JSON.stringify(inputLocal));
  Read()
}

NextPage() 함수가 다음 페이지로 넘어가는 함수입니다. 이 부분은 복습 페이지를 다른 html 파일로 만들고, 연결했습니다.

function NextPage() {
  location.href = "page/question.html";
}

위 코드가 복습 페이지로 이동할 수 있는 코드입니다.

location.href: html 파일 이동

다시 Delete 함수를 봅시다. 변수 i는 id라는 속성의 값을 저장하는 공간입니다. 즉, 몇 번째 리스트의 화살표인지를 확인하는 것입니다. splice를 통해 i에 할당된 인덱스 값에서부터 1개를 삭제하겠다는 것입니다. 선택된 항목이 삭제됩니다. 저장소에도 삭제된 것을 적용하기 위해 setItem으로 다시 설정해줍니다.

7. 야간모드

야간모드도 새로고침이 되면 초기화되는 문제가 있었습니다. 또, 복습 페이지에도 같은 모드를 적용해야 하는데, 이러한 문제를 해결하기 위해서 한 번더 저장소를 이용했습니다.

function NightAndDay() {
  document.querySelector("body").classList.toggle("night");
  let classLocal = localStorage.getItem('modes')?JSON.parse(localStorage.getItem('modes')):"";
  classLocal=document.querySelector("body").classList.value;
  localStorage.setItem('modes', JSON.stringify(classLocal));
  LocalMode();
}

document.querySelector(".Night").addEventListener("click", NightAndDay);

마지막 줄은 달 아이콘을 클릭하면 NightAndDay 함수가 실행되는 코드입니다. 야간모드를 구현할 때는 toggle을 사용했습니다. toggle은 클래스를 번갈아 실행하는 것입니다. 함께 알아두면 좋은 것들을 아래에서 확인해 주세요!

document.querySelector("body").classList.add(클래스명) : 클래스를 추가 ex) "day" → "day night" (night이라는 클래스를 추가한다고 가정)

document.querySelector("body").classList.remove(클래스명) : 클래스를 제거 ex) "day night" → "day"
document.querySelector("body").classList.toggle(클래스명) : 클래스를 번갈아 ex)"day night" → "day" → "day night" → ...

이렇게 클래스명을 변화시킨 후, 이 클래스명을 저장소에 저장해 둡니다. 복습 페이지에서는 이 mode를 참고해서 야간모드로 바꿉니다. 복습이 끝나고 다시 메인 페이지로 돌아왔을 때도 똑같이 mode가 적용되어야 겠죠? LocalMode() 가 그 내용을 담고 있습니다.

function LocalMode() {
  let BodyClassName = JSON.parse(localStorage.getItem('modes'));
  if(BodyClassName === "day night") {
    document.querySelector(".dayTitle").classList.add("nightTitle");
    document.querySelector(".day").classList.add("night");
    document.querySelector(".output").classList.add("output-night");
    document.querySelector(".Night").classList.add("Day");
    document.querySelector(".input").classList.add("inputNight");
  } else {
    document.querySelector(".dayTitle").classList.remove("nightTitle");
    document.querySelector(".day").classList.remove("night");
    document.querySelector(".output").classList.remove("output-night");
    document.querySelector(".Night").classList.remove("Day");
    document.querySelector(".input").classList.remove("inputNight");
  }
}

위 코드는 야간 모드로 스타일을 변화시키는 것입니다. add해서 스타일을 변경하고, 야간 모드가 풀리면 remove해서 원래 기본값인 day 모드로 변경합니다.

위 이미지는 메인화면 코드입니다. 위 이미지는 복습 페이지의 코드입니다.

*모던 자바스크립트 Deep Dive 책을 참고하여 작성했습니다.