전체 글

지난 5일간 솔로 프로젝트로 'Coz shopping'을 제작하였다. 사실 나는 리액트를 사용해서 처음 프로젝트 셋팅부터 개발까지 프로젝트를 만들어 본 경험이 없었다. 따라서 이번 솔로프로젝트는 나에겐 새로운 도전이었다. 프로젝트 계획 개발에 들어가기에 앞서 프로젝트의 요구사항을 분석하고 플래닝하는 단계를 가졌다. 애자일 방법론에 대해 학습하고 그 중 스크럼 방식을 채택하여 프로젝트 계획을 짰다. 도구로는 깃허브에서 제공하는 기능을 사용하였다. 사실 계획을 짜는데 있어서 카드를 생성할 때 어느정도로 기능을 나누어 작성해야하는지 , 어떤 기준으로 카드를 나누어야 하는지 감이 잡히지 않았다. 그래서 일단 페이지 별로 카드를 먼저 나누고 그 안에서 중복적으로 페이지에 들어갈 기능들은 따로 빼서 카드로 작성했다..

Stack 에 대해 공부를 하고 Stack 문제로 유명한 유효한 괄호쌍 문제를 풀어보았다. 사실 예전에 비슷한 문제를 풀어본 적이 있어서 수월하게 풀 수 있을 줄 알았는데 1시간정도가 걸렸던 것 같다... 너무 기만했던 거 같고 다시 한번 풀어보면서 정리를 해봐야겠다. 문제는 코드스테이츠에서 제공하는 코플릿 문제를 풀었다. ( 아래에 해결과정과 느낀점이 있습니다 ) 문제 설명 입력된 괄호 값들이 모두 쌍이 맞게 올바른지를 판단해 모두 쌍이 맞으면 true 그렇지 않으면 false를 출력하세요. 입력된 괄호 값들이 유효한 경우들은 다음에 해당합니다. 1. 열린 괄호는 같은 타입의 닫힌 괄호로 닫혀있어야 한다. 2. 열린 괄호는 올바른 순서대로 닫혀야만 한다. 3. 모든 닫힌 괄호는 그에 상응하는 같은 타입..

오늘은 자료구조 중 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는 주요 고려 대상임 상태의 두가지 구분 로컬 전역 특정 컴포넌트안에서만 관리되는 상태 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면 , 전역 상태일 필요는 없음 (출처가 달라도 됨) 그러나 서로 다른 컴포넌트가 동일한 상태를 다룬다면 출처는 오직 한 곳이어야 함 데이터 무결성? 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 ..