nextJs 와 React 를 사용하면서 useEffect를 사용하면 두번 렌더링 되는 현상이 발견되었습니다. 이를 해결하기 위한 방법을 정리합니다.

nextJs useEffect 두번 렌더링되는 현상

최근에 많은 사용자들에게 인기를 끌고 있는 Jotai는 React를 위한 상태 관리 라이브러리입니다.

상태관리 라이브러리 jotai에 대해

MongoDB는 NoSQL 데이터베이스 관리 시스템(Nosql Database Management System) 중 하나로, 문서 지향(Document-Oriented) 데이터베이스입니다.

MongoDB에 대해서 feat. RDBMS (MySQL)

웹 서버에 파일을 업로드하여 배포하였을때 이전에 배포했던 파일이 캐시로 남아있는 이슈가 있다. 이를 해결하기 위한 방법으로 vue 파일을 빌드할때 code busting 방법을 사용했다.

vue2 cache busting

일렉트론 앱에서 버튼을 클릭하면 asset 폴더안에 파일이 다운로드 될 수 있도록 처리

Electron 에서 소스 코드 static 파일을 클라이언트 PC에 저장하기

javascript 9가지 코드 트릭에 대해서 설명합니다.

javascript 9가지 코드 트릭

MYSQL에서 SQL문을 사용하여, 각각 컬럼 개수는 다르지만 특정 컬럼을 모두 가지고 있는 세개의 테이블(A,B,C)을 병합해야한다.

MYSQL 중복 제거 하고 테이블 병합하는 방법

Axios-mock-adapter는 단위 테스트 또는 로컬 개발 환경에서 Axios로 만든 HTTP 요청을 제어하기 위한 유틸리티입니다.

axios-mock-adapter 사용하여 mock API 만들기

시작날짜와 종료일자를 입력하면 사이에 날짜를 배열로 만들어야 합니다.

시작날짜 와 종료날짜 사이 날짜 구하는 함수 (feat. momentjs)

vue2로 개발 된 관리자페이지 프로젝트에서 차트를 구현이 필요해 vue-chartjs 오픈소스를 쓰게 되었다.

vue2에서 vue-chartjs 사용하기

Revert 로 커밋되돌리기

그림으로 그린 브라우저 동작과정

그림으로 그린 DOM 자료구조

그림으로 그린 네트워크 구조

n개의 요소에서 발생할수 있는 모든 경우의 수는 어떻게 구할수 있을까?

재귀함수 조합 탐색

순열은 n개의 개수가 주어지고 완전 탐색하여 모든 경우의 수를 계산하는 방법이다. O(n!)의 시간복잡도 소모

순열 알고리즘

수학의 수식, 물리학의 공식, 논리학의 논리 등은 그 자체로 하나의 언어이다. 이 언어는 우주의 근본적인 진리를 설명하고, 복잡한 현상을 단순하고 우아한 방식으로 표현할 수 있는 능력을 가지고 있다. 많은 사람들은 이 지점에서 아름다움을 느낀다.

프론트엔드에서 개발 설계하는 방법

NextJs는 13 버전 이후 app 디렉토리로 변경된 프로젝트에서 클라이언트 컴포넌트로부터 데이터 fetch 할수 있는 도구로 Tanstack Query, SWR 라이브러리를 추천한다.

Tanstack Query - SSR & NextJs

Tanstack Query는 누락된 데이터를 가져오는 라이브러리로 알려져 있지만, 좀 더 기술적인 용어로 말하면 데이터 fetch, 캐싱, 동기화, 서버상태 업데이트 등 을 쉽게 만든다.

Tanstack Query 라이브러리

미들웨어를 사용하면 요청이 완료되기전에 코드를 실행시킬 수 있다. 그런다음 들어오는 요청에 따라 요청 또는 응답 헤더를 다시작성, 리디렉션, 수정하거나 직접 응답하여 응답을 수정할 수 있다.

NextJs 13 이후 - Middleware

Route handler 를 사용하면 특정 요청에 대한 커스텀 요청 핸들러를 생성할 수 있다.

NextJs 13 이후 - Route Handlers

Dynamic Programming 이라고 부르며, 해결한 작은문제로 큰문제를 해결해 나가는 문제 풀이방식이다.

[알고리즘] - 동적 계획법

NextJs 13이후로 app 라우터를 사용하는 방식이 추가되었고, 현재 기존에 사용하던 page 라우터 방식과 app 라우터 방식, 두가지 방식으로 나누어졌다.

NextJs 13 이후 - DATA FETCHING

position의 속성 종류와 각각 쓰임에 대해서 알아보자.

CSS - position 에 대해서

결론부터 말하면, display 속성은 레이아웃을 결정하는 속성으로 이는 변화의 중간 단계를 가질수 없기 때문이다.

display block 을 했을때 transition 이 왜 안될까

크고 복잡한 프로젝트에서 CSS 대신 SCSS를 사용하면, CSS 코드를 더욱 효율적으로 작성하고 유지 관리할 수 있다.

CSS 와 SCSS의 차이

내가 개발한 프로젝트를 서버에 올려서 웹으로 표현하고자 할때 우선 어떻게 구현이 되는지 살펴보자

