Frontend 개발자 - hyo.loui

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목표, 오류, 정리로 세분화) Project : helprogrammer = 프로젝트 완성 ( 배포 >> 발표 ) React Native 강의 및 실습 = Todo-List (Local >> FireStore) Project review 리덕스를 활용해 프로젝트를 해보니 더욱 데이터를 다루는 부분이 중요하다고 느꼈다.. 데이터가 어떻게 생겼는지, 어떤상태인지 본인이 잘 파악하고 있어야 원인 모를 에러 없이 잘 동작할 것이다 그래서 redux-devTool 을 사용하는데, 이번 프로젝트에서 devTool 사용을 간과하고, 내가 맡은 삭제 부분에서 오류가 났다. 해당 부분..

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

❤️‍🔥TIL : Today I Learned 🎯목적 : state가 업데이트 되어야 정상적으로 리액트가 렌더링을 해주는 것에 대한 복기 🤢 문제 내용 : 리액트 네이티브로 To-Do-List 앱을 만들고 있던 중 생긴 문제였다.. 체크 아이콘이 클릭 되었을 때의 실행 함수이다 나름 로우코드를 해보겠다고 작성했다... 로그에 'isDone' 이 토글되어 잘 찍히길래 문제가 없겠구나 싶었다 그런데 문제는 단순하지 않았다. setState를 하지 않았기 때문에 렌더링이 일어나지 않아서 실시간 렌더링이 안되어 다른 컴포넌트로 이동 후 (리액트나, 코딩테스트) 다시 돌아와야 정상적으로 보였다...(새로고침 처럼) 위처럼 isDone 이 true 라면 "line-through"가 되면서 아이콘도 변해야 하는데 바..

🎯목적 : 리액트 네이티브 프로젝트를 생성하고 expo 패키지를 활용하여 쉬운 셋업 및 빠른 초기개발을 해보자! 🤢 오류 해결 : expo request time out CommandError: ngrok tunnel took too long to connect. 1. expo 계정에서 project 생성 . https://expo.dev/ Expo Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. expo.dev 위 사이트에서 계정을 만들어야 한다 계정을 생성했다면, Create a project 에서 프로젝트를 생성하면 아래로 넘어간다..

❤️‍🔥TIL : Today I Learned 🤢 문제 내용 : 문제 참 많았다... 정리해 보자면 나는 게시글을 클릭 했을 때, router 가 변하며 해당 라우터에서 상세 내용(제목,내용,시간 등..)을 보여주는 페이지의 crud 기능 구현을 맡게 되었다. 문제는 이렇게 흘러갔다 해당 컴포넌트 렌더링 될 때 useLocation 사용하여 axios.get 요청 문제점 - 다른 액션 발생할 때(delete,update) 추후 데이터 수정의 어려움을 깨닫게 됨 thunk를 사용하여 detailSlice.js 생성하여 부모컴포넌트에서 onClick이 이루어 질 때 dispatch(__getDetail) 문제점 - 상세페이지에서 새로고침 하면 state 값이 리셋되어 결국 새로고침을 하면 상세페이지 내용 없..

❤️‍🔥WIL: Weekly I Learned 이번 주 한 일 티스토리 포스팅 = 매일 TIL 일지 react 심화 강의 청강중 = redux-toolkit / axios / thunk Project - helprogrammers = 프로젝트 진행중 (기획 > 프로그래밍 > 배포) Project Start 이번 프로젝트의 기획은 help + programmers 의미를 가진 프로젝트였다 알고리즘 공부 중 어려움이 생겼을 때, 도움은 받고싶지만.. 정답이 알고싶은게 아니다 어떠한 키워드나 작은 힌트를 얻어서 '내 스스로 풀고싶은 욕구' 그게 프로젝트 핵심 이다. 상세 페이지 : question 질문에 대한 CRUD 였다 create : 게시글 생성 read : 게시글 읽기 update : 게시글 수정, 업..

❤️‍🔥TIL : Today I Learned 🤢 문제 내용 : 선발대 과제로 redux 만을 사용하여 흔히 아는 '투두리스트' 앱을 만들고 있던 와중에 생긴 문제였다. 스스로 하드코딩을 연습 겸 해서 코드 작성중 state로 넣은 데이터를 module에 있는 initialState로 업데이트 시켜주려고 했으나, 전달하는 데이터가 한박자 느리고 에러가 발생했다.. (28 line) setTodoForm 으로 업데이트 한 state를 (36 line) 에서 payload 로 넘겼으나 Uncaught TypeError: Cannot read properties of null (reding 'id') 아직 state가 null 이라고 한다... 에러 메세지가 해석이 가능해서 스스로 여러 시도를 해봤지만 대표적..

❤️‍🔥TIL : Today I Learned JSON-server 아주 간단한 DB와 API 서버를 생성해주는 패키지 이다. 우리가 json-server를 사용하는 이유는 backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함이다. json-server 를 통해서 FE에서는 BE가 하고있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업이 가능하다. json-server 설치하기 CRA로 프로젝트를 새로 생성하고, yarn 또는 npm을 이용해서 설치 합니다. 예시에서는 기존에 사용하던 yarn을 사용해서 설치하겠습니다. npm install json-server..