Code Playground

< h1 > Code Playground </ h1 >

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

컴포넌트 생명주기 모든 리액트 컴포넌트는 여러 종류의 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..

Promise에 이어서 오늘은 Async/Await에 대해서 정리해보려고 한다. Async/Await Async/await은 ES8에서 새롭게 도입되었다. async/await은 promise를 좀 더 이해하기 쉽게 사용하기 위해서 탄생하였다. 그러니까 promise와 전혀 다른 별개의 개념이 아니라 promise를 간단하게 사용하기 위한 문법인 것이다. 그래서 async/await은 기존에 우리가 알던 promise 구문보다 훨씬 간단한 구조로 되어있다. function makeWordPlural (word) { return new Promise((resolve, reject) => { setTimeout(() => { word += "'s "; resolve(word); }, 1000); }); } ..

저번에 event loop 포스팅에서 언급했듯이 싱글 스레드 언어인 자바스크립트는 한 번에 한 가지 일 밖에 못한다. 그래서 모든 작업을 동기로 처리하면 데이터를 받아와서 화면에 렌더링할 때 데이터 받아오는 작업을 완료하기 전까지는 렌더링을 할 수 없기 때문에 화면이 블록(block)되어 버린다. 그래서 비동기란 것이 생겨났다. 비동기란 일종의 예약 시스템이다. 작업을 동기(Synchronous)로 처리하게 되면 어떤 작업이 끝날 때까지 다음 작업을 진행할 수 없지만 비동기(Asynchronous)로 처리하게 되면 이야기가 달라진다. 어떤 요청을 보내서 응답이 올 때까지 기다려야되는 작업이나 사전에 지정한 시간을 기다려야하는 작업들을 예약을 걸어놓고 지금 당장 처리할 수 있는 작업들을 진행하는 것이다. ..