NextJs 로 개발한 프로젝트를 Vercel 배포하는 방법

Git Flow란 브랜치를 나누는 전략입니다. Git Flow에선 일반적으로 브랜치를 5가지로 나뉩니다.

Git Flow 란

HTTP 상태코드는 HTTP 통신으로 인한 응답 결과가 성공적이 였는지 알려줍니다. 응답은 5개의 그룹으로 나누어 집니다.

HTTP 상태코드

하이퍼 텍스트 트랜스퍼 프로토콜이다. 현재는 모든 데이터를 프로토콜에 담아서 전송한다.

HTTP 통신에 대하여

클로저는 내부 함수가 외부 함수의 맥락에 접근할 수 있는 것을 의미합니다. 이를 통해 자바스크립트는 private 변수를 구현할 수 있어, 이는 다른 많은 프로그래밍 언어에서 중요한 객체 지향 프로그래밍 개념입니다.

클로저의 개념

this`는 현재 실행 컨텍스트에 따라 다르게 바인딩되며, 그 컨텍스트는 함수 호출 패턴에 따라 달라집니다.

자바스크립트 this에 대하여

javascript 에서 BFS, DFS 정렬에 대해서 알아보자

[자료구조] javascript BFS, DFS 정렬

ES2023에 추가된 기능들을 살펴보겠습니다.

ES2023 추가된 자바스크립트 기능들

javascript 에서 트라이 자료구조에 대해서 알아보자

[자료구조] javascript 트라이 (Trie)

javascript 에서 힙 자료구조에 대해서 알아보자

[자료구조] javascript 힙 (Heap)

웹 표준성은 World Wide Web Consortium (W3C)와 같은 국제 표준화 기구에서 개발한 웹 기술과 규칙의 집합입니다. 이러한 표준은 HTML, CSS, JavaScript 등의 웹 기술을 포함하며, 웹 개발자들은 이러한 표준을 준수하여 웹 사이트를 구축하고 디자인해야 합니다. 웹 표준을 따르면 웹 사이트의 구조와 콘텐츠가 일관성을 갖게 되어 사용자 경험과 웹 애플리케이션의 성능을 향상시킬 수 있습니다.

웹 표준성에 대해서

웹 접근성은 웹사이트, 웹 애플리케이션, 동영상, 문서 등의 웹 콘텐츠가 장애를 가진 사람들에게 동등한 접근 기회를 제공하는 것을 의미합니다.

웹 접근성에 대해서

javascript 에서 트리 자료구조에 대해서 알아보자

[자료구조] javascript 트리 (Tree)

javascript 에서 그래프 자료구조에 대해서 알아보자 그래프는 비선형자료구조로 노드들이 이어져 있는 형태의 자료구조를 말한다.

[자료구조] javascript 그래프 (graph)

javascript 에서 해시테이블 자료구조 생성, 추가, 삭제 할때 소요되는 시간을 `빅오 표기법`으로 확인해보자

[자료구조] javascript 해시 테이블 (HASH table)

javascript 에서 배열을 생성, 추가, 삭제 할때 소요되는 시간을 `빅오 표기법`으로 확인해보자

[자료구조] javascript 배열 (Array)

javascript 에서 연결리스트 자료구조 구현, 생성, 추가, 삭제 할때 소요되는 시간을 빅오 표기법으로 확인해보자

[자료구조] javascript 연결리스트 (Linked List)

javascript 에서 큐 자료구조 생성, 추가, 삭제 할때 소요되는 시간을 `빅오 표기법`으로 확인해보자

[자료구조] javascript 큐 (Queue)

javascript 에서 스택 자료구조 생성, 추가, 삭제 할때 소요되는 시간을 `빅오 표기법`으로 확인해보자

[자료구조] javascript 스택 (stack)

지난 시간에 PlanetScale 세팅을 해보았다. PlanetScale은 terminal 에서 git을 쓰듯이 디비에 접속하여 수정 및 생성 할 수 있고, DB툴에 연결해서 사용할 수도 있다.

PlanetScale CLI로 간단하게 DB 생성 및 수정하기

vercel 에서 제공하는 템플릿중에 관리자 페이지가 있어서 한번 사용해 보았다. 사용한 스택에 데이터베이스로 PlanetScale 이 있어서 궁금해서 구글링하여 찾아보았다.

PlanetScale 로 serverless DB (MySQL) 구축하기

CSP란 교차 사이트 스크립팅(XSS (en-US))과 데이터 주입 공격을 비롯한 특정 유형의 공격을 탐지하고 완화하는 데 도움이 되는 추가 보안 계층입니다

nextJs CSP (Content-Security-Policy) 간단하게 설정하기

개발일지 기록, 정보공유를 위해서 개발블로그를 만들기로 결정하였다.

nextJs 로 쉽게 블로그 개발하기

자료구조와 알고리즘은 컴퓨터 과학 분야에서 매우 중요한 개념입니다. 이들은 컴퓨터 프로그래밍에서 사용되는 툴이며, 이를 이해하고 응용하는 것은 컴퓨터 과학을 학습하는 사람들에게 필수적입니다.

All Posts