creamymood의 개발 공부 발자취 💭

부캠에서 제시해준 구현단계 네번째 최종 구현 단계는 다음과 같습니다. Supabase(백엔드)를 연결하기 전에, 우선 프론트만으로 로직을 구성해봅니다.1. 회원가입/로그인 페이지 구현하기기존 navBar에, 로그인 / 회원가입 칸은 따로 구성 해두었으니 공통 Input 컴포넌트를 만든 뒤 login 페이지와 Join 페이지그 안을 채워줍니다. 유효성 검사? 프론트에서 구현할 수 있는 것 맞아 ? ↓더보기유효성 검사는 입력값의 형식이 적절한지를 판단하는 거야.✔️ 유효성 검사 (Validation)백엔드 없이도 가능 (프론트엔드에서 처리)비밀번호가 8자리 이상인가?이메일 형식이 맞는가? (@, .com 등)공백 없이 입력했는가?특수문자를 포함했는가?if (password.length ✔️ 인증 (Au..

세션은 “로그인 정보 자체”가 아니다.👩🏻‍💻세션의 진짜 역할은?“이 클라이언트는 인증된 사용자야!”라는 상태를 서버가 기억하는 것 예를 들어서 설명하면:Jane이 로그인할 때 ID/PW를 입력해서버는 “Jane 로그인 성공!” → 세션 저장소에 이런 식으로 저장함:세션 ID: abc123 내용: { userId: 77, username: "Jane", isLoggedIn: true } 클라이언트는 abc123 이라는 세션 ID를 쿠키에 저장해서 매번 서버에 보냄서버는 abc123 을 보고, Jane이라는 사용자가 로그인한 상태인지 판단함그래서...세션 = “Jane이라는 사용자가 로그인된 상태다”는 정보를 저장해둔 공간클라이언트는 그걸 세션 ID라는 열쇠(쿠키) 로 계속 들고 다니는 것 로그인 정..

쿠키(Cookie)란?브라우저(클라이언트)가 작은 데이터를 저장해 두는 기술.http의 무상태성을 보완하는 기술이다.주로 로그인 상태 유지, 유저 설정 저장 등에 쓰인다클라이언트에 저장되며,브라우저가 자동으로 서버에 보내주는 점이 핵심프론트엔드에서 꼭 알아야 할 개념1. 쿠키는 클라이언트에 저장된다브라우저에서 document.cookie를 통해 접근 가능서버로 요청할 때마다 자동으로 포함되어 전송됨 (같은 도메인일 경우)2. 보안상 민감한 정보는 저장하면 안 된다쿠키는 노출될 수 있어서, 절대로 비밀번호, 토큰 등의 민감 정보 저장 X대신 HttpOnly 쿠키는 JS에서 접근 불가 (서버에서만 설정 가능)3. 프론트에서 쿠키를 어떻게 설정/가져오는지 알아야 해실무에서 쿠키가 쓰이는 예사용 예시설명로그인 ..

자바스크립트로 백엔드 쪽을 구현해볼 수 있는데, 그중 간단히 찍먹해본 주제. [서버 만들기] ✨간단한 서버를 만든 뒤, 만든 todo앱을 통해, 상호 데이터를 주고 받는 과정에 대해 공부해본다.초보자인 내..가 get, post, delete 모든 기능을 다 한꺼번에 공부하기엔 지루하기도 하고, 헷갈리기도 하니까.. 우선 get으로 상호 주고 받는 과정을 빠삭히 먼저 익혀 볼 것 ! server.js에서는 서버를 만든다.index.html + todo.js로써 바닐라 자바스크립트를 사용해서 한번 구현해본다👩🏻‍💻 목표 기능→ 서버는 http 모듈로 만들고, /todos로 GET 요청이 들어오면 배열을 JSON으로 응답→ 배열은 더미 데이터 2개 포함→ 클라이언트는 index.html 하나의 파일..

HTTP 요청 메서드(GET, POST, PUT, PATCH, DELETE 등)는 클라이언트가 서버에 보내는 요청 방식을 의미한다.즉, 클라이언트(브라우저, 앱 등)가 서버에 어떤 작업을 하라고 요청할 때 사용하는 메서드.→클라이언트가 서버에 요청(request) 보낼 때 이 메서드들을 씁니다.→ 서버는 이 요청을 받아서 그에 맞는 작업(데이터 조회, 생성, 수정, 삭제 등)을 수행하고, 결과를 클라이언트에 응답(response) 해줍니다. 그래서 표에 적힌 메서드 의미와 주로 하는 일은 서버가 요청을 해석해서 수행하는 역할을 기준으로 설명한 것.즉, **“서버 입장에서 이 메서드를 받으면 어떤 작업을 해야 하는지”**를 나타낸 거죠.총 요약 미리 보기 🐰🐇더보기핵심 ! 총 요약 ! 메서드동작 기..

1. 번들링(Bundling)이란?번들링은 여러 개의 자바스크립트 파일, CSS 파일 등을 하나로 묶는 작업. 리액트 앱을 만들면 App.js, Header.js, Footer.js, style.css 등등 파일이 많은데, 브라우저가 다 따로따로 읽으면 느리고 비효율적이다.그래서 개발 도구(Webpack, Vite 등)가 이걸 한 덩어리로 묶어준다. 이걸 **번들(bundle)**이라고 함.📦 예: main.bundle.js ← 이 안에 모든 JS 코드가 들어가 있음.왜 필요할까?✓ http 요청 수 줄여서, 속도를 ↑↑✓ 코드 압축 → 파일크기 ↓↓✓ 사용 되지 않는 코드 제거해 → 최적화 2. 코드 스플리팅(Code Splitting)이란? 필요할 때만 특정 코드를 불러오도록, 코드를 여러 덩어리..

Nav-bar 검색 기능 구현하기 (API 사용) 구현 단계:Nav-bar에 검색 입력 필드 추가:Nav-bar에 검색 입력 필드를 추가하고, 입력된 검색어를 상태로 관리합니다.useDebounce Hook 구현 및 사용:useDebounce 커스텀 훅을 생성하여, 검색어 입력 후 일정 시간이 지난 후에 debounce 값을 업데이트하고, 그 값을 반환합니다.API 호출 함수 작성:TMdb API를 호출하여 검색 결과를 가져오는 함수를 작성합니다.검색 결과 표시:NavBar에서 디바운스된 값이 업데이트될 때마다 searchParams로 전달합니다.메인페이지에서 searchParams를 통해 검색어를 받아옵니다.해당 검색어를 기반으로 API를 호출한 후, 응답 데이터를 MovieCard에 전달하여 렌더링합..

리액트는 클라이언트 사이드 렌더링을 한다= 서버에서 일단 비어있는 html 파일을 받아온 뒤, 같이 받아온 자바스크립트를 사용해서 최종화면을 그려준다는 뜻자바스크립트를 사용해서 화면을 완성하기 때문에, 클라이언트가 렌더링의 주체가 된다 그런데 만약, 빈 html은 받아왔긴 한데.. 화면을 그리기 위한 javascript 파일이 엄청 크게 되면?당장 필요하지 않는 페이지는 됐고,, 필요한 페이지 부터 우선. 최적화 => 이럴 때 사용할 수 있는 Lazy, Suspense 1. Lazy. lazy 사용 방법은 다음과 같다. 임포트 해올 때, 첫번째와 같은 기본 방식이 아닌, import를 리액트 lazy 함수 사용해서 임포트 해오면 된다. 더보기🔹 React.lazy()동적 import를 통해 컴포넌트를..

리렌더링이 발생되는 기존 조건 때문에, 꼭 리렌더링 될 필요 없을 때, 불필요하게 발생되는 비효율적인 순간들이 있다.규모가 복잡해질 수록, 성능좋고 빠르게 만들기 위해, 최적화 함수! 등장 배경은? 바로 함수형이라서 그렇다 ? 이게 무슨 말이냐면.. 함수형 컴포넌트는 함수를 호출해서 화면에 그리는 식.이런 함수형 컴포넌트에서 상태변경이 일어나면, 그 함수는 더 이상 사용하지 않고 새 상태값으로 함수를 새롭게 호출.따라서 상태가 변경되면 이전의 기존의 함수는 사라지고, 새 함수로 대체되는. 재사용 가능 한 것도 새로만들어쓰는 비 효율 발생! 그렇다면.. 해결 방법은? 따라서 리액트 최적화 함수들은, 이런 생각에서 만들어진 함수들이다 ! 저장 했다가 재 사용 하자 !각각 함수를 어떻게 사용하는지 살펴보자. ..

💡 네트워크 종류📡 1. LAN (Local Area Network)작은 지역 네트워크예: 집, 학교, 사무실 안에서 컴퓨터들이 서로 연결돼서 자료를 주고받을 수 있는 네트워크.빠르고 설정이 간단함.계층형 구조를 사용해 네트워크를 구성.보통 **스위치(Switch)**를 사용해서 장비들을 연결하고,**라우터(Router)**를 통해 외부 인터넷(WAN)과 연결돼. 🏙️2. MAN (Metropolitan Area Network)도시 단위의 네트워크야.주로 기업, 통신사, 정부기관이 운영.광케이블, 이더넷 링 등을 사용해 도시 내 여러 지점을 연결.VLAN, MPLS 같은 기술로 네트워크 분리 및 트래픽 효율화함.🌍3. WAN (Wide Area Network) 전 세계적으로 연결된 네트워크야.인터..