Code Playground

< h1 > Code Playground </ h1 >

이번주부터 바닐라코딩에서 백엔드 공부를 시작했다. Node.js와 MongoDB를 이용하여 여러 가지 과제를 해보는 중인데 처음 접하는거라 어렵긴하지만 프론트에서 api 요청을 보내서 데이터 받아오는 것만 해보다가 직접 백엔드에서 DB에 데이터를 집어넣고 가져오는 작업들을 해보니까 너무 신기하다. 오늘은 Node.js 사용자들이 많이 사용하는 프레임워크인 Express로 백엔드를 구성하고 Create-react-app으로 프론트단을 구성하는 아주 간단한 방법에 대해 포스팅해보려고 한다. 이 포스팅은 아래 블로그 글을 참고하여 작성했다. https://daveceddia.com/create-react-app-express-backend/ Create React App with an Express Backe..

Reverse Array 주어진 배열을 뒤집어서 출력한다. 다만 추가 메모리 공간을 만들지 않고 공간복잡도를 고려하여 in-place 방식으로 해보기. (물론 reverse()와 같은 메소드는 사용하지 않고 풀어야한다.) 매우 매우 간단한 몸풀기 문제. 배열의 맨 왼쪽 인덱스와 맨 오른쪽 인덱스를 잡아서 값을 교환하고 왼쪽 인덱스는 오른쪽으로 한 칸 이동하고, 오른쪽 인덱스는 왼쪽으로 한 칸 이동한다. 위 과정을 반복하다가 왼쪽 인덱스가 오른쪽 인덱스보다 크거나 같아지면 반복을 종료하고 배열을 리턴한다. const reverseArray = array => { let left = 0; let right = array.length - 1; while (left < right) { let temp = arr..

정보처리기사 실기시험까지 통과해서 지난주에 자격증을 택배로 받아보았다. 신난다!!!ㅎㅎㅎㅎㅎ 이 자격증 자체가 나에게 엄청난 메리트를 주는 것은 아닐지라도 자격증을 따기 위해 하는 공부 내용들이 상당히 도움이 많이 된다. 컴퓨터 공학 비전공자인 나에겐 특히! 자료구조나 데이터베이스 정규화(normalization)같은 부분들은 바닐라코딩에서 과제를 할때 직접적으로 도움이 되었다. 그 외에도 여러 가지 IT 용어에 친숙해질 수 있었다는 점도 좋았다. 공부 TIP! (실기 시험도 필기 시험과 마찬가지로 시나공 도서로 공부하였다.) 알고리즘 같은 경우엔 암기하는 것보단 머리로 이해하는 것이 중요한 것 같다. 시험 전에 기출문제에 나온 알고리즘 문제들을 여러 번 풀어보면서 이해하는데 중점을 맞췄다. 그리고 생각..

바닐라코딩 과제로 Rest API를 이용한 과제가 주어졌었는데, 여러 가지 지도 오픈소스 중에 하나를 활용해야만 했다. 구글 맵, 카카오 맵 등등 많은 지도 오픈소스가 존재하지만 나는 그 중에서 맵박스(Mapbox)를 이용해서 만들었다. 그 이유는 다음과 같다. 1. 무료라서 2. 디자인이 예뻐서 + 기본 디자인 외에 다른 디자인으로 커스텀 가능 3. 한국에만 국한된 지도가 아니어서 근데 맵박스 자료를 찾아보니 Mapbox-gl이 있고 Uber(우버)에서 만든 React-map-gl이 있고 뭔가 엄청 복잡했다..ㄷㄷ.. 나는 그 중에서 우버에서 만든 React-map-gl을 사용하기로 했다. 왜냐하면 문서가 깔끔하고 보기 쉽게 잘 만들어져있기 때문이다. https://uber.github.io/react..

이제 메모 저장 / 삭제 이벤트도 추가해보자! constants/actionTypes.js export const ADD_NEW_MEMO_PENDING = 'ADD_NEW_MEMO_PENDING'; export const ADD_NEW_MEMO_SUCCESS = 'ADD_NEW_MEMO_SUCCESS'; export const ADD_NEW_MEMO_FAILURE = 'ADD_NEW_MEMO_FAILURE'; export const DEL_MEMO_PENDING = 'DEL_MEMO_PENDING'; export const DEL_MEMO_SUCCESS = 'DEL_MEMO_SUCCESS'; export const DEL_MEMO_FAILURE = 'DEL_MEMO_FAILURE'; 메모를 저장하고 삭제..

바닐라코딩 2차 테스트가 끝났다! 예에~! 그동안 배웠던 내용, 특히 어려웠던 리액트 리덕스(Redux)를 중점적으로 공부하려고 간단한 메모 앱을 구현해보았다. 시험 하루 전날이랑 오늘이랑 해서 만드는데 2일 정도 걸렸던거 같다. 공부한거 복습용으로 급하게 만든거라 기능은 별로 없다. [기능] 페이지를 로딩하면 첫 화면에 메모 작성 버튼과 메모 리스트가 있다. 메모 작성 버튼을 클릭하면 메모를 작성할 수 있는 form이 나온다. 메모 작성 후 제출 버튼을 누르면 메모가 바로 저장된다. 첫 화면의 메모 리스트는 메모 제목과 내용, 메모를 저장한 날짜/시간이 표시된다. 메모는 삭제할 수 있어야 한다. 메모를 클릭하면 상세 페이지로 이동한다. 상세 페이지에서 다시 앱 로고를 클릭하면 리스트 화면으로 돌아온다...

10년 전까지만 해도 프론트엔드 개발의 트렌드는 MVC (Model - View - Controller) 패턴이었다. Model이란 어플리케이션의 데이터를 관리해주는 부분을 말한다. View란 어플리케이션이 사용자에게 어떻게 보여지는지에 대한 관리를 말한다. Controller는 Model의 자료와 View의 인터렉션을 총괄하는 어플리케이션 로직을 관리한다. 그러나 몇몇 사람들이 MVC가 대규모 어플리케이션 개발에는 관리하기 어렵다고 느끼기 시작했다. 프로젝트가 단순하다면 위 그림처럼 간단하게 표현될 수 있다. 그러나 프로젝트 규모가 커지면 데이터 자료의 양과 화면이 많아지면서 Model과 View가 급격히 늘어나고 그에 따라 각각의 모듈들이 어떤 식으로 연결되어있는지 파악하기가 매우 어려워지기 마련이다..

Mix-in eventing system Make an eventing system mix-in that adds .trigger() and .on() to any input object. ※ Example usage: var obj = mixEvents({ name: 'Alice', age: 30 }); obj.on('ageChange', function () { // On takes an event name and a callback function console.log('Age changed'); }); obj.age++; obj.trigger('ageChange'); // This should call our callback! Should log 'age changed'. ※ Caveats: mi..

https://im-developer.tistory.com/152 [알고리즘/자바스크립트] 트리에서 조건에 맞는 값만 필터하기 (Tree Collect) - Depth-First Search Tree Collect Implement a `collect` method on this binary Tree class. Collect accepts a filter function, calls that function on each of the nodes in turn, and returns a flat array of node values of t.. im-developer.tistory.com Tree Collect 지난번에 푼 문제와 완벽하게 동일하지만 지난번에는 Depth-First Search로 풀었다면..

과거에 리액트 함수형 컴포넌트(Functional Component)는 클래스 컴포넌트(Class Component)와 달리 state나 life cycle method들을 사용할 수 없어 Stateless Component라고 불렸으며 단순히 props를 받아서 렌더링해주는 역할로만 사용되었다. 그러나 React 16.8에 Hook이란 새로운 기능이 추가되면서 함수형 컴포넌트에서도 state나 다른 여러 기능들을 사용할 수 있게 되었다. Hook은 props, state, context, refs, lifecycle과 같은 여러 React 개념에 좀 더 직관적인 API를 제공한다는 장점이 있어 요즘은 클래스 컴포넌트보다 함수형 컴포넌트를 사용하는 추세로 변하였다. 그래서 오늘은 간단한 예제 코드를 만들..