Blog
개발 관련 공유하고 싶은 내용을 포스팅합니다.타입스크립트 개념 정리
#typescript#javascript 타입스크립트 이론 공부를 하면서 헷갈리는 것들을 정리해보자. 컴포넌트를 이미지 파일로 저장해보자!
#html-to-image#file-saver#react#library html-to-image와 file-saver를 사용하여 컴포넌트를 이미지 파일로 다운로드 해보자. 이미지에서 컬러를 추출해주는 라이브러리가 있다?
#color-thief-react#react#next.js#library 리액트환경에서 color-thief-react를 사용하는 방법과, 만날 수 있는 에러를 알아보자. Next.js13 에서 폰트 최적화하기(with local font, tailwind css)
#next.js#tailwind-css#local-font next.js 환경에서 폰트 최적화 하는 방법에 대해 알아보자. Next.js에서 이미지 최적화하기
#next.js#image#최적화 next.js 환경에서 이미지 최적화 하는 방법에 대해 알아보자. Zustand를 사용해서 전역으로 모달 관리 하기
#react#zustand#modal 전역 상태 관리 라이브러리를 사용하여 모달 관리를 좀 더 효율적으로 해보자. Next.js환경에서 SEO와 SITEMAP을 쉽게 적용해보자.
#next.js#seo#sitemap#next-seo#next-sitemap SEO와 SITEMAP이 뭔지 알아보고, Next에서 라이브러리를 이용하여 쉽게 적용하는 방법도 알아보자. 블로그에 동적인 요소로 활기 불어넣기
#블로그#디자인#react-rewards#react-type-animation 라이브러리를 사용하여 블로그에 타이핑 효과, 꽃가루 효과를 넣어보자. Next.js 프로젝트 설정하기(with TS, ESLint, Prettier, Tailwind css)
#next.js#typescript#tailwindcss next.js로 프로젝트를 시작할때 기초 설정을 어떻게 해야하는지 알아보자. Next.js의 data-feching
#next.js#렌더링#data-fetching 바닐라 리액트가 제공하는 CSR과 Next.js가 지원하는 pre-rendering에 사용하는 방식인 SSR, SSG(+ISR)들을 알아보자. 리액트에서의 렌더링에 대한 이해
#react#렌더링#dom 리액트는 어떻게 렌더링 될까? 리액트 최적화 하기
#react#최적화#react.memo React.Memo를 사용하여 어떻게 최적화를 시킬수 있을까? 이미지 리사이징과 이미지 미리보기 구현하기
#react#browser-image-compression 라이브러리를 사용하여 미지 업로드시 용량을 최소화 해보자. 그리고 이미지 미리보기도 구현해보자. 실시간 채팅 스크롤 UX 최적화
#react#socket.io 자연스러운 실시간 채팅 UX를 위해선 어떤 작업을 해야할까? 모바일에서 100vh 적용하기
#react#css 모바일 환경에선 100vh가 제대로 작동하지 않는다. 어떻게 해야할까? 자동 로그인 연장 / 자동 로그아웃 구현하기
#axios#interceptor axios interceptor를 사용하여 자동 로그인, 로그아웃을 구현해보자. 코드 스플리팅을 적용해보자
#react#최적화#lazy#suspense 리액트 환경에서 코드 스플리팅을 적용하여 최적화를 하면 어떤 효과가 있을까?