Today I Learned React Native 팀 프로젝트 진행 Firestore onSnapshot과 useQuery const getComments = async () => { const q = query( collection(dbService, "communityComments"), orderBy("date", "desc") ); const array = []; await onSnapshot(q, (snapshot) => { snapshot.docs.map((doc) => ( array.push({ id: doc.id, ...doc.data() }))) setComments(array) }) return array; }; const data = useQuery("communityComments..
리액트 네이티브 프로젝트 진행을 위한 공부를 시작했다. 그나마 다행인 점은 사전캠프 기간에 앱개발 강의를 들은 경험이 있다는 것인데 어째 다 까먹은 거 같다. 오랜만에 만나는 네이티브는 리액트와 다른 점이 많았다. , 등 기존과 다른 컴포넌트를 사용해야 한다는 점이 그렇고, expo 앱을 이용한 앱 개발은 수많은 에러와 마주하며 정말 쉽지가 않았다. 그래도 네이티브를 공부하며 앱 개발 만의 매력을 느끼기도 했는데 웹과 다른 화면 구성이라든지, 등 네이티브에서 제공해 주는 다양한 기본 컴포넌트를 사용하며 프로젝트를 쌓아나가는 과정도 재밌었고 웹 개발과 다른 관점에서 사용자들이 어떻게 앱을 편하게 이용할 수 있을까 고민하는 과정도 재밌었다. 한번 정말 간단한 구조의 어플이라도 만들어서 스토어에 배포까지 해보..
Today I Learned 팀 프로젝트 진행 new Date()로 날짜 출력하기 댓글을 작성할 때 date: new Date()를 이용해서 작성 날짜를 저장하고 date를 이용해서 댓글을 최신순으로 정렬할 수 있었다. 근데 댓글을 작성한 날짜를 화면에 보여줄 때 new Date()로 생성한 날짜를 그대로 가져오면 에러가 발생한다. Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead. firestore에서 확인해봤더니 new Date()로 생성한 데이터는 문자열 형태가 아니라..
Today I Learned React Native 댓글 CRUD 구현하기 버튼 클릭할 때마다 토글하기 const [toggle, setToggle] = useState(false); setToggle(!toggle)}> {toggle && ...생략... } 우측에 ...을 클릭할 때마다 수정, 삭제 버튼을 토글하고 싶었다. 여러 번의 시행착오 끝에 useState에 boolean 속성을 넣어서 구현했다. &&연산자를 이용해서 toggle이 true일 때만 ToggleBox가 뜨도록 구현했다. 그리고 toggle 속성은 ToggleBtn을 클릭할 때마다 true와 false를 왔다갔다 한다. 참고 https://webisfree.com/2019-08-14/react-native-컴포넌트-숨기기-hide..
Today I Learned 리액트 네이티브 팀 프로젝트 초기 구성 S.A 작성 https://green-number-f91.notion.site/S-A-a45eb3327c774333a38c76ce9eb67cf0 회고 오늘은 리액트 네이티브로 구현하는 팀 프로젝트 초기 구성하느라 하루를 다 썼다. 그래서 진짜 TIL에 적을 내용이 없다..! 이번에는 와이어 프레임을 정말 정성 들여서 완성했는데 덕분에 CSS에 통일감을 주고 후반부에 CSS 작업에 소요되는 시간을 줄일 수 있을 거 같다. 나는 이번에도 좀 욕심을 내서 댓글 CRUD를 전부 담당하게 됐는데 주말 동안 쿼리도 부지런히 공부해서 최대한 빨리 구현할 수 있도록 노력해야겠다. 이번 프로젝트 결과물도 너무 기대가 된다!
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) ..
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 // 동일한 코드 배경이미지 적용..
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..
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..
프로젝트 소개 리액트 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..