자바스크립트 ES6+: 모듈(module) 기능을 이용하여 리액트의 hook 흉내내기 (reactify)

예전에 어느 프론트엔드 과제 테스트에서 아래와 같은 요구사항을 제시한 적이 있습니다.   요약하면 ‘순수 자바스크립트로 리액트와 유사한 구조의 웹 페이지를 만들어봐라‘ 이런 뜻인데요, 준비가 되어 있지 않은 상태에서 이런 요구사항을 접하면 많이 난감할 것이라고 생각됩니다. 문제에서 컴포넌트를 제작할 때 function, class 둘 중 하나를 택하라 했는데 여기서는 function을 선택해서 간단한 더보기…

리액트(React): useState (함수형 컴포넌트에서 변수 관리)

리액트에서 function 기반 컴포넌트(hook)는 한 번 렌더링되고 끝나는 것이 아닙니다. 리액트의 컴포넌트는 실시간으로 끊임없이 렌더링되며 여기서 일반 변수 등을 사용하면 컴퓨터의 자원 낭비와 성능 저하를 불러올 수 있습니다. 리액트의 함수 컴포넌트 체제에서 변수 등의 상태들을 관리할 수 있는 방법이 여러 가지 있는데 useState는 상태 관리의 아주 기초적인 형태입니다. 통상적인 변수 더보기…

자바스크립트 ES6+: 동적으로 모듈 임포트(import) 하기

자바스크립트 ES6+ 문법에는 import 가 있습니다. 예를 들어 import func from ‘./func.js’ 이런 식입니다. 위의 예제를 정적 import라고 합니다. 정적 임포트에는 단점이 있는데 1) 임포트 구문에 변수 사용이 불가능하다는 점과, 2) if 문등의 분기점에서 사용할 수 없다는 단점이 있습니다. 이러한 정적 임포트의 단점을 해결할 수 있는 것이 동적 임포트(dynamic module 더보기…

자바스크립트: 파일을 특정 영역으로 드래그 앤 드롭하기 (라이브러리 없이)

아래 화면처럼 브라우저의 외부 파일 탐색기에서 파일을 드래그 앤 드랍하여 <input type=file>에 파일을 입력받는 방법입니다. 제이쿼리를 사용하면 좋긴한데 여기서는 제이쿼리 없이 작성했습니다. 호환성을 위해 ES5 이하 스펙으로 작성하였습니다.     <input type=file>에서 multiple 속성을 추가하면 여러 파일을 입력받을 수 있습니다. drop-zone 이라는 클래스의 첫 번째 요소에 파일을 드래그 앤 드랍하면 더보기…

자바스크립트: Snake 게임 만들기 3 – 뱀 몸체 만들기, 마무리 (完)

자바스크립트: Snake 게임 만들기 1 – 블럭 움직이기 자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기, 사과(먹이) 만들기 자바스크립트: Snake 게임 만들기 3 – 뱀 몸체 만들기, 마무리 (完) trail, tailLength 변수 만들기 뱀의 몸은 여러 개의 블럭으로 이루어져 있습니다. 뱀이 상하좌우로 움직일 때 이전의 위치들을 추적하는 것이 더보기…

자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기 & 사과(먹이) 만들기

자바스크립트: Snake 게임 만들기 1 – 블럭 움직이기 자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기, 사과(먹이) 만들기 자바스크립트: Snake 게임 만들기 3 – 뱀 몸체 만들기, 마무리 (完) velocity 변수 추가 let positionX = 10, positionY = 10 const gridSize = 20, tileCount = 20 let velocityX 더보기…

자바스크립트: Snake 게임 만들기 1 – 블럭 움직이기

자바스크립트: Snake 게임 만들기 1 – 블럭 움직이기 자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기, 사과(먹이) 만들기 자바스크립트: Snake 게임 만들기 3 – 뱀 몸체 만들기, 마무리 (完)   스네이크 게임이란 고전게임으로 뱀이 여기저기를 돌아다니면서 사과(먹이)를 먹으면 뱀의 길이가 점점 늘어나고, 뱀이 꼬여서 몸이 부딪히면 게임 오버되는 더보기…

Vue.js, Vue-router: URL의 쿼리 파라미터 알아내기, 한 개의 템플릿에 여러 주소 부여, 브라우저 창 강제로 주소 바꾸기

현재 주소(URL)의 쿼리 파라미터 알아내기 URL의 쿼리 파라미터란 아래 빨간색 박스처럼 ? 뒤에 지정하는 파라미터를 뜻합니다. 여러 개를 연결할 때는 & 를 씁니다. 여기서 uwasaKeyword 의 쿼리 파라미터는 무슨 값을 가지고 있는지 알고 싶다면 다음과 같이 입력합니다. // this.$route.query.[키이름] const uwasaKeyword = this.$route.query.uwasaKeyword 저 값을 콘솔로 출력하면 “미술” 이라는 결과가 나옵니다. 더보기…

Node.js를 이용한 타입스크립트(Typescript) 프로젝트 생성과 기초 이론 알아보기

타입스크립트는 동적 자료형인 일반 자바스크립트를 자바(Java)같은 객체지향 언어에서 사용하는 정적 자료형을 사용할 수 있도록 도와주는 프로그래밍 언어입니다. 장점으로는 마이크로소프트가 관리하고 있기 때문에 점유율이 높고 안정적입니다. 협업에 있어 형변환 충돌로 인한 문제가 없어진다는 점도 있다고 합니다. 일반 웹 브라우저나 Node.js에서는 원래 지원을 하지 않으며, tsc 라는 타입스크립트용 컴파일러를 설치해야 합니다.   더보기…

리액트(React): react-router-dom을 이용한 라우팅 기능 사용하기 기초

1) 터미널에서 프로젝트 폴더로 이동한 뒤 npm에서 react-router-dom을 설치합니다. npm i react-router-dom –save   2) App.jsx 에서 <BrowserRouter> 태그쌍을 작성한 뒤 안에 라우팅 관련 정보를 작성합니다. <Route> 태그는 주소를 입력받으면 특정 컴포넌트로 이동합니다. exact는 정확히 이 path만 받아들인다는 의미이며 다른 주소는 적용되지 않습니다. 만약 exact를 사용하지 않는다면 /anyurl 등 모든 더보기…