heyday2024 님의 블로그

고급 타입스크립트 기법 설명조건부 타입개념조건부 타입은 extends 키워드를 사용하여 특정 조건에 따라 다른 타입을 반환하는 유연하고 강력한 타입 시스템입니다. 삼항 연산자(? :)와 비슷한 구문을 사용하며, 타입 수준에서 분기 처리를 수행합니다.기본 문법T extends U ? X : YT가 U의 하위 타입이면 X를 반환.그렇지 않으면 Y를 반환.예제type IsString = T extends string ? "string" : "not string";type A = IsString; // "string"type B = IsString; // "not string"활용 예제배열인지 확인하는 조건부 타입type IsArray = T extends any[] ? true : false;type Te..

실전 유틸리티 타입Generic을 사용해서 타입을 효율적으로 쓸 수 있게 해줌.Utility Function은 원래 "데이터를 이용해서 간단한 계산을 하는 함수"를 뜻함! 이처럼 Utility type도 간단한 계산을 수행해 주는 타입!==> 한마디로 유틸리티 타입은 타입 변환을 용이하게 하기 위해서 타입스크립트에서 지원하는 문법PickT에서 프로퍼티 K의 집합을 선택해 타입을 구성합니다.interface Todo { title: string; description: string; completed: boolean;}type TodoPreview = Pick;const todo: TodoPreview = { title: 'Clean room', completed: false,}..

타입 스크립트란? 자바 스크립트 + 정적 타입 시스템즉, 자바 스크립트의 모든 기능을 포함하지만 정적 타입 시스템이 곁들인....그렇다면 타입 시스템은 무엇일까?타입 시스템은 프로그래밍 언어에서 값들을 분류하고 각 값이 어떤 타입인지 정의하는 체계임. 이를 위해 타입 시스템은 코드 타입 검사 시기와 방법에 대한 규칙까지 설정함.nullundefinedbooleanstringnumber* 자바스크립트는 동적 타입 언어 ==> 동적 타입 언어(dynamic typed)는 프로그램을 실행한 이후에 변수, 함수의 타입이 결정됨정적 타입 시스템(static typed)은 타입 시스템 중에 프로그램이 실행되기 전에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식==> 즉, 정의하자면 동적 타입 언어는 변수의 타..

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 캐싱..

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

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을 꼼꼼히 검토해야된다. 문제: 리펙토링 과정에서의 문제원인: 문제가 주어진대로 단계 단계씩 진행하면서 상..

인증(Authentication)과 인가(Authorization)인증로그인하여 사용자가 등록된 회원인지 확인하는 절차.예: 아이디와 비밀번호를 입력해 로그인 성공 여부를 확인.인가인증된 사용자가 특정 리소스에 접근할 권한이 있는지 확인.예: 마이페이지에서 개인정보를 요청할 때, 해당 리소스에 접근 가능한지 확인.Q&A 예시질문: 유저가 마이페이지에서 개인정보 요청 시 서버는 인증인가요, 인가인가요?답변: 인가유저가 이미 로그인하여 인증된 상태이며, 특정 리소스(개인정보)에 접근 권한이 있는지 확인하는 과정이기 때문.HTTP의 두 가지 주요 특성무상태(Stateless)요청 간에 상태를 유지하지 않음. 이전 요청의 정보를 기억하지 않음.예: 로그인 상태가 자동으로 유지되지 않음.비연결(Connection..