⭐FE

배경뜬금없이 서버단에서 쿠키값을 설정하고 브라우저에서 확인해보고 싶어 코드를 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..

배경최근에 내가 개발모드로 돌리고 있는 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..

터보팩? 뭐야?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 공식문서 기반을 요약하자면 이렇다. 터보팩은 뭐냐? -> 자바스크립트, 타입스크..

예전 포스트에서 로 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..

한동안 프로젝트를 하느라 정신이 없어 포스팅을 오랜만에 쓰는 것 같다🤔input tag를 통해서 이미지를 업로드 할 시 화면에 해당 이미지가 화면에 표기되도록 직접 작업해보면서 궁금했던 사항을 공부하였다. 공부하다 binary 데이터를 어떻게 JavaScript로 다뤄야 할지에 대해 많이 알게 된 것 같았다. 관련하여 알게된 사실들은 정리하여 추후 포스팅 해야겠다 구현 코드// index.html  코드 설명일단 tag 클릭하여 img를 업로드 하면 change event handler가 실행된다.실제 img File의 img를 읽기위해서는 js에서 제공하는 FileReader 라는 객체를 이용해야 하므로 FileReader 객체를 생성하고 readAsDataURL 이라..

한동안 개인적으로 하고 있는 일이 있어서 글을 쓰지 못했는데 ... 오랜만에 글을 올리네요 오늘 다룰 내용은 Package manage Yarn 입니다 Yarn berry 라고도 불리는데요 Yarn Berry 는 Yarn의 최신버전을 의미합니다. 정확히 Yarn의 몇 버전부터 Yarn berry라고 부르는지는 기억은 안나네요. 그럼 본론으로 넘어가 Yarn 세팅 방법에 대해 알아볼까요? Yarn 이란?yarn은 페이스북에 만든 package manger로 npm을 개선해서 만들었다. npm 보다 속도, 안정성, 보안성 측면에서 우수하다고 한다. 자세한 사항은 공식 홈페이지와 자료를 찾아보자. Yarn 세팅 방법 1. Node 설치일단 corepack이라는 package가 필요한데 기본적으로 corepac..

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..

들어가기에 앞서 다른 사람들과 협업을 하다보면 프로젝트별로 설정을 하지 않으면 개발자마다 사용하는 에디터 사용환경이 다 제각각이라 혼선이 오는 경우가 상당히 많습니다. 이런 혼선을 피하기 위해서 보통 프로젝트별로 사용환경 설정하는데요. 오늘은 그 사용환경 중 prettier를 프로젝트별로 설정하는 방법에 대해 소개합니다. 참고로 이 방법은 vscode를 이용할 때를 기준으로 작성했습니다만. 다른 에디터도 크게 다를 것 같진 않습니다. 설정방법 1. 프로젝트에서 locally 하게 prettier 설치 프로젝트 루트경로로 이동해서 install 하면 됩니다.  ( -g 전역 설치가 아닙니다. ) npm, yarn, pnpm 등 원하는 pacakge manager 이용하면 됩니다. ( 공식 홈페이지 참조 :..

윈도우 기준으로 작성합니다. 1. cmd 관리자권한으로 실행 2. cmd 창에서 프로젝트 최상단 path로 이동  3. corepack enable 입력-> 해당 명령어는 프로젝트에서 yarn을 사용할 수 있도록 세팅됩니다.4. vscode 해당 프로젝트 cmd[powershell]에서yarn create next-app 을 하고 나면 next 프로젝트 생성 완료  참고https://yarnpkg.com/getting-started/install Installation | YarnYarn's in-depth installation guide.yarnpkg.comhttps://nextjs.org/docs/pages/api-reference/create-next-app API Reference: create..

NVMNode version Manger의 약자로 NVM을 이용하면 원할 때 Node version을 자유롭게 변경 할 수 있다. NVM 설치법일단 하단 공식 github에 접속하여 install 을 확인해보면 https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versionsNode Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manage..