[TIL] 내일배움캠프 React 과정 2023.01.25

Today I Learned Recoil 공부하기 리스트 클릭 시 지도에서 해당 위치로 이동하도록 구현하기 Recoil 공부하기 const todoListState = atom({ key: 'todoListState', // unique ID default: [], // initial value }); const [todoList, setTodoList] = useRecoilState(todoListState); 코드 몇 줄로 전역 상태 관리 끝... 공식 문서 https://recoiljs.org/ko/docs/introduction/getting-started/ https://recoiljs.org/ko/docs/basic-tutorial/atoms https://recoiljs.org/ko/docs..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 26.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.24

Today I Learned GOLLA 프로젝트 게이지바 구현 Typescript 강의 수강 Programmers 문제 풀기 A, B 선택지 투표 결과에 따른 % 나타내기 const GageBar = ({comments}: any) => { let countA = 0; let countB = 0; comments.forEach((comment: CommentItem) => { comment.isA === true ? countA += 1 : countB += 1 }); let ratioA = Math.round(100 - (countB / (countA + countB)) * 100); let ratioB = Math.round(100 - (countA / (countA + countB)) * 100);..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 25.
• textsms

[WIL] 내일배움캠프 열두 번째 주_Typescript

드디어 이번 주에 타입스크립트를 배웠다. 스파르타에서 제공되는 강의는 너무 개념적인 내용들이라 처음에는 이해하는 데 어려움이 있었지만 예전에 redux로 만들었던 투두리스트를 타입스크립트를 이용해서 리팩토링하는 과정을 거치면서 타입스크립트를 좀 더 이해하게 된 거 같다. 근데 사실 아직 타입스크립트의 큰 장점은 느끼지 못했고 가끔 발생하는 타입 에러 때문에 번거롭기만 한 기분이다. 아직 규모가 작은 프로젝트만 경험해봐서 그런 걸까? 무튼 컴파일 타임에 에러를 잡아준다는 건 확실히 좋은 거 같다. 앞으로 계속 프로젝트를 경험하다 보면 타입스크립트를 유용하게 쓰게 될 날이 오겠지! Typescript로 리팩토링한 github 링크 https://github.com/heereal/TO-DO-LIST-Types..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 24.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.23

Today I Learned Typescript, Firebase, React Query로 댓글 CRUD 구현 radio input 선택 값에 boolean 넣기 일단 A, B 중에 어떤 input을 선택했는지 값을 가져오기 위해서는 e.target.value를 사용하면 된다. 그리고 input에 value는 string만 넣을 수 있는 거 같은데 나는 radio 선택에 따라 boolean 값을 출력하고 싶었다. // A, B 선택에 따라 boolean 출력 const selectAB = (e: any) => { if ( e.target.value === "true" ) { setIsA(true); } else { setIsA(false); } }; 그래서 if문으로 setState에 boolean 값을..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 23.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.22

Today I Learned GOLLA 팀 프로젝트 회의 카카오 API로 마커 클릭 이벤트 구현하기 Typescript 에러 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. 처음부터 타입스크립트로 프로젝트를 생성한 게 아니라 CRA로 프로젝트를 생성한 다음에 typescript를 따로 설치했더니 다음과 같은 에러가 떴다. 이때 해결 방법은 에러가 발생하는 컴포넌트에 import React from 'react' 해주기! typescript .d.ts 파일이란? .d.ts 파일 (선언 코드만 담긴 파일) 구현부가 아닌 선언부만을 작성하는 용도의 파일을 의미한다. JS 코드로 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 22.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.21

Today I Learned 팀 프로젝트 진행-카카오 지도 API 이용하기 React javascript로 카카오 지도 API 이용하기 공식 문서나 대부분의 검색 결과에서 제공하는 카카오 지도 API 이용하는 방법은 HTML 코드인데 나는 javascript 파일로 코드를 작성하고 싶었기 때문에 방법을 찾는데 시간이 좀 걸렸다. 검색할 때 '리액트'라는 키워드를 붙이고 난 이후에 javascript 관련 검색 결과를 많이 볼 수 있었다. 카카오 지도 API로 지도 생성하기 일단 index.html의 부분에 API를 불러오기 위한 코드를 한 줄 추가한다. 공식 문서 https://apis.map.kakao.com/web/guide/ declare global { interface Window { kakao..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 22.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.20_React 프로젝트 S.A

Today I Learned 프로젝트 S.A 구성 프로젝트 소개 팀명: React B반 9조 (뀨조) 팀원: 이희령, 성효진, 김민성, 황준호, 박진산 프로젝트명: 쟈-스민 프로젝트 컨셉: 독립서점의 정보를 지도 API를 통해 보여주는 사이트 API 전국 독립서점 및 운영정보: csv→json 변환 문화 빅데이터 플랫폼 Kakao 지도 Javscript API Kakao 지도 Web API 기술 스택 React Query Recoil Firebase Typescript Styled-components 와이어 프레임 서점 찾기 페이지 개발 기능 프로젝트 관련 규칙 노션 링크 참고 https://react99.notion.site/S-A-29663dec6f6d44b7a7b18637551b9be9 회고 또 새..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 21.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.19

Today I Learned Typescript 공부하기 Programmers 문제 풀기 React의 Component Lifecycle(생명주기) useEffect(()=>{ // componentDidMount (처음 컴포넌트 렌더링된 이후 실행) return () => { // componentWillUnmount (컴포넌트가 사라지기 직전에 실행) } }, []) useEffect(()=>{ // componentDidMount (처음 컴포넌트 렌더링된 이후 실행) // componentDidUpdate (변경된 state로 컴포넌트 렌더링된 이후 실행) }, [state]) useEffect 의미 : render (return jsx) 이후 side effect 실행 state 변경을 batch..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 19.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.18

Today I Learned Typescript로 React TO-DO-LIST 리팩토링하기 Recoil 공부 공식 문서 https://recoiljs.org/ko/docs/introduction/getting-started/ 참고 영상 https://www.youtube.com/watch?v=t934FOlOMoM typescript로 react project 만들기 index.tsx 에러 const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); as HTMLElement라고 타입을 지정해줘야 한다. typescript에서 styled-components 사용하기 npm i --save-dev @types/sty..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 18.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.17_Typescript

Today I Learnend Typescript 기초 강의 수강 Type Alias (사용자 정의 타입) // type.ts type Hero = { name: string; power: number; height: number; }; import type { Hero } from './type'; const hero1: Hero = { name: '슈퍼맨', power: 1000, height: 190, }; // 동일함 const printHero = (hero: { name: string; power: number; height: number }) => { const printHero = (hero: Hero) => { console.log(hero.name, hero.power); }; cons..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 17.
• textsms