yceffort

90 posts tagged with "javascript"

Fiber: 리액트의 새로운 재조정 알고리즘인 Fiber에 대해 살펴보기

Posted on July, 2020

Inside Fiber: in-depth overview of the new reconciliation algorithm in React을 번역했습니다. 배경 리액트 엘리먼트에서 Fiber 노드까지 리액트 엘리먼트 Fiber 노드 및 부수효과 효과 목록 React…

Read full post

프론트엔드 개발자가 알아야 하는 Angular와 React의 Change Detection

Posted on July, 2020

What every front-end developer should know about change detection in Angular and React를 번역/요약한 것입니다. Change Detection 은 무엇인가? Rating Widget 초기화 Change Detection 프레임워크 Angular React Change Detection…

Read full post

리액트 고차 컴포넌트 (React Higher Order Component)

Posted on July, 2020

이 글이 한글로 번역이 안되있어서 대충 번역해봅니다. Higher-Order Components 고차 컴포넌트 (이하 HOC)는 리액트에서 컴포넌트 로직을 재사용하기 위한 고오급 기술이다. HOC는 리액트 API의 일부분은 아니다. 이는 리액트의 컴포넌트 환경에서 자주 나타나는 일종의 패턴이다. 구체적으로, HOC…

Read full post

프론트엔드 사이즈 줄이기

Posted on July, 2020

이 글을 대충 번역했습니다. webpack 4버전 이상의 경우 프로덕션 모드를 사용하기 minification 을 켜두기 번들 수준의 minification loader-specific 옵션 참고할 만한 것들 NODE_ENV=production 명시하기 ES Module 사용하기 이미지 크기 줄이기 디펜던시 최적화하기 ES Module을 위한 module…

Read full post

자바스크립트로 구현해보는 다양한 정렬

Posted on June, 2020

거품(버블)정렬 가까운 두 원소를 비교해서 정렬하는 방식이다. 코드가 단순하고 구현하기 쉽다 느리다. bubble-sort 선택정렬 배열에서 가장 작은 값을 찾아, 그 값을 배치 한다. 코드가 단순하고 구현하기 쉽다. 느리다. selection-sort…

Read full post

자바스크립트 자료 구조

Posted on June, 2020

Stack Queue 우선순위 큐 연결 리스트 해쉬테이블 이진 트리 타입스크립트로 구현해보는 일반적인 자료구조 Stack push와 pop으로 구성된 stack LIFO Queue 데이터 삽입과 삭제가 서로 반대쪽에서 일어나는 자료구조 FIFO…

Read full post

Notion 성능 최적화

Posted on June, 2020

Case Study: Analyzing Notion app performance를 제멋대로 요약한 글입니다. 왠만하면 저 글을 참고하세요. 자바스크립트의 비용 자바스크립트 실행을 지연시키기. 코드 스플리팅 ModuleConcatenationPlugin이 제대로 작동하는지 확인하기 Babel 의 옵션을 활용하기 사용하지 않는 JS…

Read full post

Javascript Prototype

Posted on June, 2020

프로토타입 속성 상속 메소드 상속 How to use 여러가지 방법으로 객체를 생성하고 프로토타입 체인 결과를 보자 문법 생성자 생성자를 이용 Object.create 활용 [prototype] vs prototype [prototype] prototype 프로퍼티 차이비교 Constructor…

Read full post

Javascript Execution Context

Posted on June, 2020

들어가기에 앞서 더 좋고 제가 많이 참고한 글이 여기에 있습니다. 이글을 보시는게 낫습니다. 자바스크립트 실행컨텍스트 실행 컨텍스트의 정의 실행 컨텍스트의 구성요소 Variable Object (변수객체) 전역 컨텍스트의 변수 객체 함수 컨텍스트의 변수 객체 스코프 체인 (Scope chain) this 실행 컨텍스트가 실행되는 과정…

Read full post

Codility - Fish

Posted on June, 2020

Fish 문제 길이 N으로 이루어진 비어있지 않은 배열 A, B가 주어진다. 배열 A는 물고기의 크기를, B는 물고기의 움직임을 나타내는데, 0일 경우 위로, 1일 경우 아래로 간다. 만약 두마리의 물고기가 만날 경우, 더 사이즈가 큰 물고기가 잡아먹어버린다. 이 때 살아남는 물고기의 수를 구하라. 풀이

