creamymood의 개발 공부 발자취 💭

리액트 공부하기 - 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 (즉,..

개인 프로젝트 - 날씨 앱 (2) 현재 위치의 날씨 받아오기 (메인페이지구성)

개인 프로젝트 - 날씨 앱 (1) 현재 위치 받아오기날씨앱 메인페이지에서 구현 할 내용이, 내가 있는 위치의 날씨 정보 이므로, 현재 위치를 우선 알아야 한다.그 과정에 필요한 내용.날씨 앱 말고도 현재 위치로써 활용할 수 있을 내용이 많을creamymood.tistory.com 앞 게시글에서 이어집니다.2. 현재 위치 날씨 호출 하기 현재 위치를 받아왔으니, 해당 정보를 기반으로 날씨도 호출해보자.큰 틀은 다음과 같다. 1. Home.jsx에서 현재 날씨를 호출한다. 2. 받아온 정보에서 필요한 내용들로 아래 내용 처럼 간단한 필요한 구성을 한다. 같이 공부하시는 동기님이 알려주신 날씨 API 사이트더보기 Weather forecast - OpenWeatherMapWe use cookies to per..

SQL 공부하기 - CRUD -(1) INSERT, (2) SELECT, (3) UPDATE , (4) DELETE

1. INSERT1. CRUD란?2. 테이블 구성 요소3. 테이블 채우기 (데이터 삽입)2. SELECT1. 테이블 조회 (전체 조회? 부분 조회?)2. 정렬 관련 문법 - ORDER BY, LIMIT키워드, 자주 사용되는 함수, DISTINCT 키워드 3. UPDATE1. UPDATE 명령어2. 실수 방지 대비4. DELETE 1. INSERT 1- 1. CRUD란?CREATEREADUPDATEDELETE insert는 CREATE에 가깝다.select는 READ에 가깝다.update와 delete는 update, delete다!1-2. 테이블의 구성 요소는 다음과 같다. 1-3 테이블에 데이터 삽입이러한 테이블에 데이터 삽입 하려면, 먼저 CREATE TABLE 명령어로 테이블 생성..

개인프로젝트 - 날씨 앱 만들기 part1. (기획, 설계, 고민하기)

혼자서 하는 첫 프로젝트니까 부캠에서 제시해준 구현 단계 없이 시작 하려고 하니.. 시작 하기 앞서, 어떤 방식으로 해야할까 고민이 되었다. 우선 1. 어떤 기능들이 있으면 좋을지 생각해본다. 2. 그에 맞는 구현 단계를 구상해본다. 3. 코드로 작성해본다.챗 지피티의 조언 ↓더보기 실제 프로젝트를 더 수월하게 진행하고, 나중에 수정할 때 덜 힘들게 하려면 약간 더 구체화해두는 게 좋아.일반적인 프론트엔드 프로젝트 진행 단계1. 요구사항 정의 (무엇을 만들 것인가)어떤 기능이 필요한가?누가 사용할 것인가? (사용자 페르소나 간단히라도 생각해보기)플랫폼은? (웹, 모바일 등)예시:사용자 위치 기반 현재 날씨 보여주기도시 검색해서 날씨 확인 가능하게 하기섭씨/화씨 전환 버튼3일 또는 5일 예보 보여주기날씨에..

개인 프로젝트 - 날씨 앱 (1) 현재 위치 받아오기

날씨앱 메인페이지에서 구현 할 내용이, 내가 있는 위치의 날씨 정보 이므로, 현재 위치를 우선 알아야 한다.그 과정에 필요한 내용.날씨 앱 말고도 현재 위치로써 활용할 수 있을 내용이 많을 것 같다!1. 현재 위치 받아오기 구글링 해보니 geoLocation 해당 사이트에서 위치 api 제일 많이 받아오는 것 같았다.날씨 앱 만드시는 분들 중에 왕초보를 위한 설명은 없는 것 같아서 한번 적어보기로.. 일단 geoLocation으로 위치 받아오는 것부터 친절하게 연습해보자 공식 문서만 참고하기엔 아직 어렵기도 해서 구글링 해서 찾아낸 방법공식 문서 언제쯤 읽고 변형해서 코드 찔까나.. 사용자가 동의 하면, 해당 함수로써 api호출! Geolocation.getCurrentPosition()는 위치를..

mini project - 보완하기 (영화 목록 API 받아오고 결과 개수 표시하기)

심화반 수업 엿듣다가 .. 다른 분 포폴에서 예를 들어 제품 갯수가 보이고, 그 위에 results: 20개이런식으로 나오더라. 이 기능도 공부해보면 좋을 것 같아서 오프라인 모임때 동기분께 여쭤보니받아온 api에서 length길이로 보이게 하면 된다고 하셨다 ! 간단하지만 알아두면 좋을 것 같아서 간단히 공부해봤당 로직은 매우 간단스..api 받아오는 걸 개발자 도구로 확인 해보면이런식으로 객체 형태로 받아오고 있고 length 20개가 뜬다 ~ 우선 내가 생각했던 로직은fetch('https://api.themoviedb.org/3/movie/popular?language=en-US&page=1', options) .then(res => res.json()) ...

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이나 {..

지금 내 영화 페이지에서, 로딩 관련해서 구현해보고 싶은데api로 데이터 받아올 때, 살짝 늦을 때를 대비해서. 어떤 로직으로 해야할까 ? 고민해봤다. 또 컴포넌트 분리는 어떻게 해야할지도..짜잔~생각한 구현 로직은 크게 다음과 같다. 1. 로딩 공통 컴포넌트 따로 만든다.2. api 호출 하는 부분에, 로딩 상태 만들어서, 호출 함수 전에 우선 로딩중 (데이터 받는중~) 이 상태의 초기값을 true로써 상태 만들어준다.3. jsx return 부분에서도 조건부 렌더링으로 로딩중이라면 > 로딩중 보여주고, 데이터 다 받아왔다면 > 영화 보여주는 걸 한다.구현 단계 중 1. 로딩 공통 컴포넌트 따로 만든다. Loading.jsx (폴더는 컴포넌트 폴더)import React from "react";con..

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