creamymood의 개발 공부 발자취 💭

try...catch 기본 개념try { // 시도할 코드 (문제가 생길 수도 있음)} catch (error) { // 에러가 발생했을 때 실행할 코드} 예를 들어, 어떤 API 요청을 해서 데이터를 가져올 때 문제가 생길 수도 있잖아? 그럴 때 이렇게 써:import React, { useEffect, useState } from 'react';function UserProfile() { const [user, setUser] = useState(null); const [error, setError] = useState(null); useEffect(() => { async function fetchData() { try { const response = aw..

음. 정말 기초라고 생각했고, 쓸 때 그냥 대충 휘릭 ~ 썼는데프로젝트 하면서 막 컴포넌트 분리하고, 가져다 쓰고 하니까 여간 헷갈리는게 아니더라!아주 기초 내용이니 두고 두고 볼 수 있을 것 같아서 탄탄히 정리하기. export란?모듈(파일)에서 변수, 함수, 컴포넌트 등을 다른 파일에서 사용할 수 있도록 내보내는 것. export 종류 1-1. Named Export (이름을 붙여서 내보내기)export const Jane = () => { return Hi Jane; }; 또는const Jane = () => { return Hi Jane; };export { Jane }; 이 방식은 여러 개를 한 파일에서 내보낼 수 있다. 사용법 (가져올 때)import { Jane } from './MyCo..

앞 4-2단계에서 이어집니다. mini project - 영화 페이지 만들기(4-2단계) - 백엔드 연결 (supabase) 로그인 / 회원가입 구현 /앞 4-1단계에서 이어집니다. 이 단계부터는, 아직 경험이 없기 때문에. 많은 시행착오가 있을 예정.. 차근 차근 해보면 되겠지 ?! mini project - 영화 페이지 만들기(4-1단계) - 백엔드 연결 전 input창creamymood.tistory.com 부캠에서 제시해준 구현단계 네번째 최종 구현 단계는 다음과 같습니다. 1. 기본 이메일 / 비밀번호 기반의 로그인 / 회원가입 과정 (Supabase 백엔드 이용 하는 방식)2. 소셜 로그인 / 회원가입(카카오, 구글, 네이버 등 소셜 연동) 이렇게 두가지 방법으로써 로그인과 회원가..

근데 리액트에서 useEffect는 왜 항상 (() => {}) 이렇게 하는거야? useEffect() {} 이건 안돼 ?그냥 내 질문부터가.. 자바스크립트 기초가 부족해보이지만 (머쓱) .. 성장하는게 중요하니까.. 더보기 React에서 useEffect를 쓸 때 항상useEffect(() => { // 실행할 코드}, [의존성]);이렇게 함수를 인자로 넘겨야 해.왜 useEffect(() => {}) 이렇게 하는지?useEffect는 첫 번째 인자로 함수(콜백 함수)를 받는 함수야.그래서 useEffect 안에 실행할 코드를 바로 쓰는 게 아니라, 함수 형태로 넘겨야 해.이 함수는 컴포넌트가 렌더링된 후에 React가 실행해줘.그러면 useEffect() {} 는 왜 안 될까?useEffect() ..

SQL 이란?SQL(에스큐엘)은 Structured Query Language(구조화된 질의 언어)SQL은 데이터베이스 안에서 "조회, 추가, 수정, 삭제, 생성" 같은 일을 **명령어(문법)**로 할 수 있게 해주는 언어그리고 이걸 실행하는 시스템이 SQL 시스템 또는 **DBMS(Database Management System)**라고 불린다. 예를 들어:블로그에 올라온 글 목록을 보고 싶을 때쇼핑몰에서 "검정색 신발"만 보고 싶을 때회원 정보를 수정하거나 삭제할 때이런 동작을 할 수 있도록 도와주는 명령어가 SQL. Jane이 SQL 언어로 SELECT * FROM users; 라고 말하면DBMS가 "알겠어, users 테이블에서 모든 정보 꺼내줄게!" 하면서데이터베이스에 저장된 데이터를 찾아 보..

1. 데이터 베이스란 ? (DBMS) 왜 필요한지?: 데이터 모음을 보다 편리하고 효율적으로 관리하는 소프트웨어 특정 목적에 맞게 데이터를 저장하고, 효율적 관리, 필요 시 쉽게 검색하거나 수정할 수 있도록 체계화된 데이터의 집합. - 사용자, 애플리케이션, 시스템 등에 의해 생성된 데이터를 저장하고, - 여러 사람이 동시에 접근할 수 있도록 하며, - 중복을 줄이고 일관성을 유지하도록 설계된다. 2. 데이터 베이스의 종류: 데이터 베이스는 크게 관계형 데이터 베이스(RDBMS)와, 비관계형 데이터 베이스(NoSQL DBMS)로 나뉜다. 2-1 관계형 데이터 베이스(RDBMS)관계형 데이터베이스는 데이터를 **행(Row)과 열(Column)**로 구성된 테이블(Table) 형식으로 저장..

옵셔널 체이닝이란??. 문법을 사용해서 객체의 중첩된 속성에 접근할 때, 중간에 null이나 undefined가 있어도 에러를 발생시키지 않고 undefined를 반환하게 해주는 문법. 리액트(React)에서 **옵셔널 체이닝 (Optional Chaining)**은 매우 자주 쓰이는 문법인데, 특히 실무에서 API 호출 결과나 객체 안에 값이 있는지 확인할 때 정말 많이 사용한다. 기본 예제const user = { name: "Jane", profile: { age: 20, country: "Korea" }};console.log(user.profile?.age); // 20console.log(user.profile?.gender); // undefinedconso..

앞 4-1단계에서 이어집니다. 이 단계부터는, 아직 경험이 없기 때문에. 많은 시행착오가 있을 예정.. 차근 차근 해보면 되겠지 ?! mini project - 영화 페이지 만들기(4-1단계) - 백엔드 연결 전 input창 구성하기 로그인 / 회원가입 구부캠에서 제시해준 구현단계 네번째 최종 구현 단계는 다음과 같습니다. Supabase(백엔드)를 연결하기 전에, 우선 프론트만으로 로직을 구성해봅니다.1. 회원가입/로그인 페이지 구현하기기존 navBacreamymood.tistory.com 부캠에서 제시해준 구현단계 네번째 최종 구현 단계는 다음과 같습니다. 1. 기본 이메일 / 비밀번호 기반의 로그인 / 회원가입 과정 (Supabase 백엔드 이용 하는 방식)2. 소셜 로그인 / 회원가입(카카오..

부캠에서 제시해준 구현단계 네번째 최종 구현 단계는 다음과 같습니다. 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라는 열쇠(쿠키) 로 계속 들고 다니는 것 로그인 정..