본문 바로가기

모두 보기

 (96)
비동기와 Promise 2020. 3. 29. 16:54 현업에서 웹 개발자로 일한지 어느덧 2년이 다 되가는 시점에서 비동기라는 개념을 애매하게 이해하고 있다고 생각되었습니다. 최근 봤던 저의 지식 밑천이 탈탈 털린(...) 면접에서 비동기에 대해 물었을 때 정말 자신없게 대답해서 너무 부끄러웠습니다ㅠ 이제는 비동기에 대한 개념을 제 것으로 확실하게 만들고 싶습니다. 1. 비동기/동기의 차이점 코어 자바스크립트에서 설명한 '비동기'는 A함수에서 B함수로 제어권을 넘겨 A함수는 B함수를 실행하고 바로 다음 작업을 처리하는 동시에 B함수에서 작업이 완료되면 A함수로 그 결과값을 리턴합니다. A함수는 그동안 신나게 B와 관련없는 작업들을 하고 있다가 B함수로부터 결과값을 받으면 그제서야 B함수 다음으로 해야 할 작업을 실행합니다. 스타벅스 온 김에 real wor..
[그래프탐색] DFS/BFS 2020. 3. 28. 14:11 DFS와 BFS를 구현하기 전, Stack과 Queue를 구현할 수 있어야 한다. 1. Stack 구현 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function Stack () { this.array = []; } Stack.prototype.push = function (e) { return this.array.push(e) } Stack.prototype.pop = function () { return this.array.pop(); } Stack.prototype.peek = function () { return this.array[this.array.length-1]; } Stack.prototype.is..
[리액트] 리액트 훅 기반 프론트엔드 개발 시 주의할 점 2020. 3. 21. 00:14 1년 넘게 react.js 로 챗봇 빌더 프론트엔드 작업을 하면서 다양한 과정을 거쳐왔었다. 2018년, 제일 처음 React.js로 챗봇 빌더 PoC를 할 때는 필수적인 불변성도 준수하지 못했을 정도로 어리석게 프로그래밍을 했었는데 2019년 정식 서비스 개발에 들어가고 리팩토링(이라 쓰고 실상은 갈아엎음;)을 진행하면서 현재 꽤 올바른 방향으로 프로그래밍을 해오고 있다. 하지만 아직 갈 길이 엄~~~청 멀어서 늘 새롭게 배우는 부분이 많아 충격과 자극을 받으며 하고 있는 만큼, 다음에 또 React.js 개발을 하게 된다면 다음고 같은 점들은 꼭 유의하면서 진행하고 싶어 미리 되짚어보면서 꼭 지키고 싶다. 1, 2차 고도화가 끝난 2019년 10월부터 클래스 컴포넌트를 리액트 16.08버전부터 새로 ..
[정렬] Javascript로 정렬 알고리즘 공부하기 2020. 3. 16. 23:29 가장 기본적인 정렬 알고리즘부터 복기 중! 안보고 칠 수 있을 정도로 해둬야 까먹지 않는 거 같다. 지금까지, C++, Python으로는 많이 했었는데 이제 자바스크립트로도 알고리즘 문제를 어느정도 풀고 싶어졌다. 1. 선택 정렬(Selection sort) 요약: 최소값을 뽑아서 첫번째 인덱스부터 swap 시간복잡도: O(n^2) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function selectionSort (arr) { var len=arr.length for (var i=0;i
03. this와 객체 2020. 3. 5. 16:44 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 객체는 코어 자바 스크립트에서 소개되어있지 않은 내용이나, 2019년 6월 NHN OOP 교육을 복기하기 위해 추가하였습니다. 프로토타입과 this를 이해하는 데 배경 지식이 됩니다. 1. this Binding 요약 3장은 미리 결론을 짓고 뒷부분에서 좀 더 깊이 뛰어드는 게 개인적으로 이해하기 편했다. 명시적인 thisBinding이 없을 때 전역공간: 전역 객체(window, global) 함수: 자기 자신을 호출한 주체 (===전역객체) 메소드: 닷노테이션(.) 혹은 []가 붙으면 메소드의 주체가 되는 객체 콜백함수: setTimeou..
[번역] The Next.js 핸드북 2020. 3. 4. 13:43 Flavio Copes의 The Next.js Handbook을 번역한 글입니다. The Next.js Handbook I wrote this tutorial to help you quickly learn Next.js and get familiar with how it works. It's ideal for you if you have zero to little knowledge of Next.js, you have used React in the past, and you are looking forward diving more into the React ecosyste www.freecodecamp.org Next.js를 여러분들이 빨리 배우고, 어떻게 작동하는지 익숙해지는데 도움을 주기 위해 이 튜..
[리액트] requestAnimationFrame으로 custom hook 만들기 2020. 3. 3. 17:33 feat. 결론은 뻘짓이었습니다. 글을 읽는 게 어떤 분께는 시간낭비일 수 있습니다. reactjs에서 css로 애니메이션을 거는 부분에서 늘 고민인 부분은 처음 랜더링이 시작되었을 땐 애니메이션이 의도한 대로 동작하지않고 무시되는 경우였다. 아마 데이터를 불러오고 처음 마운트 될 때의 느린 SPA의 특징 때문인거 같았다. 최근에 웹챗 배포 스크립트를 작성하면서 자식 iframe과 부모 간의 postMessage 통신으로 부모에서 해당 챗봇 버튼을 display할 수 있도록 하는 로직을 구현했던 적이 있는데 이것을 커스텀 훅으로 바꿔서 적용하면 어떨까!라는 생각이 들었다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 var l..
[리액트] 모바일 웹 브라우저에서 가상 키보드 오픈 시 스크롤 내리기 2020. 2. 25. 17:11 웹챗을 데스크탑 브라우저로만 보다가 모바일 웹으로 보니까 모바일 가상 키보드가 메세지 리스트를 가리면서 나타나는 현상이 있었다. (매우 부자연스럽...) 입력창에 포커스될 때 메세지 리스트 div를 스크롤 다운 해줘야 할 필요가 생겼다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 import classNames from "classnames/bind"; import React, { useRef, useLayoutEffect } from "react"; import { MessageList } from "../../organisms"; import { MessageInput..
[2020-01-21] nginx로 next.js 앱 배포하기 (초보) 2020. 1. 21. 15:24 웹챗 SDK를 운영계에 배포하기 위해 nginx로 reverse proxy 설정을 해야할 필요가 생겼다. 클라우드 디스크 교체 작업 동안 운영계 서버를 쓸 수 없으니 일단 개인 ec2에서 하나의 서버에서 reverse proxy 설정을 해보고 운영계에 도전하기로 했다. 대략적인 구성은 다음과 같다. 외부에서는 http://my_ec2_host/sdk 로 접근하면 nginx는 reverse proxy로 도커로 띄운 http://my_ec2_host:4001/로 프록시 패스해준다. 1. nginx.conf RHEL7 기준 default로 /etc/nginx 내에 위치한 nginx.conf를 다음과 같이 수정했다. server { listen 80 default_server; listen [::]:80 def..
[2020-01-07] ec2 Next.js Docker 배포 이슈 2020. 1. 7. 23:28 웹챗 SDK 용 서버를 배포하기 위해 개인 ec2에서 docker로 배포하였다. 그런데 왠걸 지금까지 늘 해오던 배포인데 npm install에서 Dockerfile이 멈추는 현상이 발생했다.. 심지어 ec2 서버가 멈춰서 강제종료 후 프로세스가 알아서 죽을 때까지 기다렸다가 들어가야 하는 경우도 있었다.. Dockerfile FROM node:10 RUN mkdir -p /app/webchat COPY package.json /app/webchat/package.json RUN cd /app/webchat; npm install // 여기서 맛이 감... RUN echo 'node version : ' && node --version RUN echo 'npm version : ' && npm --ver..
02. 실행 컨텍스트 2019. 12. 31. 22:01 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 수정 이력 2021/06/12 그림 및 설명 수정 1. 실행 컨텍스트 실행 컨텍스트란 실행할 코드에 줄 환경 정보들의 객체를 말한다. 이 컨텍스트들을 콜 스택에 push해두고, top에 위치한 컨텍스트와 관련된 코드를 실행한다. 이러한 컨텍스트를 구성할 수 있는 대표적인 방법은 함수를 호출하는 것이다. var name = 'newjeong'; // --- (0) function hello (a) { // --- (2) function sayhello () { // --- (4) console.log('hello, ' + name); // --..
01. 데이터 타입 2019. 12. 31. 00:29 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 수정 이력 2021/06/06 그림 및 설명 수정 1. 변수 저장 자바스크립트는 메모리 관점에서 어떻게 변수를 저장할까. 쉽게 생각하면 메모리 영역을 저장되는 값에 따라 두 부분으로 나누어 저장하며 한 영역은 변수의 정보를, 또 하나의 영역은 실제 데이터를 저장하고 있다. 각각 변수 영역, 데이터 영역으로 부르기로 한다.* * 실제로는 변수 영역은 stack에, 데이터 영역은 heap 영역에 저장된다. let a = 10; 예제 1. 예제 1과 같이 a를 선언하면, 각 영역에 어떻게 저장될까. 그림 1과 같이, 변수 영역에는 식별자와 실제 데..

티스토리툴바