creamymood의 개발 공부 발자취 💭

프로젝트를 하면서 비동기로 데이터를 받아오는 작업을 많이 했는데, 그 때 활용하면 좋을 로딩 관련그러니까, 로그인 관련한 로딩 패치 받는 것에 관련한 로딩 우선 영화 페이지에서는 크게 이렇게 있을 것 같은데(이 두가지는 분야가 아예 다르기 때문에, 전역 상태도 따로 관리하면 좋을 것 같다.) 비슷한 부류끼리 공통 로딩 컴포넌트 만들거나, 그 때 그 때 만들어주면 좋을 것 같다. 챗 지피티가 설명해준 그 외에 추가로 로딩 로직 넣으면 좋을 곳 ↓더보기로그인, 데이터 패치 외에 로딩 스피너나 로딩 상태 표시를 적용하면 좋은 곳 몇 가지 추천해드릴게요.1. 로그인 관련 로딩로그인 요청 중일 때: 서버에 로그인 요..

프로젝트 하면서 로그인 구현하고 ~ 그러다보니, 접근할 수 있는 페이지만 따로 분리 하는 것에 대한 필요성.자주 쓰일거니까, 보기 쉽게 정리 해두어야겠다고 느낌 리액트 라우터(React Router)에서 Protected Route(보호된 라우트)를 설정하는 방법은 "인증된 사용자만 특정 페이지에 접근할 수 있게 하는 기능"예를 들어 로그인하지 않은 사용자는 /dashboard 같은 페이지에 접근하지 못하도록 막고, /login으로 리다이렉트시키는 것. 기본 개념 설명Protected Route는 React 컴포넌트를 하나 만들어서, Route를 감싸는 방식으로 만듬. 이 컴포넌트는 사용자의 로그인 여부를 확인하고:* 감싸는 방식이란, 결국 고정 문법이나 라이브러리는 없기 때문에, 사용자 정의 컴포넌트..

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. 소셜 로그인 / 회원가입(카카오..