well-balanced

Today I Learned 클로저 함수에 대해 좀 더 알아보았다.

Today I Learned Hackerrank에 있는 JavaScript 문제를 몇가지 풀어봤다. 이곳에 정리했다. 클로저에 대해서 이해하려고 노력중이다. 일단 그 중에 꽤나 자주 쓰이는(?) Classic한 예제를 이해하는데 성공했다. var arr = [] for(var i=0; i { return i } } for(var index in arr) { console.log(arr[index]()) } 이 코드의 결과는 0, 1, 2, 3, 4 가 출력될 거라는 내 예상과는 다르게 아래와 같았다. 그 이유는 i가 return된 scope에는 변수 i에 대한 선언이 없기 때문에 그 상위 scope의 전역변수 i 값인 5를 참조했기 때문이다. i 변수를 var가 아닌 let으로 선언한다면 어떻게 될까? ..

Today I Learned 이전에 배우고 얕게 이해하고 있었던 Promise 의 개념을 보다 명확히 잡았다. // 기존의 Callback 방식 function delay(sec,callback){ setTimeout(()=>{ callback(new Date().toISOString()) },sec*1000) } 이를 반복하기 위해서는 아래와 같이 써야한다. delay(1,(time)=>{ console.log(time) delay(1,(time)=>{ console.log(time) delay(1,(time)=>{ console.log(time) }) }) }) // Promise 방식 function delay(sec) => { return new Promise((resolve,reject)=>{ ..

Today I Learned React의 useMemo, useCallback 을 활용한 최적화, useReducer를 통해 상태관리하기 등을 공부했다. 기존에 공부하고 있던 React의 Hooks는 지금 나의 수준에 맞지 않다고 판단을 내려 잠시 유보하기로 결정했다. Action Plan React 공식문서의 튜토리얼을 따라해보기로 했다. 위 선행조건에 따라 JavaScript의 Class와 ES6 문법 Review 해보기

Today I Learned React를 공부했다. 상위 컴포넌트에서 Property의 Value를 설정하지 않았을 때 기본적인 값을 설정할 때는 DefaultProps를 이용하면 된다. function Hello(props) { return Hello, {props.name} } Hello.defaultProps = { name: 'Stranger' } // 상위 컴포넌트에 렌더링되는 값 : Hello, Stranger React의 Basic hooks 중 하나인 useState에 익숙해지기 위해 아래와 같은 작업들을 반복해봤다. useState를 이용해 여러개의 input 태그의 상태를 제어해보았다. 배열을 렌더링하고, 배열에 항목을 추가하고, 제거하는 작업을 해보며 배워봤다.

Today I Learned React를 활용하여 간단하게 CRUD 기능을 구현해보았다. 상위 컴포넌트에서 두가지 이상의 태그를 가질 경우에는 꼭 태그를 감싸줘야한다. 불필요하다고 느낄 때에도 꼭 Fragment를 이용해서라도 감싸줘야한다. function App() { return ( // fragment // fragment ); } JSX에서 CSS 효과를 주기 위해서 style 태그의 값들은 camelCase로 작성해야한다. ex) background-color 이 아닌 backgroundColor 로 사용해야 한다. class를 설정해줄 때에도 class="name" 가 아닌 className="name" 로 사용 주석을 이용할 때에는 {/* like this */} 와 같은 형식으로 이용한다...

Today I Learned React 실습환경을 구축한 후 컴포넌트를 만들어서 파일로 쪼개는 등 간단한 작업들을 해봤는데 반복하고 관련 글들 찾아보면서 계속 코딩하다보니 개념이 잡힌다. 아직 미숙하지만 그래도 새로운 걸 배워보니 좀 더 자극도 되고, 열심히 해야겠다는 생각이 든다. Props는 사용자에게 보여지는 역할을 한다. State는 결과에 영향을 끼치며, this.setState({key:value})를 통해서 변경할 수 있다. 상위 컴포넌트는 하위 컴포넌트에게 Props를 통해 값을 제공해 내부의 State를 바꾸기 때문에 하위 컴포넌트에서 상위 컴포넌트로부터 전달된 Props의 값을 수정하는 것은 금지되어 있다. 아울러 상위 컴포넌트를 동작시키려면 상위 컴포넌트 안에서 Event를 만들고 그..

Today I Learned well-balanced 커뮤니티의 코드를 리팩토링했다. JavaScript 객체 지향 프로그래밍 강의를 들었다. babel은 크로스브라우징을 해결하기 위해 컴파일러의 역할을 해서 코드를 변환해주는 소프트웨어 (JavaScript ES6에서 지원하는 class 기능은 ES6를 지원하지 않는 IE에서는 사용 불가능. 그러나 babel을 사용하면 호환 가능한 코드로 변환해준다.) class를 상속받아 이용하는 것에 대해 배웠다.