Web Front-end
[React/Optimize/Memo] Component를 분리하고, 마지막으로 React의 Memorization을 활용해보자!
Component의 재사용성과 확장성을 갖기위해서 , 컴포넌트의 "합성"를 이용해서 , 좀 더 추상적인 컴포넌트를 만들고 혹은 재사용되는 컴포넌트를 만들고 구체화하는 방식으로 구현했습니다. 하지만, 그에 따른 부작용으로 컴포넌트간의 관계가 복잡해지고, 리렌더링 Issue가 생기기 시작했습니다. 현실적으로 FE 개발자에게 "생산성"은 빠질 수 없는 요소이기 때문에, 사실 이러한 이슈에 대해서 깊게 파고드는 것은 당장 필요한 사항은 아닐 수 있습니다. 세부적인 동작은 모두 React에 일임하고 , 우리는 그것을 사용하면 되니까요. 하지만,한번 깊이감있게 가져가보겠습니다. 재밌기도 하거든요! Memo를 사용하기 전에, 독립적으로 나눌 수 있는 Component가 없는지 확인해보자 . (By 공식문서) 저보다 ..
[React/Composition] 리액트 컴포넌트의 확장(React Composition)
React를 잘 사용하기 위해서는 , 컴포넌트 설계능력이 필수적이게 된다. 이건 경험적인 요소라 많이 쓸수록 자연스럽게 늘어나겠지만, 한번 의식적으로 확장을 해보자! 웹 환경에서의 재사용 웹에서는 생각보다 반복적인 작업이 많다. 예를들어, 아래와 같은 Modal 창을 구현한다고하자. Modal창은 구체화되서, "로그인창"이 될 수도 있고, "상세정보를 보여주는 Modal창"이 될 수도있다. 물론 , 각각 폴더로 분리해서 각각의 Component로 구현해도 무방하다. 하지만, 이번에는 "의도적"으로 Modal창을 추상화시키고, Login창과 Detail창을 구현해보도록 하겠습니다. 마치 "상속"과 비슷하지 않나요! React에서는 상속대신 , Composition https://reactjs.org/doc..
[JS/비동기/프로미스] JavaScript Promise에 대해서
오늘은 Front-End의 중요한 영역인 Data Fetching 에서 사용되는 Promise 문법에 대해서 알아보겠습니다. Promise 프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. - MDN promise는 ES6에서 나온 새로운 기능으로, 어떤 "문제점"을 해결하기 위해서, 나온 기능입니다. 즉, 그 문제점이 뭐냐를 이해하면 Promise의 정체를 밝힐 수 있을 것 같습니다. Promise의 등장배경 작은 규모의 웹에서는 비동기 요청이 많지 않아서, 각 비동기 요청간의 의존성이 크지 않았다고 합니다. 웹이 발전하고, 다양한 플랫폼으로 진출하면서 , 단순히 callback만으로는 모든 상태를 통제하기 어려웠다고 합니다. 예를들어, 로그인 과정에서 서버와 통신과정이 필요합니다...
[JS/객체/프로토타입] JS의 프로토타입
JavaScript는 프로토타입형 객체지향 언어이기도 하고, 함수형으로 쓸 수도 있고, 뭐 다양한 측면을 가진 언어입니다. (non-blocking , single-Thread,concurrency ,asynchronized 언어이기도 하죠) 자바스크립트의 빼놓을 수 없는 특징 중 하나인, 프토로타입에 대해서 적어봅시다! 프로토타입 현실에서 "프로토타입" 이라는 말 많이 쓸 일이 없지만 , 프로토타입에 대해서 먼저 알아봅시다. 종종 영화같은데나 게임버전 같은데서는 Prototype이라는 용어를 씁니다. 아이언맨에서 "프로토타입"이라는 말이 나오는데요 , 구글링을 해보겠습니다. 아이언맨 1에 나오는 초기 슈트입니다! 감은 잡힙니다. "프로토타입"이라고 하면, 뭔가 초기버전 , 근본이 되는 1.0ver같은 ..
[JS/호이스팅/실행 컨텍스트/이벤트 루프] JS 코드의 흐름
저는 var을 한번도 써본적이 없지만, JS는 오래동안 써왔던 언어이므로 ,var를 마주칠 가능성이 높습니다. (var은 호이스팅을 하기 때문에, 선언하지 않아도 접근이 가능해지며 재할당을 해도 아무런 상관이 없는 문제가 있었습니다) JS의 코드의 흐름중에 하나인, 호이스팅부터 짚고 넘어가볼까요! 호이스팅(Hoisting) 아래의 코드를 보시죠! 어떤 문제가 있어보이나요? var a=5 console.log(a) 아뇨, 없습니다! a=5 라는 결과가 나올겁니다. 아래의 코드를 보시죠 . 문제가 있을것 같나요? console.log(b) var b=5 놀랍게도, 아래의 코드도 "실행"은 됩니다. 의도치 않은 결과인 "undefined"를 뱉을 뿐, 에러는 발생하지 않습니다. C언어,Java와 같은 정적인 ..
[JS/this/호출스택] JS의 This 정리 (호출스택,This)
이제 JavaScript에 대해서 조금 깊게 다루어볼까 합니다. JS를 다룬지 벌써 꽤 되었습니다. 하지만, 여전히 익숙하지 않은 부분이 많고, "JS"만의 특징들이 몇개 있습니다. 그 점을 다루어보려고 합니다! JavaScript에서는 함수의 매개변수로 함수를 넘길 수 있다는 점입니다. 심지어, "함수"그 자체가 변수가 되기도 하였습니다. JS에서 함수(Function)은 1급 객체이다. 자바스크립트에서 함수는 1급 객체입니다. 함수가 "값"처럼 취급이 됩니다. 대표적인 형태가 callback 함수입니다. "값"처럼 취급 된다는 이야기는, JavaScript에서는 함수를 변수로 담을 수 있고, 함수를 매개변수로 전달도 할 수 있다는 이야기입니다. const calc = (callback,a,b) => ..
[JS/Array/Basic] Array를 잘 다루어보자- 2
결국 우리는 직접 조건을 작성하여, 배열을 처리하는 경우가 많다. 하지만, 이 조건을 메서드를 이용해서 for문 작성없이 깔끔하게 한 문장으로 처리할 수 있다면, 생산성이 아주 좋을 것이다. 그러기 위해서, 나오게된 ES6 문법들을 알아보자. 정확히는 "iterable"하면 쓸 수 있는 메서드지만, Array는 iterable하기 때문에, 아래의 메서드들이 다 사용이 가능하다. 배열을 조건에 맞게 탐색, 만나는 첫번째 원소값을 반환 어떤 요소가 배열안에 있는지 ,없는지 찾고 싶을 때가 있다. 그럴 때 유용하게 쓸 수 있다. const arr=[1,2,3,4,5,6,7] find() 주어진 판별 함수 (콜백)를 만족하는 첫번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefinded를 반환합니다. ..
[JS/배열/Method/Array] Array를 잘 다루어보자!
JavaScript에서는 Array를 다룰 일이 많았다. React에서도 Map,filter,find 같은 메서드는 자주쓰기 때문에, 한번 쯤은 정리를 해야겠다 싶어, 이번 기회에 10개정도를 연습해보려고 한다! 배열을 문자열로 변경하기 (Join) 처리를 할 때는 배열형태가 좋지만, 마지막에 출력할 때는 결국 String형태로 바꿔야하는 경우가 자주있다. 즉 , 특정 배열을 모두 문자열로 나타내어, 출력하는 상황이 자주 발생한다. // make a string out of an array const Target = ["i","love","you"] join() 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다. 반환: String을 반환합니다. 사용방법: array.join([seperator]) ,..