Frontend 개발자 - hyo.loui

🎯목적 : 마이페이지에 구현한 로직과 authentication API 복습, 🤢 오류 해결 : 로그아웃 후 마이페이지, 게시글쓰기 component 이동 시 에러 (useEffect 와 useFocusEffect 에서 발생한 에러 해결) 1. 닉네임 수정 UI 부분에서 삼항연산자로 수정 버튼이 onPress되어 onPressUpdate()함수가 실행이 되면 setState가 되어 onEdit이라는 state는 불리언타입이며 토글(true or false)이 된다! 이후 onEdit의 상태에 따라서 false가 된다면 기존에 있는 닉네임을 감싼 태그가 TextInput으로 바뀌게 되고 수정버튼도 완료버튼으로 바뀌게 된다! 완료버튼이 가진 함수는 onSubmitEdit()으로 updateProfile AP..

🎯목적 : Firebase - Authentication : 로그인 / 로그아웃 기능 학습 및 적용 >> Firebase : FireStore 연결 🤢 오류 발견 (미해결 로그아웃 후 currentUser가 null이 되어 마이페이지 tabs 클릭시 에러가 출력 1. UI Layout 만들기 회원가입 UI와 마찬가지로 라는 라이브러리를 사용했다.. 라이브러리로 가져온 태그로 상위를 감싸주었고, ID(아이디), Password(비밀번호), Login(로그인), Register(회원가입) 부분으로 나누었다 스타일은 Emotion을 사용했다 회원가입기능, 로그인 실행 함수에서 유효성 검사가 진행되는데 해당 부분의 로직이 전체적으로 코드가 길고 가독성이 떨어져 유효성검사를 하는 부분을 따로 나누어 리펙토링 해 ..

🎯목적 : CRUD : Update API 생성 , Firebase : FireStore data 업데이트 🤢 오류 해결 : WARN Possible Unhandled Promise Rejection : TypeError: _n7.indexOf is not a function. 1. setDone (체크아이콘) 체크 아이콘을 누르면 함수가 실행되어 해당하는 todo의 isDone 속성을 토글로 변경하고, isDone이 true 라면 완료했다는 효과(text-decoration: line-through)를 주자 아이콘 클릭 시 실행되는 함수이고, 서버통신을 하는 부분이니 비동기 처리를 해줬다. 또 현재 가지고 있는 todos의 isDone을 토글해야 했기 때문에 find 라는 변수로 지금 가진 isDone..

❤️‍🔥TIL : Today I Learned 🎯목적 : CRUD : Read API 추가, onSnapshot API 활용하기 1. Firestore 의 DB 가져오기 저번 포스팅에서 Creat API를 만들어 Firestore에 "todos" 라는 db를 넣을 수 있었다 이번에는 가져와서 보여줘야한다! firebase API 활용하자! 선택지는 2가지다 getDocs API onSnapshot API getDocs로도 가져올 수 있겠지만 우리는 실시간으로 변동이 생기면 다시 데이터를 가져와야 하므로 state 처럼 사용해야 한다. 그래서 onSnapshot API 를 활용했다! import { onSnapshot } 으로 api를 가져온다 useEffect를 사용하여 컴포넌트가 마운트시 곧장 Read..

🎯목적 : CRUD : Create API 추가, Firebase : FireStore 연결 1. Layout 만들기 위와 같은 레이아웃을 만들어 보겠다! 사실 '투두리스트'를 많이 만들어서 캠프 커리큘럼, 학습의 다양성에 의문점이 있었지만, 프론트엔드 개발자의 기본 자질인 CRUD의 기본기를 가장 핵심적으로 다루는 학습이라고 생각한다. 다시한번 복습하자면, ios에서 카메라 영역으로 인해 layout이 가려지는 문제로 태그를 사용해준다! 안드로이드에서는 문제가 없지만 첫 작업은 보통 ios로 작업을 해야 2중 작업이 줄어든다 그래서 '노치 제거' 라는 주석으로 태그 사용의 이유를 주석으로 설명했다. 크게 두 섹션으로 나눌 수 있는데 위 사진에서 알수 있듯, 고정 영역(Fiexd Part) & 스크롤 영..

Read API 게시글을 조회하고, 보여주는 함수이다 우선은 게시글을 클릭했을 때 우리가 가진 데이터를 보여주려면 id 가 필요했다 id 안에 게시글이 객체형태로 데이터가 들어있기 때문이다 우선 게시글에 삽입 될 HTML 태그이다 /* ...innerHTML */ fanPickList 객체가 가지고있는 id 데이터를 태그 id에 넣어주고 onclick 으로 전달되도록 구현했다. onclick="sendId(${fanPickList.id})" 처음에는 위 처럼 해당아이디를 바로 클릭하면 전달 할 수 있게 작성했으나, 레퍼런스 에러가 나서 수정했다 // 클릭한 카드의 id 받아적는 변수 let selectId = ""; // 함수가 실행 될 때마다, 해당게시글 id 를 update export functio..

❤️‍🔥TIL : Today I Learned Create API 게시글을 생성하는 함수이다 // Create API // fan-pick 라는 이름의 collection에 객체 형태의 Document를 신규 등록 export const save_fanpick = async (event) => { event.preventDefault(); const title = document.querySelector(".title2"); const content = document.querySelector(".content2"); let modalImage = await save_img(); const { uid, photoURL, displayName } = authService.currentUser; try { ..

❤️‍🔥TIL : Today I Learned 우리가 html 에서 form 태그를 쓰는 용도로는 유저(사용자)에게 입력받은 값을 js 에서 핸들링하여 백엔드로 넘겨주기 위함이다 form 태그 하위 요소들 form 예시 입력 받기 - submit 의 value 의 type 과 의 type form 태그 하위 요소들 위와 같은 태그들이 들어갈 수 있다 form 예시 하지만 이해를 위해 간단하게 작성해 보겠다 닉네임 : 이메일 : 비밀번호 : 사용자에게 input 으로 받은 value 들을 전부 넘겨줘야한다 입력 받기 - submit 위에서 회원가입버튼의 submit은 form 안에 있는 input으로 받은내용(value)을 전송하는 태그이다 function 입력보내기(event) { event.preven..