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

Today I Learned React Native 심화 강의 수강 !!(느낌표 두 개) 연산자가 뭐지? let a = 1 console.log(!a) // false console.log(!!a) // true let a = undefined console.log(!!a) // false 해당 변수에 값이 할당되어있으면 true, 그렇지 않으면 false로 반환해주는 매우 유용한 연산자이다! 참고 https://hermeslog.tistory.com/279 https://velog.io/@hoon_dev/JavaScript-느낌표-두개Double-Exclamation-Marks-연산자-알아보기 FlatList 연구하기 ( ) )} Top Rated Movies } keyExtractor={(item) ..

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

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

Today I Learned React Native 심화 강의 수강 LinearGradient 사용하기 배경 이미지에 그라디언트 효과를 줄 때 LinearGradient를 사용한다. colors라는 porp을 넘겨서 배열 형태로 원하는 그라디언트 효과를 구현할 수 있다. ["transparent", "black"]는 투명에서 검은색으로 그라디언트 효과를 주고 싶다는 것을 의미한다. flex-end 속성 flex-end: 아이템들을 끝으로 정렬한다. flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽에 위치한다. 출처 https://studiomeal.com/archives/197 StyleSheet.absoluteFill // 동일한 코드 배경이미지 적용..

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

[TIL] 내일배움캠프 React 과정 2023.01.03_React Navigation

Today I Learned React Native 실무 심화 강의 수강 터미널에서 expo 셋업하기 npx create-expo-app 폴더명 git bash에 입력 eas update:configure vscode로 폴더 열고 터미널창에 입력 -> expo 홈페이지에도 프로젝트가 생성된 것을 볼 수 있음 eas update 배포하기 App icon 변경하기 icon.png -> IOS 아이콘 adaptive-icon -> Android 아이콘 splash -> 로딩 화면 Figma 링크에 들어가서 아이콘을 만들고 png 파일로 저장한 후에 assets 폴더에 동일한 파일명으로 png 파일을 교체한다. 공식문서 https://docs.expo.dev/guides/app-icons/ react-navig..

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

[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

[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