블로그

주니어 프론트엔드 개발자에게 꼭 필요한 역량은?

주니어 프론트엔드 개발자에게 핵심이 되는 기술은 무엇일까요? 오늘날 프론트엔드 개발 프레임워크/라이브러리 중 가장 많이 쓰이는 리액트(React)의 경우에도 막상 ‘제대로’ 쓰는 개발자는 흔하지 않다고들 하죠.현대 웹 개발은 복잡한 요구사항과 여러 플랫폼에서의 동작을 고려해야 해요 때문에 모던 자바스크립트(JavaScript) ES6+ 및 타입스크립트(TypeScript)에 대한 깊이있는 이해는 코드의 유지보수성과 확장성을 높이고 안정적인 웹 앱을 만들 수 있게끔 합니다. 아울러 커스텀 훅(Custom Hook), 재사용성 높은 컴포넌트(Component) 구현 등 리액트를 높은 수준으로 활용할 수 있다면 더 나은 사용자 경험과 개발 생산성을 도모할 수 있어요.더욱이 리덕스(Redux)와 같은 상태 관리 라이브러리 경험이 있다면 애플리케이션의 확장성을 향상시킬 수 있습니다. 덧붙여 FE 개발에서 필수적인 환경을 제공하는 Node.js를 이해하면 빌드 도구, 패키지 매니저, 테스팅 도구 등을 자동화하여 개발 프로세스를 효율화하고 더 높은 품질의 소프트웨어를 개발할 수 있겠죠.이렇듯 프론트엔드 개발자에게 중요한 기술은 여러 가지가 있겠지만, 중요한 건 알고 있는 기술의 가짓수가 아니라 그 깊이와 수준에 달려 있는데요. 다양한 요소들을 그저 사용해 본 수준이 아니라, 원리를 정확하게 이해하고 실무에서 응용할 수 있는지가 주니어 프론트엔드 개발자의 경쟁력으로 여겨지고 있습니다.•••주니어 프론트엔드 개발자에게 꼭 필요한 역량을 갖추고 싶다면?지금 인프런 프리즘 [프로가 되는 프론트엔드 개발자 로드맵 with React]을 통해 학습해보세요. https://www.inflearn.com/roadmaps/716•••인프런 프리즘 브랜드 스토리 읽어보기 >>

프론트엔드･리액트･React･프론트엔드･리덕스･Redux･상태관리･TypeScript･타입스크립트･JavaScript･자바스크립트

Lodash 알아보기

매번 힘들게 직접 함수를 만들어가며 코딩하다가.. 이번에 lodash라는 아주 유용한 JavaScript 라이브러리를 알게 되어 잘 사용하고 있다.    Lang Method _.isNan : 값이 nan인지 판단. _.isNil : 값이 nan 혹은 undefined인지 판단. _.cloneDeep : 자식까지 복사하여 새로운 값에 매핑.   Array Method _.findIndex : 조건을 만족하는 첫 번째 데이터의 인덱스를 리턴.     찾지 못했다면 -1을 리턴. _.fill : 입력받은 array에 value을 채워넣음. _.pull : array에서 특정 값을 제외한 배열을 리턴. _.uniq : array에서 중복값을 제거한 배열을 리턴. _.uniqBy : 특정한 기준에 따른 값들 중 고유값만 리턴. remove : 조건에 해당하는 값을 제거하고 리턴. _.flattern : 2차원 배열을 1차원으로 평탄화.   Object Method ._get : 객체 경로의 값을 가져옴. undefined인 경우 default value가 리턴. _.assign : object를 할당함   Collection Method _.filter : 조건에 맞는 객체 리턴. _.sortBy : 조건에 따라 정렬.   출처 : 링크    

JavaScript･Lodash

배열 평탄화를 위한 함수 flat(), flatMap()

두 함수 모두 ECMAScript 2019 (ES10)에 새롭게 추가된 함수.   flat(x) 함수는 중첩된 배열을 x 깊이만큼 평탄화시키는 함수이다. const fruits = ['apple', ['banana', 'orange', ['melon']]] 일 때, console.log(fruits.flat(1)); 의 경우 ['apple', 'banana', 'orange', ['melon']] 가 출력된다. console.log(fruits.flat(2)); 의 경우 ['apple', 'banana', 'orange', 'melon'] 가 출력된다. console.log(fruits.flat(Infinity)); 를 통해 모든 중첩 배열을 최대한 평탄화시킬 수도 있다.   flatMap() 함수는 flat() 함수와 map() 함수를 합친 함수이다. 다만 flatMap()은 flat() 함수와는 달리 평탄화 가능한 깊이가 1로 고정된다는 특징이 있다. const children = [[1], [2], [3], [4]] 일 때 각 요소들에 2를 곱하고 1만큼 평탄화시키고싶다 한다면 console.log(children.flatMap((x) => ([x*2])); 를 시행할 경우 [2, 4, 6, 8] 이 출력된다.   출처 : 링크

JavaScript

RxJS - 1. 옵저버블이란

https://jaeyoung-lee.tistory.com/8   RxJS는 자바스크립트를 위한 새로운 푸시 시스템인 옵저버블을 제시합니다. 옵저버블은 다수의 값들을 옵저버(소비자)들에게 "푸시"하는 데이터 제공자입니다.   푸시 : 푸시 시스템에서, 데이터 제공자가 데이터 소비자에게 데이터를 보낼 시기를 경정합니다. 소비자는 데이터가 어떠한 시점에 전달 될지 알 수 없습니다. - 프로미스, 옵저버블   풀 : 풀 시스템에서, 데이터 소비자가 데이터 제공자로부터 데이터를 받을 시점을 결정합니다. 데이터 제공자는 언제 데이터가 소비자에게 전달되어야 하는지 알지 못합니다. - 함수, 제네레이터

JavaScript･RxJS･Backend

Shallow copy vs Deep copy

자바스크립트에서 기존에 존재하는 객체를 복사해서 새로운 무언가를 만들고 싶을 때가 있다. 하지만 그냥 새로운 변수를 선언해서 기존의 객체를 대입하면.. 새로운 변수를 변형했을 때 기존의 값까지 영향을 받아 상황에 따라 골치아파질 수 있다.. 이건 후술할 shallow copy가 된다.   Shallow copy는 원본의 값을 '참조'하는 형태로 복사한다. 따라서 복사한 값의 형태가 바뀌면 그 원본의 값도 영향을 받는다. Deep copy는 원본의 값을 정말 그 값만 복사해오고, 원본과는 완전히 별개의 객체가 된다. 이를 수정하거나 해도 원본의 값은 영향을 전혀 받지 않는다. ex) //JavaScript 환경에서.. obj = {a: 1, b: 2}; new_obj = obj; new_obj.a = 3; console.log(obj.a);    //3   JavaScript에서는 객체를 deep copy하기 위해 lodash의 ._clone()이나 ._cloneDeep()을 많이 이용한다. clone()은 객체를 deep copy하지만, 내부 객체까지는 deep copy하지 못한다. ex) obj = {a: 1, b: 2,  c: {2, 4}}; clone_obj= ._clone(obj); clone_obj.c === obj.c;    //true   때문에 내부 객체가 포함되어있다면 ._cloneDeep()을 쓴다. obj = {a: 1, b: 2,  c: {2, 4}}; clone_obj= ._cloneDeep(obj); clone_obj.c === obj.c;   //false   추가로 shallow copy는 deep copy에 비해 상대적으로 속도가 빠르다.   Shallow copy와 Deep copy를 상황에 따라 적절히 섞어서 쓰도록 하자.

백엔드･JavaScript･Backend