Code Playground

< h1 > Code Playground </ h1 >

컴포넌트 생명주기 모든 리액트 컴포넌트는 여러 종류의 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)로 처리하게 되면 이야기가 달라진다. 어떤 요청을 보내서 응답이 올 때까지 기다려야되는 작업이나 사전에 지정한 시간을 기다려야하는 작업들을 예약을 걸어놓고 지금 당장 처리할 수 있는 작업들을 진행하는 것이다. ..

Linked List Cycle Generally, we assume that a linked list will terminate in a null next pointer, as follows: A -> B -> C -> D -> E -> null A 'cycle' in a linked list is when traversing the list would result in visiting the same nodes over and over This is caused by pointing a node in the list to another node that already appeared earlier in the list. Example: A -> B -> C ^ | | v E false nodeE.ne..

-해당 문제는 codewars사이트의 level5 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- String incrementer Your job is to write a function which increments a string, to create a new string. If the string already ends with a number, the number should be incremented by 1. If the string does not end with a number. the number 1 should be appended to the new string. foo → foo1 foobar23 → foobar24 foo0042 → foo0043 foo9 → foo10 ..

-해당 문제는 codewars사이트의 level5 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- Simple Pig Latin Move the first letter of each word to the end of it, then add "ay" to the end of the word. Leave punctuation marks untouched. pigIt('Pig latin is cool'); // igPay atinlay siay oolcay pigIt('Hello world !'); // elloHay orldway ! 매우 간단한 문제이다. 어떤 문장을 받으면 각 단어의 첫 글자를 그 단어 맨 뒤에 붙이고 'ay'를 덧붙여야한다. ?나 !와 같은 punctuation marks는 제..

-해당 문제는 codewars사이트의 level5 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- Where my anagrams at? What is an anagram? Well, two words are anagrams of each other if they both contain the same letters. For example: 'abba' & 'baab' == true 'abba' & 'bbaa' == true 'abba' & 'abbba' == false 'abba' & 'abca' == false Write a function that will find all the anagrams of a word from a list. You will be given two inputs a..

-해당 문제는 codewars사이트의 level5 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- First non-repeating character Write a function named first_non_repeating_letter that takes a string input, and returns the first character that is not repeated anywhere in the string. For example, if given the input 'stress', the function should return 't', since the letter t only occurs once in the string, and occurs first in the strin..