Sign in
it dev nextjs router

Next.js App Router.. 이제는 앱라적 사고가 필요하다. Deep dive 시작부터 파헤치기 Part.1

현재 우리는 Next.js 14.2.2 버전을 사용 중이며 App Router 마이그레이션을 진행 중입니다. App router 로 전환 및 개발하며 얻은 정보와 best practice, 그리고 삽질기를 기록하기 위해 글을 작성해 봅니다. Next.js의 App Router는 기존 Page Router와는 근본적으로 다른 방식으로 작동하며, 기존까지의…
wono | discuss |
it dev nestjs nextjs turborepo

[문진] 모노레포 적용기 (feat. Turborepo)

모노레포를 결정한 이유 기존의 불편함 현재 문진 웹서비스의 개발 팀원은 백엔드 개발자인 나와 프론트엔드 개발자인 윤하님 두명으로 구성되어 있다. 기존에 같이 토이 프로젝트를 진행하면서 백엔드와 프론트엔드를 분리하여 개발했었는데, 다음과 같은 불편한 점들이 있었다. 서로의 코드가 따로 관리되어 피드백을 주고받는 과정이 매우 번거롭다. API를 주고 받을 때 input, output 의 형식을 각자 관리 해야하는데, 이는 비효율적이면서 불일치가 발생할 수 있다. 같이 사용할 수 있는 코드들을 공유하기가 어렵다.
wono | discuss |
it dev nestjs nextjs turborepo

[Monorepo] Turborepo를 사용하여 모노레포 구축하기

Turborepo 도입기 디프만에서 프로젝트를 진행하려고 하는데, 서버 언어로 TypeScript를 사용하고 있기 때문에 프론트엔드와 함께 레포지터리를 사용하기에 용이했다. 그래서 Yarn Berry를 통해서 monorepo를 구축할 계획이었다. 프론트와 백 모두 익숙하신 분께서 모노레포를 모두 구축해주셨고 이를 활용해서 프로젝트를 디벨롭 하고자 했다. 백엔드와 프론트엔드 모두 세팅이 안정적으로 완료됐지만, Next.js의 Vercel 배포가 Yarn Berry에서는 잘 동작하지 않는다는 것을 알게 됐고, 이를 대체하고자 Turborepo를 통해 모노레포를 구축하고자 했다. Turborepo란? 공식 문서 설명에 따르면, JavaScript나 TypeScript 코드를 위해 최적화된 빌드 시스템이라고 한..
wono | discuss |
it dev nodejs nestjs vscode

[NestJS] NestJS 시작 (설치 & 구성요소 맛보기)

이제 드디어 NestJS로 어떻게 백엔드 서버를 만들 수 있는지에 대해 알아보도록 하겠습니다. NestJS는 강력한 typing, interfaces, decorator와 같은 기능을 추가하는 TypeScript를 기반으로 구축됩니다. NestJS는 Angular로부터 강한 영감을 받았고 실제로 Dependency Injection, modules, controller와 같은 대부분의 동일한 기능들을 제공합니다. Angular의 이러한 요소는 확장가능하도록 디자인 되어 개발자들이 NestJS의 기능을 확장하기 위해  자기들의 모듈과 플러그인을 만들 수 있다는 것을 의미합니다. 이번 포스팅에서는 NestJS 공식문서를 참고하여 우리가 앞서 배워왔던 개념들을 실제로 어떻게 적용할 수 있는지, 코드 위주로 살..
wono | discuss |
it dev fe svelte mdn

Svelte 시작하기 - Web 개발 학습하기 | MDN

이 문서에는 Svelte 프레임워크에 대한 빠른 소개를 제공합니다. Svelte가 어떻게 작동하는지, 지금까지 본 나머지 프레임워크 및 도구와 Svelte가 어떻게 다른지 살펴보겠습니다. 그런 다음 개발 환경을 설정하고, 샘플 앱을 만들고, 프로젝트 구조를 이해하고, 로컬에서 실행하고 프로덕션용으로 빌드하는 방법을 배웁니다.
wono | discuss |
it dev spring react

Spring boot와 React 연동하기, 빌드하기

시작하기 전에... 아래 2개 글에 각각 Spring boot 와 React를 설치하고 기본 빌드를 하는 과정을 적어두었다. 이것들을 먼저 보시고 이곳에 오시기를 권장한다. 스프링 부트를 설정 하는 법 : https://ruckus.tistory.com/121 Spring boot 프로젝트 생성하기, 그리고 빌드 해보기 개요 Eclipse로 Spring Boot 프로젝트 생성하는 과정 정리 생성 과정에서의 주요 항목들 정리 환경 IDE : Eclipse JAVA : 11 Spring boot : 4.?? 과정 1. 이클립스에서 Spring tools install marketplace에 들어가서 sts를 검 ruckus.tistory.com 리액트를 Node.js로 빌드하는 법 : https://ruck..
wono | discuss |
it dev spring react

[Spring boot + React] Rest Api 연동하기

구조 기본적으로 Spring 프로젝트 내부에 React가 들어가는 형식의 구조로 구성한다. 프로젝트 구조는 본인 편한 대로 구성해도 무방하다. Spring 프로젝트 생성 spring project 생성은 이곳으로 본인이 선호하는 java 버전과 프로젝트 내용을 선택하여 만들면 된다. frontend를 제외하고 위와 같이 프로젝트가 생성이 된다. React 프로젝트 생성 이제 react 프로젝트를 생성할 건데 위치는 원하는 곳에 넣어주면 된다. 나는 spring 프로젝트의 루트 디렉토리에 생성하였다. npx create-react-app {project name} {project name} 이라고 적은 곳에 원하는 app 이름을 작성하면 된다. proxy 설정 이상태로는 프론트와 백이 서로 다른 포트를 사..
wono | discuss |
it dev spring react

[React] Spring Boot와 React를 연동하여 개발 환경 설정 및 Open API 조회

Back-End는 Spring으로, Front-End는 React 환경으로 개발 환경을 만들어 보도록 하자. 한 프로젝트 내에서 Spring으로 백엔드를 구축하고 React로 프론트엔드를 개발하는 방식은 백엔드와 프론트엔드를 동시에 관리하고 통합하는 편리한 방법이다. 이와 같은 구조를 사용하면 하나의 코드베이스에서 모든 업무를 처리할 수 있으며, 백엔드와 프론트엔드를 동시에 빌드할 수 있어 개발과 배포를 간편하게 관리할 수 있다. 하지만 이러한 구조에도 단점은 존재한다.🤔 React는 정적인 앱으로, 백엔드가 종료되어도 프론트엔드는 여전히 작동할 수 있다. 그러나 이러한 구조에서는 백엔드가 종료되면 프론트엔드도 동시에 종료되므로 전체 시스템의 안정성에 대한 리스크가 있다. 또한, 두 애플리케이션의 빌드가..
wono | discuss |