![]()
빌드 하셨어염? 우리는 리액트 프로젝트를 완성하고, 사용자에게 제공할 때는 빌드 과정을 거쳐서 배포를 하게 됩니다. 빌드를 하는 과정 속에는 자바스크립트 파일 안에 불필요한 공백, 주석, 경고메시 등을 제거해 파일 크기를 최소화하기도 하고 JSX 문법이나 최신 자바스크립트 문법이 원활하게 실행되도록 Babel을 활용해 트랜스 파일 작업도 할 수 있죠. 이 작업은 웹팩이라는 도구가 담당하고 있습니다. 웹팩에서 별도의 설정을 하지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 파일이 하나로 합쳐지게 됩니다. CRA(create-react-app)로 프로젝트를 빌드할 경우 기본 웹팩 설정에는 SplitChunks라는 node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유된 파..
문제설명 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다. 전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함수를 ..
● 그동안 공부한 것 [16장 리덕스 라이브러리 이해하기] 왜 리덕스를 사용해야할까요? Context API를 통해서 다양한 상태를 관리를 할 수 있고 가장 최고 레벨에 있는 컴포넌트 안에는 JSX만 남겨 깨끗한 코드로 유지할 수 있지만, 프로젝트 규모가 커짐에 ddaeunbb.tistory.com [17장 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 (2)] 이전에 리액트 리덕스는 어떻게 활용할 수 있는지 알아보았습니다. 그런데 매번 액션 생성 함수를 만들어주어야할까요? 넘나 귀찮지 않습니까?.. 그리고 리듀서 함수에서 switch문을 통해 여러번 ddaeunbb.tistory.com [18장 리덕스 미들웨어를 통한 비동기 작업 관리 (1)] ● 실습 source src > index.js i..
![]()
이제.. redux-saga를 맛봐야할 차례가 되엇네염.. 어제 thunk를 공부하면서 도무지 이해가 되지않아.. 그리고 왜 success니 failure니 뭐니 이딴거를 왜 설정하니.. 이해가 되지 않아.. 포기하고싶었으며.. 이해가 되지 않았으며.. 버리고싶었읍니다.. 그래.. 리듀서 함수 내에서 비동기 로직 못쓰니까 thunk 쓰는구나. 그래 알겟는데 왜.. success, failure 이런 성공 실패 구분을 나누지? 싶었습니다. 하지만 비동기 로직을 짤 때 원래 try와 catch문을 쓰는 것은 일반적인 로직이고.. thunk에서 dispatch를 받아오는 이유와 (왜받아와서 왰즤?라는의문이 들었었기에..) 그리고 Promise의 구현을 thunk에서 하는 것이라고 깨우치고 난 뒤 조금 이해가 ..
![]()
리덕스.. 부터 react-redux, RTK까지 .. 오느라 참 힘들었씁니다.. 이게 2주나 걸릴 줄이야.. 우리는 리덕스의 3가지 규칙을 배웠습니다. 상태는 read-only이다. 하나의 애플리케이션에는 스토어가 1개이다. (리듀서도.. 1개이다. 실은combine해주니까) 리듀서는 순수 함수이다. 우리는 store에 상태를 변환시키기 위한 로직을 리듀서 함수내에서 적어줬었죠, 툴킷을 쓰기 이전에는 switch 문으로 action.type을 나눠서 로직을 적고, 툴킷을 쓰게 된다면 reducers라는 객체에 로직을 적어주었습니다. 하지만 리듀서함수는 순수함수여야한다고 했습니다. 따라서 비동기적인 로직은 리듀서 함수에 적을 수 없습니다.. 않의 그럼 어케 이거 비동기 처리 할 수 있다는 고임? 따라서 ..
문제 임의의 tree를 구성하는 노드 중 하나의 Node 객체를 입력받아, 해당 노드를 시작으로 깊이 우선 탐색(DFS, Depth First Search)을 합니다. 이 때, 탐색되는 순서대로 노드의 값이 저장된 배열을 리턴해야 합니다. 입력 value', 'children' 속성을 갖는 객체 (Node) 'node.value'는 number 타입 'node.children'은 Node를 요소로 갖는 배열 출력 배열을 리턴해야합니다. 입출력 예시 let root = new Node(1); let rootChild1 = root.addChild(new Node(2)); let rootChild2 = root.addChild(new Node(3)); let leaf1 = rootChild1.addChild..
