yceffort

57 posts tagged with "javascript"

자바스크립트 스킬을 향상 시킬 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