본문 바로가기

분류 전체보기229

[Next.js] Next.js에서 Suspense 사용 1. Suspense란 무엇인가?React의 Suspense는 데이터가 준비될 때가지 기다리지 않고, 로딩 UI를 먼저 보여주는 기능전통적인 방식: 데이터가 다 준비될 때까지 화면이 “텅 빈 상태” → UX에 나쁨Suspense: 화면의 뼈대(레이아웃)는 먼저 보여주고, 데이터가 준비되면 그 부분만 채워 넣음 → UX 좋아짐즉, 로딩을 제어하는 React의 도구이다.Next.js와 Suspense의 관계Next.js는 기본적으로 서버 컴포넌트(Server Components) 기반이다.데이터 패칭은 서버에서 처리React의 Suspense와 결합 → 스트리밍 렌더링(Streaming Rendering) 가능※ 사용자는 페이지가 완전히 준비되기 전에 부분적으로라도 화면을 볼 수 있다!기본 사용 예시// a.. 2025. 9. 29.
[WEB] README.md 작성 법 (Next.js) README.md란?처음 코드를 접하는 사람이 가장 먼저 보는 문서이며, 프로젝트 개요와 실행 방법, 기술 스택, 구조 등을 알려주는 안내서이다.특히 협업 환경에서는 README.md만 잘 작성해도 새로 합류한 사람이 빠르게 프로젝트를 이해할 수 있다.이번 글에서는 Next.js 프론트엔드 프로젝트를 기준으로 README.md 작성법과 예시 템플릿을 정리한다.README.md에 있어야 할 기본 요소README.md는 보통 아래 항목들을 포함하는 것이 좋다.프로젝트 개요 – 프로젝트가 무엇인지 한 줄 설명이다.기술 스택 – Next.js 버전과 주요 라이브러리를 나열하는 부분이다.설치 및 실행 방법 – 개발 환경에서 빠르게 실행할 수 있도록 단계별로 설명하는 부분이다.폴더 구조 – 주요 디렉토리와 역할을 .. 2025. 9. 3.
[React + TS] 대한민국 지역 선택(시, 군, 구) Select Box 만들기 프로젝트에 들어갈 지역 선택 select box를 만들어야 했다.다른 방법들은 복잡한거 같아 무식하지만 확실한 방법을 선택했다. 그냥 냅다  지역을 배열로 구현하였다.export const area = [ { name: "서울", subArea: [ "강남구", "강동구", "강북구", "강서구", "관악구", "광진구", "구로구", "금천구", "노원구", "도봉구", "동대문구", "동작구", "마포구", "서대문구", "서초구", "성동구", "성북구", "송파구", "양천구", "영등포구", "용산.. 2024. 8. 16.
[JAVA] Getter와 Setter 메소드 SetterCar myCar = new Car();myCar.speed = -100; 위의 코드처럼 자동차의 속력은 음수가 될 수 없는데, 외부에서 음수로 변경하면 객체의 무결성이 깨진다.(객체의 필드를 외부에서 마음대로 읽고 변경할 경우 객체의 무결성이 깨질 수 있다.)무결성: 결점이 없는 성질 따라서 객체 지향 프로그래밍에서는 직접적인 외부에서의 필드 접근 대신메소드를 통해 필드에 접근하는 것을 선호한다.그 이유는?메소드는 데이터를 검증해서 유효한 값만 필드에 저장할 수 있기 때문이다.이러한 역할을 하는 메소드가 Setter이다. private double speed;public void setSpeed(double speed){ if(speed 위의 코드를 보면 speed 필드는 privat.. 2023. 12. 18.

티스토리툴바