책 읽다가 코딩하다 죽을래

React-Redux를 더욱 쉽게 관리하게 만들어주는 immer, redux-action에 대해 배워보자 모듈 설치 방법 yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 immer redux-actions npm i redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 immer redux-actions 각 모듈에 대한 설명 redux-logger : 웹상에서 redux의 action이 일어날 때마다 콘솔에서 action 내역을 이쁘게 보여주는 모듈 이런 식으로 action이 일어날..

GD프로젝트 알고리즘 수업 3주 차가 시작되었다. 그럼 3주 차에 배운 내용과 풀었던 알고리즘 문제에 대해 설명하겠다. 목차 1. 새롭게 배운 내용(버블정렬, 선택정렬, 삽입정렬, 병합정렬, 스택, 큐, 해쉬) 2. 스택 문제 1. 새롭게 배운 내용 1. 정렬 더보기 정렬이란 데이터를 순서대로 나열하는 방법을 말한다. 정렬은 알고리즘의 굉장히 중요한 주제이다. 이진 탐색을 가능하게 해주고 데이터를 조금 더 효율적으로 탐색할 수 있게 만들기 때문이다. 그럼 한 번 여러분들이 다음의 데이터를 정렬해보자 3,1,2 파슬리, 누룽지, 감자 d, s, o 인간의 눈으로는 작은 수들의 데이터를 정렬하는 것은 무지 쉽다. 3,1,2 -> 1,2,3 파슬리, 누룽지, 감자 -> 감자, 누룽지, 파슬리 d, s, o -..

Promise는 콜백함수 대신에 비동기적인 처리를 할 수 있는 것이다. 비동기가 무엇인지 모른다면 다음 글을 보자 자바스크립트 비동기 [클릭] Promise의 중요한 요소는 State와 Producer, Consumer가 있다. state는 자신의 일이 다 처리되었는지 아닌지의 현재 상태를 나타내 주는 것이고 Producer는 데이터를 제공하는 사람이며 Consumer는 데이터를 소비하는 사람을 일컫는데 개념만 보면 뭔 소리하는지 못 알아듣겠으니 코드를 보자 //1. Producer const promise = new Promise((resolve, reject) => { //여러가지 로직(네트워크 통신 및 파일 처리 등등) console.log('doing something...'); setTimeou..

GD프로젝트 알고리즘 수업 2주 차가 시작되었다. 그럼 2주 차에 배운 내용과 풀었던 알고리즘 문제에 대해 설명하겠다. 목차 1. 새롭게 배운 내용(Array, LinkedList, 이진 탐색, 재귀 함수) 2. 재귀 함수 문제 1. 새롭게 배운 내용 1. Array vs LinkedList 더보기 자료구조 중에서 자주 쓰이는 Array와 LInkedList를 서로 비교하겠다. 언어는 Python 기준으로 하겠다. (선언할 때 배열 크기를 정해야 하는 c++, 자바의 정적 배열과는 달리 Python의 배열은 동적 배열이다.) 다음 간단한 배열의 예를 들어보자 배열은 index와 데이터로 이루어져있다. index는 0으로부터 시작되며 데이터의 순서를 매기며 데이터는 int형부터 시작되어 그 어떤 데이터 타..

callback 함수는 비동기 함수이다. 비동기 함수에 대해서 잘 모른다면 아래의 게시물부터 보고오자 자바스크립트 비동기[클릭] 콜백함수는 쉽게 말하자면 일을 다른 객체에게 시키고, 그 일이 끝날 때까지 기다리는 것이 아니라 그 객체가 나를 다시 부를 때까지 다른 할 일을 하고 있는 것이고, 정확히 말하자면 제어권을 객체에게 넘겨주는 것이다. 사용자가 계속 실행하기 귀찮으니 실행제어권을 객체에게 넘겨주는 것이다. 이 콜백함수는 비동기 처리를 하기 위한 패턴 중 하나이다. setInterval(() => { console.log('1초마다 실행될 겁니다.'); }, 1000); 콜백함수의 예시는 setInterval이 있다. setTimeout이 지정한 시간이 지나면 지정한 함수가 1회 실행된다면 setI..

GD프로젝트 리액트 수업이 끝나고 알고보면 알기쉬운 알고리즘 이라는 알고리즘 수업이 이번 주차부터 시작되었다. 그럼 1주차에 배운 내용과 소수 찾기 알고리즘에 대해 설명하겠다. 1. 새롭게 배운 내용 1. 시간복잡도 더보기 시간 복잡도는 입력값에 따라 문제를 해결하는데 걸리는 시간과의 상관관계를 말합니다. 똑같은 알고리즘에 입력값이 몇 배로 늘어남에 따라 문제를 해결하는 데 걸리는 시간은 몇 배만큼 늘어나는지 보는 것이다. 우리는 똑같은 입력값이라도 당연히 더 빠른 시간 안에 입력을 처리하는 알고리즘을 선호한다. 즉 걸리는 시간이 줄어들수록 시간 복잡도는 작아지며, 시간 복잡도가 작은 알고리즘이 좋은 알고리즘이다. 시간 복잡도에 대해서 설명하기 위해 똑같은 목적을 가진 두 개의 알고리즘을 살펴보겠다. 두..

GD프로젝트 리액트 심화반 마지막 주 차가 시작되었다. 새롭게 배운 내용과 마지막 결과물 그리고 느낀 점을 서술하겠다. 목차 1. 새롭게 배운 내용(SEO, 웹 성능 지표) 2. 마지막 결과물 및 추가 기능 3. 느낀 점 1. 새롭게 배운 내용 1. SEO 더보기 SEO(Search Engin Optimization : 검색엔진 최적화)는 네이버나 구글 검색 엔진에 뭔가를 검색했을 때, 내가 만든 사이트가 검색 결과에 더 잘 나타나도록 하기 위한 작업이다. 검색 엔진은 우리가 입력한 검색어를 가지고 그 검색어와 일치하는 웹사이트를 찾게 된다. 웹사이트를 찾는 방식은 웹사이트의 html 파일이나 메타 태그들을 한 번 훑어보는 방식이다. 그래서 웹 개발자들은 내용물에 특정한 인덱스를 만들어서 검색 엔진이 내..

GD프로젝트 리액트 심화반 4주 차가 시작되었다. 이번에도 새롭게 배운 내용과 결과물들을 설명해보겠다. 목차 1. 새롭게 배운 내용(Badge, RealTimeBase) 2. 4주 차 과제 및 느낀 점 1. 새롭게 배운 내용 1. Badge 더보기 Badge는 PC 뷰에 비해 모바일 뷰같이 매우 작은 화면 공간을 효율적으로 사용하고 간편성 또한 추구하기 위해 단축화시킨 모양이라고 생각하시면 된다. (몰론 PC 뷰에서도 많이 쓰이기도 한다.) 위 사진은 페이스북 애플리케이션에서 사용하는 Badge이다. 왼쪽에서부터 타임라인, 내 홈피(?), 단체, 알림, 메뉴 기능인데 이걸 일일이 PC 뷰의 메뉴들처럼 이름으로 나열했으면 공간도 부족하고 이쁘지도 않았을 것이다. 그래서 많은 모바일 어플리케이션에선 Badg..