creamymood의 개발 공부 발자취 💭

TypeScript 공부를 시작하면서..타입을 지정해주는 것 말고는 큰 메리트가 없는데(?) ㅋㅋ 라는 생각이 들면서..이걸 왜 공부해야할까? 공부를 한다면 어느정도로 해야할까? 리액트랑은 아예 별개인건가? 리액트랑 함께 쓰면 좋다고 ? 그렇다면.. 리액트랑 같이 쓰인다면, 어느정도로 손봐서(?) 어떻게 어느시점에 쓰는건가.. 이런게 다 궁금해졌다. 일단 기본 문법들은 익히고 있는데,,어떨 때 언제 어떻게 쓰는지 알아야.. 사용도 할 수 있을테고 응용도 하고 할테니까, 한번 찾아봤다 혼자 찾아보고 생각해본 결론은.. 타입 검사가 추가된 조금 더 발전된 자바스크립트를 리액트에서 쓰는 것! 리액트가 기본이되, 타입 지정 같은 것을 할 수 있는 문법이 추가된 것 ! ~ 이라고 생각하기로 했다.✓타입스크립..

해당 게시글에서의 구현 목표는디테일 페이지에서 온도에 따른 추천 옷과 노래를 보여주고,날씨에 맞는 배경을 보여준다.1) 한 공통 컴포넌트에서 온도별로 나눈다.공통 컴포넌트를 만든 뒤, 그 안에서 온도 분기 처리 해줄 예정 1. 우선 Clothes 공통 컴포넌트에 온도를 props로 내려준다. 불필요한 코드를 제거한 코드는 다음과 같다. return( { detailCityWeatherValue? ( ):( 날씨 정보를 불러오는 중... )} ..

인라인 스타일?- css파일 없이 JSX 안에서 바로 style 속성에 객체로 스타일을 적용하는 방법- 간단해서 바로 테스트해보기나, 간단한 프로젝트에서 사용할 수 있다. function MyComponent() { return ( 인라인 스타일 예시 );} 문법 내용속성 이름은 카멜케이스(camelCase) 로 써야 함예: backgroundColor, fontSize, marginTop값은 무조건 문자열이나 숫자단위가 px일 경우, 숫자만 써도 자동으로 처리됨 예시: 버튼에 인라인 스타일 주기function MyButton() { const buttonStyle = { backgroundColor: 'black', color: 'white', pa..

children은 React 컴포넌트에서 컴포넌트 태그 안에 들어가는 자식 요소들을 전달받을 수 있게 해주는 특별한 prop.(* 고정 문법은 아니지만, 리액트에서 특별하게 처리하는 props이름으로써, 다른 데이터 변수명으로 사용하는건 삼가해야함* ) 👩🏻‍💻기본 사용법function MyBox({ children }) { return ( {children} );}// 사용 예시function App() { return ( Hello, world! Click me );} MyBox 컴포넌트는 children prop을 받아 안에 넣습니다.App에서 태그 안에 들어간 와 요소들이 children으로 전달됩니다.→ Hello, wo..

시작 전에.. 로고를 클릭하면 메인페이지로 이동하게 하는 코드 return( W E A T H E R )스타일을 입혀서, 하이퍼링크 스타일 없애줌..해당 게시글에서의 구현 목표는,검색창에 검색 하면 디테일 페이지에서 사용자가 검색한 도시의 날씨 디테일을 보여주는 것 ✎ 혼자 고민해본 흐름더보기1. 우선 인풋창에 입력 되는 값을 상태로 저장한다. 2. 그리거 버튼을 눌렀을 때 -> 인풋창 값으로 url을 그 값으로 바꾸면서 디테일로 이동하는 navigate3. 그리고 디테일 페이지에서 useParams를 써서 그 도시 이름을 받아와서 API 호출 한다 ..

개인 프로젝트 - 날씨 앱 (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에 관련되어 돋보기 아이콘을 사용해서, 그 아이..

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

조교님이나 동기분들하고 대화하다보면 좋은 꿀 정보를 많이 얻는다 !그 중 하나 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() 이런식의 문법은 당연히 알고 있었는데, () 내부가 헷갈렸다. 그래서 몇가지 공부를 했고,당연하다고 생각했는데, 다시 머릿속에 집어넣은 개념들은 아래와 같다. 결론 먼저 정리 하고 가기!❶(() =>{}) 이것도 있고..(() =>()) 이것도 있고.. 각각 차이를 알아보니, 우선 이 둘의 차이는 return의 차이 였다. ❷((example)=>()) 이것도 있고(example..