Read full post

Codility - Nesting

Posted on June, 2020

Nesting 문제 와 로 이루어진 문자열이 있다. 이 문자열의 짝이 맞게 이루어져 있는지 확인하라. 풀이 https://app.codility.com/demo/results/training8N66E9-5ZY/

Read full post

Codility - Stone Wall

Posted on June, 2020

StoneWall 문제 돌은 N미터 길이를 가지고 있으며, 두께는 모두 일정하다. 배얼에 돌 높이가 주어져 있으며, 아래와 같이 해석할 수 있다. Hi: 왼쪽에서 오른쪽으로 벽의 높이 H0: 벽 왼쪽 끝의 높이 HN-1: 벽 마지막 끝의 높이 는 7을 리턴해야 하는데, 그 이유는 아래와 같다. stone-wall 풀이 https://app.codility…

Read full post

Codility - Brackets

Posted on June, 2020

Brackets 문제 문자열 S가 주어지고, S는 다음 경우 일 때 참을 반환해야 한다. S가 비어있는 경우 or or 의 형태로 괄호안에 문자열이 있는 경우 괄호가 짝이 맞게 닫혀있는 경우 예를 들어 는 괄호가 알맞게 들어있지만, 는 그렇지 못하다. (짝은 맞지만 잘못닫혀있음)괄호가 올바르게 형성되어 있는 경우 1, 아니면…

Read full post

Codility - Max Counters

Posted on June, 2020

Max Counters 문제 숫자 N이 주어진다. 이 숫자 N은 모든 요소가 0인 길이 N인 배열을 의미한다. 그리고 배열 A가 존재한다. 풀이 해설 처음에는 저 maxCounter액션을 array를 map을 돌면서 +1 을 해줬더니 timeout 에러가 났다. 그도 그럴 것이 안그래도 배열을 n회 순환하는데, +…

Read full post

Codility - Frog River One

Posted on June, 2020

Frog River One 문제 개구리가 X 까지 가고 싶은데, X까지 가기 위해서는 1부터 X를 모두 지나가야 한다. 예를 들어보자. 풀이 해설 배열 관련 문제가 나온다면 항상 최초 한번의 순회로 어떻게 잘 승부 볼 수 있을지 고민해보자 https://app.codility.com/demo/results/trainingKDYYTF-8AU/

Read full post

Codility - Missing Integer

Posted on June, 2020

Missing Integer 문제 주어진 배열 A에 빠져 있는 가장 작은 양의 정수를 구하시오 풀이 해설 문제와 관련된 해설은 아니고, indexOf는 일반적인 배열을 for https://app.codility.com/demo/results/training8EH9VG-2JS/

Read full post

Codility - Number of Disc Intersections

Posted on June, 2020

Number of Disc Intersections 문제 N개의 디스크가 존재하고, 디스크는 각각 0~ N-1의 번호를 가진다. 이는 A라는 배열에서 표현되는데, 는 해당 디스크의 반경을 의미한다. discs 이 때, 교차하는 디스크의 수를 구하라. 풀이 하나씩 고민해보자. 1과 5과 교차하기 위해서는 어떻게 해야할까? 둘 사이의 거리는 일단…

Read full post

Codility - Distinct

Posted on June, 2020

Distinct 문제 배열 A안에 unique한 숫자가 몇 개 있는지 리턴하라. 풀이 Set을 활용하면 쉽게 풀 수 있다. Set이 아니더라도 object등을 활용해보면 된다. https://app.codility.com/demo/results/training4VKM6Q-5SX/

Read full post

Codility - Triangle

Posted on June, 2020

Triangle 문제 길이 N의 배열 A가 주어진다. (P, Q, R)은 삼각형이 될 수 있는데, 이는 0 ≤ P < Q < R < N AP + AQ > AR AQ + AR > AP AR + AP > AQ 라는 조건을 만족 하기 때문이다. 주어진 A 배열에서 삼각형을 만들 수 있는 3개의 조합이 존재하는지 확인해서, 존재한다면 1을, 아니라면…

Read full post

Codility - Max Product of Three

Posted on June, 2020

Max Product of Three 문제 길이 N인 배열 A가 주어졌을때, 임의로 세개의 숫자를 곱했을 때 가장 큰 값을 만들 수 있는 배열의 Index…

