본문 바로가기

개발

 (132)
전역 상태 관리 라이브러리 - Zustand vs Recoil 요약최근까지만 해도 Recoil이 공식적으로 SSR을 지원하지 않았는데, 최근 문서에 SSR 대처 방안을 업데이트 해주었다.알아본 김에 Zustand와 Recoil의 장단점과 특성을 파악하면 적재적소에 활용하기 좋을 것 같아 개인적인 호기심으로 조사해보았다. 알아보게 된 계기이전 프로젝트를 진행하며 서버 사이드와 클라이언트 사이드 데이터가 불일치하는 문제로 인해 쿠키, 세션을 활용하여 이슈를 해결하셨던 부분을 인지하고 있었다. 분명 이와 같은 상황이 다른 개발자들도 있었을 것으로 판단하여 더 나은 해결 방법이 없는지 확인하던 중 zustand로 해결했다는 어느 포스팅을 발견 후 본격적으로 알아보기 시작하였다.jotai는 월등히 좋다면야 알아보겠지만 지금으로서는 recoil, zustand만 알아봐도 충분..
파일 Drag & Drop 요약react-dnd는 Drag & Drop이 필요한 더 넓은 범위로 활용 가능한 라이브러리라서 react-dropzone만 사용해도 될 것 같다. 1. react-dropzone 샘플 코드// ...const [acceptedFiles, setAcceptedFiles] = useState([]);const onDropFiles = (acceptedFiles: File[]) => { setAcceptedFiles(acceptedFiles); console.log(acceptedFiles);}return ( // ... {({getRootProps, getInputProps}) => ( ..
Excel 파싱 관련 요약React-papaparse는 csv만 가능해서 xlsx → csv convert 과정이 추가로 필요하나,xlsx는 xlsx파일, csv 파일 둘 다 import 가능하며, json 변환도 쉽다.(단, xlsx 라이브러리로 xlsx 파일이 아닌 csv 파일을 파싱할 경우 특수문자가 나오는 문제가 있음.) Papaparse vs React-papaparsepapaparse: 브라우저, Node.js 모두에서 사용할 수 있으며, 큰 파일, 문자열, 스트림을 CSV로 변환하거나 CSV를 JSON으로 변환하는 기능을 제공import Papa from 'papaparse';Papa.parse(file, config); const csv = Papa.unparse(data[, config]);react-p..
React Storybook 사용 방법 **컴포넌트 주도 개발(Component Driven Development)Next.js Typescript 프로젝트에 적용하는 방법 (최초)npx create-next-app --typescript start-storybookStorybook 초기화npx sb init --builder webpack5 스토리북 초기화 명령어를 치면 위와 같은 메시지가 뜨고package.json에는 storybook dev dependencies가 자동으로 추가된다.{ // ... "scripts": { // ... "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" }, "devDependencies": { ..
비동기(Asynchronous) 처리에 대한 이론 ‘비동기(Asynchronous)'란?서버로 보낸 요청에 서버가 응답할 때까지 기다리지 않고, 다른 처리를 할 수 있는 행위콜백 지옥을 Promise의 등장으로 해결할 수 있게 되었다.1-1. Promise미래의 어떤 시점에 결과를 제공하겠다는 ‘약속’ 반환const myPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve(1); }, 1000);});myPromise.then(n => { console.log(n);});작업이 끝나고 나서 또 다른 작업을 해야 할 때에는 Promise 뒤에 .then(...) 을 붙여서 사용하면 된다.const myPromise = new Promise((resolve, reject)..
자바스크립트의 프로토타입 - 자바스크립트 핵심 가이드 프로젝트가 얼추 마무리 되고 라는 책을 펼쳐 읽다가 문득 프로토타입에 대한 이해 부족한 듯 해서 하기 코드를 이해하려고 노력 중이다. (아직 이해가 안 되고 있음) if(typeof Object.create !== 'function') { Object.create = function (o) { var F = function () {}; F.prototype=o; return new F(); }; } var another_stooge = Object.create(stooge); 먼저 'Object.create'가 존재하는지 확인합니다. 'Object.create'는 일반적으로 객체를 새로 만드는 JavaScript 내장 함수입니다. 그러나 이 코드는 이 기능이 존재하지 않았을 경우를 대비해 만들어졌습니다...
MAC M1 Github blog 깃허브 블로그 만들다가 발생한 Ruby gem 에러 지금 티스토리 블로그를 하고 있지만 개발 관련한 부분은 깃허브 블로그로 이관하고자 깃허브 블로그를 셋팅하던 중, 아주 골칫거리를 하나 만났다. 바로 Ruby! 며칠 조금씩 건들이며 계속 답답해하던 중 해결책을 찾아 공유해본다. 사실 간단했다. 요약하자면, 1. ruby가 기본적으로 셋팅된 2.6.0 버전은 기존 mac 운영체제 파일의 의존성때문에 냅두고, 2. 최신 버전을 추가로 설치하여 switching 해준다. 3. gem 경로의 home 셋팅을 다시 해준다. 사실 이것이 문제가 됐던 원인은 gem 경로를 flutter 환경 설정하면서 zshrc에 박아두었던 것도 에러의 원인 중 포함이었다. 꼼꼼하게 vi를 보지 않았던 탓... 아무튼 시간 낭비를 줄이기 위해 이 포스팅이 도움이 되시길 바란다. ❯ ..
한 입 크기로 잘라먹는 리액트 Chapter 5. 리액트의 기본 기능(1) 삼항 연산자를 활용한 조건부 렌더링 function Body() { const num = 200; if (num % 2 === 0) { return {num} is 짝수입니다 ; } else { return {num} is 홀수입니다 ; } // return ( // // // {num} is {num % 2 === 0 ? "짝수" : "홀수"} 입니다.{" "} // // // ); } 삼항 연산자는 간결하지만 가독성을 해칠 우려가 있다. 조건문은 가독성은 좋으나 중복 코드 발생 우려가 있다. 컴포넌트에 값 전달하기 import React from "react"; import "./Body.css"; function Body({ name, location, favorList }) { console.lo..

티스토리툴바