전체 글

● 오늘 공부한 것 피그마 실습.. 5~6시간 고민했던 애니메이션 만들기는 1시간만에 끝나는 걸 보고 조금 시무룩 해졌었습니다..ㅠㅠ 포토샵이랑 영상을 다룰줄 알아도 피그마의 장벽은 엄청나게 높았던 걸로.. 피그마는 아무리 블로그를 찾아봐도 자료가 진짜 많이 없어서 조금 힘들었습니다.. 외국인 유튜브 찾아서 보고 따라해보고.. 확실히 피그마도 공부해야된다는걸 느꼈어욥.. 디자이너나 다른 팀원들과 소통하기 위해선 역시 툴을 잘 다루는게.. 맞다는 생각이 들었습니다. 아래는 피그마로 만든 작업물..임니다.. ● 내가 놓치고 있던 것 전역 변수는 var, 함수는 환경 레코드에서 객체환경레코드에 연결된 bindingObject를 통해 전역변수가 된다고 했는데, 이는 .bind 와 비슷하게 bindingObjec..

Redux에서는 이전 상태가 항상 보존되며 절대 변경되지 않습니다. 액션이 디스패치될 때마다 이전 상태 객체와 액션 객체에서 파생된 새로운 상태 객체가 리듀서 함수에 의해 반환됩니다. 이 새 상태 객체는 이전 상태 객체의 복사본을 만들고 액션 객체가 지정한 변경 사항을 적용하여 생성됩니다. 원래의 이전 상태 객체는 변경되지 않은 상태로 유지되므로 다음 디스패치에서 참조할 수 있도록 감속기 함수에서 사용할 수 있습니다. 따라서 Redux는 React의 setState 메서드와 같은 방식으로 이전 상태를 "기억"하지는 않지만, 이전 상태를 항상 감속기 함수가 사용할 수 있고 직접 변경하지 않도록 보장합니다. 이러한 접근 방식을 통해 Redux는 예측 가능한 상태 관리 시스템을 구현할 수 있으며, 상태 변경이..

왜 리덕스를 사용해야할까요? Context API를 통해서 다양한 상태를 관리를 할 수 있고 가장 최고 레벨에 있는 컴포넌트 안에는 JSX만 남겨 깨끗한 코드로 유지할 수 있지만, 프로젝트 규모가 커짐에 따라 아래와 같은 코드를 마주해야할 수도 있다. Provider로 감싸진 컴포넌트들의 지옥에 빠져버릴 수도있다는 것.. 그래서 Redux가 필요해지게 된다.!! 물론, 소규모 프로젝트에서는 Context API를 통한 상태관리로도 충분할 수 있다. ● 개념 미리 정리하기 개념을 미리 접하기 전에, 먼저 리덕스의 구조를 좀 보면 이해하기가 쉽다. 그리고 확실히 Redux를 배우기전에 useReducer를 공부해놔야 구조를 더 이해하기가 쉬운 것 같다. useReducer를 공부할 때, 초기 설정값과 typ..

정렬관련해서 한번은 정리하고 올려야한다고 생각했는데,, 이제서야 공부하는 나 ,, 그래도 지금이라도 해서 다행이라고 생각하며 폿으팅을 해봅니다. 만약 배열이 있고, 순서대로 정렬하고 싶을 때 요소를 하나하나씩 돌면서 배열을 정렬하려고 한다. 1. 첫 번째 요소가 두 번째 요소보다 크다면 둘의 자리를 교환한다. 2. 두 번째 요소가 세 번째 요소보다 크다면 둘의 자리를 교환한다. 이 방식을 제대로 정렬이 될 때까지 한무 반복한다. ● 내가 처음에 적었던 답안 function bubbleSort(arr) { for (let i = 0; i arr[j+1]){ let bigger =..

● 오늘 공부한 것 UI/UX 오늘은 UI란 무엇이고 UX란 무엇인지 공부하였습니다. 실은 전에 웹 디자이너분과 함께 홈페이지 제작을 해본적이 있어서 와이어프레임을 구성해본 적이 있어, 와이어프레임에 대해 공부해서 흥미롭게 느낀 점이 많았습니다. 디자인적인 부분에서 Lo-Fi 와이어프레임, Mid-Fi 와이어프레임, High-FI 와이어프레임을 구분한다는 것도 알게되었고, 동작부분에서 프로토타입이라는 언어를 통해 그것에 대한 단계도 나뉘어진다는 걸 알게 되었습니다. 또한 실제로 전에 홈페이지를 만들면서 User Flow를 짜본적이 있어, 이 또한 나중에 웹 애플리케이션을 제작 할 때 매우 중요한 일 중 하나라고 생각이 들었습니다. ● 수업 이외에 공부한 것 [15장 Context API 사용법 익히기] ..

그동안 useMemo, useCallback이 어떤 차이점을 가지고 있는지에 대해서 탐구하느라 조금 오랜시간이 걸렸습니다.. useReducer도 왜 사용하는지에 대해서도 탐구하느라 .. 그럼 이제 Context API를 배워볼까요? ● Context API 왜 쓸까요? 우리는 App.js라는 가장 부모 컴포넌트에서 state를 만들고, 이 state를 변경하기 위해서는 state끌어올리기라는 행동을 해왔습니다. 이 state를 변경하는 컴포넌트가 부모 컴포넌트의 자식 컴포넌트 또 그 자식컴포넌트라도 그에게 꼭 state를 변경할 수 있는 함수를 넘겨주곤 했씁니다.. 그럼 중간에 끼어있는 컴포넌트들은 그저 props를 전달해주는 역할밖에 하지 않음에도 props들을 전달해준 것이죠. 이를 props ch..