Read full post

Codility - Cyclic Rotation

Posted on June, 2020

2-1 Cyclic Rotation 문제 배열 A가 주어지고 이를 K번 각 배열의 요소를 오른쪽으로 이동시켰을 때, 그 결과를 리턴하시오. 풀이 해설 문제와 관련이 없지만, splice는 원본 배열에 영향을 미치고, slice는 원본 배열에 영향을 미치지 않는다. https://app.codility.com/demo/results/trainingYUK5SH…

Read full post

Codility - Binary Gap

Posted on June, 2020

1-1 Binary Gap 문제 숫자 N을 이진수로 바꿨을때, 1과 1사이에 있는 0의 개수가 가장 많이 연속해 있는 0의 개수를 구하라. 풀이 해설 배열의 마지막 요소를 하는 것만 기억하면 될 듯. https://app.codility.com/demo/results/training3C4SN2-EXK/

Read full post

Codility - Odd Occurrences in array

Posted on June, 2020

2-2 Odd Occurrences in array 문제 숫자로 이뤄진 배열에서 홀수 번 등장하는 숫자를 찾아서 리턴해라. 풀이 해설 믿거나 말거나 성능은 가 나왔는데, 생각보다 key-value객체에 key값으로 접근하는 속도가 빠른듯. https://app.codility.com/demo/results/trainingBF4N34-BBK/

Read full post

Codility - Frog Jump

Posted on June, 2020

3-1 Frog Jump 문제 개구리가 X에서 Y까지 뛰어야 하고, 한번에 D 만큼 점프 할 수 있을 때, 몇번을 뛰어야 하는가? 풀이 https://app.codility.com/demo/results/trainingHC62NP-TRW/

Read full post

Codility - Perm missing elem

Posted on June, 2020

3-2 Perm Missing Elem 문제 길이 N으로 이루어진 배열 A은, 1부터 N+1 의 숫자로 이루어져 있다. 여기에서 빠진 숫자를 찾아라. 풀이 해설 sum of n https://app.codility.com/demo/results/trainingS58ZMJ-NBP/

Read full post

Codility - Tape Equilibrium

Posted on June, 2020

Tape Equilibrium 문제 길이 N의 배열을 임의로 두개로 쪼개고, 이렇게 해서 생긴 두배열의 합을 각각 구할때, 이 서로 두합의 차이가 가장 작은 경우를 구하라. 풀이 https://app.codility.com/demo/results/trainingRC4CVP-VPY/

Read full post

Codility - Perm Check

Posted on June, 2020

Perm Check 문제 길이 N인 배열이 주어져 있고, 안에는 서로 다른 숫자가 들어가 있다. 이 서로 다른 숫자가 연속하는 숫자면 true, 아니라면 false를 리턴하라. 풀이 https://app.codility.com/demo/results/training3V3SZS-VUU/

Read full post

Codility - Count div

Posted on June, 2020

Count Div 문제 A와 A보다 같거나 큰 B, 그리고 K가 주어질 때, A와 B사이에 K로 나누면 나머지가 0인 숫자의 개수를 구하라. 풀이 https://app.codility.com/demo/results/training7NC844-ZWB/

Read full post

Codility - Genomic Range Query

Posted on June, 2020

Genomic Range Query 문제 DNA는 A, C, G, T로 구성되어 있는데, 이는 각각 1, 2, 3, 4를 가르킨다. 이러한 DNA를 리턴하는 S가 있고, 배열의 길이가 같은 P와 Q가 있다. 풀이 slice를 하고, 최초에는 이를 sort해서 테스트 하려니 timeout이 났다. slice를 하고, slice…

Read full post

Codility - Min Avg Two Slice

Posted on June, 2020

Min Avg Two Slice 문제 길이가 N인 비어있지 않은 배열 A가 주어진다. 한쌍의 숫자 P, Q의 범위는 다. 주어진 P와 Q로 A배열을 slice한다. (최소 2개이상의 요소가 있어야 한다.) (P, Q)는 이며, (P, Q)의 평균은 다. 평균이 최소가 되는 P…

Read full post

Codility - Passing Cars

Posted on June, 2020

