\(@^0^@)/

Next.js를 유튜브를 통해 1-2번 정도 강의를 듣고 아주아주 간단한 프로젝트를 했었지만, 제대로 활용하지 못했었다. (2-3일 만에 해결해야 하는 팀플이었고, 나도 팀원들도 Next.js를 그때 첫 경험 했었기에, Next.js의 장점을 살리지 못한 아쉬웠던 경험이다.) 하지만, 프런트엔드 개발자로 살아가기 위해서는 꼭 배워야 한다고 생각해서 늘 마음속에 해결하지 못한 숙제처럼 남아있는 프레임워크다. 취업하고 나서 내년에 기필코 너를 열심히 터득하겠어! ※ Next.js 13이 정식 출시된게 아니라, 아직 beta버전이기에 나중에 문법이 바뀔 수 있음 ※ 💥 Next.js 13부터 업데이트된 문법들 이전 Next.js 12의 문법은 아래와 같았지만, pages폴더 getStaticProps getS..

react-router가 v6로 업그레이드된 지 아직 일 년도 되지 않았기에, 다른 사람의 코드를 참조하려고 살펴보면 v5로 작성되어 있는 경우를 많이 봤고, v6를 사용한다고 하지만 v5같이 쓰는 경우도 많이 볼 수 있었다. 그래서 기존의 v5에서 v6로 어떻게 바뀌었는지 차이점을 알아보고, 새로 바뀐 v6를 제대로 사용하려면 어떻게 해야 하는지 알아보고 싶어서 정리를 하였다. npm install react-router-dom@6 yarn add react-router-dom@6 // 최신버전 yarn add react-router-dom@latest Switch(v5) -> Routes(v6) // v5 import {Switch, Route} from "react-router-dom"; impor..

SWR : 데이터 가져오기를 위한 React Hooks "SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다. 그리고 UI는 항상 빠르고 반응적입니다. 단 한 줄의 코드로 프로젝트 내의 데이터 가져오기 로직을 단순화할 수 있으며, 다음과 같은 모든 놀라운 기능들을 바로 사용할 수도 있습니다. 빠르고, 가볍고, 재사용 가능한 데이터 가져오기 내장된 캐시 및 요청 중복 제거 실시간 경험 전송 및..

우선 결과물을 먼저 보도록 하자. 시간 날 때마다 기능을 조금씩 더 추가해보고, 리팩터링 할 예정이다. 마크업 마크업을 동적 생성으로 구현하면 더 좋았을 수도 있겠지만, 우선 canvas를 알아가는 것이 목표이기에 간편하게 html단에서 마크업을 구현하였다. JS에서 활용하기 위해 아래의 tool들에 알맞은 dataset을 주었다. 예를 들어보면 연필의 경우 button안의 img태그에 data-tool="pencil"을 주었음. 이렇게 dataset을 사용하면, JS단에서 클릭이벤트를 활용하여 해당 이미지를 클릭할 경우 어떤 데이터인지 쉽게 알 수 있다. 스타일링 굵기를 선택하는 버튼의 경우에는 현재 div안에 button을 마크업 한 상태여서 button에 background 검정을 주고, heigh..

제어 컴포넌트 (Controlled Component) HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. 우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링 하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. 예를 들어, 이전 예시가 ..

글쓰기 에디터 에디터를 구현하려면, Document.execCommand()에 대해 알아야 한다. Document.execCommand() HTML 문서가 designMode로 전환되면 문서에서 execCommand 메서드를 사용할 수 있게 되는데 이것을 이용해서 문서의 편집 가능한 영역을 변경할 수 있다. 문법 bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) aCommandName 실행해야 할 명령어 이름 DOMString을 나타냅니다. 사용 가능한 명령어 목록은 Commands를 참고하세요. aShowDefaultUI 기본 사용자 UI가 나타나야 하는지를 보여주는 Boolean 값입니다. Mozilla에서는 구현되어 ..

이미지 에디터 만들기 0. 생성자 함수 안에 데이터들을 초기화시켜놓기. ;(function () { 'use strict' const get = (element) => document.querySelector(element) class PhotoEditor { constructor() { this.fileInput = get('.drag_area input') this.fileImage = get('.fileImage') this.fileEvent() this.width = 500 this.height = 200 this.targetImage = get('.canvas_wrap') this.targetCanvas = document.createElement('canvas') this.targetCtx =..

React 앱을 만들기 위해 필수적인 개발 도구들 : Babel, Webpack, HMR(hot-module-replacement)... Babel 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는 데 주로 사용되는 도구 체인입니다. 다음은 Babel이 할 수 있는 주요 작업입니다. Transform syntax Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js) Source code transformations (codemods) https://babeljs.io/docs/en/ Babel ..

CustomEvent 란? 이름 그대로, 원하는 이벤트 이름으로 Custom Event를 만들고, 매개변수 typeArg과 options을 갖는다. typeArg : 이벤트의 이름을 나타내는 문자열 options : 다음 속성을 포함하는 객체 1. "detail": 이 이벤트 내에 포함할, 이벤트의 세부 정보를 나타내는 값. 기본 값은 null. 처리기에서 CustomEvent.detail 속성을 통해 이 값에 접근할 수 있다. 2. Event() 생성자의 옵션에 지정할 수 있는 모든 속성. CustomEvent(typeArg); CustomEvent(typeArg, options); customEvent을 선택한 이유 캘린더를 구현하는 프로젝트에서 내 컴포넌트의 구조가 나뉘어 있는 상태였는데, Cale..

1. figma에서 CSS 변수 추출을 원하는 디자인 파일을 열고, 우클릭을 하여 아래와 같은 경로를 타고 들어간다. 2. 검색창에 css variables를 검색한 후, 아래의 이미지와 같은 플러그인을 클릭! 3. install을 하고 싶다면 더보기 버튼을 클릭하여 install을 해주고, install 없이 바로 실행하고 싶다면 Run 버튼 클릭! 4. 추출하길 원하는 CSS변수의 styles을 설정한 후 실행 버튼을 누른다. (나의 경우에는 컬러만 추출하고 싶어서 color system을 16진법으로 설정하고, colors을 제외한 스타일은 해지하였다.) 5. 실행 버튼을 누르면, 아래의 이미지와 같이 모든 color styles들이 추출되는 것을 볼 수 있다! copy 하여 원하는 곳에 붙여 넣으..