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

개요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..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

개요Nuxt3의 강의를 보면서 새롭게 습득한 사실을 정리  router.push를 이용하는 것 보다 NuxtLink나 RouterLink를 쓰자.NuxtLink나 RouterLink를 이용하면 a태그로 렌더링이 되기 때문에 SEO최적화에 도움이 될 수 있다. custom: a태그로 렌더링이 안되게끔 하는 속성 (NuxtLink를 쓰자! 라는 이유와 모순되지만 이런한 속성이 있다는 사실을 기록하고자 했다.)navigate: router.push와 같은 역할은 하는 함수 NuxtPage 컴포넌트NuxtPage 내장 컴포넌트는 RouterView를 래핑하고 있는 형태의 컴포넌트이다. 특징으로(같은 페이지 컴포넌트에서) path가 변할 때 마다 리렌더링된다. (RouterView 컴포넌트는 처음에 마운트 될 ..