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

Today I Learned Firebase로 구현한 투두리스트 리팩토링 input 태그의 속성-value와 defaultValue input 태그의 속성인 defaultValue와 value에 값을 넣으면 둘 다 input 박스에 처음부터 보여진다. defaultValue: input tag에서 처음 보여줄 값 value: input tag에서 계속 보여줄 값 defaultValue를 지정하고 input 박스에 값을 입력하면 값이 수정이 된다. 반면, value를 지정하고 input 박스에 값을 입력하면 값이 입력되지 않고 지정해준 value만 계속해서 보여준다. 출처 https://velog.io/@e_juhee/defaultValue-value npm update 에러 생길 때 리액트 프로젝트 cl..

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

[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..

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

[TIL] 내일배움캠프 React 과정 2023.01.01_Firebase CRUD

Today I Learned Firebase를 투두리스트 CRUD와 연동하기 firebaseConfig.js 더보기 // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; // Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Optionally import the services that you want to use // import {...} from "firebase/auth"; // import {...} f..

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

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

Today I Learned React Native Firebase와 연결하기 React Native에서 Firebase 데이터 가져오기 // firebaseConfig.js import { initializeApp } from 'firebase/app'; // Optionally import the services that you want to use // import {...} from "firebase/auth"; // import {...} from "firebase/database"; // import {...} from "firebase/firestore"; // import {...} from "firebase/functions"; // import {...} from "firebase/st..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 31.
• textsms

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

Today I Learned React Native로 CRUD 구현하기 if문으로 tap 버튼 구현하기 {todos.map((todo) => { // 카테고리가 같은 때만 return해라 if (category === todo.category) { return ( ) } }; 사망토론 팀프로젝트 때 최신순, 좋아요순 정렬을 구현하고 싶었는데 좋아요순 정렬을 구현하는 데까지만 성공하고 이걸 탭을 눌렀을 때 어떻게 처리해야 할지 몰라서 중간에 포기했었다. 근데 오늘 튜터님의 강의를 들으면서 state를 하나 만들어서 그 값에 따라 if문으로 처리할 수 있다는 것도 알게 됐다. 삭제 시 alert 띄우기 const deleteTodo = (id) => { Alert.alert("삭제", "정말 삭제하시겠습니다..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 30.
• textsms

[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, } }); 텍스트에 폰트 사이즈를 지정하고 싶었는데 자꾸 해..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 29.
• textsms

[TIL] 내일배움캠프 React 과정 2022.12.28_KPT 회고

프로젝트 명: 보람3조의 사망토론 https://boram3team-react-app-project.vercel.app/ KEEP 1. 꼼꼼한 문서화 작업 기능 개발 진행 상황을 노션에 현재 진행 상황, PR 상태, 브랜치 명까지 상세하게 기록해서 누가 무엇을 하고 있는지 한 눈에 확인할 수 있었다. 또한 코드 컨벤션, GIT과 YARN에 관한 정보 등 반복해서 필요한 정보는 페이지 별로 정리해서 쉽게 찾아볼 수 있었다. 2. Git flow, PR 활용 git-flow에 따라 브랜치를 세부적으로 나누었기 때문에 협업이 더욱 원활하게 진행되었던 거 같다. 개별적으로 기능 개발이 마무리될 때마다 모든 팀원이 모여서 코드리뷰를 진행한 후 같이 PR을 진행해서 휴먼 에러를 줄이고, 다른 팀원들의 코드까지 이해..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 28.
• textsms

[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하는 바보 같은 짓을 저질렀다.😨 그래도 오전에 한번 경험이 있었기 때문에 금방 되돌릴 수..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 28.
• textsms

[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"..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 12. 27.
• textsms

[WIL] 내일배움캠프 여덟째 주_Redux-Thunk 이해하기

거의 3주 가까이 React -> Redux -> Thunk(DB 사용) 단계를 거치면서 리액트를 배우고 있다. 처음 시작할 때만 해도 이렇게 지겹도록 투두리스트를 보게 될 줄은 몰랐는데 그래도 처음과 비교하면 어느새 수정 기능도 생기고 내 투두리스트가 점점 진화하고 있는 거 같다. thunk 함수와 axios를 이용해서 투두리스트를 구현할 때 어려웠던 부분은 서버와 통신해서 데이터를 가져오고, 또 그 데이터를 state에 넣기까지 공백이 생긴다는 점이었다. 만약 데이터를 가져오는 데 성공한다고 하면 세 단계를 거치는데 일단 initialState에 설정해놓은 todos의 빈 배열이 pending을 거쳐서 fulfilled 단계에 갔을 때만 빈 배열 안에 서버의 데이터가 채워지기 때문에 이것을 위해 추가..

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