Code Playground

< h1 > Code Playground </ h1 >

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

바닐라코딩 과제로 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이 나온다. 메모 작성 후 제출 버튼을 누르면 메모가 바로 저장된다. 첫 화면의 메모 리스트는 메모 제목과 내용, 메모를 저장한 날짜/시간이 표시된다. 메모는 삭제할 수 있어야 한다. 메모를 클릭하면 상세 페이지로 이동한다. 상세 페이지에서 다시 앱 로고를 클릭하면 리스트 화면으로 돌아온다...

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를 제공한다는 장점이 있어 요즘은 클래스 컴포넌트보다 함수형 컴포넌트를 사용하는 추세로 변하였다. 그래서 오늘은 간단한 예제 코드를 만들..

컴포넌트 생명주기 모든 리액트 컴포넌트는 여러 종류의 Life Cycle Method를 가진다. Life Cycle이란 컴포넌트가 생성되어 소멸될 때까지의 일련의 과정들을 일컫는다. 이러한 Life Cycle 안에서 특정 시점에 코드가 호출되도록 설정할 수 있는데, 이 때 사용되는 메소드를 Life Cycle Method라고 한다. 1. Render() 다른 life cycle method는 상황에 따라 사용할 수도, 사용 안할 수도 있는 선택사항이지만 render 메소드는 모든 클래스 컴포넌트에서 반드시 있어야 하는 필수사항이다. render는() 보통 JSX를 사용하여 사용자가 작성한 엘리먼트들을 DOM 노드로 변환해준다. class App extends React.Component { render(..

Deep Equals Write a function that, given two objects, returns whether or not the two are deeply equivalent--meaning the structure of the two objects is the same, and so is the structure of each of their corresponding descendants. Examples: deepEquals({a:1, b: {c:3}},{a:1, b: {c:3}}); // true deepEquals({a:1, b: {c:5}},{a:1, b: {c:6}}); // false don't worry about handling cyclical object structur..

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 the tree for which the filter returns true. Example: var root1 = new Tree(1); var branch2 = root1.addChild(2); var branch3 = root1.addChild(3); var leaf4 = branch2.addChild(4); var leaf5 = branch2.addC..