본문 바로가기

전체 글

서버컴포넌트와 클라이언트 컴포넌트 잘 사용하기 (with Next.js) 1. Next.js의 서버 컴포넌트와 클라이언트 컴포넌트서버 컴포넌트서버 컴포넌트란 React에서 선택적으로 서버에 캐시하여 렌더링할 수 있는 컴포넌트다. Next.js에서는 라우트 세그먼트별로 세분화하여 부분 렌더링과 스트리밍이 가능하도록 설계되어 있다. Next.js에서 서버 컴포넌트를 렌더링하는 전략은 다음 세 가지가 있다.정적 렌더링: 라우트가 빌드 타임에 미리 렌더링되거나 백그라운드에서 재검증된다.동적 렌더링: 라우트가 사용자의 각 요청 타임에 맞춰 렌더링된다.스트리밍: 서버에서 생성된 UI가 준비되는 대로 점진적으로 클라이언트로 전송된다. 이를 통해 사용자는 전체 콘텐츠가 로딩되기 전에 일부 콘텐츠를 미리 볼 수 있다. (Next.js의 앱 라우터 기본값)서버컴포넌트의 장점 : 클라이언트 번들.. 더보기
Node.js 패키지 매니저 선택(npm& yarn & pnpm 비교) 패키지 매니저란?패키지 매니저는 애플리케이션의 의존적인 패키지를 관리해 준다.라이브러리의 설치, 삭제, 업데이트등을 도와주고 여러 dependencies 환경에 설치하고 관리할 수 있게 해 준다.0. 시작하며 대표적인 패키지 매니저로는 npm, pnpm, yarn (yarnBerry)가 있다.오늘은 이 세 가지 패키지 매니저의 차이를 알아보고 각각의 장단점을 알아보고자 한다.1. NPM장점Node.js 설치 시 기존으로 함께 제공되는 공식 패키지 매니저200만 개 이상의 패키지를 보유한 세계 최대 오픈소스 패키지 저장소단점설치속도가 느리다- 의존성 하나하나를 실제로 node_modules 폴더에 복사한다.- 특히 프로젝트가 커질수록 node_modules의 파일수가 증가하여 수만 개 이상이 되기도 한다... 더보기
React의 state는 동기인가 비동기인가. with 이벤트 루프 🤔 시작하며결국 시작은 우리가 처음 리액트를 배울때 헷갈렸던 가장 기초적인 예제에서 시작한다. const handleClick = () => { setCount(count + 1); console.log(count); // 이전 값이 찍힘}; 왜 여기서 이전 값이 찍히는가 ? 왜 바로 count+1된 값이 찍히지 않는걸까? state는 언제 업데이트 되는걸까?이에 대한 답을 알아보도록 하겠다.📚 동기와 비동기 간단 정리동기(sync) : 실행순서가 보장되는 것을 뜻한다. 호출 시 결과를 바로 확인할 수 있다. (const, let, for, if, function, console.log() 기본적으로 모두 js의 함수는 모두 동기이다.) 비동기(async) : 실행순서가 보장되지 않는것을 뜻한다.. 더보기
Cursor 사용 후기: 초보자도 웹사이트 만들기 가능한 AI 코드 에디터 체험기 한줄요약 : 세시간 반동안 Cursor로 이거만듬 삼행시로 행복한 시간 0. 발단코파일럿과 같은 AI 어시스턴트가 생산성을 올려준다는 요즘, 저는 코드는 직접 쳐야 늘지! 라는 사람입니다. 주변의 무수한 코파일럿 추천에도 꿋꿋이 경험치가 쌓일 때까지 쓰지 않겠다는 마음이었는데요.하지만 너무 궁금했습니다! 너무 써보고 싶어! 궁금해! 대체 왜 다들 그렇게 열광하는가?! 그래서   네, Cursor, AI code editor 결국 찍. 먹 시작합니다.  1. 개요 : Cursor란? 요즘 핫 한 AI를 활용한 코드 에디터입니다.탭과 간단한 프롬프트를 통해 코드를 짜주며, 개발자의 코드 베이스를 읽고 그에 맞춰 응답한다고 합니다. 2. Cursor랑 다른 AI 랑 가격비교 completions란?Comple.. 더보기
프론트엔드 에러 핸들링 구조 정리 (Axios + CustomError 적용) 여러분은 어떻게 에러를 관리하시나요? 저는 사이드 프로젝트를 하며 어질어질했습니다.에러관리 코드가 어질러진 방처럼 흩어져 있었거든요. 그래서 ErrorHandling 구조를 고민하며 청소를 시작했습니다.한장요약  1. 에러와 에러핸들링? Errors? JS코드를 실행할때, 각각 다른 에러들이 발생할 수 있다. 에러들은 개발자들에의해서, 잘못된 INPUT에 의해서 또는 예측할 수 없는 일들에 의해 발생한다.에러가 일어났을 때, JS는 멈춘후에 에러메세지를 생성한다.이를 기술적으로는 Throw an exception 즉, 에러를 던진다고 한다. W3Schools 등 공식 문서나 내 경험상에서도 자바스크립트에서는 Error 와 Exception을 명확히 구분하지 않고 비슷한 맥락으로 다뤄진다.Error 프로그.. 더보기
Next.js 보일러 플레이트 만들기 개념🔥 **보일러플레이트(Boilerplate)**란?1. 개념 : 반복적으로 자주 사용하는 코드 구조나 파일. 2. 이름의 유래 : 신문 인쇄소에서 자주 쓰던 금속판에서 온 말로, 자주 쓰는 문구를 금속판으로 찍어두고 복사 붙여넣기 하듯 사용했던 것에서 유래된다. 소프트웨어에선 반복적으로 쓰는 코드라는 의미 3. 개발에서의 의미매 프로젝트마다 거의 비슷하게 생기는 기본 뼈대 코드처음부터 직접 하나하나 다 작성하지 않아도 되도록, 초기 세팅을 미리 해둔 코드 묶음4. 보일러 플레이트의 장점 시간 절약: 매번 똑같은 설정 안 해도 됨.일관성 유지: 팀원들이 같은 구조에서 개발.생산성 향상: 중요한 로직에만 집중 가능. 목적스토리북이나, 다른 라이브러리 등을 공부하거나 테스트하고 싶을때, 매번 설정을 새로.. 더보기
[2025년 1분기 회고] 어느새 날이 따듯해졌다. 추운 겨울 바짝 얼어있다가 봄기운에 풀어지기 딱 좋은 날씨다. 가끔 모든게 흘러가고 나만 멈춰있는 것 같은 느낌이 들기도한다. 어디까지 가야만 하는지,어디까지 왔는지 알려주는 사람이 없다. 예전엔 chill해질 때면 꽤 후유증이 오래갔는데 요즘은 하루면 훌훌 털고 일어난다. 그러니 어디까지 왔는진 알 수 없지만나는 나아가고 있다. 3월까지의 성취 : 꾸준한 운동과 건강한 정신이 목표였음 1. 줌바 4개월째 개근: 꾸준한 운동 굿, 예전엔 줌바하는 시간이 길게느껴졌다면 이제 짧게 느껴질 정도다. 2. 독서 5권 : 꾸준히 책을 읽어서 6권 읽었다. 100권 읽기까지 94권 남았군 ... 후, 서서히 늘려갈 생각이다.  3. 이력서 완성하기 : 이력서를 완성하고 주변사람들에게 꾸준히.. 더보기
[기술부채 해결하기] SSE(Server-Sent-Event)와 WebSocket 주제선정이유 사이드 프로젝트 CHIT을 개발하고 있습니다. CHIT의 주요 핵심기능은 순번대기 기능인데요. 다들 티켓팅 해보셨나요? 티켓팅 화면에서 서버대기 화면 한번쯤 다들 보신적 있을텐데, 그거랑 비슷한 기능이라고 보시면 됩니다!   이 기능을 구현하기 위해 SSE(Server-Side-Events) 를 사용하고 있습니다. 간단히 말하자면 SSE는 서버로부터만 이벤트를 받는 단방향 통신입니다. 채팅과 달리 서버로부터 일방적으로 메시지를 받기만 합니다.  사용하는 기술인 SSE를 제대로 알고싶었고 겸사겸사 WebSocket에 대해서도 알아보려합니다. (부채질중) 1.✅ 개념알아보기SSE(Server-side-events) 란 무엇인가 보통 웹브라우저에선 웹이 request를 보내면 서버가 respons.. 더보기

티스토리툴바