본문 바로가기

전체 글

 (199)
[Redux] 5. 리덕스 개발자도구 적용하는 방법 리덕스 개발자 도구를 사용하게 되면 다음과 같은 장점들이 존재한다. 1. 현재 스토어의 상태를 확인할 수 있다 2. 현재까지 어떤 액션들이 디스패치 되었는지 확인할 수 있다 3. 액션에 따라 상태가 어떻게 변화됐는지 확인할 수 있다 4. 액션을 직접 디스패치 할 수 있다 이렇게 많은 장점들이 존재하기 때문에 리덕스 개발자 도구를 안 쓸 이유가 없다!! 리덕스 개발자 도구를 프로젝트에 적용하는 과정은 다음과 같다. 1. 크롬 웹 스토어에서 리덕스 개발자 도구 설치 2. 프로젝트에 redux-devtools-extension을 설치 👉 터미널창에 다음과 같이 명령어 입력 $ yarn add redux-devtools-extension 3. 기존의 index.js를 다음과 같이 수정한다. - redux-dev..
[Redux] 4. 리덕스로 카운터 구현하기 리덕스를 이용해 카운터 기능을 구현해보자. 프리젠테이셔널 컴포넌트 만들기 프리젠테이셔널 컴포넌트란 리덕스 스토어에 직접적으로 접근하지 않고 필요한 값이나 함수를 props로만 받아와서 사용하는 컴포넌트를 말한다. src 디렉터리에 components 디렉터리를 만들고, 그 안에 Counter.js를 생성한 뒤에 다음과 같이 코드를 작성한다. Counter.js import React from 'react'; function Counter({ number, diff, onIncrease, onDecrease, onSetDiff }) { const onChange = e => { onSetDiff(parseInt(e.target.value, 10)); }; return ( {number} + - ) } ex..
[Redux] 3. 리덕스 모듈 만들기 리액트 프로젝트에 리덕스를 적용하기 위해서 리덕스 모듈을 만들어보자! 리덕스 모듈은 다음과 같은 항목들이 모두 들어있는 자바스크립트 파일이다. 1. 액션 타입 2. 액션 생성함수 3. 리듀서 위 항목들을 각각 다른 파일에 저장할 수도 있다. 리덕스 공식 GitHub 레퍼지토리에 등록되어있는 예제 프로젝트를 보면 아래와 같이 코드가 분리되어 있다. actions index.js reducers todos.js visibilityFilter.js index.js 구조를 보면 액션과 리듀서가 다른 파일에 정의되어 있는 것을 알 수 있다. 하지만, 코드들이 꼭 분리되어야 하는 것은 아니다. 코드들이 다른 디렉터리에, 다른 파일에 분리되어 있으면 개발할 때 꽤 불편할 수도 있다. 그래서 우리는 리듀서와 액션 관련..
[Redux] 2. 리덕스 설치 및 예제 실행 리덕스 설치하는 방법 먼저, cmd에 다음과 같은 명령어를 입력해 새로운 프로젝트를 생성한다. $ npx create-react-app practice-redux 이후 생성된 디렉터리에 redux 라이브러리를 설치한다. $ cd practice-redux $ yarn add redux 리덕스 사용해보기 practice-redux 디렉토리의 src 폴더에 exercise.js 파일을 생성한 후 해당 파일에 'Hello!'를 출력하는 console문을 작성한다. exercise.js console.log('Hello!'); 이후 index.js에서 다음과 같이 exercise 파일을 불러온다. index.js import React from 'react'; import ReactDOM from 'react-..
[Redux] 1. 리덕스의 정의 및 특징 리덕스의 정의 리액트에서 가장 많이 쓰이는 상태(state)관리 라이브러리 리덕스가 필요한 이유 리액트로 프로젝트를 진행하다 보면 무조건 state와 props를 사용하게 되는데 컴포넌트끼리 state를 전달하고 관리하기가 쉽지 않다. 만일, 컴포넌트가 (부모)App- Sample1 - Sample2(자식) 순으로 있다면 App의 state를 Sample2에서 사용하기 위해서는 다음과 같은 과정이 필요하다. 1. App의 state를 Sample1에게 props로 넘겨준다 2. Sample1의 props를 다시 Sample2에게 props로 넘겨준다 컴포넌트가 3개밖에 없을 때에도 2단계의 과정이 필요한데 프로젝트 규모가 더 커지고 컴포넌트 개수가 늘어나게 된다면 더 많은 단계가 필요해져 프로젝트가 상당..
React Native Execution failed for task ':app:installDebug' 해결 방법 핸드폰을 컴퓨터에 연결하고 react-native run-android 명령어를 실행했더니 아래와 같은 오류 메세지가 출력됐다. 모든 오류해결의 시작은 오류 메세지를 잘 읽는 것이므로 오류가 발생한 이유를 읽어봤다. 'No online devices found'라는 것을 보니 핸드폰이 제대로 연결되지 않은 것 같다. cmd창에 adb devices를 입력해 연결된 디바이스 목록을 살펴봤다. 디바이스는 연결이 됐는데...권한이 승인되지 않았다고..?왜죠....? 그래서 또 핸드폰 설정을 확인해봤다. 문제는 핸드폰 설정에 있었다..^^ 나의 경우에는 파일 전송이 선택되어 있었는데 여기서 USB 테더링을 선택해야 한다. 그리고 다시 adb devices를 입력해보면 위와 같이 연결이 잘 된 것을 확인할 수 있..
[프로그래머스 LEVEL2] 후보키/ Javascript 문제 설명 프렌즈대학교 컴퓨터공학과 조교인 제이지는 네오 학과장님의 지시로, 학생들의 인적사항을 정리하는 업무를 담당하게 되었다. 그의 학부 시절 프로그래밍 경험을 되살려, 모든 인적사항을 데이터베이스에 넣기로 하였고, 이를 위해 정리를 하던 중에 후보키(Candidate Key)에 대한 고민이 필요하게 되었다. 후보키에 대한 내용이 잘 기억나지 않던 제이지는, 정확한 내용을 파악하기 위해 데이터베이스 관련 서적을 확인하여 아래와 같은 내용을 확인하였다. 관계 데이터베이스에서 릴레이션(Relation)의 튜플(Tuple)을 유일하게 식별할 수 있는 속성(Attribute) 또는 속성의 집합 중, 다음 두 성질을 만족하는 것을 후보 키(Candidate Key)라고 한다. 유일성(uniqueness) : ..
[프로그래머스 LEVEL2] 구명보트 / Javascript 문제 설명 무인도에 갇힌 사람들을 구명보트를 이용하여 구출하려고 합니다. 구명보트는 작아서 한 번에 최대 2명씩 밖에 탈 수 없고, 무게 제한도 있습니다. 예를 들어, 사람들의 몸무게가 [70kg, 50kg, 80kg, 50kg]이고 구명보트의 무게 제한이 100kg이라면 2번째 사람과 4번째 사람은 같이 탈 수 있지만 1번째 사람과 3번째 사람의 무게의 합은 150kg이므로 구명보트의 무게 제한을 초과하여 같이 탈 수 없습니다. 구명보트를 최대한 적게 사용하여 모든 사람을 구출하려고 합니다. 사람들의 몸무게를 담은 배열 people과 구명보트의 무게 제한 limit가 매개변수로 주어질 때, 모든 사람을 구출하기 위해 필요한 구명보트 개수의 최솟값을 return 하도록 solution 함수를 작성해주세요..

티스토리툴바