creamymood의 개발 공부 발자취 💭

개인 프로젝트 - 날씨 앱 (3) 특정 도시 날씨 (메인페이지구성)

개인 프로젝트 - 날씨 앱 (2) 현재 위치의 날씨 받아오기 (메인페이지구성)개인 프로젝트 - 날씨 앱 (1) 현재 위치 받아오기날씨앱 메인페이지에서 구현 할 내용이, 내가 있는 위치의 날씨 정보 이므로, 현재 위치를 우선 알아야 한다.그 과정에 필요한 내용.날씨 앱 말고creamymood.tistory.com앞 게시글에서 이어집니다. 앞 게시글에서, 메인페이지에서의 현재 지역 위치 날씨 칸은 구현 완료 했다. 해당 게시글에서의 구현 목표는1.(7)~(9)번 특정 나라의 온도 API를 받아온 뒤 렌더링 한다.2. 예쁘지 않은 css..니까, 더 자주 쳐다보고 싶게 조금은 디자인적 요소를 추가해본다.3. (11)번의 도시 검색창을 만들어준다.1. 특정 나라의 온도 API를 받아온 뒤 렌더링우선, Ope..

리액트 공부하기 - 리액트 아이콘 라이브러리

동기분의 소개로, 곧 한번 해봐야지 했던 아이콘 사용!아주 단순하고 쉽다 ! 자주 활용해야지 :) React Icons react-icons.github.io리액트 아이콘 라이브러리 1. 설치npm install react-icons 2. 사이트에서 원하는 아이콘을 선택 후 (커스터마이징도 쉽게 가능) 3. 사용할 컴포넌트 파일에서 import 해준다.import { FaHeart } from "react-icons/fa"; 4. 그 뒤, 컴포넌트 처럼 사용해주면 됌.import { Faheart } from 'react-icons/fa';function App() { return Let's go for a ?;} * 공부한 부분 예를 들어 Search에 관련되어 돋보기 아이콘을 사용해서, 그 아이..

프로젝트 보완하기 - alert창을 toastify로

하나 둘 배워가는 재미가 있어.. 리액트 공부하기 - toastify 라이브러리 초보 설명조교님이나 동기분들하고 대화하다보면 좋은 꿀 정보를 많이 얻는다 !그 중 하나 toastify.기존 alert 대신에 사용해볼 수 있어서 흥미로워 보였다 ! 라이브러리라 사용도 간편할 것 같았다 🐰🤍 recreamymood.tistory.com 이렇게 뜨는 alert창을 toastify로 바꿔보자 둑흔 toastify 컴포넌트를 만든 뒤 -> alert 자리에서 import 해와서 사용한다.또는 간단한 제공 함수를 사용한다. 우선 챗지피티 알려준 자세한 설명은 다음과 같다.더보기1. 우선 라이브러리 설치npm install react-toastify 2. toastContainer 전역에서 사용하기 위해 ap..

리액트 공부하기 - toastify 라이브러리 초보 설명

조교님이나 동기분들하고 대화하다보면 좋은 꿀 정보를 많이 얻는다 !그 중 하나 toastify.기존 alert 대신에 사용해볼 수 있어서 흥미로워 보였다 ! 라이브러리라 사용도 간편할 것 같았다 🐰🤍 react-toastify란?사용자에게 빠르고 가볍게 피드백(알림)을 줄 수 있는 Toast UI 라이브러리"Toast"란?웹/앱에서 화면 한쪽에 짧게 뜨는 알림 메시지로그인 성공 → "로그인에 성공했습니다!"장바구니 추가 → "상품이 장바구니에 담겼어요."공식 문서에서 안내해주는 설치 방법과 간단한 사용 예시Installation$ npm install --save react-toastify$ yarn add react-toastify import React from 'react'; import..

리액트 공부하기 - 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) } //도시 이름으로, 날씨 호출하기 함수 ..

👩🏻‍💻공부하는 새로운 분야의 새롭게 접하는 용어나 단어가 느껴지기만 하면, 거부감이 느껴진다. 낯선 분야에 대해 조금은 쉽게 적응하기 위해서는 어려운 용어에 대하여 먼저 정리를 하면 보다 효율적으로 공부가 가능하다는 First Word 법칙이다. 낯설고 이해하기 어려운 그러한 단어들을 나만의 단어로 내가 이해할 수 있게 정리한다. 비유적인 표현으로 먼저 공부하고 또 나만의 언어로 정리해보고 이해해보고정확한 정의나 개념으로는 추후에 익숙해져도 된다! 오늘 새로운 AWS 강의를 들으며 강사님께서 알려주신 공부법인데이미 나는 코딩 공부에 적용하고 있구나. 잘하고 있구나를 깨달았다. 또 새로운 과목도 화이팅~

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 (즉,..

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

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 명령어로 테이블 생성..