티스토리

devWarrior

검색하기

블로그 홈

devWarrior

khj930410.tistory.com/m

devWarrior 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

React Server Component 🧩배경Nextjs를 사용하면서 자연스레 서버컴포넌트를 사용해왔지만 따로 포스팅으로 정리하는 시간을 가지진 않아 각잡고 React 공홈에서 Server Component 파트를 읽고 정리해보는 시간을 가졌다. 🧩React 19 부터 stable react 18v Server Component Part를 보면 Canary 표시가 되어있는데 19v부터는 사라졌고 stable이라고 언급되었다. 🧩소스코드로 비교아래에는 React 19 공식 홈페이지에 올라온 예시코드로 같은 기능을 클라이언트 컴포넌트, 서버 컴포넌트 각각 이용해서 구현했을 때의 소스코드이다. 보면서 느끼겠지만 서버 컴포넌트가 훨씬 코드가 짧고 개인적으로 더 직관적이다. ( 물론 이외에도 여러 장점/단점이 있다. ) 클라이언트 컴포넌트로 구현.. 공감수 0 댓글수 0 2025. 2. 17.
JavaScript 일반함수, 화살표 함수 this ✅배경라이브러리의 원본 코드를 보면 객체의 메서드로 this가 꽤나 많이 사용됨을 알 수 있었고 대부분 화살표 함수대신 일반함수를 사용하길래 왜 es6 화살표함수가 아닌 일반함수를 사용했을까 라는 생각을 했었다. 그러는 와중에 this가 가리키는게 화살표함수와 일반함수에서 차이가 있음을 예전에 알게 되었고 이를 깊게 파다보니 꽤나 혼란스럽다는 생각이 들었다. 그래서 이를 포스팅으로 정리하고자 한다. ✅사전지식`객체의 메서드로 호출` / `객체의 메서드가 아닌 그냥 호출` 이 경우를 일단 구분할 줄 알아야한다. ✅객체의 메서드로 호출될때 `일반함수`: 함수의 스코프를 this로 가리킨다. 단 호출방법에 따라 동적으로 this가 정의된다. (1번/3번)`화살표함수`: 화살표 함수의 스코프의 상위스코.. 공감수 1 댓글수 0 2025. 2. 17.
Lodash debounce 탐색 배경lodash에서 제공하는 debounce를 각잡고 알아보고 내부 구현코드도 하나씩 살펴보았다. lodash debounce 옵션 https://lodash.com/docs/4.17.15#debounce Lodash Documentation_(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained together. Methods that retrieve a single value or may return a primitilodash... 공감수 0 댓글수 0 2025. 1. 29.
서버단에서 쿠키 설정 후 브라우저에서 확인해보기 배경뜬금없이 서버단에서 쿠키값을 설정하고 브라우저에서 확인해보고 싶어 코드를 http모듈을 통해 로컬서버를 생성하고 브라우저를 통해 요청(request)과 응답(response)의 헤더를 통해 쿠키를 살펴보고 싶어져서 코드를 작성했습니다. 코드 & 설명// server.js// http module 사용const http = require("http");// server 생성const server = http.createServer((req, res) => { const cookie = req.headers["cookie"]; if (cookie && cookie.includes("isVisited")) { res.write("welcome again.\n"); res.. 공감수 0 댓글수 0 2025. 1. 5.
Next.js 프로젝트 메모리 사용량 확인 배경최근에 내가 개발모드로 돌리고 있는 Next.js 서버의 메모리 사용량을 알고 싶었다. 그래서 Next.js Root layout에 process.memoryUsage()를 이용하여 console 로 찍어 보았다. 코드1초 간격으로 사용중인 메모리양이 찍히도록 했다. // app/layout.tsxexport default function RootLayout(){ setInterval(() => { let memoryUsage = process.memoryUsage() let rss = Math.floor(memoryUsage.rss / 1024 / 1024) + 'MB' let heapTotal = Math.floor(memoryUsage.heapTotal / 1024 / 102.. 공감수 1 댓글수 1 2024. 12. 20.
Nextjs 터보팩? 터보팩? 뭐야?npx create-next-app@latest 를 이용하여 넥스트 프로젝트를 시작하면 터보팩을 사용할지 말지를 물어보는 질문이 나온다.생각해보니 터보팩이 뭔지 찾아본적이 없어 터보팩에 대해 찾아보았다. https://nextjs.org/docs/architecture/turbopack#generating-trace-files Architecture: Turbopack | Next.jsTurbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.nextjs.org 공식문서 기반을 요약하자면 이렇다. 터보팩은 뭐냐? -> 자바스크립트, 타입스크.. 공감수 0 댓글수 0 2024. 11. 18.
[JS] base64 img data를 img File 형태로 변경하기 예전 포스트에서 로 upload 받은 img File을 base64 형식의 data로 변환해보았는데 반대로 이번 포스트에선 base64 형식의 img data 를 다시 Blob 형태의 File로 다시 변환 해보았다. 준비된 base64 img data 아래 귀여운 고양이 이미지와 이 고양이 이미지를 base64로 인코딩한 데이터를 가져왔다.사진 및에 img tag src 속성값 "data:image/jpg; base64,/9j/4aaqsK ~~~ " 코드 구현 // 고양이 img const base64data = "data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMSEBIQEBIVEBAVDxUQDxAPEBAPDw8PFRUXFh.. 공감수 0 댓글수 0 2024. 5. 18.
[JS] 미리보기 이미지 구현하기 ( FileReader, FileReader.readAsDataURL() 이용 ) 한동안 프로젝트를 하느라 정신이 없어 포스팅을 오랜만에 쓰는 것 같다🤔input tag를 통해서 이미지를 업로드 할 시 화면에 해당 이미지가 화면에 표기되도록 직접 작업해보면서 궁금했던 사항을 공부하였다. 공부하다 binary 데이터를 어떻게 JavaScript로 다뤄야 할지에 대해 많이 알게 된 것 같았다. 관련하여 알게된 사실들은 정리하여 추후 포스팅 해야겠다 구현 코드// index.html 코드 설명일단 tag 클릭하여 img를 업로드 하면 change event handler가 실행된다.실제 img File의 img를 읽기위해서는 js에서 제공하는 FileReader 라는 객체를 이용해야 하므로 FileReader 객체를 생성하고 readAsDataURL 이라.. 공감수 0 댓글수 0 2024. 5. 15.
Yarn berry Package Manager 설치방법 한동안 개인적으로 하고 있는 일이 있어서 글을 쓰지 못했는데 ... 오랜만에 글을 올리네요 오늘 다룰 내용은 Package manage Yarn 입니다 Yarn berry 라고도 불리는데요 Yarn Berry 는 Yarn의 최신버전을 의미합니다. 정확히 Yarn의 몇 버전부터 Yarn berry라고 부르는지는 기억은 안나네요. 그럼 본론으로 넘어가 Yarn 세팅 방법에 대해 알아볼까요? Yarn 이란?yarn은 페이스북에 만든 package manger로 npm을 개선해서 만들었다. npm 보다 속도, 안정성, 보안성 측면에서 우수하다고 한다. 자세한 사항은 공식 홈페이지와 자료를 찾아보자. Yarn 세팅 방법 1. Node 설치일단 corepack이라는 package가 필요한데 기본적으로 corepac.. 공감수 0 댓글수 0 2024. 2. 12.
react lazy loading 처리 방법 ( suspense와 lazy 이용 ) react lazy loading 처리 방법오늘 다루고자 하는 내용은 react lazy loading 처리 방법이다.코드를 먼저 보면서 이해 해 보자 ( 하단 코드는 의도를 전달하기 위한 수도 코드임을 참고 부탁드립니다. )// ParentComponent.jsx import { lazy, suspense } from '... source' import {LoadingUI} from '...source'const ChillComponent = lazy(() => import('./ChildComponent'))const ParentComponent=()=>{ return ( )}// ChildComponent.jsxexport const C.. 공감수 0 댓글수 0 2024. 1. 24.
project별로 prettier 설정하기 ( vscode ) 들어가기에 앞서 다른 사람들과 협업을 하다보면 프로젝트별로 설정을 하지 않으면 개발자마다 사용하는 에디터 사용환경이 다 제각각이라 혼선이 오는 경우가 상당히 많습니다. 이런 혼선을 피하기 위해서 보통 프로젝트별로 사용환경 설정하는데요. 오늘은 그 사용환경 중 prettier를 프로젝트별로 설정하는 방법에 대해 소개합니다. 참고로 이 방법은 vscode를 이용할 때를 기준으로 작성했습니다만. 다른 에디터도 크게 다를 것 같진 않습니다. 설정방법 1. 프로젝트에서 locally 하게 prettier 설치 프로젝트 루트경로로 이동해서 install 하면 됩니다. ( -g 전역 설치가 아닙니다. ) npm, yarn, pnpm 등 원하는 pacakge manager 이용하면 됩니다. ( 공식 홈페이지 참조 :.. 공감수 0 댓글수 0 2023. 12. 18.
예외 처리 방법 ( throw, Error 이용 ) 코드를 짜다보면 흔하게 예외처리를 할 때가 항상 오기 마련이다. 예외 처리 하는방법은 많겠지만 try catch 문과 throw Error를 사용하는 것이 일반적이다. 하단 예시를 보자 일반적인 예외 처리 방법 const test =()=>{ try{ console.log('1'); throw new Error('error') console.log('2'); } catch(e){ console.log("error:",e); } }코드에 보면 throw와 Error 객체이 위치해 있는 것을 알 수 있다. 사용법은 알지만 throw와 Error객체를 면밀히 살펴본 적이 없어서 살펴보았다.throw 설명1. Mdn을 보면 throw는 사용자 정.. 공감수 0 댓글수 0 2023. 11. 30.
http request 의 content-type이해하기 Content-type 이란? Content-type은 우리가 fetch나 axios를 이용하여 server에 request를 보낼 때 body 에 담아 보내는 data의 유형을 명시하기 위해 존재하며 헤더에 담긴다. 그러므로 Content-type에 명시된 유형과 data의 유형이 같아야한다. 주요 Content-type 1. "application/json" - 요즘 대부분 data 형식을 json으로 쓰다보니 application/json이 대부분이며 axios 의 기본 default content-type이 appliaction/json 으로 알고 있다. - restful api 를 사용하게 되며 request를 날릴 때 대부분 json을 많이 사용하게 됨에 따라 자연스럽게 사용이 많이 늘.. 공감수 0 댓글수 0 2023. 11. 28.
비즈니스 로직 어떻게 분리할까? 비즈니스 로직 어떻게 분리할까?!리액트 컴포넌트에서 왜 비즈니스 로직을 분리하는지 그리고 분리를 하면 어떻게 하는지 예시를 통해 알아보려고 한다. 비즈니스 로직은 왜 분리할까!? 비즈니스 로직을 왜 분리할까를 생각해보았다.. 생각하자 마자 떠오른 말은 관심사의 분리였다. 우리는 렌더링되는 ui와 비즈니스 로직(어떤 로직을 통해 ui가 바뀌고 렌더링 되는지)을 분리함으로써 코드의 유지보수 및 가독성이 올라간다! 실제로 여러 글을 참고하니 코드의 유지보수성과 가독성 이야기가 꼭 나와 있었다. 코드를 통해 알아보자const Example = () => { const [count,setCount] =useState(0) const delayCount =() =>{ setTimeout(() => { .. 공감수 0 댓글수 1 2023. 11. 23.
Object.is() 개념잡기 배경 react@18.2.0 의 memo에 관한 문서를 보다가 useMemo는 props가 이전 props와 shallow equal 하지 않을 때 리렌더링 된다고 하고 그 shallow equal를 판단할 때의 결과가 Object.is(prev값,next값) 의 결과와 같다고 나와 있다. 그래서 Object.is()라는 메서드에 관심을 같게 되어 MDN을 살펴보았다. Object.is()의 개념Object.is() 정적 메서드는 두 값이 같은지 결정한다.(참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is ) 여기서 나는 자바스크립트에서 같은값인지 판별하는 방식 2가지 == 와, ===를.. 공감수 0 댓글수 0 2023. 11. 21.
React useState 호출 시 무조건 렌더링 된다? React useState 호출 시 무조거 렌더링이 된다?정답은...! 아니다 입니다.1. state가 원시타입일 경우 (Number, String, boolean, null, undefined ) -> setState 호출 이전의 state값과 새롭게 갱신된 state 값을 비교( 이전값 === 새로운값) 한 뒤 같지 않으면 렌더링이 이뤄지고 아니면 렌더링이 발생하지 않습니다. 2. state가 원시타입이 아니고 참조 타입(object, Symbol) 일 경우 ->위와 같은 방식으로 값 자체를 비교하지 않고 메모리 주소를 비교하여 렌더링이 발생할지 말지를 결정합니다. 실제론 동일한 형태의 객체여도 렌더링이 발생할 수 있다는 말이죠 export const Component =() =>{ cons.. 공감수 0 댓글수 0 2023. 11. 19.
zustand useshallow는 언제쓸까? 기본적인 Zustand store 구독 방법import { create } from 'zustand'// store 생성const useStore = create((set) => ({ a:"a", b:"b", c:"c", d:"d",}))const Coponent = ()=>{ // a,b,c,d state 구독 const a = useStore((state)=> state.a) const b =useStore((state)=> state.b) const c =useStore((state)=> state.c) const d =useStore((state)=> state.d) return( a:{a} b:{b} .. 공감수 1 댓글수 2 2023. 11. 19.
useMemo 이해하기 ✅useMemo란?useMemo는 재렌더링 사이에 계산결과 값을 캐싱하는 hook이다.useMemo를 사용하면 재 렌더링 시 캐싱된 값을 그대로 사용하므로 불필요한 계산과정을 스킵하여 컴포넌트 렌더링 시간을 단축시킬 수 있다. 그렇다고 무조건 useMemo를 사용해야 되냐? 그것은 아니다. 오히려 대부분의 곳에서 useMemo는 오히려 불필요하고 특정한 상황에서 사용 시 성능상 이점을 가져 갈 수 있다. ✅useMemo 예시 코드만약 `filterTodos(todos,tab)` 함수가 2초가 걸린다고 가정해보자 그럼 아래와같이 useMemo 없이 코드가 쓰였을때 `TodoList` 컴포넌트가 재랜더링이 될 때마다 `filterTodos(todos, tab)` 가 실행되면서 TodoList 컴포넌트가 렌.. 공감수 0 댓글수 0 2023. 11. 19.
storybook 파악하기 ✅배경이번에 회사에서 리액트로 리팩토링을 하게 되는데 컴포넌트를 편리하게 관리할 수 있는 방법이 있을까 고민하다 스토리북을 알게 되었다. ✅스토리북?🤔공식홈페이지(https://storybook.js.org/)를 들어가서 쭉 읽어보니 스토리북을 사용하면 아래와 같은 장점들이 있다고 소개 된다- 🔵Develop UIs that are more durableIsolate components and pages and track their use cases as stories. Verify hard-to-reach edge cases of UI. Use addons to mock everything a component needs—context, API requests, device features, et.. 공감수 0 댓글수 0 2023. 9. 17.
[Typescript] Typescript 환경을 구성해보자 💡Typescript는 Javascript에 type을 입힌 언어이며 Typescript로 작성한 code를 javascript로 compile해 그 결과물을 프로젝트에서 사용한다. compile할 때 compile 옵션을 설정해야 하며 이런 option은 tsconfig.json이라는 파일에서 설정이 가능하다. 🚀지금부터 기본적인 Typescript 환경을 구성해보려고 한다. 1. 타입 스크립트를 설치한다. -> npm install typescript [ --save or --save-dev or -g ] 2. tsconfig.json 생성 및 compile 옵션 설정 ( ts -> js 로 compile시 옵션을 tsconfig.json에 작성 )-> 참고 ) 프로젝트 최상단에 tsco.. 공감수 0 댓글수 0 2022. 7. 10.
[Javascript] es6 import, export 예시 💡 우리는 import, export를 통해 다른 js파일에 정의된 함수, 변수등을 가져와 사용할 수 있다. 그때 사용되는 import와 export에 대해 알아보고자 한다. ※ 참고사항) node 환경에서 module의 import, export를 test하고자 한다면 반드시 package.json에서 하단과 같은 옵션을 설정해야 됩니다. "type": "module" 본격적으로 import와 export의 사용 예제를 확인해보자! 예시 1)// b.jsfunction f1(){ console.log("f1 호출") }let variable = "variable"export {variable, f1} //a.jsimport {variable, f1} from './b.js'console.log(va.. 공감수 0 댓글수 0 2022. 7. 10.
[Javascript] Prototype, __proto__ 결론 부터 말하자면 Prototype과 __proto__가 지칭하는 객체는 동일하며 ( 글쓴이가 가정한 상황 속에서는 ) prototype은 생성자 함수의 property에서 그리고 __proto__ 는 생성자 함수를 통해 생성된 새로운 객체의 property에서 확인 할 수 있다. function car(brand,price){ this.brand=brand this.price=price} 위와 같이 car라는 function을 정의하는 순간 자바스크립트 내에서는 car라는 객체가 생성되는 동시에 ( 자바스크립트 에서 함수도 객체 ) car.prototype이라는 객체도 생성됩니다. 그리고 그 prototype 객체에는 constructor라는 property가 있고 그 property값은.. 공감수 0 댓글수 0 2022. 7. 9.
[React] React Form library Formik 학습 왜 Formik library를 사용할까?React에서 많이 쓰는 Form library인 Formik을 학습하려고 한다. 학습하기에 앞서 공식 Formik Hompage에서 왜 Formik library를 사용하는지 알아 보았는데 그 이유는 React에서 form은 매우 장황( 사용하기 덜 직관적인으로 해석하면 되려나 .. )하고 비용( 무겁다고 해석 하면 될듯 ?)이 많이 들기 때문이라고 한다. 즉 Formik LIbrary를 사용하면 react에서 Form을 좀 더 쉽고 정돈된 형태로 사용 할 수 있다고 한다. 더군다나 이 libarary는 매우 가볍다고 나와 있다 ( 아래에 내용이 나와 있다. - 하단 참고 ) https://formik.org/docs/overview Overview | F.. 공감수 0 댓글수 0 2022. 6. 24.

문의안내

티스토리
로그인
고객센터

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