전체 글 103

(항해20일차) 220325 리액트 주특기 9일차

오늘 드디어 파이어베이스 이전까지의 강의를 다 들을 수 있었다. 예상치 못한 부분에서 시간을 많이 보냈지만 시간을 들인 만큼 리덕스에 대해 조금 더 이해할 수 있었던 것 같다. 이해와는 별개로 코드를 짤 때 유독 연산자와 관련된 실수를 많이 한다. 잘 이해되지 않는 함수를 사용하거나, 새로 배운 개념과 관련된 어려움은 어쩔 수 없지만 === 같은 연산자를 헷갈리는건 문제가 있다. 어쨌든 강의는 다 들었고 이제는 진짜 과제를 해볼 차례이다. 이번 과제는 단어장 만들기로 페이지는 총 3개로 보인다. - 단어장 카드가 모여 있는 메인 페이지 / 단어를 추가하는 페이지 / 단어를 수정하는 페이지 1. 가장 상위 컴포넌트는 메인페이지이며 App.js - 단어카드 - 버튼 컴포넌트로 구성된다. 2. 추가 단어 페이..

리덕스(Redux)로 상태관리 하기

상태관리의 필요성 1. 자식컴포넌트에서 데이터에 변화가 있을 때, 부모컴포넌트의 state를 직접적으로 건드리지 않음 2. 리덕스에서는 props drilling을 방지한다. (데이터를 필요한 컴포넌트로 바로 전달) * props drilling : props를 떨어져 있는 하위 컴포넌트로 전달하기 위해 중간 컴포넌트들이 쓰지 않는 데이터를 가지고 있는 것 전역상태관리는 무엇일까? 1. 모든 컴포넌트에서 참조할 수 있는 state가 있다. 2. state를 참조하려는 컴포넌트가 있고, 수정하려는 컴포넌트가 있다. 3. 수정된 데이터는 모든 컴포넌트에서 볼 수 있어야 한다. 리덕스에서의 전역상태관리 구조 스토어: state 저장소 리듀서: state 수정소 1. 컴포넌트는 스토어에서 state를 구독한다...

Today I Learned 2022.03.26

(항해19일차) 220324 리액트 주특기 8일차

조난당한지 19일.. 간신히 부서진 배의 파편을 잡고 주특기 섬에 온지는 8일차가 됐다.. 이렇게 숫자만 세다가 영영 육지로 못 나가는 것일까? 오늘은 주특기 심화주차의 첫날이다. 1주차는 처음에는 절망적이었지만 나름 희망을 가지고 2주차로 왔다. 항해에 참여한지 3주가 되어 가면서 조금씩 요령도 생기고 여유도 생겨 마음을 한 번 다시 다잡을 계기가 필요한 것 같다. 이럴 때 가끔 다른 사람들의 프로젝트를 보면 도움이 된다. 나보다 훨씬 잘하는 사람들이 짠 코드나 예쁘게 꾸민 페이지는 나를 자극한다. 또 나와 다른 방법으로 같은 기능을 구현한 코드들을 보는 것도 재밌다. 요새 부쩍 드는 생각은 코딩이 까다롭지만 재밌다는 사실이다. 물론 아직 배울 것도 많고, 아는 것도 별로 없지만 즐겁게 이 일을 할 수..

(항해18일차) 220324 리액트 주특기 7일차

주특기 기본 주차의 마지막 날이다. 제출하려는 과제의 전반적인 부분을 정리하고 추가기능을 약간 넣어봤다. 메인 페이지에서 오늘이 가장 위로 오도록 정렬하는 내용인데, 12시가 넘어 확인할 수 있었다. 오늘 계획했던 강의 다시 듣기는 과제를 수정하다보니 못 듣게 되었다. 사실 과제보다 CS스터디가 더 큰 원인이다. 컴퓨터의 가장 기초적인 부분부터 차근차근 설명하는 책으로 나에게는 어려운 내용이 많다. 특히 오늘 준비한 기억회로처럼 전형적인 이공계 분야는 정말 이해하기 어렵다. 평생 과학과는 거리가 멀었던 내가 개발자가 되기로 마음먹었을 때 이런 어려움도 분명 생각을 했지만 정말 알아듣기 어렵다. 오히려 코딩은 논리적인 부분이 많아 상대적으로 재밌게 느껴진다. 하지만 CS 쪽 이야기가 나오면 답이 없다. 정..

(항해17일차) 220323 리액트 주특기 6일차

(아직 배포는 안했지만) 1주차 과제를 완성했다! 글로는 짧게 쓸 수 밖에 없지만 마음은 많이 기쁘다. 화요일부터 기능 단 두 가지를 두고 고민하는 시간이 정말 길었다. 일단 첫번째 고민은 component를 구성하는 방식에 대한 고민이었다. 원 한개를 제일 작은 단위로 삼아야 할 것 같은데, 그러자면 나중에 메인 페이지와 세부페이지에서 원을 나누는 과정이 까다로워 보였다. 결국 원 컴포넌트를 만들었지만 결과적으로 고민이 하나 늘어났다. 두번째는 원을 전달하는 과정이었다. 한 쪽에선 랜덤으로 변하는 원을 다른 쪽 에서는 클릭한 만큼 채워지는 원을 필요로 해서 구분해야 했다. useRef를 써서 받는 쪽에서 처리를 할까 계속 고민했지만 일단 받는 쪽에서 렌더링되는 하위 컴포넌트를 다루기가 까다롭고 그 과정..