한 줄 요약: Node를 설치할 때 LTS 버전을 권장하는 이유를 알았다 ^^^! prettier 설치 이후에 svelte 파일만 적용이 안되는 현상이 일어났다. 찾아보니 공식 문서나 git, 구글링 등에서 세팅하는 방법이 다 달랐다. 그리고 svlete 자체가 정보가 많이 없었고, webstorm이나 패키지 자체에서 해결되지 않은 이슈들도 꽤 있어 보였다. 모든 방법 다 해봐도 안돼서 포기하려던 찰나에 무언가를 발견했다. prettier-plugin-svelte의 설치 버전은 2.10.0인데, 해당 패키지 Git Repository에서의 태그는 2.7까지밖에 안나왔었다. 또한 prettier 버전은 3이었는데, last week에 출시된 버전이길래 안전하게 2 버전대로 다운그레이드하였다. 이전 버전들로..

모든 컴포넌트는 라이프사이클(= 생명주기) method를 가지고 있다. 이를 활용해 특정 시점에 코드가 실행되도록 작성할 수 있다. 라이프사이클은 크게 마운트(mount), 업데이트(update), 언마운트(unmount) 3가지로 나뉘며 각각 하위에 method들을 지닌다. 마운트 컴포넌트의 인스턴스가 생성되어 DOM에 삽입되는 시점을 Mount(마운트)라고 한다. 아래의 메서드들이 순서대로 호출된다. componentWillMount()는 리액트 공식문서에서 더 이상 권장하지 않는다. (2018년 기준) - constructor(props) React 컴포넌트의 생성자로, 마운트되기 전에 호출된다. 가장 먼저 실행되는 메서드이다. super(props)를 우선적으로 호출해야 한다. 그렇지 않으면 th..

안녕와 같이 HTML 텍스트를 그대로 렌더링 하기 위해선 dangerouslySetInnerHTML를 사용할 수 있다. dangerouslySetInnerHTML란? HTML 텍스트를 동적으로 렌더링할 수 있는 리액트의 속성이다. 리액트 컴포넌트에 직접적으로 HTML 코드를 삽입할 수 있다. __html이라는 key를 가지고 있으며, 이를 통해 렌더링 할 HTML 코드를 문자열 형식으로 전달한다. 사용법 import React from 'react'; function Component(){ const markup = { __html: "contains HTML!!" }; return ; } 주의점 이름에서도 dangerous라고 나타나듯이, 위험하게 설정된 HTML을 뜻한다. XSS(Cross-site ..

javascript:void(0)에서 javascript: 와 void(0)로 나눌 수 있다. 각각의 부분에 대해 알아보자. 링크 javascript: 태그의 href 값으로 javascript:를 받을 때, 이는 경로로 취급하지 않고 쌍점(:) 뒤에 오는 것을 자바스크립트 코드로 해석한다. 주로 href에는 경로를 넣기 때문에, 클릭 시 페이지 이동이 일어난다. 하지만 이 경우에는 이동이 일어나지 않는다. 링크 '링크'를 누르면 콘솔 창에 '클릭'이 출력된다. void(0) void는 아무것도 반환하지 않는 것을 말한다. 함수에서도 void는 아무런 결괏값도 반환하지 않는 것으로. 호출 시 undefined를 반환한다. const sum = void(5+5); console.log(sum); // un..

HTML에서 태그는 또는 영역에 넣을 수 있다. 그 차이를 알아보고 어떤 상황일 때 어디에 넣어야 할지를 알아보겠다. script 태그는 1. 다운로드(fetching) 2. 실행(executing)의 두 과정을 거친다. HTML은 구문 분석을 하는 파싱을 하다가, script 태그를 만나면 파싱을 멈추고 script 태그를 다운로드하여 실행한다. 파일의 크기가 클 경우, 로드하는 과정이 오래 걸릴 수 있다. head 태그에 script 태그가 들어간 경우, HTML 파싱이 완료되기 전에 scipt 태그를 실행한다. 따라서 DOM 요소를 조작해야 한다면, 해당 시점에서 존재하지 않는 DOM 요소에 접근하는 문제가 발생할 수 있다. 태그가 파싱되기 전이기에 js 파일이 null을 가지고 작업한다. 이에 따..

클래스형 컴포넌트를 다루면서 이벤트 핸들러에 함수를 등록하는 과정에서 this를 제대로 불러오지 못했다. 어떻게 작성하는지에 따라 this 값이 달라지는 것이었다. this는 호출자에 의해 동적으로 결정된다. 따라서 this를 바인딩하여 원하는 값으로 불러올 수 있는 4가지의 방법들을 살펴보겠다. 1. bind() 메서드 this.이벤트명 = this.이벤트명.bind(this); 사용자가 만든 일반 함수를 bind 메서드를 통해 this로 사용할 객체를 전달하는 것이다. bind 메서드는 새롭게 this 값이 교체된 함수를 반환한다. 함수를 반환할 뿐이지 호출하지는 않기 때문에 apply, call 메서드와 다르게 이후에 직접 실행해야 한다. 위의 코드는 constructor() 또는 render()에..

this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 식별자이다. 바인딩이란 바인딩이란 식별자와 값을 연결하는 과정 동적으로 결정되는 this this는 호출하는 주체에 따라서 달라진다. console.log(this); // (1) window const a = { name: "realzu", getName() { console.log(this); } } a.getName(); // (2) { name: 'realzu', getName: ƒ getName() } const b = a.getName; b(); // (3) window (1)의 경우, 전역이기 때문에 전역 객체 window를 가리킨다. (2)의 경우, 호출한 객체인 a를 가리킨다. 이는 메서드 호출이라고도 부른다. ..

npm 패키지는 상황에 따라 -g 옵션을 작성해 준다. 프로젝트별 패키지는 전역 설치할 필요가 없지만, npm 자체를 설치하는 등의 패키지는 -g 옵션을 필수적으로 입력해야 한다. 설치 및 버전 변경 패키지 설치 시 @뒤에 숫자를 입력해 주면, 해당 버전으로 지정해서 설치할 수 있다. npm install npm@7 -g 위는 7 버전의 npm을 설치하기 위한 명령어이다. npm -v 이후 해당 버전을 확인함으로써 설치가 완료되는 것을 알 수 있다. -g (전역 설치) -g란 global, 즉 전역적으로 설치되는 옵션이다. NPM을 전역 설치한다는 것은 어떤 말일까? 시스템 레벨에서 사용하는 라이브러리라는 것이다. 모든 프로젝트가 공통적으로 사용해야 하는 패키지의 경우, 전역 설치를 해야 한다. npm ..

새로 나온 리액트의 공식문서에서 따르면, 이제 리액트 프로젝트를 생성할 때 CRA의 사용을 지양한다. 따라서 next.js 또는 Remix, Gatsby와 같은 프레임워크와 함께 만들거나 Vite로 만들 것을 권장한다. 프로젝트 생성 npm create vite@latest yarn create vite npm 또는 yarn 중에서 선택해서 입력한다. 터미널에서 위의 명령어를 실행하면, 설정할 프로젝트 네임을 입력할 수 있다. 프레임워크 선택 React, Vue, Svelte 등 사용할 프레임워크를 선택한다. 언어 선택 타입스크립트 or 자바스크립트 선택 가능하며 SWC 빌드 툴도 선택할 수 있다. 생성 완료 생성이 완료되었다. npm install을 하면 node_modules 파일이 생긴다. npm..