heyday2024 님의 블로그

.첫번째 트러블슈팅: 렌더링 방식 설정 고민1. 문제 발생 프로젝트에서 페이지 별로 다양한 렌더링 방식을 적용하는 과정에서 SSR과 ISR을 적용하는 방식에 대한 고민이 생김.렌더링 방식 종류:Incremental Static Regeneration (ISR), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Static Site Generation (SSG)1) fetch에 no-store 옵션 주기2) page.tsx 컴포넌트에 dynamic 추가하기1) fetch에 옵션 주기2) page.tsx 컴포넌트에 revalidate 추가하기각각의 방식 중에 fetch 함수에서 렌더링 방식을 미리 정의해서 사용할지, 각 페이지에서 렌더링 방식을 명시적으..

문제상황:// NewProductList.tsx{/* @ts-expect-error Async Server Component */}const NewProductList = async () => { const res = await fetch("http://localhost:4001/products", { cache: "no-store", }); const data = await res.json(); const newData = data.filter((p) => p.isNew); return ( {newData.map((product) => ( {product.title} {product...

1. 렌더링 패턴 종류1. Client-Side Rendering (CSR)설명: 리액트의 전통적인 방식으로 SPA(Single Page Application)에서 클라이언트 측에서 동적으로 페이지를 렌더링.장점:최초 로딩 후 사용자와의 상호작용이 빠르고 부드럽다.서버 부하가 적고, 서버 요청 없이도 동작 가능.MPA(Multi Page Application)에서 발생했던 깜빡거림 문제를 해결.단점:초기 로딩 시간이 길어질 수 있음.SEO 최적화가 어려움(검색 엔진이 CSR을 완전히 지원하지 않는 경우가 있음).2. Static Site Generation (SSG)설명: 정적인 페이지를 빌드 타임에 미리 생성하여 제공.장점:**TTV(Time To View)**가 짧고 SEO 최적화에 유리.CDN 캐싱..

알고리즘 코드 카타를 진행하면서 새롭게 알게된 RegExp에 대해 정리해보았습니다.function solution(s) { numberArray = [ "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine" ]; numberArray.forEach((number, index) => { const regex = new RegExp(number, "g"); s = s.replace(regex, index); }) return Number(s)}console.log(solution("one4seveneight")); //1478(- 이런 식으로..

https://mountain-due.vercel.app/ Mountain Due mountain-due.vercel.app 피드백 (제천 튜터님)전반적으로 quality 가 매우 좋습니다제출하실때 이미지 파일 용량이 매우 컸습니다, 하나당 79MB ㄷㄷ 이미지 파일을 최적화하는 것이 좋습니다. https://squoosh.app/ (Google에서 제공하는 이미지 최적화)비로그인 시 좋아요을 disabled 하는 것이 아니라 회원가입/로그인을 유도하는 방식의 UX가 더 선호됩니다실시간 유효성 검사와 제출버튼 로직을 매우 잘 짜셨습니다현재 위치에 따른 지도 interaction이 좋습니다Google 소셜 로그인도 잘 되어있습니다만, 이용약관에 대한 유효성 검사를 적용시킬 수 있는 부분이 필요하다고 생각됩..

React Hook Form의 사용 배경 및 장점React로 로그인/회원가입 폼을 구현할 때 처음에는 useState를 사용하여 각 필드의 상태를 개별적으로 관리했다. 하지만 이렇게 하면 관리해야 할 state가 많아지고, 입력할 때마다 컴포넌트가 리렌더링되는 문제가 발생했다. 이러한 비효율성을 해결하기 위해 react-hook-form을 도입했다. React Hook Form 장점:간단한 API: 필드 값 관리, 유효성 검사, 제출 핸들러를 간단하게 구현 가능.리렌더링 최소화: 내부적으로 ref를 활용하여 상태를 관리하므로 폼 상태 변경 시 불필요한 리렌더링이 발생하지 않음.유효성 검사 지원: 기본적인 유효성 검사를 쉽게 설정 가능간소화된 코드: 여러 개의 state와 이벤트 핸들러를 사용하지 않고, ..

HTML5 기본 유효성 검사와 맞춤형 유효성 검사의 차이1. HTML5 기본 유효성 검사의 동작 원리유효성 검사 조건:required, minlength, maxlength, pattern 등 속성을 통해 브라우저가 자동으로 입력값 검증.폼 제출 전 브라우저가 각 필드의 유효성을 확인.기본 메시지 표시 조건:onSubmit 이벤트에서 e.preventDefault()를 호출하지 않아야 기본 유효성 검사가 동작. 속성을 사용하면 기본 검사가 비활성화됨.2. 유효성 검사가 동작하지 않을 수 있는 상황JavaScript로 직접 구현한 경우:브라우저의 기본 메시지가 JavaScript 커스텀 메시지와 충돌.예: setErrors와 같은 사용자 정의 에러 메시지 사용.e.preventDefault()를 호출한 경..

1. Props를 전달해주는 방식 (Props Drilling 이슈)설명상태를 최상위 부모 컴포넌트에서 자식 컴포넌트를 거쳐 전달하는 방식.간단한 구조에서는 사용 가능하지만, 깊은 컴포넌트 구조에서는 비효율적임.장점간단하고 설정이 필요 없음.React의 기본 기능만으로 구현 가능.단점컴포넌트 계층이 깊어질수록 관리가 어려워짐.상태 전달이 필요 없는 중간 컴포넌트도 불필요한 리렌더링을 경험할 수 있음.코드 예시// 최상위 컴포넌트function App() { const [count, setCount] = React.useState(0); return ;}// 중간 컴포넌트function Parent({ count, setCount }) { return ;}// 최하위 컴포넌트function Child..

1. HTTP란?HTTP(Hypertext Transfer Protocol)는 서버와 클라이언트 간 데이터를 주고받는 통신 프로토콜.특징:80번 포트를 사용.데이터를 평문(Plain Text)으로 전송.빠르고 효율적이지만 보안이 취약.사용 사례:뉴스, 공개된 정보와 같은 민감하지 않은 데이터 전송.HTTP의 문제점도청 가능: 데이터가 암호화되지 않아 네트워크에서 쉽게 읽힘.데이터 변조 가능: 전송 중 데이터가 손쉽게 변조될 수 있음.신원 위조 가능: 클라이언트가 서버의 신뢰성을 검증할 수 없음.2. HTTPS란?HTTPS(Hypertext Transfer Protocol Secure)는 HTTP에 SSL/TLS 암호화를 추가하여 보안을 강화한 프로토콜.특징:443번 포트를 사용.데이터를 암호화해 제3자가..

Troubleshooting & Lessons Learned문제: 잘못된 API URL 입력과 경로 입력 오류원인: Glitch가 필요로 하는 서버를 위한 깃허브 주소를 제공하지 않고, 잘못된 깃허브 url을 입력함.  testResults 엔드포인트 경로를 제대로 확인하지 못해 API 호출 실패. 해결 과정:Glitch 프로젝트에서 Live URL 확인 (Share → Live Site).axios의 baseURL을 올바른 Glitch URL로 수정.올바른 URL로 변경 후 정상 작동 확인.느낀점: API URL은 반드시 정확히 확인해야 하며, Glitch나 외부 서비스를 사용할 때는 제공된 URL을 꼼꼼히 검토해야된다. 문제: 리펙토링 과정에서의 문제원인: 문제가 주어진대로 단계 단계씩 진행하면서 상..