오늘은 툴킷을 사용하지 않은 리덕스와 리액트 리덕스로 간단하게 컴포넌트 2개의 페이지를 만들어서 리덕스 활용법을 연습해보았다. 먼저, 리액트 리덕스를 사용하기 위해서는 npx create-react-app . 을 통하여 리액트앱을 생성해주고, npm i redux react-redux 위의 명령어를 통해 리덕스와 리액트 리덕스를 설치해줍니다. 설치가 완료되었다면, 리덕스와 리액트 리덕스를 사용할 준비가 끝났다 이전의 리덕스 포스팅에서 봤다시피 리덕스에서는 store, action, reducer가 매우 중요하다. 1. Redux 리덕스란? 리덕스 공홈에선 리덕스를 이렇게 설명하고 있다. Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 Redux는 여러분이 일관적으로 동작하고, 서로 다른 환..
리덕스란? 리덕스 공홈에선 리덕스를 이렇게 설명하고 있다. Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와준다. 이게 무슨소리...?? 그냥 쉽게 데이터를 중앙집권화를 시켜서 데이터 사용 및 관리를 편하게 만들어주는 라이브러리 라고 생각하면된다. Redux에는 3가지의 원칙이 있다. 1. Single source of truth 동일한 데이터는 항상 같은곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미 2. State is read-only 리액트에서는 setState 메서드를 활용해야만 상태변경이 가능 리덕스에서도 액션이라는 객체를 통해서만 상태변경이 가능..
정렬 알고리즘 (Sorting Algorithm) 무작위로 섞여있는 데이터를 어떤 기준에 맞춰 정렬하는 알고리즘 정렬 알고리즘은 다양한 경우에 매우 유용하게 사용됨 각종 데이터 목록을 정리하고 싶을 때 분포도의 중위값을 알아내고 싶을 때 데이터에서 중복값을 잡아내고 싶을 때 이진 탐색을 하고 싶을 때 사실, 자바스크립트에서 정렬을 하고자할때 sort()라는 메서드를 사용하면 정렬을 해준다. 하지만 정렬 알고리즘을 배우는 이유는 데이터들의 양이나 상황에 따라 어떤 정렬을 사용하는 것이 좋은지를 알고 가리기 위해 몇몇 유명한 정렬 알고리즘을 알아보려한다. 알아볼 정렬 알고리즘: 버블 정렬 선택 정렬 삽입 정렬 퀵 정렬 힙 정렬 병합 정렬 먼저, 정렬의 Stable정렬, In-place정렬에 대해 알아보자 S..
이번엔 react 훅 중에 useReducer 훅에 대해 포스팅이다. useReducer란?? - useState를 대체할 수 있는 함수. - 보통 React에서 상태 관리를 위해 가장 많이쓰는 훅은 useState다. - 하지만 더 복잡한 상태관리를 해야할 경우에는 useReducer 훅을 사용 useReducer의 구조 import React, { useReducer } from "react"; const [state, dispatch] = useReducer(reducer, initialState, init) state : 컴포넌트에서 사용할 상태 dispatch 함수 : state 업데이트를 위한 요구 - 첫번째 인자인 reducer를 실행시키는 함수 - 컴포넌트 내에서 state의 업데이트를 일..
이번 과제에서는 지금까지 배웠던 내용들을 토대로 Modal, Toggle, Tab, Tag UI을 구현해보았다. 🖥️ Modal 컴포넌트 Modal 컴포넌트에서 핵심은 새로운 창이 아니라, 레이어를 깔아야한다. 먼저, useState를 사용하여 isOpen 상태를 만들어주어, 모달창이 켜진상태와 꺼진상태의 상태를 만들어준다. 그리고, openModalHandler 함수를 통하여 함수가 호출되어 실행되면, 모달창의 켜짐여부인 isOpen의 상태가 바뀌게 만들어주었다. ModalBackdrop과 ModalView의 부모 컨포넌트인 ModalBtn에 이벤트 핸들러를 주어 자식 컴포넌트에도 같은 핸들러가 작동이 되기때문에 자식 컴포넌트에서는 작동이 되지않게 하기위해 해당 이벤트 핸들러 e에 stopPropaga..
문제 : 정수를 요소로 갖는 배열을 입력받아 오름차순으로 정렬하여 리턴해야 합니다. 버블 정렬(bubble sort)은 여러 정렬 알고리즘(삽입 정렬, 퀵 정렬, 병합 정렬, 기수 정렬 등) 중 가장 기본적인 알고리즘입니다. 버블 정렬 알고리즘은 아래와 같습니다. 첫 번째 요소가 두 번째 요소보다 크면, 두 요소의 위치를 바꿉니다. (swap) 두 번째 요소와 세 번째 요소보다 크면, 두 요소의 위치를 바꿉니다. (swap) 1, 2를 마지막까지 반복합니다. (마지막에서 두 번째 요소와 마지막 요소를 비교) 1~3의 과정을 한 번 거치게 되면, 가장 큰 요소가 배열의 마지막으로 밀려납니다. 1~3의 과정을 첫 요소부터 다시 반복합니다. 5를 통해 두 번째로 큰 요소가 배열의 마지막 바로 두 번째로 밀려납..
이번 포스팅은 오늘 배운 UI/UX에 대해 포스팅하려한다. 사실 UI와 UX 상당히 많이 들어본 단어들이지만 정확히 무엇을 뜻하고 차이점을 뚜렷하게 알지못했다. 그래서 오늘 공부한 UI와 UX의 정의와 차이점을 알아보려한다. UI 란?? UI(User Interface)란 상호작용과 의사소통을 원활하게 해주는 접점에 존재하는 것. 즉, 사용자가 사용하는 서비스나 제품의 화면안에 모든 것 아이콘, 검색창, 색상, 문자, 폰트 등의 디자인 또한 UI의 영역이다. 예를 들어, 캔커피를 사러 마트에 갔다고 생각해보자. 마트에 들어가면 보이는 과자, 컵라면 등등이 보이고 캔커피를 찾으러 여기저기 둘러볼 것이다. 이때의 UI는 어떤 제품을 어디에 배치하냐의 설계를 UI라고 할 수 있다. 마트의 진열대에서의 제품배치..
오늘은 재귀함수를 처음 들어봄과 동시에 코플릿 문제를 풀어보았다. 아니 너무어려운거 아닌가요...?? 프로그래머스 입문풀고있는 나에게 너무 가혹하였다,,, 먼저 재귀란?? 컴퓨터 과학에서 재귀란 자신을 정의할 때 자기 자신을 재참조하는 방법 (나무위키 백) 그럼 재귀함수(Recursion Function)이란?? 재귀의 설명대로 함수에서 자기 자신을 다시 호출해 작업을 수행하는 방식이다. 그렇기에 특정 분기까지 자기 자신을 계속 호출한다. 주로 반복문을 구현할 때 사용한다. 흔히 사용하는 for, while 등과 같은 반복문으로 구현가능한 로직은 모두 재귀함수로도 가능하고, 그 반대도 역시 가능하다. 재귀 함수의 장단점 장점 변수를 여럿 만들 필요가 없다. 예를 들어, 현재 상태를 저장해야 할 경우 변수..
