Next.js 프로젝트에 TypeScript 를 적용하는 방법에 대해서… 새로운 프로젝트 생성 새롭게 Next.js 프로젝트를 생성한다면, 다음 명령어를 실행해서 TypeScript 가 적용된 Next.js 프로젝트를 생성한다. npx create-next-app --typescript yabowlja-client 생성된 프로젝트를 열어서 확...

Next.js (React Framework) 시작하기 개요 친구랑 사이드 프로젝트를 시작했다. React 의 강력한 프레임 워크인 Next.js 로 시작하려고 한다. 프로젝트를 자주 시작하지 않다보니, 다시한번 차근차근 처음부터 시작하는 것을 기록하려고 한다. Node 설치 Next.js 를 사용하여 React 프로젝트를 개발하기 위해서는...

Canvas 사각형, 원 function // app.js const ctx = canvas.getContext("2d"); ctx.fullRec(40, 40, 100, 100); ctx.fullRec() 함수는 shortcut 이다. ctx.rec() + ctx.fill() 함수가 합쳐졌다. ctx.rec() 함수를 분리해보기 ...

Canvas API canvas api 는 2D, 3D 를 표현할 수 있는 강력한 자바스크립트 api 이다. 간단한 2d 도형으로부터, 복잡한 3d 애니메이션까지를 자바스크립트로 구현할 수 있다. 여기서는 2d를 활용한 간단한 도형그리기만 작업해 보겠다. canvas 시작하기(HTML) <canvas id="canvas"></ca...

두 큐의 합을 같게 만들기 출처 : https://school.programmers.co.kr/learn/courses/30/lessons/118667 문제 설명 길이가 같은 두 개의 큐가 주어집니다. 하나의 큐를 골라 원소를 추출(pop)하고, 추출된 원소를 다른 큐에 집어넣는(insert) 작업을 통해 각 큐의 원소 합이 같도록 만들려고 합니...

Emotion keyframes 사용하기 새로운 sider menu 를 임시로 만들었는데, 눈에 확 띄지 않아 new텍스트에 animation 을 추가해 보려고 했다. html 에서는 알고있지만, 프로젝트는 emotion/react, emotion/react 를 쓰고 있어서 사용법을 검색해 보았다. html 에서의 keyframe 일반적...

CSS Position position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. 사용법은 간단함. 기준을 잡는다. (ex. position: relative) 기준점으로부터 이동시킨다. (ex. left:...

배경 inline block 의 문제점을 해결하기 위해 flex-block 을 생각해 냄. 장점 일일히 위치나 간격을 지정해 줄 필요 없이, main axis(주축) 와 cross axis(교차축)를 기준으로 정렬해서 매우 편함. 사용법 자식에게 명시하지 않고 부모 엘리먼트에 명시한다. 즉, 적용하고 싶은 block 의 부모엘리먼트에 d...

일렉트론을 알아보게 된 계기 새로 개발하는 시스템(기본적으로 현장에서 사용할)이 컴퓨터에서도 되고, 모바일 환경에서도 작동해야 했다. 두가지 방법이 거론되었는데, 하나는 Electron 으로 개발, 다른하나는 웹버전으로 만들기 이다. 어떠한 선택에 있어서, 가장 좋은 방법은 가장 합리적인 방법을 택하는 것이라 생각했다. 우선은 생소한 일렉트론에 대해...

기본적으로 next.js를 처음 설치하면 pages 폴더 안에 _app 파일이 있다. _document가 없을 경우 따로 만들면 된다. 1. _app 가장 먼저 실행되는 컴포넌트로 모든 페이지는 _app 을 통해 실행된다. Next.js는 ‘App’ 구성 요소를 사용해서 페이지를 초기화 한다. 이를 재정의하고 페이지 초기화를 제어할 수 있다. ...