[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

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

Today I Leraned TypeScript 공부하기 Typescript vs Javascript Type Typescript는 정적 타입 Javascript는 동적 타입 let num = 3; num = '삼'; Javascript는 어떤 변수에 숫자, 문자, 배열, 객체 등 아무거나 할당 가능하다. Typescript는 처음에 숫자 (number)를 할당했으니 number에 string를 할당할 수 없다고 에러가 난다. Time (변수의 type 결정 시점) Typescript는 컴파일 타임 (compile time): 작성한 소스 코드가 어떠한 것(js, binary 등)으로 변환되는 과정 -> IDE(VS Code)에서 에러가 날 상황을 빨간 줄로 미리 알려준다. Javascript는 런타임 ..

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

[WIL] 내일배움캠프 열한 번째 주_React Native 프로젝트 결과물 정리

프로젝트 소개 앱 이름 : MBTI Types 앱 설명 : MBTI 타입에 따라 의견을 나눌 수 있는 커뮤니티성 React Native App 커뮤니티: MBTI 타입과 관련된 게시글을 작성 후 댓글과 좋아요 버튼을 통해 공감을 받을 수 있고, MBTI필터를 통해서, 해당 MBTI의 글 만을 볼 수 있습니다. ex) 카테고리 [ISFP]: 약속 취소되면 오히려 좋은 거 다들 공감하시나요?ㅎㅎ 상황문답: 특정 상황을 제시하고 댓글에 각 MBTI 별 반응을 모아서 볼 수 있다. ex) 친구에게 “네 숙제 베껴도 돼?”라는 문자를 받는다면? 마이페이지: 내가 작성한 글과 내가 좋아요 한 글을 볼 수 있다. 프로젝트 정리본 노션 https://green-number-f91.notion.site/MBTI-Type..

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

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

Today I Learned 팀 프로젝트 UI 그리기 GOLLA 팀 프로젝트 기록 "useNavigation must be used within a data router" Error const navigate = useNavigation(); Uncaught Error: useNavigation must be used within a data router. Header 컴포넌트에서 useNavigation을 사용하려고 했는데 갑자기 에러가 뜨면서 Header가 보이지 않는다. 검색해 보니 useNavigation이 아니라 useNavigate를 사용해야 하는 거였다ㅎㅎ 참고 https://stackoverflow.com/questions/74323060/react-router-error-usenaviga..

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

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

Today I Learned Programmsers 문제 풀기 팀프로젝트 회의 Programmers 문제 풀기 배열 자르기 나의 풀이 function solution(numbers, num1, num2) { let array = []; for (i=num1; i

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

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

Today I Learned React Native 팀 프로젝트 마감 및 발표회 헤더에 로그인, 로그아웃 조건부 렌더링하기 useFocusEffect( // 비로그인 상태에서 마이페이지 접근 시 로그인화면으로 이동하고, 뒤로가기 시 무비탭 useCallback(() => { setOptions({ headerRight: () => { return ( {!authService.currentUser ? "로그인" : "로그아웃"} ); }, }); }, []) ); firebase authService에서 currentUser를 조회해서 currentUser가 존재하면 "로그아웃"을 보여주고 존재하지 않으면 "로그인"을 보여준다. 그리고 텍스트뿐만 아니라 당연히 onPress했을 때 작동하는 함수도 삼항으로..

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

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

Today I Learned React Native 팀 프로젝트 진행 useEffect와 useFocusEffect useFocusEffect( useCallback(() => { getPostlist(); }, []) ); 디테일 페이지에서 좋아요를 누르고 뒤로 가기 했다가 다시 해당 게시물 페이지에 들어가면 DB에는 반영이 됐지만 화면에는 좋아요가 반영되지 않는 문제가 발생했다. 원래는 useEffect로 getPostList라는 데이터를 불러오는 함수를 실행했는데 useEffect는 최초 렌더링 시 한 번만 실행이 되고 메인->디테일->메인으로 다시 돌아왔을 때는 useEffect가 실행되지 않았다. 그래서 useEffect 대신 useFocusEffect를 사용해서 화면에 포커스가 갈 때마다, 즉..

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