JavaScript
-
[CodeKata] wecode 3주차 코드카타Algorithm 2020. 12. 28. 14:55
🤔 서론 레플릿으로, 알고리즘을 1일 1문제를 푸는 세션이다. 시작하기에 앞서, 뜬금없지만 코드카타 'Kata' 의 어원이 궁금해졌다. 먼저, Codekata의 뜻은 프로그래머가 연습과 반복을 통해 기술을 연마하도록 돕는 프로그래밍 연습을 의미한다. 여기서 Kata는, 1999년 The Pragmatic Programmer 의 공동저자인 Dave Thomas 가 무술의 일어개념인 Kata로 칭하면서 통용되었다고 👊 12.28(월) / 이중회문 첫 문제라서 간단한 사칙연산을 예상했는데, 생각보다 어려운 문제가 튀어나왔다!! 🤯🤯🤯 📜 문제 twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요. nums: 숫자 배열 target..
-
[React.js] Hooks - useCallback, useMemoFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 27. 17:37
기본 프로젝트의 마지막으로, useCallback 훅에 대한 사용이 주어져서 이 글의 포스팅을 시작하게 되었다. 간단히 검색해보니, 이 훅들은 공통적으로 '최적화'의 역할을 담당한다고 한다. 반대로 말하면 필수적이지는 않다는? 최적화의 원리가 되는 'Memoization' 과 여기에 해당되는 위 훅들에 대해 간단하게 정리한 뒤 프로젝트에 돌입하겠다. 📒 useCallback - Memoization 이 필요한 이유? React 컴포넌트가 렌더링(부모 렌더링, state 변경 등) 될 때마다, 내부의 함수들도 새로 선언한다는 단점이 있다. 여기서 state와 무관한 함수들의 재선언을 최소화하여 메모리 낭비를 줄이는 최적화의 목적으로 이 Hooks 들이 사용되는 것이다. - 문법 useCallback 은 컴..
-
[React.js] Hooks - useReducerFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 26. 04:16
React 미니 프로젝트들을 수행하다보니, useContext, useReducer 사용을 하라는 미션이 주어졌다. 이 개념에 대한 선행학습을 해봤다. 📒 useReducer useContext와 마찬가지로 통합적인 state 관리를 위한 Hooks다. useReducer는 useState의 대체함수로 생각할 수 있다. Redux의 Reducer, Action 과 그 동작성격이 매우 유사하다고 느껴졌다. - 문법 React 공식 사이트의 useReducer 로 카운터를 구현한 예제를 인용했다. const initialState = {count: 0}; function reducer(state, action) { switch (action.type) { case 'increment': return {cou..
-
[React.js] Hooks - useContext (Context API)Front-End(Web)/React - 프레임워크(React, Next) 2020. 12. 25. 20:33
React 미니 프로젝트들을 수행하다보니, useContext, useReducer 사용을 하라는 미션이 주어졌다. 이 개념에 대한 선행학습을 해봤다. 📒 React Context useContext 훅을 공부하기 전에, React의 Context 개념에 대해 우선 이해를 할 필요가 있다. 1. Context 개념 React App은 많은 컴포넌트들로 구성되어있고, 어떤 정보(props 값이나 함수)는 여러 컴포넌트를 거쳐 전달되는 경우가 존재한다. 이러한 정보들을 전역적으로 사용하기 위해 Context에서 이를 관리 및 공유해주며, 이를 사용하기 위한 기능을 Context API라 한다. - 언제 Context를 써야 할까? 전역적(global) 데이터 공유에 특화된 방법으로, 로그인 유저 데이터, 설..
-
[Javascript] Iteration ProtocolFront-End(Web)/Javascript 2020. 12. 17. 20:45
🤔 서론 for 반복문을 사용하던 중, 객체에서 for - in 은 key값을 반환하지만, for - of 문에선 value 값이 반환되지 않았다. 또한, 'Uncaught TypeError: obj is not iterable' 라는 에러가 발생하는 것을 확인했다. for - of 문을 확실히 이해하려면, Iteration, Iterable, Iterator 에 관해 정리할 필요성을 느껴 별도 포스팅을 시작했다. 📒 Iteration Protocol - Iteration(반복) (ES6 추가) 이터러블 객체가 for - or문, 전개연산자(spread, ...) 등 순회동작 하도록 만든 규약을 Iteration Protocol 이라고 한다. 혹은 모든 객체를 이터러블로 만들 수 있는 규약을 의미한다. ..
-
[Javascript] Class(클래스) 기본Front-End(Web)/Javascript 2020. 12. 16. 22:56
위코드 Replit 과제중, Class 개념에 대해 정리가 필요하다고 생각해서 글을 쓰게 되었다. 📒 class 란? - 객체지향(OOP, Object-Oriented Programming) 객체지향 프로그래밍이란, 프로그램을 객체(Object)들로 구성하고 서로 상호작용을 통해 구현하는 방법을 의미한다. 객체에 변수나 함수를 저장한 뒤 이를 반복적으로 사용하고자 하는 개념으로, 이 객체를 편리하게 생성하는 템플릿이 바로 Class인 것이다. - class 정의 class를 "특별한 함수" 라고 설명한다. class 선언과 표현식으로 정의할 수 있다.(실제로 ES6 전에는 함수가 class를 대체했다.) 1) class 선언 ES6부터 class 개념이 도입되면서, class는 아래와 같이 'class ..
-
[React.js] React FormsFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 1. 22:55
🤷 React.js 프로그래밍을 위한 다양한 스킬들 - 4 지난 포스팅에서는, PropTypes라는 props의 type을 검증하는 라이브러리에 대해 공부했다. 이번에는 React Form에 관해 공부한 내용이다. 기존 React를 쓰지 않은 환경에서는, HTML에 태그내 , 등 태그에 정보를 입력하였다. 또한, 이 정보를 을 통해 Submit하여 업데이트 처리했지만, 이는 React에서 선호하는 방법이 아니다. 하지만, React Form에선 매 입력/삭제의 순간순간을 서버에서 확인에서 확인하고 스크린을 업데이트 해야하며, 그렇기에 Form과 rest App들이 실시간 연동되어있는게 이상적이다. 📒 Event Listener : onChange 지금까지 에 종종 적용해온 onChange이다. rende..
-
[React.js/Side Lib.] PropTypesFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 1. 20:56
🤷 React.js 프로그래밍을 위한 다양한 스킬들 - 3 지난 포스팅에서는, 거대한 컴포넌트를 프레젠테이션(표현) 사이드와 컨테이너(로직) 사이드로 분할하는 법을 공부했다. 이번엔, propTypes라는 props의 확인 및 검증용 라이브러리에 대해 공부했다. 📒 PropTypes 개념 및 사용목적 props를 확인하는 라이브러리이다. Parent로부터 전달받은 props가 적합한지 점검하는 등 아래 2가지 목적으로 쓰인다. prop validation: props가 적합하게 하달되었는지 확인하는 용도. 없거나 부적합하면 console에 경고 메세지 발생. documentation: props가 컴포넌트들에 전달되기 전 미리 확인하는 속도를 높이는 용도. 📒 PropTypes 사용방법 - 설치: 터미널..