react39 [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 회고 또 새.. 2023. 1. 21. [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.. 2023. 1. 19. [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.. 2023. 1. 18. [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.. 2023. 1. 17. [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.. 2023. 1. 15. [React] 회원가입, 로그인 구현하기 (Form Help Text) 리액트 팀 프로젝트에서 axios와 json-server를 이용해서 로그인, 회원가입 기능을 구현했다. 부족한 부분이 많겠지만 로그인, 회원가입을 이렇게도 구현할 수 있다는 것을 기록으로 남기려 한다. 회원가입 SignUpPage.jsx 전체 코드 더보기 import React, { useEffect, useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import { __getUsers, __signUp } from "../../redux/modules/usersSlice"; import { v4 as uuidv.. 2023. 1. 2. [WIL] 내일배움캠프 아홉째 주_리액트 프로젝트 결과물 정리 프로젝트 소개 리액트 B반 3조 보람삼조 팀원: 박성환 성경환 이희령 정윤숙 차상현 프로젝트 목표: 본문과 댓글을 작성할 수 있는 우리 팀만의 React App 만들기 프로젝트 컨셉: 사망토론 ‘탕수육 찍먹 vs 부먹’과 같이 논란이 될 만한 주제를 작성하고, 이용자들이 A, B 선택지 중에 투표를 하면서 의견을 나눌 수 있는 React App 프로젝트 결과물 정리본 https://time-feels-b8e.notion.site/aaed6840cdab4841bb80025db7c5bc64 KPT 회고 https://time-feels-b8e.notion.site/KPT-a2de14297cbc44369d5312614659466f 배포 링크 https://boram3team-react-app-project.v.. 2023. 1. 1. [TIL] 내일배움캠프 React 과정 2022.12.29 Today I Learned React Native 공부하기 EXPO 프로젝트 생성하기 EXPO 홈페이지에서 새로운 프로젝트를 생성한 후에 터미널에 한 줄씩 입력한다. 그리고 어플에서 진행 상황을 확인하려면 'expo start'를 입력한다. React-Native의 CSS 특징 const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "white", alignItems: "center", justifyContent: "center", }, text: { color: "black", // 에러 발생 fontSize: '40px', // 정상 작동 fontSize: 40, } }); 텍스트에 폰트 사이즈를 지정하고 싶었는데 자꾸 해.. 2022. 12. 29. [TIL] 내일배움캠프 React 과정 2022.12.27 Today I Learned 팀 프로젝트 CSS 작업 프로젝트 결과물 정리본(제출용) 작성 팀 프로젝트 진행 기록 git reset 이용해서 특정 커밋으로 되돌아가기 이번 팀 프로젝트는 git-flow에 따라 git을 이용하자는 팀 규칙을 세워서 main > dev > feature 브랜치로 나누어서 진행했는데, 각자의 feature 브랜치에서 구현을 완료하면 PR을 통해 dev 브랜치에 합치는 과정이었다. 그런데 오늘 오전에 팀원 한 분이 dev에 merge해야 하는 것을 main 브랜치에 merge하는 바람에 hard reset을 진행하는 일이 있었다. 그리고 나는 몇 시간 지나지 않아서 또 main에 merge하는 바보 같은 짓을 저질렀다.😨 그래도 오전에 한번 경험이 있었기 때문에 금방 되돌릴 수.. 2022. 12. 28. [TIL] 내일배움캠프 React 과정 2022.12.26 Today I Learned 팀 프로젝트 진행 팀 프로젝트 진행 기록 form help text 수정 원래 CheckMsg라는 스타일 컴포넌트 기본값을 display: none;을 주고 "아이디를 입력해 주세요"등의 메시지가 뜰 때마다 display: block;으로 변경되도록 구현했었는데 생각해보니 CheckMsg의 기본값을 display: block;으로 설정해 놓고 태그 안에 텍스트를 입력하지 않은 상태에서 innerText만 넣어줘도 동일한 효과가 발생한다. if (!idRegExp.test(userDi)) { userDi_msg.current.innerText = "4~12자의 영문 소문자, 숫자로 작성 가능합니다."; userDi_msg.current.style = "display:block".. 2022. 12. 27. 이전 1 2 3 4 다음
