TIL 79

리덕스(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를 써서 받는 쪽에서 처리를 할까 계속 고민했지만 일단 받는 쪽에서 렌더링되는 하위 컴포넌트를 다루기가 까다롭고 그 과정..

(항해16일차) 220322 리액트 주특기 5일차

마지막 남은 기능 하나를 하루 종일 해결 못하고 있다. 오기가 생겨서 해결하고 자려고 버텼는데, 완성했다고 생각한 순간 새로고침을 하는 순간 실패란걸 알아버린 순간 힘이 빠져버린 순간 자야겠다. 실패 이유: 랜덤으로 채워지는 평점이다. 앞에서부터 랜덤으로 채워져야 한다. 실패한 방법 적어보기 ( ) 수정한 내용 적어보기 ( )

(항해15일차) 220321 리액트 주특기 4일차

정신없이 4일이 지나갔다. 컴포넌트들에게 둘러쌓여 정신없이 헤매다가 이제 조금씩 머릿속으로 들어오는 것 같다. 오늘은 라우터 부분의 강의까지 듣고 자려다가 반가운 친구가 말을 걸어 이야기를 나누다 보니 벌써 시간이 이렇게 됐다. 이야기의 주제는 컴포넌트였는데, 처음에는 웬 쥬커버그 이야기에서 시작하더니 마지막은 어떻게 좋은 컴포넌트를 짤 수 있을까? 로 이야기가 끝이 났다. 알고리즘 주간에 같은 조였던 성재님인데 그 때 도 그랬지만, 정말 깊이 있게 문제를 파고 드는 사람인 것 같다. (나와는 정 반대이다.) 그래서 이야기를 듣고 있으면 내가 생각하지 못했던 부분을 들을 수 있어서 고맙다. 오늘도 import와 export로 보는 컴포넌트의 관계, 컴포넌트가 왜 작아야 하는지?, 결국 마지막 컴포넌트는 ..

(항해99)의 2주차 (220314-220320) WIL

항해를 시작한지 2주가 지났다. 처음 항해를 시작할 때 보다 어깨도 좀 아프고 허리도 좀 아프다. 아직도 조난당했다는 느낌은 상당하지만, 이상하게 이 상황에 적응하고 있다. 적응하느라 몸이 좀 혹사당하는 듯 하다. 지난 금요일 부터는 알고리즘 주간이 끝나고 드디어 리액트를 배우는 주특기 주간이 시작되었다. 이제 이틀 지났는데 알고리즘 주간이 굉장히 옛날처럼 느껴진다. 처음 HTML, CSS, JavaScript를 거쳐서 알고리즘, 리액트까지 쉴 새 없이 새로운 것들이 들어오니 머리에 과부하가 왔는지 계속 집중이 안돼서 오늘은 좀 쉬엄쉬엄했다. 그래도 하루에 앉아 있는 시간이 긴 만큼 뭔가 얻는게 있긴 하다. 알고리즘만 해도 처음에는 식도 쓸 줄 몰라 버벅이던게 이제는 문제가 꽤 재밌게 느껴진다. 문제는 ..

(항해12일차) 220318 리액트 주특기 1일차

리액트, 말로만 듣던 리액트, 오늘 드디어 리액트 주특기 주차가 시작되었다. 첫 날은 발제와 주간계획, 강의자료 배포 등의 준비작업과 리액트 프로젝트를 위한 개발환경 구축으로 대부분의 시간을 보냈다. 처음 HTML로 코딩을 배우기 시작할 때도 그랬지만, 리액트 개발환경을 조성하는 일은 생각만큼 간단한 과정이 아니었다. 익숙하지 않은 VSC프로그램에서 작업을 하게 된 것도 큰 변화 중 하나였고, 첫 리액트 프로젝트를 만들기까지의 과정에 알아야 할 것들이 있었다. 우여곡절 끝에 로컬서버에 첫 리액트로고를 띄우고 웅장해진 마음도 잠시, 분명 에 들어있는 코드들이 지금까지와는 너무 다르게 생긴 것을 보면서 앞으로 또 완전히 백지에서 시작하겠다는 예감이 들었다. 주말까지 리액트 기초강의를 다 듣고 월요일부터 이번..

리액트의 가상돔, component, class

HTML은 트리구조의 dom이다. 리액트는 DOM을 잘게 쪼개서 여러개의 component로 만들어 웹을 구성한다. 리액트에서는 JSX문법을 사용하는데, JS안에 HTML이 포함되어 있는 형태이다. 어떤 구조의 웹에서는 변화가 생길 때마다 DOM에서 불필요한 연산이 많이 이루어져 성능이 떨어진다. 그래서 리액트에서는 메모리에서만 존재하는 가상DOM을 만들었다. 웹에서 어떤 동작을 하면 가상DOM에 변화가 반영되고 그 중 바뀐 부분만 실제 DOM으로 바꿔주는 방식이다. 여러개의 component로 구성되어 있기 때문에 update가 이루어진 component만 바꿔주는 것이다. component는 크게 두 가지 방식이 있다. class형과 function형으로 현재 리액트의 공식문서에는 함수형을 쓰도록 명..

Today I Learned 2022.03.20

(항해11일차) 220317 알고리즘 6일차

알고리즘 주차의 마지막날이다. 오늘은 알고리즘 테스트가 두 시간 가량 진행되었다. 실제 테스트가 어떻게 이뤄지는지는 모르지만 충분히 진이 빠지는 시간이었다. 특히 문제에서 주어진 분 단위, 시간 단위의 숫자를 계산하는 부분이 복잡하고, 계속 for 반복문을 사용하다보니 중간에 꼬이지 않기 위해 집중하는 것이 어려웠다. 처음 보는 문제를 시험장 환경에서 풀어보니 문제풀이를 꾸준히 해야겠다는 생각만 가득해졌다. 나름 시험이라고 긴장했는지 문제를 풀고 난 후 저녁시간은 평소보다 힘이 빠져서 공부도 하는둥 마는둥 풀어져버렸다. 그동안 친해졌던 알고리즘 스터디 조원들과의 마지막날이 아쉽기도 해 모여서 꽤 오랜시간 이야기도 나눴다. 열심히 하는 조원들을 잘 만나서 배운 점도 많고, 즐거운 분위기의 스터디가 될 수 ..