creamymood의 개발 공부 발자취 💭

리액트 공부하기 - map 복습 및 추가 공부

공부는 끝이없다 . . 이제 조금 내공이 생겨(?) 코드를 직접 작성 해보려고 하는데.. map 뒤부터 헷갈리기 시작 😭..진짜 자바스크립트 지식이 부족해서 그런가.. 여기저기 자꾸 구멍이 뚫리는 기분이지만 !이렇게 된거 다시 깊게 공부하자고 생각하고 공부~ 일단 배열이 있으면 해당 배열을 map을 돌릴 때, 배열.map() 이런식의 문법은 당연히 알고 있었는데, () 내부가 헷갈렸다. 그래서 몇가지 공부를 했고,당연하다고 생각했는데, 다시 머릿속에 집어넣은 개념들은 아래와 같다. 결론 먼저 정리 하고 가기!❶(() =>{}) 이것도 있고..(() =>()) 이것도 있고.. 각각 차이를 알아보니, 우선 이 둘의 차이는 return의 차이 였다. ❷((example)=>()) 이것도 있고(example..

리액트 공부하기 - 변수와 상태, 그리고 블록 스코프

코드를 작성하는데, 예를 들어const fetchWeather = async (lat, lon) => { const key = import.meta.env.VITE_WEATHER_KEY const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${key}&lang=kr` try{ const respose = await fetch(url); const data = await respose.json() console.log(data) setWeather(data) } //도시 이름으로, 날씨 호출하기 함수 ..

리액트 공부하기 - API 엔드포인트

API로 데이터 받아올 때, 종종 들었던 엔드포인트에 대해 공부하고 넘어가보자 API 엔드 포인트란?: API 엔드포인트(API endpoint)"는, API를 통해 접근할 수 있는 URL 주소 특정 웹사이트가 있고, 그 웹사이트에서 날씨 정보를 가져오는 기능이 있다면, 이런 URL이 있을 수 있다.https://api.weather.com/current?city=Seoul이 주소가 바로 엔드포인트. 이 URL로 요청을 보내면, 서버는 "서울의 현재 날씨" 정보를 응답으로 준다.API: 애플리케이션끼리 데이터를 주고받기 위한 규칙.엔드포인트: API의 특정 기능에 접근하는 URL. 예제 🍏 날씨 정보를 제공하는 API가 있다고 할 때:https://api.weather.com이게 기본 URL (즉,..

context API는 익혔으니 뭔가 실무적으로 사용할 만 한 전역 상태관리를 공부 해보려고 하는데리덕스.. 는 쳐다만 봐도 동기를 잃어서,,, 조교님이 추천해주시기도 하고, 요즘 핫하다는 zustand 공부하기 진짜 공부해보니까 정~말 간단하고 좋으네욥. 우선 공식 문서 읽어보기 ! GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.github.com똑똑한 곰돌이.Zustand는 정말 배우기 쉬운 ..

간단하게 전역으로 상태를 관리할 수 있는간단하고도 쉬운 context API 다시 공부하기 ! 개념은 이해가 됐었는데 왜 사용하는 부분(useContext)를 custom hook으로 만들어 만드는지 어려웠는데 해당 게시글에서 자세히 다뤄봤다 ✨ 해당 게시글은 context API 개념 리액트 공부하기 - 전역 상태 관리 context API후.. 여행 후, 현생 복귀란 쉽지 않네요하지만,, 다시 제 자리에서 집중 ! 상태관리에서 createContext, Provider, useContext 이런 것들은 React에서 컴포넌트끼리 데이터를 공유하기 위해 사용하는 도구🐰creamymood.tistory.com 핵심 개념 정리1. createContext()컨텍스트를 생성하는 함수.보통 null이나 {..

모야.. 실무에서 쓰려니까 뭐 더 많이 알아야 하잖아?프로젝트에서 페이지는 아주 많아질테니.. 라우터 추가 공부 필요하겠잖아 ? 라우터의 기초 내용은 아래 링크에서 볼 수 있다. 리액트 공부하기 - React Router 리액트 라우터1. 리액트 라우터란?2. 리액트 라우터 사용하는 법3. 궁금증 두가지. (왜 설치를 따로해야하는가? 주소를 이동하는건데 새로고침이 안된다고 ?!)4. 리액트 라우터 주요 컴포넌트5. 리액트 라우터 주creamymood.tistory.com 1. useNavigate() 이런 훅을 쓸 때, 바로 쓰진 못하고 변수에 할당에서 쓰더라.이유는 ? ↓더보기useNavigate() 같은 훅을 바로 호출해서 못 쓰고 변수에 할당해서 쓰는 이유는?const navigate = useN..

훅이란?아래 블로그에서 자세히 읽어볼 수 있다. 리액트 공부하기 - custom hooks? 그냥 함수 차이?custom hooks를 공부하며 헷갈리게 된 또 기본 개념- 다시 짚고 갑시다.우선 훅(hook)이 뭘까. 리액트(React)에서 **훅(Hook)**은 함수형 컴포넌트에서 **상태(state)**나 라이프사이클(lifecycle) 같은 리액트creamymood.tistory.com결론:더보기React는 훅 호출 순서에 따라 상태를 기억해요. 만약 훅 호출이 조건이나 반복문 안에서 바뀌면, React가 어떤 훅이 어느 상태인지 헷갈려서 오류가 생길 수 있기 때문에 함부로 쓰지 못하니까 “리턴 값을 이용한다”훅은 함수이지만, 훅을 호출해서 리턴받은 값(함수나 상태 변수 등)을 변수에 저장해서 나..

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