치춘짱베리굿나이스

DOM Element replace 함수들 Element.replaceWith oldNode.replaceWith(newNode); oldNode.replaceWith(newNode1, newNode2, ...); 현재 노드를 인자로 들어온 노드 (또는 노드 여러 개) 로 교체한다 반환값은 없다 { /* 이전 노드 */ } { /* 변경된 노드 1 */ } { /* 변경된 노드 2 */ } 해당 위치가 인자로 들어온 노드들로 한번에 대체된다 Node.replaceChild parentNode.replaceChild(oldChild, newChild); 노드의 자식 노드 oldChild를 newChild으로 교체한다 다음과 같은 상황 등에서 오류 (예외) 가 발생한다 만약 oldChild 또는 newChi..

문제 .js 또는 .jsx 파일을 .tsx 파일로 변환하다가 마주한 오류 JSX 문법을 사용한 부분에 빨간 줄이 좍좍좍 쳐지면서 저 오류가 난다 원인 타입스크립트에서 JSX 문법을 사용하기 위해선 tsconfig.json에 jsx 옵션을 활성화해 주어야 한다 preserve: 타입스크립트 컴파일 시 .jsx 그대로 내보낸다 react-native: 타입스크립트 컴파일 시 내부 문법은 그대로 유지한 채 .js 파일로 내보낸다 (리액트 네이티브 용) react: 타입스크립트 컴파일 시 JSX 문법을 전부 React.createElement 호출로 변환하고, .js 파일로 내보낸다 react-jsx, react-jsxdev: 타입스크립트 컴파일 시 JSX 문법을 전부 _jsx 호출로 변환하고, .js 파일로 ..

React 서론 리액트 써도 좀 알고 쓰자!!! 의 일환이다 리액트로 토이 프로젝트 몇번 해 보면서 진지하게 리액트의 원리와 동작 과정에 관해 고찰해본 적이 몇 번이나 되는가? 나는… 없는 듯 하다… 가상 돔을 만들어서 어쩌구….. 이것밖에 모른다 (부끄) 리액트 쓰는 거 좋고 리액트로 프로젝트 다 좋지만 기왕 쓰는거 지피지기면 백전백승이라는데 한번 알아보고 넘어가자 리액트 카테고리에 글을 이렇게 많이 적어놓고 이제 와서 리액트의 동작을 처음 알아보는 것도 개그 포인트이다 (하하하) 리액트 소개 리액트가 뭔가요 싱글 페이지 애플리케이션을 제작하는 데에 초점이 맞춰져 있는 자바스크립트 라이브러리이다 Vue도 프레임워크고 Angular도 프레임워크고 Svelte도.. 그래서 리액트도 프레임워크일 것 같은 느..

CRA 없이 타입스크립트 환경설정 Typescript + Yarn으로 프로젝트 초기화 Typescript + Yarn으로 프로젝트 초기화 프로젝트 초기화 및 환경설정 공식적인 내생각 간단하게 토이 프로젝트를 하나 시작하면서 프로젝트 초기화를 했기 때문에 이를 기록 차원에서 적어본다 또 이상한데서 삽질을 했기 때문… (타 blog.chichoon.com 여기서 이미 타입스크립트 환경설정을 해봤지만 CRA를 썼었다 이번엔 CRA 없이 환경설정을 해보자 create-react-app이 편하긴 하다… 뭐 백엔드는 리액트를 안 쓰니까 설정을 손수 해야 하긴 하지만 말이다 설치와 초기화 npm 초기화 $> npm init package.json을 추가해주자 타입스크립트 설치 $> npm i -D typescript..

웹팩과 웹팩 설정하기 웹팩 공식 홈페이지 webpack webpack 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다. webpack.kr 웹팩이란? 공홈페이지에서부터 “~~를 번들해 보세요" 라는 캐치프레이즈가 대문짝만하게 출력되는 것에서도 알 수 있듯, 웹팩은 ‘모듈 번들러' 이다 캐치프레이즈가 한 3~5초 간격으로 바뀌는데, {이미지 | 애셋 | 스크립트 | 스타일 …} 을 번들해 보세요 예시 중 하나로 계속 슬라이딩되는 것으로 보아 프로젝트 내의 이미지, 애셋, 스크립트, 스타일도 번들이 가능한 ‘모듈' 이라고 할 수 있음을 예측가능하다 앞서 적었듯 모듈 번들러는 모..

Commander 설치 $> npm i commander $> yarn i commander npm 링크 commander commander the complete solution for node.js command-line programs. Latest version: 9.4.0, last published: 18 days ago. Start using commander in your project by running `npm i commander`. There are 65445 other projects in the npm registry using commander. www.npmjs.com yarn 링크 Contributors https://yarnpkg.com/package/commander F..

useClickOutside 모달을 라이브러리를 쓰지 않고 직접 구현하면서 (react-portal을 사용하였다) 모달 바깥을 클릭했을 때 모달이 닫히도록 구현을 하고 싶었다 유용한 훅을 많이 포함하고 있는 패키지인 react-use를 설치하여 useClickAway 훅을 이용하면 한번에 해결되겠지만, 지금 프로젝트에서 react-use가 설치되어 있지 않기도 했고 (이거 하나 때문에 설치하기도 애매하고) 생각보다 구현이 어렵지 않아 훅을 직접 제작해 보았다 코드 import { useEffect, useRef } from 'react'; const useClickOutside = onClicKOutside => { const ref = useRef(null); const handleClickOutsid..

프로젝트 초기화 및 환경설정 공식적인 내생각 간단하게 토이 프로젝트를 하나 시작하면서 프로젝트 초기화를 했기 때문에 이를 기록 차원에서 적어본다 또 이상한데서 삽질을 했기 때문… (타입스크립트 플래그를 잘못 적어서 자바스크립트 버전으로 초기화됐다) 다음에는 안하길 빈다 1. 프로젝트 생성 create-react-app을 통한 프로젝트 생성 $> yarn create react-app jiychoi-standard-time --template typescript 레포지토리 이름이 파스칼케이스라 디렉토리 이름을 .으로 설정하니 프로젝트명 규칙에 위반되어 (대문자를 포함하면 안된다고 한다) 제대로 프로젝트 생성이 되지 않았다 별개의 프로젝트를 생성 후 디렉토리만 옮겨주었다 2. 타입스크립트, 린터 설치 typ..