Passing Cars 문제 N의 길이로 이루어진 배열 A는 0과 1로 이루어져 있는데, 0과 1은 각각 다음과 같은 의미를 가지고 있다. 0은 차가 동쪽으로 간다 1은 차가 서쪽으로 간다 이 때 동쪽으로 간 차와 서쪽으로 간 차를 짝지을 수 있는 개수를 구하라. 단 먼저 동쪽으로 간차와 그 이후에 서쪽으로 간 차만 짝 지을 수 있다. 단 짝의 개수가…

Read full post

알고리즘 - 연결 리스트

Posted on June, 2020

연결리스트 연결리스트, Linked List 는 각 노드들이 한 줄로 연결되어 있는 방식으로 각 노드는 데이터와 포인터 (다음 노드의 정보)를 가지고 있다. 연결리스트는 일반적인 배열과 다르게 삽입과 삭제가 에 가능하다는 장점이 있다. 하지만 특정 n…

Read full post

자바스크립트 스킬을 향상 시킬 10개의 질문

Posted on June, 2020

자바스크립트 스킬을 향상 시킬 10개의 질문 10 JavaScript Quiz Questions and Answers to Sharpen Your Skills 의 질문을 보고, 답에 대한 해석을 제멋대로 써보았습니다. 1. 배열 정렬 비교 당연한 얘기지만, 자바스크립트에서의 비교는 (, ), 원시 타입이 아니라면 reference…

Read full post

자바스크립트 제네레이터

Posted on May, 2020

Generator 제네레이터의 개념에 대해 이해하기 전에, 먼저 반복자 (Iterator)에 대해 알아보자. 0. Iterator 반복자는, 두개의 속성 (와 )을 반환하는 메소드를 사용하여 Iterator protocal을 구현한다. 말이 조금 어려운 것 같으니, 조금 쉽게 설명해보자. 예를 들어 구문에서 자바스크립트 객체들이 loop…

Read full post

자바스크립트 데코레이터

Posted on May, 2020

