블로그 이사했습니다 - nostrss.me
새로운 블로그로 이사했습니다 🔗 새로운 블로그로 바로가기 🔗
[면접리뷰]클로저(Closure)란? (3)
이론적인 내용을 정리하고 이제는 실제로 어떻게 쓰이는지 알아보자. poiemaweb에서 클로저가 사용되는 예제가 있어서 가져와 봤다. 🔗 poiemaweb 클로저 바로가기 🔗 1. 최신 상태유지 <!DOCTYPE html> <html> <body> <button class="toggle">toggle</button> <div...
[면접리뷰]클로저(Closure)란? (2)
이번에는 여러 사이트들의 예제들을 보면서 클로저에 대해 조금 더 이해해보려고 한다. MDN 예제 🔗 MDN 클로저 바로가기 🔗 function makeAdder(x) { return function (y) { // debugger; 브라우저에서 실행 시...
[면접리뷰]클로저(Closure)란?
오늘 면접을 보면서 내가 이론 공부에 대해 개념적으로만 간단히 알고있다는 느낌을 받았다. 그래서 면접 질문에 대해서 복습차원에서 정리해보려고 한다. Step1: 클로저(Closure)란 무엇인가? MDN 클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께...
[React-Query] 무한 스크롤 구현하기
그동안 무한스크롤을 구현하기 위해 몇가지 라이브러리를 사용해봤다. 그런데 이번에 React-Query 문서를 보던 중 useInfiniteQuery를 제공하는 것을 알았고 이를 통해 무한스크롤을 구현해보기로 했다. 무한스크롤의 구현원리 무한 스크롤을 구현하기 위해서는 2가지가 준비되어야...
[Error] Storybook, Cannot find module
외부에서 상수나 컴포넌트를 import 해왔을때 갑자기 스토리북에서 아래와 같은 에러가 발생했다. Cannot find module '@/constant' Error: Cannot find module '@/constant' at webpackMissingModule (http://localhost:6006/stories-Icons-AtomIcon-stories.iframe.bundle.js:66:50) at ./src/stories/Icons/AtomIcon.tsx (http://localhost:6006/stories-Icons-AtomIcon-stories.iframe.bundle.js:66:135) at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33) at...
Nextjs 13에서 스토리북 사용하기(with tailwindcss)
이번에 nextjs 13으로 개인 블로그를 만드려는데 때마침 스토리북이 생각나서 사용해보려고 했다. 스토리북(Storybook)이란? 내가 스토리북을 적용해보려고 한 건 아래와 같은 이유에서 였다. UI 컴포넌트를 독립적인 환경에서 개발 및 확인 할 수...
Next.js 13 프로젝트 yarn berry로 전환하기
설치 환경 버전 정보 node : 18.13.0 yarn : 3.6.3 next : 13.4.19 next.js 프로젝트 생성 먼저 next.js 프로젝트를 생성하자. 일반적으로 가장 많이 설치하는 npx create-next-app을 사용하여 설치했다. npx create-next-app@latest...
[Nest] DTO, 그게 뭐야? 왜쓰는데? 어떻게 쓰는데?
DTO(Data Transfer Object)란? nest.js를 공부하면서 생소한 용어들이 있었는데, 그중 하나가 바로 DTO(Data Transfer Object)였다. 데이터 전송 객체(data transfer object, DTO)는 프로세스 간에 데이터를 전달하는 객체이다. 프로세스 간 통신이 일반적으로 원격...
[NEXT] Middleware와 Edge Functions
얼마 전 팀프로젝트에 Next.js의 Middleware 파일을 사용하여 github 로그인 관련 기능을 구현하려고 했었다. 🔗 Next.js Middleware 공식문서 🔗 기능 설명 로그인 버튼 클릭 깃헙에서 리다이렉트 url로 페이지를 다시 보내준다. 리다이렉트...
[Nest] ERROR [ExceptionsHandler] No metadata
Nest.js에서 typeorm을 연결하여 사용하려고 하던 중 아래와 같은 에러가 발생했다. [Nest] 87109 - 2023. 08. 29. 오후 9:41:15 ERROR [ExceptionsHandler] No metadata for "Board" was found. EntityMetadataNotFoundError: No metadata for...
[NEXT] TOAST Editor customHTMLSanitizer 사용하기
1.TOAST Editor에 사용하기 2.TOAST Editor에 작성한 글정보 불러오기(useRef) 3.TOAST Editor에서 이미지 업로드하기(hooks) 4.TOAST Editor Viewer 사용하기 5.TOAST Editor customHTMLSanitizer 사용하기 TOAST Editor customHTMLSanitizer 사용하기 에디터의 경우 유저가 악의적인 용도로 스크립트를...
[NEXT] TOAST Editor Viewer 사용하기
1.TOAST Editor에 사용하기 2.TOAST Editor에 작성한 글정보 불러오기(useRef) 3.TOAST Editor에서 이미지 업로드하기(hooks) 4.TOAST Editor Viewer 사용하기 5.TOAST Editor customHTMLSanitizer 사용하기 TOAST Editor Viewer 사용하기 예전에 React Quill의 경우에는 Viewer를 따로...
[NEXT] TOAST Editor에서 이미지 업로드하기(hooks)
1.TOAST Editor에 사용하기 2.TOAST Editor에 작성한 글정보 불러오기(useRef) 3.TOAST Editor에서 이미지 업로드하기(hooks) 4.TOAST Editor Viewer 사용하기 5.TOAST Editor customHTMLSanitizer 사용하기 Toast Editor에서 이미지 업로드 하기 Toast Editor는 이미지 업로드를 위한...
[NEXT] TOAST Editor에서 작성한 글정보 불러오기(useRef)
1.TOAST Editor에 사용하기 2.TOAST Editor에 작성한 글정보 불러오기(useRef) 3.TOAST Editor에서 이미지 업로드하기(hooks) 4.TOAST Editor Viewer 사용하기 5.TOAST Editor customHTMLSanitizer 사용하기 Toast Editor에 작성한 글 내용을 불러오기 src ┣ components ┃...
[NEXT] TOAST Editor 사용하기
1.TOAST Editor에 사용하기 2.TOAST Editor에 작성한 글정보 불러오기(useRef) 3.TOAST Editor에서 이미지 업로드하기(hooks) 4.TOAST Editor Viewer 사용하기 5.TOAST Editor customHTMLSanitizer 사용하기 버전 정리 Next.js : 13.4.10 pages Router를 사용하였다. @toast-ui/editor -...
PostgresSQL 설치 시 "/tmp/.s.PGSQL.5432" 에러
Nest.js를 공부하면서 Brew로 PostgresSQL을 설치하고 DB를 연결하려고 했는데 아래와 같은 에러가 발생했다. psql postgres psql: error: connection to server on socket "/tmp/.s.PGSQL.5432" failed: No such file or directory 검색을 해보니...
[Nest.js] - 소개
Nest.js 공식 문서를 참고하였습니다. Nest.js란? Node.js 서버 측 애플리케이션을 구축하기 위한 프레임 워크 특징 Angular와 비슷한 구조이며 이에 영감을 받은 것으로 알려져 있습니다. Typescript를 기본 언어로 사용합니다. Express를 기본값으로 사용하며...
React server component와 Next.js
React 18 버전에서 새로 추가된 기능 중 하나가 바로 server component이다. 아직 많이 쓰이는 것 같지는 않지만, Next.js에서도 app router가 정식 버전으로 나오면서 server component를 지원한다고 한다. 그래서 이에 대해...
reduce 사용법 정리
좀 처럼 프론트엔드 실무를 하면서는 자주 사용할 기회가 없었던 메소드가 바로 reduce였다. 얼마 전 지인의 코드를 수정해주다가 reduce를 사용한 부분이 있어서 정리해봤다. 등차수열 갑자기 등차수열이 왜 나오냐고? 라고 생각할 수...
[NEXT] page.js (with App Router)
Props NEXT.JS에서는 기본적으로 컴포넌트에 Props로 params와 searchParams를 전달해준다. 상위 컴포넌트에서 아무런 Props를 전달하지 않아도 params와 searchParams를 사용할 수 있다. export default function Page({ params, searchParams, }: { params: { slug:...
렌더링의 종류와 용어 정리
렌더링의 종류와 용어 정리 현업에서 CSR만 사용해봐서 다른 렌더링 방식에 대해서 알아보다가 용어 정리가 좀 필요한 것 같아서 정리해봤다. CSR : client side rendering 렌더링의 주체 : Browser 렌더링의 과정...
[알고리즘]최대공약수와 최소공배수
최근 알고리즘 문제를 풀다가 최대공약수와 최소공배수를 활용하는 문제가 있었다. 문제를 풀긴 풀었지만, 최대공약수와 최소공배수의 경우에는 공식이 이미 존재하기 때문에 잘 알아두면 시간을 절약하기 좋을 것 같아서 정리해 보았다. 최대 공약수(greatest...
[책읽기]refactoring - 챕터 1
샘플 코드 리팩토링 전 코드 리팩토링 후 코드 챕터 1 저자는 자기가 명명한 리팩터링의 규칙과 기법(?)을 의거하며 샘플 코드를 리팩토링을 하는 법을 단계별로 보여준다. 예시를 통해서 리팩터링이 무엇인지 감을 잡는...
[책읽기]refactoring
좋은 코드란 어떤걸까? 회사를 다니기 전에 좋은 코드에 대한 나의 생각은 아래와 같았다. 짧고 간결한 코드 최적화가 잘 되어 있는 코드 하지만 회사를 다니면서 추가된 내용이 있다. 알아보기 쉬운 코드...
typedoc으로 프론트엔드 문서 만들기
회사에서든, 개인적으로 집에서 코드를 볼 때마다 이 변수는 뭐지? 이 함수는 무슨 작동을 하는거지? 라는 생각을 하면서 코드를 살펴보곤 한다. 그래서 다음에 볼때는 좀 더 알아 보기 쉽게 하려고 주석을...
나만의 Boilerplate를 github template로 만들기
매번 새로운 프로젝트를 시작할 때 마다 똑같이 반복해서 작업하는 일이 있다. // 설치하기.. npx create-react-app npx create-next-app npx eslint init (등등등) // 설정하기 package.json tsconfig.json .eslintrc.js .gitignore next.config.js (등등등) 이렇게...
Next.js SSR, SSG를 Vercel에 배포하기(3)
전체 소스코드 DEMO 이제 소스코드를 vercel에 배포해 볼 차례이다. 먼저 지금까지의 소스코드를 Git-hub에 Push 해두도록 하자. Vercel 회원가입 Vercel 바로가기 Git-hub 계정 연결, Repository 연결하기 먼저 자신의 Git-Hub 계정을 연결,선택...
Next.js SSR, SSG를 Vercel에 배포하기(2)
전체 소스코드 DEMO 작품 리스트를 SSR로 구현해봤으니, 이번에는 SSG를 구현해보려고 한다. 리스트 중에 하나를 클릭 했을 때 상세 화면으로 넘어가고 상세화면은 SSG로 렌더링 되도록 할 예정이다. 작품 상세 페이지 SSG...
Next.js SSR, SSG를 Vercel에 배포하기(1)
전체 소스코드 DEMO 최근 공부의 목적에 대해 갈팡질팡하다가 rendering에 대해 부쩍 관심이 생겼다. 그래서 공부할 겸 Next.js의 SSR(server siede rendering)과 SSG 렌더링을 간단히 구현해서 배포를 해봤다. 프로젝트 준비하기 API 먼저...
React PWA 만들기(2)
PWA 장점 프로그레시브 웹 앱(Progressive Web App, PWA)은 웹과 네이티브 앱의 기능을 결합한 형태의 애플리케이션이다. PWA는 온라인에서 쉽게 접근 가능하며, 브라우저를 통해 실행이 가능하고, 다운로드도 가능하다. 즉, 앱 스토어에서 다운로드...
React PWA 만들기(1)
PWA란? Progressive Web Apps의 약자이다. html,css,javascript와 같은 웹기술로 만드는 App이라고 생각하면 된다. 마치 Web과 App의 경계사이에 있는 느낌이다. 바탕화면에 웹페이지를 즐겨찾기 해둔 것처럼 간단해 보이기도 하고, Web을 패키징한 하이브리드 앱처럼...
[월간코딩] #5 Side Bar 수정
기존 사이드바 만들기 글 보기 문제 발생 사이드 바에서 버튼을 클릭하여 dynamic routing 할 때 baseurl + 경로 로 이동하지 않음 원인(As-Is) App 컴포넌트 안에 Router가 있는데 Layout이 App 밖에...
[월간코딩] #4 Drag & Drop
Drag & Drop 사전 조사 HTML 드래그 앤 드롭 Web API Drag & Drop 이벤트 종류 drag : 요소나 텍스트 블록을 드래그 할 때 발생한다. dragend : 드래그를 끝냈을 때...
[월간코딩] #3 React-Query
React Query란? 클라이언트 상태관리 : redux, recoil 등 서버 상태관리 : react-query 단순이 이렇게 알고 있었다. 그런데 공식문서를 보면서 오늘 써보니 이게 왠걸? 조금 더 공부해야겠지만 api 통신의 관리가 이렇게...
[월간코딩] #2 Side Bar 만들기
1. Layout 만들기 Layout의 구성 Header : 화면의 최상단에 위치하는 영역. 보통 로고, nav등이 위치한다. Nav는 따로 빼기도 한다. Footer : 화면의 최하단에 위치한다. 보통 회사 정보등이 위치한다. Side Bar...
[월간코딩] #1 시작
이걸 왜 할까? ✍️ 써보고 싶은 새로운 기술 스택을 학습하자 React 함수형 컴포넌트 재학습 Typescript 학습 Redux를 사용한 애플리케이션 개발 Storybook 사용법 익히기 🎀 하나의 제대로 된 포트폴리오를 만들자 코드로만 존재하는...
2038년이 오면..(Unix time)
해외 openAPI를 뒤져보다가 처음 보는 형태의 응답이 오는 경우를 발견하였다. { "components": { "co": 206.95, "no": 0, "no2": 0.59, "o3": 55.79, "so2": 1.8, "pm2_5": 2.37, "pm10": 2.39, "nh3": 0.01 },...
[코드지갑] Intl(Time & Date Format)
간단해 보이지만 까다롭고 어려운 작업이 있는데 바로 날짜와 시간 표기 방법이다. 나라마다도 다르고, 표기법이 너무나 다양하기 때문에 일일히 전부 커스터 마이징하기에는 너무 손이 많이 가는 작업이다. 다행히 javascript에서 편하게 쓸...
[코드지갑] 카카오 공유하기
이번주에 회사에서 SNS 공유하기 기능을 구현했었다. 카카오, 라인, 페북.. 한 5개 정도를 구현했었는데, 카카오톡 공유하기가 좀 어려웠던 것 같아서 복습 겸 다시 만들어봤다. 카카오 공유하기 보러가기 준비 카카오톡 애플리케이션 추가하기...
[코드지갑] 이미지를 찾을 수 없습니다
간혹 이미지의 링크가 잘못되었거나 해당 경로가 바뀌어서 엑박이 뜨는 경우가 종종 있다. 이런 경우 img의 onerror 이벤트를 이용해 대체 이미지를 노출 할 수 있다. img태그에 onError에 handleImgError라는 함수를 바인딩 처리...
[코드지갑]재귀(?)렌더링함수
구조는 아래와 같고 head 객체의 깊이가 일정하지 않고 1,2,3,4,5.. 이런 순서로 페이지에 뿌려줘야 하는 경우가 발생했다. { "head": { "value": "1", "next": { "value": "2", "next": { "value": "3", "next":...
멈춰야 비로서 보이는 것들 (no console.log 1달째)
front 개발자가 console.log를 쓰지 않고 개발한다? 앞으로 React 개발자들은 console.log를 찍지 마세요 하루 아침에 갑자기 이런 지시 사항이 내려왔다. 부트캠프를 다닐 때부터 나의 단짝 console.log를 사용하지 말라니.. 앞으로 어떻게 개발하지?...
lf와 crlf 그리고 .gitattributes
윈도우에서 작성한 코드가 맥에서는 오류가 난다? 먼저 알아야 할 개념이 있다. 과거 타자기를 쓸 때 부터 내려운 개념이라고 한다. CR : Carriage-Return, \r 현재 커서를 줄 올림 없이 가장 앞으로...
[NestJs]Day1 기본 구조와 개념
nestjs의 시작 nestjs는 main.ts 파일에서 시작한다. // main.ts import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(AppModule); await...
[Apollo-Client] Local-only fields
Local-only fields 공식 문서 바로 가기 Apollo Client에서는 Graphql 서버의 스키마에 없는 필드를 클라이언트에서만 생성 및 추가 할 수가 있다. 즉, 서버에서는 실제로 정보를 내려주지는 않지만 클라이언트에서 생성한 변수를 것처럼...
[ts] 추상 클래스와 interface
추상 클래스란? 추상 클래스는 추상 메소드를 하나 이상 포함한 클래스이다. 추상 메소드란? 정의되지 않은 메소드를 말한다. abstract class User { constructor(protected firstName: string, protected lastName: string) {} // 추상 메소드...
[ts] type과 interface
type typescript에서 type 키워드의 사용 방법 타입을 정해줄 때 type Nickname = string; 타입에 특정 값을 지정해 줄 때 type Team = 'Red' | 'Blue' | 'Yellow'; object의 모양을 typescript에...
[React] 게시판 만들기 3일차(feat. Redux)
Redux에 대해 잘 알지 못한 상태에서 바로 게시판 프로젝트에 적용해보려다가 어려움이 있어서 먼저 사전 학습을 한 뒤에 진행해야겠다고 생각했다. 그래서 오늘은 Redux 이론 공부를 먼저 하려고 한다. Redux를 왜 쓸까?...
[React] 게시판 만들기 2일차
깃허브 소스코드 보러가기 Firebase 세팅 firebase 로그인 > 콘솔로 이동 프로젝트 생성 App추가(web) SDK 설치 npm install firebase firebase 초기화 파일 생성 구글 애널리틱스는 필요없을것 같아 주석처리했다. Firebase.js // Import...