![]()
예전 포스트에서 로 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가 필요한데 기본적으로 corep..
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.jsx export const ChildComponent =()=>{ const ..
들어가기에 앞서 다른 사람들과 협업을 하다보면 프로젝트별로 설정을 하지 않으면 개발자마다 사용하는 에디터 사용환경이 다 제각각이라 혼선이 오는 경우가 상당히 많습니다. 이런 혼선을 피하기 위해서 보통 프로젝트별로 사용환경 설정하는데요. 오늘은 그 사용환경 중 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 | Yarn Yarn's in-depth installation guide. yarnpkg.com https://nextjs.org/docs/pages/api-reference/create-next-app API Reference: c..
AJAX ( = Asynchronus javascript and xml ) 자바스크립트를 사용하여 비동기적으로 서버와 통신하여 정보를 교환하는 하는 것을 의미한다. 비동기로 작동하기 때문에 서버와 통신하는 동안 다른 작업에 영향을 끼치지 않고 정상 작동한다. XMLHttpRequest ( js native ) 자바스크립트를 통하여 서버와 통신할 때 사용하는 방법 중 하나이다. 따라서 XMLHttpRequest는 AJAX를 구현하기 위한 방법중 하나라고 생각하면 된다. Fetch ( js native ) XMLHttpRequest보다 개선된 방식으로 AJAX를 구현할 수 있다. axios ( js library ) native가 아니고 별도 module 설치가 필요하며 AJAX를 보다 편리하게 사용하기 위..
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을 많이 사용하게 됨에 따라 자연스럽게 사용이 많이 늘었음. ..
기본적인 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} c:{c} d:{d} ) } Zustand를 사용할 때 store의 여러 state를 ..
