Frontend 개발자 - hyo.loui

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (자바스크립트 스터디 내용) Project : Develife = 프로젝트 완성 ( 배포 >> 발표 ) javascript 스터디 = 각자 발표 chapter 1주차 마무리(모던 자바스크립트 딥다이브 교재) Project review 이번 프로젝트가 마무리되어 유튜브에 시연영상을 업로드 했다. https://www.youtube.com/watch?v=rfuRtHsHwQ4&t=49s OBS 소리가 작다...😥 Study review 부족하다고 생각했던 자바스크립트를 900페이지가 넘는 모던 자바스크립트 - 딥다이브 교재를 활용해서 한챕터 한챕터 서로가 준비하고, 발표하면서..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목적, 정리로 세분화) Project : Develife = 프로젝트 시작 ( 기획 >> 와이어프레임 >> 레이아웃(UI) javascript 스터디 = 각자 발표 chapter 정하고 시작(모던 자바스크립트 딥다이브 교재) 📚 Study review 프로젝트 마무리가 되어가면서 이번주는 공부에 목적을 두지 못했다.. 이번 팀원을 잘 만나서 모던 자바스크립트 스터디를 결성하고 한달 이내에 모든 챕터를 하나씩 돌아가면서 정해둔 발표시간 (약 15분)에 발표를 하고, 나머지 챕터는 정독 하면서 스터디를 하기로 결성되었다! 자바스크립트가 내용이 이렇게 많은 줄도 몰랐고 이렇..

🎯목적 : Youtube API 활용 (비동기)서버통신 : React-Query 적용 response 로 UI구성 🤢 트러블 슈팅 : filter 메서드 문제 해결 1. react query Youtube API 활용에 있어 서버통신의 생산성을 위해 react-query 적용을 기획했다. api.js에서 데이터를 가져오는 함수를 관리하는 파일을 따로 분리했고 중복되는 url 과 api key는 따로 변수선언을 해주었다. 필요한 component에서 react-query를 연결해 위 함수를 사용하도록 import 했다. 별칭을 붙여 데이터의 목적을 정확하게 명시했다. 2. UI 생성 위에서 react-query로 가져온 AllPlayList 라는 배열형 데이터는 map 메서드로 하나씩 돌며, 이미지태그의 ..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목적, 정리로 세분화) Typescript 강의 및 실습 = Todo-List (리펙토링, cra-typescript) Project : Develife = 프로젝트 시작 ( 기획 >> 와이어프레임 >> 레이아웃(UI) 📚 Study review typescript를 배울 때는 쉽다고 생각했다.. 하지만 막상 적용하려고 하니.. state, props 등 작성해줘야 할 타입들이 생각보다 많아서 쉽지않았다.. 또한 web API(onclick, onsubmit, onchange 등) 사용 할 때에 파라미터로 전달하는 데이터에도 타입을 작성해야해서 당황했다. 하지만 여러 ..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 ( 프로젝트 [목표, 오류] 세분화) Project : MZL (MZ-Languagae) = 프로젝트 완성 ( 배포 >> 발표 ) React query 강의 및 실습 = (외부 API 활용) Project review 이번 '왕초보 mz 완성' 이라는 컨셉의 프로젝트는 IOS 와 안드로이드 환경에서의 개발을 동시에 진행 할 수 있는 React-native를 활용한 하이브리드 앱을 만들었다. UI는 낯선 태그들로 다들 복잡하다고 느꼈기 때문에 아주 심플하게 구성하고 로직에 대해 더 집중적인 작업을 진행했다. 기존 프로젝트에서 CRUD 를 구현하면서 회원가입, 로그인 기능에..

🎯목적 : 마이페이지에 구현한 로직과 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을 사용했다 회원가입기능, 로그인 실행 함수에서 유효성 검사가 진행되는데 해당 부분의 로직이 전체적으로 코드가 길고 가독성이 떨어져 유효성검사를 하는 부분을 따로 나누어 리펙토링 해 ..

🎯목적 : Firebase - Authentication : 회원가입 기능 학습 및 적용 >> Firebase : FireStore 연결 🤢 오류 해결 : 스크롤 문제 라이브러리 태그로 해결 휴먼에러.. 1. UI Layout 만들기 UI를 만들면서 키보드 활성 시에 높이가 고정되어있는 이슈로 스크롤이 되지않아 라는 라이브러리를 사용했다.. 이 문제로 퍼블리셔로 재직하던 직장에서 골머리를 썩은 적이 있는데 팀원중 한분이 라이브러리를 추천 해주셔서 아주 간단하게 해결되었다.. (에러 해결 참고) 그렇게 라이브러리로 가져온 태그로 상위를 감싸주었고, 크게 닉네임, 이메일, 비밀번호, 비밀번호 2차 확인 부분으로 나누었다 하지만 프로젝트 기능사항으로 입력값에 대한 유효성 검사를 통해 메세지를 입력해주는 Tex..