오늘은 자료구조 중 Stack 과 Queue에 대해 학습했다 . 데이터를 효과적으로 관리하기 위해 자료구조가 쓰이고 데이터의 특징을 잘 분석하고 사용해야 자료구조를 잘 활용할 수 있다. 사실 대학교를 다니며 귀에 딱지가 지도록 자료구조에 대해 배웠었는데 그 때에는 자료구조를 왜 써야하는지 크게 와닿지 않았던 것 같다 . 하지만 오늘 다시 복습을 하면서 자료구조의 필요성에 대해 깨달은 것 같다 !! ㅎㅎ Stack ? 데이터를 순서대로 쌓는 자료구조 입력과 출력이 하나의 방향, 스택의 최상단에서만 이루어지는 제한적 접근 LIFO (Last In First Out) 또는 FILO (First In Last Out) 데이터를 삽입 ( Push) 데이터를 추출 ( POP) 예 ) 브라우저의 뒤로가기 앞으로가기 ..
분류 전체보기
treeBFS 문제 임의의 tree를 구성하는 노드 중 하나의 Node 객체를 입력받아, 해당 노드를 시작으로 너비 우선 탐색(BFS, Breadth First Search)을 합니다. 이 때, 탐색되는 순서대로 노드의 값이 저장된 배열을 리턴해야 합니다. 입력 인자 1 : node 'value', 'children' 속성을 갖는 객체 (Node) 'node.value'는 number 타입 'node.children'은 Node를 요소로 갖는 배열 출력 배열을 리턴해야 합니다. 주의사항 생성자 함수(Node)와 메소드(addChild)는 변경하지 않아야 합니다. 입출력 예시 let root = new Node(1); let rootChild1 = root.addChild(new Node(2)); let ..
블로깅 챌린지 3주차가 다가왔다 ! 사실 코드스테이츠를 수강하면서 처음부터 프로젝트를 구현해본적은 없던 것 같다. 항상 짜여진 틀에 알맞은 코드를 작성해 테스트케이스를 통과하는 것이 끝이었다. 그래서 막상 처음부터 리액트로 코드를 짤 수 있을까 ? 하는 생각이 들었던 것 같다. 그래서 이번 블로깅 챌린지 주제로는 '리액트로 간단한 컴포넌트를 구현하기'로 정했다. 리액트를 사용하기 위해선 node.js 가 필요하고 node.js 설치를 완료 하였으면 npm을 이용하여 자바스크립트 라이브러리를 관리할 수 있다. 나는 실습을 통해 node.js를 설치하였으므로 여기까지는 성공적이다. 리액트 앱 생성하기 리액트가 제공하는 create-react-app을 활용하여 리액트 프로젝트를 생성할 수 있다. 터미널에 간단..
오늘은 네트워크에서 IP와 IP Packet에 대해 정리해보겠다 ! 그 전에 알아둬야할 몇 가지 개념에 대해 정리해보며 블로깅을 시작해보겠다 ! 과거 통신을 위해선 회선 교환 방식을 채택하였다. 회선 교환 방식이란 발신자와 수신자 사이에 데이터를 전송할 전용선을 미리 할당하고 연결하여 통신하는 방식이다. 따라서 만약 내가 연결하고 싶은 상대가 다른 상대와 연결 중이면 상대가 연결이 끝날 때 가지 기다린 후 연결을 해야만 했다. 이러한 교환 방식은 즉시성이 떨어진다는 단점이 존재했다. 따라서 이러한 단점을 보완하여 패킷 교환 방식이 탄생하였다. 패킷 교환 방식 패킷이라는 단위로 데이터를 잘게 나누어 전송하는 방식 패킷(Packet) 이란 ? 컴퓨터 네트워크에서 데이터를 전송하는 단위 패킷은 출발지와 목적지..
오늘은 블로깅 챌린지 두번째 날이 다가왔다 ! 오늘은 최근에 배웠던 Redux에서 상태 관리 라이브러리로 잠깐 소개만 되었던 리액트 Context에 대해 공부해보았다. 처음 접하는 개념이라 어려웠지만 알아두면 좋을 것 같다 Context 란? 전역적으로 데이터를 공유하기 위한 기능임 일반적으로 React 애플리케이션에서 props를 이용해 데이터를 컴포넌트에 전달하는데 컴포넌트의 깊이가 깊어질수록 매번 props 를 사용해 데이터를 전달하는 것이 번거롭고 복잡해질 수 있음 따라서 이 경우 Context를 사용하면 중간 컴포넌트를 건너 뛰고 데이터를 바로 전달할 수 있음 Context 요소 Provider Consumer 데이터를 제공 데이터를 사용 Context 사용 import React from 'r..
redux가 아직 감이 잘 안잡혀 반딧불반에 오게 되었다 ..ㅎㅎ 오늘은 Redux 실습인 cmarket_redux를 다시 풀어보고 의사코드를 작성해 볼 것이다. 문제 Bare minimum requirements Action, Reducer를 직접 작성하고 테스트 케이스를 통과합니다. 테스트 케이스 순서대로 과제를 진행해 주세요. Getting Started 다음 Cmarket Shopping App은 Create React App으로 만든 React 애플리케이션에 Redux를 붙인 구조입니다. 아이템 리스트 페이지(ItemListContainer)와 장바구니 페이지(ShoppingCart) 총 두 페이지로 간단하게 구성됩니다. Store의 initial state에는 전체 아이템 목록(items), ..
프론트엔드 개발에서 상태관리를 보다 더 효율적으로 하기 위한 라이브러리인 Redux에 대해 공부하였다. 상태관리를 공부하면서 등장하는 다양한 개념들도 익혀두면 좋을 것 같다. 프론트엔드 개발에서의 상태관리 상태란 ? UI에 동적으로 표현될 데이터 상태를 다룰 때에 Side Effect는 주요 고려 대상임 상태의 두가지 구분 로컬 전역 특정 컴포넌트안에서만 관리되는 상태 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면 , 전역 상태일 필요는 없음 (출처가 달라도 됨) 그러나 서로 다른 컴포넌트가 동일한 상태를 다룬다면 출처는 오직 한 곳이어야 함 데이터 무결성? 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 ..
Redux 란 ? javaScript 애플리케이션에서 상태를 관리하는 라이브러리 중 하나 데이터 흐름을 예측 가능하게 만들어 애플리케이션의 상태 변화를 추적하고 디버깅하기 쉽게 해줌 Redux 구성요소 액션(Action) 리듀서(Reducer) 스토어(Store) 디스패처(Dispaatcher) 상태를 변경하기 위한 정보를 가지고 있는 메세지 , 액션은 객체 형태로 작성되며 필수적으로 'type' 프로퍼티를 가지고 있어야 함 상태를 변경하는 로직을 담당함. 리듀서는 이전 상태와 액션을 받아서 새로운 상태를 반환하는 순수함수임 상태를 저장하고 관리함. 스토어는 애플리케이션의 상태를 담고 있으며, 상태를 변경하는 유일한 방법은 액션을 디스패치하는 것임 액션을 전달하는 역할을 수행 . 디스패처는 단 하나만 존..
오늘은 리액트로 프론트엔드를 구축할 때 , 구조적으로 코드를 작성하는 방법에 대해 작성해 볼 것이다. CDD 란? Component Driven Development 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법 같은 UI 컴포넌트를 공유 즉 재사용할 수 있는 UI 컴포넌트를 개발하기 위해 고안됨 CSS-in-JS 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러옴 CSS는 컴포넌트 기반의 방식을 위해 만들어진 적이 없음 그래서 탄생한 것이 CSS-in-JS CSS도 컴포넌트 영역으로 불러들이겠다 ! 대표적 예 ) Styled-Component Styled-Component 기능적 혹은 상태를 가진 컴포넌트로부터 UI를 완전히 분리해 사용할 수 있는 단순한 패턴을 제공 CSS를 컴포넌트화 시켜주는 라..