데코레이터 0. 설명자 데코레이터에 대해 시작하기 전에, 설명자(Descriptor)에 대해 알아보자. 설명자란, 객체의 프로퍼티가 쓰기가 가능한지, 그리고 열거가 가능한지 여부를 나타낸다. 그리고 설명자를 구현하기 위해서는, Object.getOwnPropertyDescriptor(obj, propName…

Read full post

var let const, 그리고 호이스팅

Posted on May, 2020

var let const, 그리고 호이스팅 var…

Read full post

javascript 일반 함수와 화살표 함수의 차이

Posted on May, 2020

ES6에서부터 생긴 은 일반적으로 의 모양을 하고 있으며, 동작도 비슷해보인다. 하지만 이 두 선언방식은 두가지 분명한 차이를 가지고 있다. 하지만 그전에 this를 알아야 한다. 0. this 는 현재 실행 문맥을 뜻한다. 즉, 호출한 것이 누구냐는 것이다. 위 코드에서는 를 호출한 것이 window이기 때문에 true…

Read full post

자바스크립트의 private

Posted on May, 2020

이 글은 은닉을 향한 자바스크립트의 여정을 요약한 글입니다. History 자바스크립트에서는 객체에 private 한 속성을 만들 수가 없었다. 그래서 보통 자바스크립트 개발자는 private한 것이다 라는 약속으로 prefix…

Read full post

리덕스 공부해보기 (3) - 용어

Posted on April, 2020

https://redux.js.org/glossary#state 용어 모음 State (상태) State (State tree라고 도 불리운다)는 Redux API…

Read full post

타입스크립트로 koa 미들웨어 만들기

Posted on April, 2020

이런 미들웨어를 활용해서 logger를 만들 수도 있다. expressjs의 경우 https://github.com/expressjs/morgan 가 있고, koa를 활용할 경우 https://github.com/koa-modules/morgan 를 활용하면 된다.

Read full post

Socket.IO 공부하기 (1)

Posted on March, 2020

WebSocket 웹은 전형적으로 HTTP 요청에 대한 HTTP…

Read full post

Javascript Regex 숫자를 comma와 함께 Formatting 하기

Posted on March, 2020

regex를 활용해서 숫자에 , 를 찍어서 formatting을 해보자. 1. 첫번째 시도 인터넷에 가장 많이 떠돌아 다니는 해결책으로, 아쉽게도 소수점에 대한 대응이 되지 않는다. 2. 두번째 시도 이게 성공하는 줄 알고, test 도 넘어가길래 실제로 써보았더니 앱에서 오류가 나기 시작했다. ㅠ.ㅠ 이와 관련된 posting…

Read full post

NextJS 1. Page & Route

Posted on March, 2020

요즘 리액트를 쓰는 많은 프로젝트에서, SSR을 지원하기 위해 nextjs를 쓰고 있다. 초기 로딩 속도나, SEO 지원 이슈 등 등 때문에 아무래도 SPA는 요즘 트렌드에서 많이 밀린 기분이다. 물론 razzle 을 쓰거나 custom server 로 맨 바닥에 해딩하는 방법도 있지만 여기저기 컨퍼런스나 주변 사람들의 말을 들어보면 nextjs…

Read full post

NextJS 2. Data Fetching

Posted on March, 2020

nextjs의 공식 문서를 보고 요약한 내용입니다. 1. getInitialProps 2. getStaticProps 3. getStaticPaths 4. getServerSideProps 1. getInitialProps Nextjs 9.3 이전에는 밖에 존재하지 않는다. 최신 버전인 9.…

Read full post

자바스크립트 커링과 클로져

Posted on March, 2020

커링 이 글 에 잘 정리 되어 있습니다. Currying은 여러 개의 인자를 가진 함수를 호출 할 경우, 파라미터의 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 기법을 말한다. 즉 커링은 함수 하나가 n개의 인자를 받는 과정을 n…

Read full post

Tensorflow.js - 08. Build an audio recognizer

Posted on February, 2020

Transfer learning audio recognizer 1. 소개 2. 요구사항 3. Tensorflow.js와 오디오 모델 로딩 4. 실시간 예측 5. 예측을 테스트 해보기 6. 데이터 수집 코드를 자세히 보기 7. 수집한 데이터 테스트 8. 모델 훈련시키기 코드 살펴보기 9. 슬라이더를 실시간으로 움직이기 코드 살펴보기 1…

Read full post

Tensorflow.js - 07. Build an image classifier

Posted on February, 2020

Transfer learning image classifier 1. Introduction 배우게 될 것 2. 요구 사항 3. Tensorflow.js와 MobileNet 불러오기 4. 브라우저에서 MobileNet을 로딩 5. MobileNet을 테스트 하기 6. 브라우저에서 웹캠을 활용하여 MobileNet 모델을 실행하기 7. MobileNet…

Read full post

자바스크립트에서 http 요청하기 - fetch에 대한 고찰

Posted on January, 2020

1. 서론 2. XMLHttpRequest 3. JQuery Ajax 3. async await & fetch 4. fetch polyfill 5. deep dive to fetch 5-1. 에러 처리 5-2. Abortable Fetch 5-3. fetch in react 6. 결론 1. 서론 자바스크립트에서 http…

Read full post

Tensorflow.js - 05. Training and Prediction in Node.js

Posted on January, 2020

Training and Prediction in Node.js 1. 소개 2. 요구 사항 3. Nodejs.app 설치 4. 학습/테스트용 데이터 설치하기 5. 구질을 구별하는 모델 만들기 6. 모델을 서버에서 훈련시키기 7. 클라이언트 페이지를 만들고 display 용 코드 만들기 8. 앱 실행하기 9. 배운것 Training and Prediction…

Read full post

React count down에서 배운 event-emitter 와 requestAnimationFrame

Posted on January, 2020

리액트에서 카운트 다운을 만들며 배운 것들 리액트에서 카운트 다운을 만든다고 가정해보자. 가장 먼저 생각나는대로, 빠르게 구현한다면 아래와 같은 느낌이 될 것이다. 하지만 이 코드는 한가지 문제를 가지고 있다. setInterval, setTimeout…

Read full post

Chrome Samesite 쿠키 정책

Posted on January, 2020

문제의 시작 지난 주말, 엄청나게 급하게 빠른 속도로 프로젝트를 heroku에 올릴 일이 있었다. DB도 새로만들어야하고, 로그인도 필요한 사이트라 DB는 Heroku의 Clean DB를, 로그인은 google sign-in for websites을 사용하였다. 처음에는 passport google auth를 사용하려다가, 그냥 하는 김에 직접 api…

Read full post

Tensorflow.js - 04. CNN

Posted on January, 2020

Handwritten digit recognition with CNNs 1. 들어가기전에 만들어 볼 것 우리가 배울 것 학습 전에 준비해야 할 것 2. Set up HTML, Javascript 생성 데이터와 코드를 위한 자바스크립트 파일 생성 테스트 해보기 3. Load the Data 4. 작업의 개념화…

Read full post

Tensorflow.js - 03. Linear Regression

Posted on December, 2019

Linear Regression 몇 번째 선형 회귀인지 알 수 없다. 01. 2d data로 예측해보기 이번 튜토리얼에서는 자동차 세트를 표현한 숫자 데이터로 예측하는 모델을 훈련시켜 봅니다. 이 연습에서는 다양한 종류의 모델을 훈련하는 공통적인 단계를 보여주고, 이에 따라 작은 데이터 세트와 간단한 모델을 사용합니다. 1차적인 목표는 Tensorflow…

Read full post

Tensorflow.js - 01. 시작하기

Posted on December, 2019

https://www.tensorflow.org/js/tutorials을 개인적인 학습을 위해 번역한 글입니다. 정확한 번역을 위해서가 아니라, 개인적인 공부를 위해서 하는 것입니다. 오해 ㄴㄴ 시작하기 Tensorflow.js는 브라우저와 Node.js…

Read full post

Tensorflow.js - 02. 설치하기

Posted on December, 2019

이전글 보기 설치 브라우저 설치 Tensorflow.js를 설치하는 방법은 두 가지가 있습니다. Script tag를 이용하는법 npm을 이용해서 설치하고, Parcel, Webpack, Rollup…

Read full post

리액트 텍스트 하이라이트 만들기

Posted on October, 2019

요구사항 한 엘리먼트안에서 특정한 키워드를 다른 색싱으로 바꿔서 출력하는 것이다. 아래 예시를 살펴보자 before after 의식의 흐름 특정 키워드가 포함되어 있는지, 그리고 그것을 따로 뽑아 낼 수 있는 가장 간단한 방법은 무엇일까? 바로 split 일 것이다. 그러나 여기서 두 가지 몰랐던 사실을 알게 된다. 첫 문자에 seperator…

Read full post

브라우저 히스토리 조작

Posted on September, 2019

브라우저 히스토리 브라우저의 히스토리는 안에 있다. 만 가져올 수 있을 뿐, 실제 내부에 리스트는 가져올 수가 없는데 이는 보안상의 문제 때문이다. 는 각각 브라우저의 앞으로가기 뒤로 가기와 동일한 역할을 한다. 특정 위치로 가기 현재 페이지의 index는 0 이라고 볼 수 있다. -1 은 바로 전 페이지,…

Read full post

리액트 인터뷰 질문 & 답 (2)

Posted on August, 2019

목차 table of contents React Router What is React Router? How React Router is different from history library? What are the components of React Router v4? What is the purpose of and methods of ? How…

Read full post

리액트 인터뷰 질문 & 답 (1)

Posted on August, 2019

목차 Core React What is React What are the major features of React? What is JSX? What is the difference between Element and Component? How to create components in React? When to use a Class Component…

Read full post

타입스크립트 타입 단언

Posted on August, 2019

문제의 시작 문제의 시작은 여기 였다. 내가 사용하는 코드는 아래와 같았다. 그러나 다른 프로젝트에서 아래와 같은 에러가 발생했다. 파라미터로오는 이 enum의 키가 아닐 수도 있기 때문에 발생하는 에러 였다. 기존 lint 룰에서는 any를 accept…

Read full post

리액트 인터뷰 질문 & 답

Posted on August, 2019

원문-reactjs-interview-questions 1. Core React 2. React - Router, Internationalization, Redux, Native and supported libraries and Integration 

Read full post

React Hooks Api (2)

Posted on August, 2019

useReducer 의 대체 함수다. 다수의 하윗 값을 만드는 복잡한 로직, 혹은 다음 state가 이전 state의 의존적인 경우에 쓴다. 뭐가 뭔지 모르겠으니까 예제를 보자. useState를 쓰기전 예제를 보니 대충 감이 온다. dispatch를 통해서 state값에 변화를 주지 않고 state…

Read full post

React Hooks Api (1)

Posted on August, 2019

Hooks API Hook은 react 16.8에서 추가된 개념으로, Hook을 시용하면 class를 갖성하지 않아도 state관리와 같은 react의 기능을 사용할 수 있다. 기본 Hook useState…

Read full post

Javascript Reduce

Posted on July, 2019

멍청이라 그런지 함수가 잘 이해 되지 않았다. Reduce : 처리할 현재 요소 (optional): 처리할 요소의 인덱스 : 콜백의 반환값을 계속해서 누적한다. 이 예제에서는 처음엔 , 그 다음엔 , 그 다음엔 가 될 것이다. (optional): 를 호출한 배열, 여기서는 이 될 것이다. (optional): 의 최초 값. 없으면 배열의…

Read full post

Javascript Proxy

Posted on July, 2019

Proxy 아래의 예제를 살펴보자. 에 으로 접근하려는 시도가 중간에 가로채기 당했다.

Read full post

Javascript Set 그리고 Map

Posted on July, 2019

근데 사실.. 컬렉션 필요없지 않을까 자바스크립트에서 일반적인 Object는 key-value쌍을 끊임 없이 추가할 수 있는 형태로 구성되어 있다. 그래서 사실 컬렉션이 필요하지 않은 것 처럼 보일 수도 있다. 그러나 이따금씩 object로 부족할 때가 있다. key…

Read full post

Javascript Symbol

Posted on July, 2019

Javascript Primitive 기존에 자바스크립트는 6가지의 primitive가 있었다. Object string number boolean null undefined 그러나 es6가 들어서면서 이라는 7번째 primitive가 추가되었다. Symbol 새로운 심볼 값을 생성했다. 이 심볼로 생성한 값은 변경할 수 없으므로 const…

Read full post

javascript event bubbling & capturing

Posted on July, 2019

image Javascript Event Capturing Event Capturing은 특정 요소에서 이벤트가 발생했을 때, 최상위 요소에서 부터 이벤트를 탐색하여 특정요소까지 찾아오는 이벤트 전파 방식을 의미한다. 위 예시에서 가장 내부의 element…

Read full post

javascript class

Posted on July, 2019

Class 클래스는 기본적으로 이렇게 생겼다. 특징 1. strict 모드에서 실행 딱히 를 선언하지 않아도, 클래스의 코드는 기본적으로 모드에서 실행된다. 그렇게 되면, 당연히 모드의 여러가지 특징을 자동으로 따르게 된다.…

Read full post

Intersection Observer

Posted on June, 2019

Intersection Observer Intersection Observer는 엘리먼트가 viewport에 노출되고 있는지 여부를 확인해주는 API…

Read full post

Typescript, React, NextJs, Koa, Styled Component 로 프론트엔드 환경 만들기

Posted on June, 2019

이 문서는 더 이상 업데이트 하지 않을 생각이다. 대신 https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate 여기에서 계속 해서 만들어 가고 있다. 사용한 오픈소스 React 자세한 설명은 생략 한다 Nextjs NextJs…

Read full post

Typescript Type, Enum, Partial, Record로 글로벌 변수 관리하기

Posted on June, 2019

고민지점 Global 로 관리하는 Colorset Red, Blue, Green, Black이 있다. 이 색들은 각각 지정된 칼라코드가 있다 그러나 때로는 그 컬러코드에 맞게 안쓰는 경우도 있다 그러나 때로는 저 네개를 다 안쓰고 1~3개만 쓰는 경우가 있다. Union types Union Type 어떤 라이브러리에서 받는 파라미터의 값을 number…

Read full post

Javascript - Promise

Posted on May, 2019

Promise 는 및 인수를 전달할 실행함수를 의미한다. 실행함수는 와 를 받아 즉시 실행된다. 실행함수는 보통 비동기 작업을 시작한 후, 모든 작업을 끝내면 를 호출해서 를 이행하고, 오류가 발생한 경우 를 호출해 거부된다. 는 다음 중 하나의 상태를 가진다. 대기(pending): 이행되거나 거부되지 않는 초기 상태 이행(fullfiled…

Read full post

Javascript - Destructuring Assignment

Posted on May, 2019

구조 분해 할당 구조 분해 할당은 배열이나 객체의 속성을 말그대로 분해하여, 분해 한 값을 개별변수에 담을 수 있게 도와주는 표현식이다. 객체 구조 분해 여기에서 //는 전역객체 일 것이다. 객체 리터럴 표기법과 JSON의 차이 JSON은 "key": value…

Read full post

React 공부하기 7 - 컴포넌트 라이프 사이클

Posted on May, 2019

React Component Life Cycle 라이프 사이클은 총 10가지다. 접두사는 어떤 작업을 작동하기전에 실행하는 메소드가, 는 어떤 작업을 한 후에 실해오디는 메서드다. 이 메서드들은 컴포넌트 클래스에서 덮어써서 선언하여 사용할 수 있다. 라이프사이클은 총 3가지 카테고리로 나눌 수 있는데, , , 다. Mount DOM…

Read full post

React 공부하기 8 - 함수형 컴포넌트

Posted on May, 2019

함수형 컴포넌트 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등의 기능을 제거한 상태이므로 메모리 사용량이 다른 컴포넌트에 비해 적다. 따라서 성능을 최적화 하기 위해서는 위와 같이 함수형 컴포넌트를 많이 쓰는 것이 좋다.

Read full post

React 공부하기 6 - 컴포넌트 반복

Posted on May, 2019

컴포넌트 반복해서 쓰기 특별한 거는 없지만, 콘솔에서 가 없다는 에러가 발생한다. 가상 DOM을 비교한느 과정에서, Key값을 활용하여 변화가 일어나는지 확인하기 때문에, key값을 지정해줘야한다. 이제 에러가 나지 않는다. 보통은 이렇게 정적인 데이터를 쓰기보다는, 동적인 데이터를 더 렌더링할 기회가 더 많을 것이다.

Read full post

Javascript - Closure

Posted on May, 2019

클로저 자바스크립트는 어떻게 변수의 유효 범위를 정하는가? 여기에서 는 지역변수 과 함수 을 생성했다. 은 내부함수이므로, 에서만 사용이 가능하다. 은 별도의 지역변수가 없지만 내부함수는 외부함수에 접근할 권한을 가지고 있으므로, 이 정상적으로 출력될 것이다. 만약 name…

Read full post

React 공부하기 5 - Reference

Posted on May, 2019

Reference (Ref) 특정 DOM요소에 작업을 하기 위해서 id를 부여하는 것 처럼, React에서 DOM에 이름을 다는 방식이 있는데 이것이 바로 ref (Reference)다. 반드시, 컴퍼넌트 내부에서 사용 중요하게 봐야할 부분은 바로 여기 ref 속성을 추가할 때는 props를 설정하듯이 하면 된다. ref…

Read full post

React 공부하기 4 - Event

Posted on May, 2019

이벤트 리액트의 이벤트는 기본적으로 HTML의 이벤트와 비슷하지만, 주의사항이 몇가지 있습니다. 이벤트 명은 카멜 케이스로 작성해야 한다. → 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니고, 함수형태의 값을 전달해야 한다. DOM요소에만 설정할 수 있다. Custom Component는 onClick…

Read full post

React 공부하기 3 - Component

Posted on May, 2019

컴포넌트 기본적인 컴포넌트를 만들어 보자. Props 컴포넌트의 속성을 줄때 사용하는 값이다. 아런식으로 부모에서 값을 넘겨 줄 수 있다. 또한 default값을 설정할 수도 있다. 유의할 점은 props에 아무값을 안넘겨줘도 () 값은 default 가 아닌 "" 가 나온다는 것이다. 왜냐하면 ""는 기본적으로 string…

Read full post

React 공부하기 2 - JSX

Posted on May, 2019

Create-react-app 라이브러리로 시작 app.js의 구조 코드 첫줄은 node.js의 기능, 즉 react를 불러와서 모듈화 시키는 것이다. 이를 번들링하는 작업은 webpack에서 처리해 준다. css-loader로 를, file-loader로 파일을 (), babel-loader로 es6를 es…

Read full post

React 공부하기 1 - background

Posted on May, 2019

리액트 요약 기존에 많은 자바스크립트 기반 플게임워크들이 있었는데, 대부분의 프레임워크들은 MVC (Model-View-Controller), MVVM(Model-View-View Model), MVW(Model-View-Whatever) 아키텍쳐를 사용하여 개발되었다. MVC…

Read full post