똑같은 삽질은 2번 하지 말자

개요React로 개발을 하면서 예상치 못한 랜더링으로 인해 고생을 했던 케이스들을 모아보았다.  자식 컴포넌트에서 부모 컴포넌트에서 받은 상태를 변경하는 콜백 함수를 useEffect의 의존성으로 등록하고 실행할 때 밑의 코드를 보면 Parent의 handleUpdate가 실행되면 setNumber에 의해 부모 컴포넌트가 리렌더링되고 그로 인해 handleUpdate도 새롭게 재할당된다. 이 재할당으로 인해 자식 컴포넌트에서 onUpdate가 변경됨을 감지 다시 handleUpdate가 실행된다.import { useEffect, useState } from "react";type ChildProps = { onUpdate: () => void;};function Child({ onUpdate }: ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

개요d.ts의 파일에 대해 문득 왜 굳이 .ts를 사용하지 않고 d.ts를 사용해서 타입을 정의하는거지? 라는 의문이 들어서 다양한 검색을 해보면서 학습했던 지식을 정리한다.*.ts를 안쓰고 *.d.ts를 사용하는 이유이미 자바스크립트로 코드를 타입스크립트를 쓰고 있는 프로젝트에서 사용해야 할때 *.d.ts는 타입 선언 전용으로 자바스크립트로 쓰여진 코드에 d.ts파일에 타입을 정의해두면 타입스크립트 환경에서 이를 인식해 자동완성과 타입체킹을 할 수 있게 된다.실행 환경에 이미 존재하는 객체나 전역 타입을 정의할 때브라우저의 window나 document등은 이미 존재하는 전역 객체이다. 이 객체들에 대한 타입만 정의하고 실제 코드를 추가할 필요가 없기 때문에 .d.ts 파일을 사용해 타입 정보만 정의한..

개요이하의 책을 읽으면서 얻은 지식을 정리하고자 한다. 디자인 패턴 소개패턴이란?검증끝: 과거부터 이어져온 소프트웨어의 개발의 특정 문제를 해결하기 위해 오랜 시간 동안 검증된 효과적인 방법재사용성: 사용자의 요구에 맞춰 적용할 수 있으므로 재사용성이 뛰어나다가독성: 패턴은 정해진 구조와 공통표현을 사용하므로 알아보기 쉽다.패턴의 이점사소한 실수로 인한 큰 문제를 방지반복을 피할 수 있다.공통된 어휘를 사용함으로 의사소통이 원활해진다.리액트에서의 패턴의 예공급자 패턴(Provider Pattern)도 하나의 디자인 패턴인데 리액트에서는 Context API가 이에 해당된다. 페이지 컴포넌트에서 아주 작은 컴포넌트까지 데이터를 전달할 때 중간에 거쳐야 할 컴포넌트가 많아지면 Props Drilling을 해..

보호되어 있는 글입니다.

개요이번건은 React와는 거의 관련이 없고 NextJS에서 env를 다룰때 생긴 문제에 대해 기록하고자 한다. 문제process.env[변수이름]과 같이 env의 요소에 동적으로 접근하려할 때 서버사이드의 동작에서는 문제가 없지만 클라이언트 사이드에서는 접근이 안되는 현상 예를 들면 const key = 'NEXT_PUBLIC_SAMPLE';console.log(process.env.NEXT_PUBLIC_SAMPLE);console.log(process.env['NEXT_PUBLIC_SAMPLE']);console.log(process.env[key]);console.log(process.env);// Server Side Outputsomevaluesomevaluesomevalue{ ... } // ..

개요Nuxt의 유니버셜 랜더링의 하이드레이션이라는 개념에 대해 정리해보고자 한다. 하이드레이션이란?Nuxt 또는 Next에서도 사용되는 기술로써 SSR로 만들어진 정적 HTML에 클라이언트 사이드의 Javascript가 다시 활성화되는 과정을 말한다. 즉, 서버에서 생선된 정적 HTML이 브라우저에 로드된 후, 해당 HTML에 Javascript를 삽입시켜 동적인 인터랙티브가 가능하게 만드는 과정이다. Nuxt에서는 어떻게 하이드레이션을 하고 있을까?app.js// Universal Code 서버와 클라이언트 양쪽에서 사용되는 코드import { createSSRApp } from "vue";export function createApp() { return createSSRApp({ data: (..

보호되어 있는 글입니다.

개요어떤 기업의 코딩테스트로 Nextjs + Firebase로 인증시스템과 게시판을 간단히 만들어보라는 코딩테스트?가 있어서 만들었던 과정을 기록해보고자 한다. 완성된 코드는 밑의 리포지토리 참조https://github.com/gmldnjs26/playground-nextjs-firebase GitHub - gmldnjs26/playground-nextjs-firebaseContribute to gmldnjs26/playground-nextjs-firebase development by creating an account on GitHub.github.com 배포한곳https://playground-nextjs-firebase-8f65.vercel.app/ Firebase의 설정https://conso..