티스토리

luckydayo

검색하기

블로그 홈

luckydayo

seven-day-five.tistory.com/m

다재다능한 개발자 도전기

구독자: 2

방명록 방문하기

주요 글 목록

Next.js란 무엇일까? intro 1년 동안 업무를 하며 비즈니스 측면을 이해하고 나니 SEO에 대한 중요성을 이해하게 되었고, CSR 방식의 단점에 대해서도 다시금 깨닫게 되었다. 그러나 SPA를 너무나도 사랑하는 나로서는 React와 같은 라이브러리를 포기하는 것이 쉽지 않았다. 그러던 중 작년부터 Next.js를 눈여겨보고 있었는데 드디어 배워야 할 완전한 동기가 생겨 늦었지만 나의 학습기를 기록해보고자 한다.The React Framework for the Web Next.js는 React 프레임워크이다. 소프트웨어 개발을 위한 공통적인 구성요소를 사용하여 전체적인 애플리케이션 구조를 만들어 내는 것을 프레임워크라고 한다. 즉, React 기반의 웹 어플리케이션을 쉽게 개발하고 배포할 수 있도록 돕는 프레임워크인 것이다.. 공감수 1 댓글수 0 2025. 3. 20.
[Three.js] To infinity and beyond! 3D 웹 도전기 #9 ⚠️ 1분 코딩님의 강의를 바탕으로 작성한 글입니다.Particle'미립자', '입자'를 의미하는 것처럼 하나의 덩어리로 존재하던 material을 아주 작은 입자처럼 표현하는 방법이다.particle을 사용하기 위해서는 기존 방식이었던 geometry + material을 mesh에 전달해 주는 방식이 아닌 Points라는 메서드를 사용해야 한다. 역시 말보다는 코드를 보며 자세히 풀어보겠다!const geometry = new THREE.SphereGeometry(1, 32, 32);const material = new THREE.PointsMaterial({ size: 0.02, sizeAttenuation: false, // 점(vertax)들을 원근에 상관없이 균일한 크기로 지정});.. 공감수 2 댓글수 1 2024. 9. 26.
Three.js로 도미노 만들기 1분 코딩님의 도미노 예제에서 조그마한 기능을 더 추가한 Three.js로 도미노 만드는 방법에 대해 기술해 보도록 하겠다. Default SettingThree.js를 브라우저에 그리기 위해서는 기본이자 핵심 구성요소인 renderer, scene, camera, light를 정의해야 한다. 이에 대해 순차적으로 작성해 보겠다. Renderer브라우저(웹)에 3D 그래픽을 표현하기 위해서는 WebGL이 필요하다. 그러나 까다로운 점이 많은 WebGL을 대신하여, 이를 쉽게 사용하기 위한 프레임워크나 라이브러리가 개발되었고, 그중 Three.js를 꼽을 수 있다. Three.js를 사용할 때 가장 첫 번째 단계가 바로 이 WebGL을 이용하여 canvas라는 도화지를 3D 렌더링 해주는 것이다. Thre.. 공감수 2 댓글수 1 2024. 9. 20.
[Three.js] To infinity and beyond! 3D 웹 도전기 #8 ⚠️ 1분 코딩님의 강의를 바탕으로 작성한 글입니다.Three.js에 물리엔진 기능 추가하기(ft. cannon.js)cannon.js는 10-11년 동안 업데이트가 한 번도 안 된 레거시한 라이브러리였다. 이에 그나마 1년에 한 번씩이지만 업데이트가 이루어지고 있는... cannon-es를 활용하여 물리엔진을 구현하는 방법에 대해 배울 수 있었다. ChatGPT에 물리엔진에 관해 질문해도 해당 라이브러리를 활용하여 설명해 준다. 당연하게도 외부 라이브러리이기 때문에 설치가 필요하다. npm i cannon-es자세한 사항은 해당 라이브러리의 깃헙을 참조하자.👉 cannon-es 1. 물리 엔진이 동작할 공간/무대 만들기 (a.k.a Scene of Three.js)const cannonWorld = .. 공감수 0 댓글수 0 2024. 9. 12.
[Three.js] To infinity and beyond! 3D 웹 도전기 #7 ⚠️ 1분 코딩님의 강의를 바탕으로 작성한 글입니다.Raycaster(클릭 감지)을 이용하여 Mesh 감지하기1. Mesh 제작// Meshconst boxGeometry = new THREE.BoxGeometry(1, 1, 1);const boxMaterial = new THREE.MeshStandardMaterial({ color: 'plum' });const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);boxMesh.name = 'box';const torusGeometry = new THREE.TorusGeometry(2, 0.5, 16, 100);const torusMaterial = new THREE.MeshStandardMaterial({ col.. 공감수 0 댓글수 0 2024. 9. 9.
WordPress를 알아보자 intro 매번 기록해야지 하면서도 게으름을 이기지 못하고 시간이 흘러갔다. 그러다 최근 새롭게 도전하고 싶은 것들이 생겨나면서 다시 기록하기 위해 오랜만에 돌아왔다. 그동안 미뤄왔던 블로그도 개편하면서 다시 시작한다는 마음으로 임해보고자 한다. 이번 글을 시작으로 Headless WordPress까지 작성해 보는 게 목표이기 때문에 워드프레스가 정확히 무엇이고 어떻게 동작하는지 작성해보고자 한다.워드프레스(WordPress)란?CMS(Content Management System)의 일종으로, 사용자가 전문적인 기술 지식 없이도 웹사이트에서 콘텐츠를 생성, 관리 및 수정할 수 있도록 도와주는 콘텐츠 관리 시스템 소프트웨어이다. 워드프레스는 PHP와 MySQL을 기반으로 서버 측에서 동작하는 CMS이다.. 공감수 13 댓글수 14 2024. 9. 5.
[Three.js] To infinity and beyond! 3D 웹 도전기 #6 ⚠️ 1분 코딩님의 강의를 바탕으로 작성한 글입니다.LightAmbientLight전체적으로 은은하게 비춰주는 조명으로 위치 설정이 의미가 없어 위치 설정이 없다. 왼쪽 이미지처럼 단순히 단색으로 입체가 표현된다. 때문에 단독으로 사용하기보다는 다른 조명과 조합하여 많이 사용된다.const ambientLight = new THREE.AmbientLight('white', 1);DirectionalLight마치 태양광처럼 음영이 진다. Helper를 사용하여 조명의 위치를 표시할 수도 있다.const light = new THREE.DirectionalLight('pink', 3);light.position.y = 3;scene.add(light);// DirectionalLight의 위치 표시하기con.. 공감수 0 댓글수 0 2024. 1. 8.
Commit History의 중요성? Git Rebase 알아가기! intro 프로젝트를 할 때 에러가 발생하여 이전 커밋으로 돌아가야 하는 상황이 생겼었다. 그러나 너무 많은 브랜치로 인한 복잡해진 Git History는 나를 당황시키기 충분했다... 이후 많은 분들이 rebase를 사용하신다는 말을 듣게 되었고 궁금증이 생겨 블로깅을 하게 되었다.What is Git rebase?Rebase is an action in Git that allows you to rewrite commits from one Git branch to another branch. Essentially, Git rebase is deleting commits from one branch and adding them to another.Rebase는 Git의 액션으로, 한 Git 지점에서 다른.. 공감수 0 댓글수 0 2024. 1. 6.
[Three.js] To infinity and beyond! 3D 웹 도전기 #5 ⚠️ 1분 코딩님의 강의를 바탕으로 작성한 글입니다.MaterialMeshLamberMaterialconst material = new THREE.MeshLambertMaterial({ color: 'orange'});MeshPhongMaterialconst material = new THREE.MeshPhongMaterial({ color: 'orange', shininess: 1000}); MeshStandardMaterialconst material2 = new THREE.MeshStandardMaterial({ color: 'orange', roughness: 0, // 거칠기 metalness: 0.5, // 금속성 // flatShading: true //.. 공감수 0 댓글수 0 2024. 1. 5.
[Three.js] To infinity and beyond! 3D 웹 도전기 #4 ⚠️ 1분 코딩님의 강의를 바탕으로 작성한 글입니다.GeometryBoxGeometryBoxGeometry( width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer) CylinderGeometryCylinderGeometry( radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, t.. 공감수 0 댓글수 0 2024. 1. 4.
[Three.js] To infinity and beyond! 3D 웹 도전기 #3 ⚠️ 1분 코딩님의 강의를 바탕으로 작성한 글입니다.애니메이션 만들기Three.js에서 애니메이션을 줄 때는 캔버스와 마찬가지로 requestAnimationFrame이라는 메서드를 이용한다.window.requestAnimationFrame(callback) 메서드를 사용하기 앞서서 자세히 알아보도록 하자.브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트 바로 전에 브라우저가 애니메이션을 업데이트할 지정된 함수를 호출하도록 요청합니다. 이 메서드는 리페인트 이전에 호출할 인수로 콜백을 받습니다.- MDN레이아웃을 배치하기 전에 인자로 넣은 콜백 함수를 한 번만 호출시키는 메서드인 것이다.예전에는 setInterval()을 사용했었다고 한다. 그러나 프레임 유실, 배터리 절약 이슈 등 성능.. 공감수 0 댓글수 2 2023. 12. 20.
[Three.js] To infinity and beyond! 3D 웹 도전기 #2 ⚠️ 1분 코딩님의 강의를 바탕으로 작성한 글입니다.브라우저 사이즈 변경에 대비하기만약 캔버스의 크기를 브라우저 사이즈에 따라 변경되어야 한다면 어떻게 해야 할까?간단하다. 이벤트 함수를 만들어서 종횡비의 값을 재할당 해주면 된다!function setSize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); // ‼️ 다시 그려주기 }// 이벤트window.addEventListener('resize', se.. 공감수 0 댓글수 1 2023. 12. 18.
[스터디 회고] 모던 자바스크립트 Deep Dive 대학 시절, 혼자서 공부하기 위해 사두었던 '모던 자바스크립트 Deep Dive'.중간까지만 읽어보고 점점 먼지가 쌓여가던 책을 뒤로하고 부트캠프를 참여하게 되었고, 이론 강의를 정리할 때 펼쳐보기도 하였지만, 그마저도 아주 짧게만 이 책의 도움을 받아보는 정도로 그쳤었다. 그렇게 시간이 흘러 2023년 2월 어느 날, 부트캠프의 막바지를 달려가던 중 든든한 동료들이 생겨 완독을 꿈꾸게 되었고 스터디를 추진해 보게 되었다.구매 없이 책이 있는 소수 사람들이 모여 2023년 2월 25일에 시작하게 되었다. '올해 안에는 다 읽겠지'라는 마음으로 시작했던 기억이 난다. 처음에는 의욕이 넘쳐서 그런지 주 1회 진행되었고 약속한 챕터까지 읽으며 어려웠던 내용 또는 의문점이 드는 내용을 노션에 기록해 두고, 스터.. 공감수 0 댓글수 1 2023. 12. 18.
[Three.js] To infinity and beyond! 3D 웹 도전기 #1 ⚠️ 1분 코딩님의 강의를 바탕으로 작성한 글입니다."three.js로 무언가를 표현하려면 scene, camera 그리고 renderer가 필요하다. 이를 통해 카메라로 장면을 구사할 수 있다."그럼 scene, camera, renderer가 무엇인지 알아보겠다. Renderer화면에 그림을 그려주는 역할을 한다.renderer를 만드는 방법은 크게 동적과 정적으로 나뉜다.자바스크립트를 통해 동적으로 만들어 줄 경우에는 아래와 같이 사용한다.document.body.appendChild(renderer.domElement); domElement : renderer가 가지고 있는 canvas 이다. 위 코드에서 나오는 renderer 변수명은 three.js 라이브러리 내부의 WebGLRenderer을.. 공감수 0 댓글수 0 2023. 12. 16.
[Three.js] To infinity and beyond! 3D 웹 도전기 #0 intro 아이콘 라이브러리 프로젝트를 마친 후, 잡서치 겸사겸사 토익 공부를 하며 시간을 보냈다. 나름 이제는 자신 있다고 생각을 했었는데 여전히 회사 입장에서는 눈에 띄는 지원자가 아니라는 자각이 들었다. 그래도 내가 좋아하는 개발 하면서 성장하다 보면 또 기회가 올 거라는 조금은 막연한 생각을 하며, 그동안 하고 싶었지만 현실의 시선에 갇혀 미루기만 했던 것을 하기로 결심하게 되었다. 제목에서 이미 아시다시피 Three.js이다. 웹을 시작하기 전부터 인터랙티브 웹을 만들어보는 게 꿈이었는데, 어쩌면 지금이 적기라는 생각이 들었다. 오랜만에 글을 쓰다 보니 구구절절했는데 이제 시작하겠다!WebGL이란?웹 상에서 그래픽을 표현하기 위한 웹 기반의 그래픽 라이브러리이다. 특징은 자바스크립트 언어를 통해.. 공감수 0 댓글수 0 2023. 12. 14.
그래프(Graphs) A graph data structure consists if a finite (and possibly mutable) set of vertices or nodes or points, together with a set of unordered pairs of there vertices for an undirected graph or a set of ordered pairs for a directed graph. 노드와 노드가 연결된 비선형 자료 구조이다.Vertex (= a node) / Edge (= conntection between nodes)로 이루어져 있다.트리도 그래프의 일종이다.ex) social network, location, mapping, routing argorithms etc..... 공감수 0 댓글수 0 2023. 10. 24.
프로그래머, 열정을 말하다 이 블로그에 처음으로 굉장히 주관적이고 사적인 얘기를 남겨보고자 한다. 2023년 4월, 한창 여러 개발자들의 영상을 즐겨 시청하며 기술보다는 좀 더 사고방식에 대해 배움을 얻고 있을 때였다. 그러다 우연하게 엘리님의 책 소개 영상을 보게 되었고 그렇게 이 책을 만났다. 읽다 안 읽다를 반복하며 '올해 안에는 다 읽겠지'라는 약간의 나태함과 여유로움 그 사이 어디쯤의 마음으로 읽고 싶을 때마다 읽었고 드디어 첫 완독을 끝내게 되었다. 우선 총평은 '읽기 정말 잘했다! 생각날 때마다 다시 읽고 싶은 책'이라는 생각이 들었다. 사실 기술 블로그 목적으로 운영하고 있기 때문에 최대한 방향성을 잃지 않고 싶어 이 글을 작성하는 것에 조금은 고민을 했었다. 그러나 이 책을 읽는 동안 느꼈던 마음처럼 두고두고 좋은.. 공감수 0 댓글수 2 2023. 10. 23.
CRA에서 Vite로 마이그레이션하기 intro 요새 정신없이 보내고 있던 중에 포트폴리오가 CRA로 제작되어 있어서 코드도 정리할 겸사겸사 Vite로 마이그레이션을 진행하기로 하였다. Vite의 특징은 예전 글에서 다루었기 때문에 본론으로 바로 들어가 보겠다! 하염없이 부족하게만 느껴지는 글이지만 일단은 링크 남겨본다.👉 [이전 게시글] Vite는 맛있어:) CRA를 Vite로 변경하기해야 할 일은 package.json 파일을 수정하고, vite에 존재하는 파일들도 추가하면 된다. 한마디로 정리하면 Vite로 만들어진 프로젝트 형태로 똑같이 만들어주면 된다. 그래서 단순하게 '복사하면 되겠지' 했지만... 이게 무조건 복사한다고 되는 건 아니란 걸 알아보렸다... 흑흑 차근차근 정리해 보도록 하겠다. 1. package.json 수정하.. 공감수 0 댓글수 2 2023. 10. 15.
[TypeScript] 이미지 타입 설정하기 intro 타입스크립트 프로젝트를 진행하면서 "타입 설정은 정말 끝이 없구나..."라는 걸 많이 실감했다. 그래서 기록만이 살 길이다!라는 것 또한 깨달으며 이미지 타입 설정에 대해서 글을 남겨본다.img 태그에 import 해 온 이미지를 연결시켜 주면 위와 같은 에러를 만날 수 있다. 걱정하지 마시라~! 바로 해결해 보자. declare module '*.jpg';declare module '*.png';기존의 index.d.ts 파일이다. 이름은 그다지 중요하지 않다. src 경로 내에 d.ts 파일을 만들어주는 것이 핵심이다.이렇게 작성한 이유는 타입스크립트의 모듈 해석(module resolution)을 통해 컴파일될 때, import가 무엇을 참조하는지 알아낸다. 즉, .ts, .tsx, .d.. 공감수 0 댓글수 0 2023. 10. 3.
나의 인생 첫 라이브러리 제작기 (ft.npm) intro 리액트+타입스크립트 환경을 기반으로한 아이콘 라이브러리를 제작 중에 있었고 드디어 라이브러리를 성공적으로 npm에 등록하게 되어 그토록 고대하던 그 과정을 낱낱이 공유해보록 하겠다. 그전에! 나보다 훌륭한 블로그들이 많기 때문에 가입 절차와 같은 상세한 소개는 빼고, 참고한 블로그들을 따라 하며 겪은 수난에 조금 더 초점을 두어 얘기해보고자 한다.‼️ npm 배포에 관한 상세한 절차는 글 하단 출처에서 확인하실 수 있습니다.npm이란?자바스크립트 패키지 매니저(JavaScript package manager) 중 하나로, 사람들이 만들어 놓은 라이브러리나 프레임워크를 쉽게 설치, 갱신, 삭제할 수 있도록 도와주는 도구이다. Node.js 실행 환경에서 돌아가며, package.json이라는 파.. 공감수 0 댓글수 0 2023. 9. 28.
react-code-blocks 라이브러리 사용하기 intro 현재 아이콘/컴포넌트 라이브러리를 만드는 프로젝트를 하고 있다. 페이지에서 코드도 복사하여 사용할 수 있도록 하기 위해 코드 블록 라이브러리를 사용하기로 하였고, 개발 환경을 고려하여 react-code-blocks 라이브러리를 선택하게 되었다. 적용 과정을 풀어보도록 하겠다.공식 문서는 요기 ⬇👉 [github] react-code-blocks 👉 [npm] react-code-blocks 설치하기npm i react-code-blocks 적용하기import { CopyBlock } from "react-code-blocks";function MyCodeComponent(props) { const copyBlockProps = { text: props.code, languag.. 공감수 0 댓글수 0 2023. 9. 28.
우당탕탕 최적화 도전기 intro 프로젝트 제작 중에 페이지 간 로딩이 너무 길다는 문제에 봉착하였다. 아이콘, 컴포넌트 라이브러리를 만드는 거다 보니 한 페이지당 불러들이는 데이터가 너무 많다는 것이 문제였다. 이에 '줄일 수 있는 건 최대한 줄여보자!'라는 마음으로 첫 최적화를 도전하게 되었다.이미지 최적화하기우선 가장 먼저 떠오른 건 이미지 최적화였다. 사용자가 직접 시현할 수 있도록 컴포넌트를 모두 불러왔던 로직이 화근이었다... 결국 페이지에 들어가는 모든 컴포넌트들을 총 3개의 이미지 스프라이트로 만들어서 backgroud-position으로 위치만 맞춰주는 식으로 사용하였다. 3개로 나눈 이유는 하나의 이미지 스프라이트에 들어가는 요소가 너무 많아서 나눠주었다. 그 결과 아래와 같은 결과가 나왔다. 총 로드 시.. 공감수 0 댓글수 1 2023. 9. 26.
SVG 이미지 색상 변경하기 프로젝트를 하다보면 이미지 손상을 막기위해 svg로 파일을 저장하곤 하는데, 이때 svg 이미지 파일의 색상을 어떻게 하면 변경할 수 있는지 알아보도록 하겠다! 우선 내가 가지고 있는 arrow.svg의 파일을 보자. 내가 설정한 색상으로 주입시키고 싶으면 path 태그의 fill의 값을 current로 주자. 그런 다음 해당 이미지를 사용할 파일에서 import해오면 된다.사용할 때 img 태그를 사용하는 것이 아닌 import한 svg를 태그 형태로 사용하는 방법으로 해야 원하는 색상으로 변경할 수 있다.나의 경우 hover를 했을 때 버튼 내부의 화살표 아이콘의 색상이 변경되도록 만들고 싶었기에 css를 아래처럼 적용하였다.여기 까지는 크게 어려움 없이 할 수 있다. 그러나 문제는 import에서 .. 공감수 0 댓글수 0 2023. 9. 6.
[TypeScript] Type Alias vs. Interface intro 타입스크립트를 프로젝트에 사용해 보면서 궁금증이 생겼다. 바로 type alias와 interface의 차이였다. 이를 제대로 이해하고 있지 않으니 코드를 작성하면서도 자신이 없는 나를 발견하게 되어 이번 글을 작성하게 되었다.시작에 앞서, interface vs. type Alias> 요 글을 읽고 많은 이해를 하였고, 이후 공식문서도 읽은 후 이해한 바탕으로 차근차근 궁금증을 해결해 보도록 하겠다.Type Alias우선 한국어로 해석하면 '타입 별칭'이 되겠다. type이라는 키워드를 사용하여 이름을 부여하여 정의한 타입을 쉽게 참고하기 위한 방법이다. 때문에 새로운 타입을 정의할 수 있다고 표현하는 것이다. 우리가 데이터를 다룰 때 type alias를 사용하여 데이터의 타입을 정의/결정.. 공감수 0 댓글수 0 2023. 8. 12.
[Error] Array.prototype.map()에서 Type Error?! 이미지에서 보시다시피 위 에러를 해결하는 방법에 대해 작성해보고자 한다. 굉장히 간단하니... 반짝 집중하자. 우선 에러 메세지가 "Type 'void[]' is not assignable to type 'ReactNode'" 한국어로 번역하면 "'void[]' 유형은 'ReactNode' 유형에 할당할 수 없습니다."가 되겠다... 무튼 이걸 보고 단순히 타입 에러인 줄 알았다... 그러나 이건 타입 에러가 아니다... 화살표 함수에서 발생하는 에러이다.map 내부에서 콜백함수 작성을 위해 화살표 함수를 사용할 때 1줄 일 때는 아무 괄호 없이 작성하면 되지만, 2줄 이상이 되면 괄호로 감싸줘야한다. 이때 중괄호를 사용할 경우에는 return 지시자를 반드시 사용해서 명시적으로 결괏값을 반환해줘야한다.. 공감수 0 댓글수 0 2023. 8. 11.
Recoil에 데이터 저장하여 활용하기 저번 글에서 Recoil에 대해 간략히 학습을 해보았는데, 오늘은 실제로 프로젝트에서 적용하고 활용한 방법에 대해 작성해보고자 한다. 가장 먼저 'recoil' 폴더를 만들어서 atom만의 파일을 만들어서 분리 작성하였다.아래 코드처럼 작성하였다. 이때 default에는 우리가 사용할 데이터를 직접적으로 넣어주어서 사용하였다.👀 반짝 Tipdefault에 데이터를 직접적으로 넣어주어 타입이 결정되도록 할 수도 있고, 또는 명시적으로 문자열인지, 배열인지 리터럴로 작성할 수도 있다.이제 사용할 컴포넌트로 가서 사용하면 끝이다.import lineAtom from '../recoil/atoms';const lineDatas = useRecoilValue(lineAtom); 일일이 넘겨주는 번거로운 작업 없.. 공감수 0 댓글수 0 2023. 8. 8.
Prettier에 Trailing-Commas 설정하기 'ESLint 설정하기' 글에서 간략히 prettier code를 작성하였는데, 개발을 하다 보니 render를 해주는 파일에서 prettier를 실행하면 자꾸 콤마 에러가 발생하였다. (ESLint 잔소리) 다행히 해당 문제는 아주 간단히 해결할 수 있었다.그전에! Trailing-Commas란 무엇인지에 대해 짚고 넘어가보자. Trailing-Commastrailing comma는 마지막에 콤마를 붙이는 코딩 방식으로 만약 새로운 속성을 추가할 때, 마지막 줄에 trailing comma가 있으면 해당 줄을 수정 없이 그대로 사용할 수 있어 버전 관리 이력이 간단해지는 장점이 있다. Solution 해결 방법은 간단하다. { ... "trailingComma": "all", ...}.pretti.. 공감수 0 댓글수 0 2023. 8. 8.
Canvas vs. SVG로 그리기 (in React) intro 현재 진행 중인 프로젝트에서 지하철 노선도를 그리기 위해 어떤 도구를 사용할지 공부하게 되었고, SVG와 Canvas 두 가지 방법에 대해 작성해 보도록 하겠다. 우선 둘 다 같은 결과물을 만들어준다.CanvasCanvas는 브라우저에서 도형과 같은 그래픽적인 요소를 표현할 때 사용하는 HTML 태그이다. 리액트에서 라이브러리를 설치하여 사용해보았다. 그런데 install 중 아래와 같은 에러를 만나게 되었다. 에러 코드를 봐서는 리액트의 버전 문제인 것 같다. 현재 나의 리액트 버전은 18.2.0이지만 해당 라이브러리는 16, 17 버전을 지원하는 것 같다. 다행히 해결방안도 같이 제시해주고 있다. -force 또는 --leagacy-peer-deps를 붙이면 해결할 수 있다. 여기에서 -f.. 공감수 0 댓글수 0 2023. 7. 19.
ESLint 설정하기 (ft. Airbnb) 본격적인 프로젝트에 임하기 전에 협업에서 중요한 ESLint에 대해 알아보도록 하겠다! 그전에 우선 ESLint와 Prettier의 차이가 헷갈려서 간략하게 정리한 후 들어가 보겠다. ESLint는 코드 퀄리티를 보장하도록 도와주고, Prettier는 코드 스타일을 깔끔하게 또는 통일되도록 도와준다. ESLint는 다양한 코드 작성법 중 일관성 있는 방식으로 구현할 수 있도록, 오류를 분석해 주는 도구이다. Prettier는 텍스트를 일관되게 작성하도록 도와주는 도구이다. 사실 둘 모두 큰 차이 없는 거 아냐?라고 생각했지만, 차이가 있다. ESLint의 핵심은 코드 에러를 잡고 코드 문법을 강제하여 코드 품질 개선에 중점을 두었다는 것이다. 반면에 Prettier는 작은 따옴표를 사용할 것인지와 같.. 공감수 0 댓글수 0 2023. 7. 17.
Recoil로 상태 관리하기 요번 사이드 프로젝트에서 상태 관리로 recoil을 사용하기로 해서 공부해 보았다!공식 사이트에 들어가 보니 아주 친절하게 설명되어 있어서 추천한다. 우선 왜 Redux, Zustand와 같은 상태 관리 라이브러리를 사용해야 하는 걸까?리액트는 컴포넌트 내부에서 변경 가능한 데이터. 즉, state를 가지는데 이를 다른 하위 컴포넌트로 전달하고 전달하고 하다 보면 나중에 변경이 필요할 때 전달 된 모든 state를 일일이 변경해주어야 하는 불상사가 생긴다. 때문에 전역에서 관리하여 보다 쉽게 변경할 수 있는 상태 관리 라이브러리가 등장하게 된 것이다. 그중 Recoil은 React에서 개발한 만큼 리액트와 유사한 문법 구조를 사용하기 때문에 크게 어렵지 않게 이용할 수 있다는 장점이 있다. 이게 무슨 말.. 공감수 0 댓글수 0 2023. 7. 14.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.