React 18에 등장한 React Server Components React 18에서 새롭게 도입된 개념인 React Server Component(RSC) 에 대해 살펴봅시다. React Server Components(RSC)란? RSC는 서버에서만 렌더링되어 전달되는 컴포넌트를 의미합니다. 이는 HTML이 아닌 특별한 형태로 서버에서 렌더링되어 클라이언트에게 전달됩니다. 특히, NextJS App Router는 이를 기본적으로 지원합니다. 기존 방식의 문제점 컴포넌트 구조는 다음과 같이 설정됩니다 const App = () => { return ( ) } 기존의 방식은 각 컴포넌트에서 API 호출을 통해 데이터를 렌더링합니다. 이렇게 하면 각 컴포넌트는 자신에게 필요한 데이터만을 받게 됩니다. 각..

오늘은 Next.js 13버전이 Stable이 되고 시간이 흘러 안정되었다고 하여 이를 프로젝트에 적용해보고자 하였고, Page Router였던 12버전 대신 App Router을 사용할 예정이므로 큰 변환점을 중심으로 하여 리뷰해보려고 합니다. 다들 Next.js가 React를 기반으로 한 프레임워크라는 것을 알고계신다는 전제 하에 진행하도록 하겠습니다! 간단하게 알아볼 5가지 특징들(App Router 기준) 여기서 알아볼 5가지는 다음과 같습니다. App Router로 넘어오면서 새로 등장한 app directory App Router로 넘어오면서 변경된 Rendering 설정방법 개선된 Navigation tag, API Routes를 통한 백엔드 접근 보다 개선된 이미지 렌더링을 위해 사용된 1..

[Good Night Hackathon] 2023/08/26 10:00 ~ 2023/08/28 00:00 이번에는 반년만에 열린 2회차 Good Night Hackathon에 참여하였습니다. 분명 이전에 열렸던 스프링부트에 참여한 지 얼마 되지 않은 것 같았는데 벌써 더 업그레이드 된 해커톤이 진행되었네요! https://time-map-installer.tistory.com/175 [Good Night Hackathon] SpringBoot! 맛 좀 보자! 2023 Serieses [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 [2022..

태그: Techeer 6주 동안의 일들을 담아냈기에 다소 양이 많을 수 있다는 점을 미리 알립니다. 활동명: SilliconValley 2023 Summer Bootcamp 역할: 리더 기여 분야: Frontend, 배포, 문서화, 팀원 관리, 최종 발표 GitHub: https://github.com/SV-Summer-BootCamp-Team-F SV-Summer-BootCamp-Team-F SV-Summer-BootCamp-Team-F has 4 repositories available. Follow their code on GitHub. github.com Notion 2023 Summer Bootcamp Team-F ⬇️ 프로젝트 포트폴리오 바로가기 changeable-team-242.notion..

0. 문제 상황 파악하기 가장 먼저 해야 할 일은 현재 프로젝트에서 내가 무엇을 해야하는가에 대한 이해와 이 문제를 해결하기 위해 어떤 것을 활용하느냐 입니다. 그 부분을 잘 알고 있으시다면 분명 원활한 협업이 이루어질 것이라고 생각하며 글을 시작합니다. 어느정도 초반 세팅이 되어있다면 프로젝트에서는 2~5번을 반복합니다. 1. 프로젝트 클론 받기 우선 개인 컴퓨터가 준비가 되셨고, 팀 organization이 있다면 그 안에 프로젝트 레포지토리로 들어가줍니다. 팀원과 함께 프로젝트를 함께 세팅을 했을 것이고, 그 프로젝트 파일이 당신의 컴퓨터에 존재하지 않는다면 이 과정을 거치도록 합니다. 이 글에서는 프로젝트가 진행중인 frontend를 기준으로 설명드리겠습니다. 우선, 작업을 하려는 레포지토리로 들..

TailwindCSS를 사용하기 위해 프로젝트에서 작업을 하다가 무언가가 이상하게 디자인이 적용이 안되어서 원인을 파악해보아야겠다고 생각했습니다. 따라서 이 글은 어떤 원인들이 있었고 어떻게 해결했는 지 기록해 둔 글입니다. 프로젝트 스펙 Vite, React, TypeScript TailwindCSS yarn 원인 원인은 여러가지가 있던 것 같았습니다. 나열 해보자면 아래와 같았습니다. 패키지 설치 시 tailwindcss만 설치한 점 typescript 프로젝트로 마이그레이션 하면서 tailwind.config.js를 .cjs로 변경한 것 tailwindcss를 어느 형식의 파일에 적용시킬 것인 지 명시하지 않은 것 index.css에 import문을 통해 tailwind를 선언한 것 해결법 해결법은..