본문 바로가기

Today I Learn

 (60)
[리액트]크로스 브라우징 이슈 해결 경험기 2020. 4. 3. 00:44 처음 챗봇 빌더 서비스를 기획할 때 IE10, 11, Edge까지 지원하는걸 목표로 잡았다 따라서 polyfill을 맞춰주는 babel 로더를 웹팩 로더에 추가하여 기본 크로스 브라우징은 설정하였으나 그럼에도 레이아웃이 틀어지거나 원하는 대로 기능이 동작하지 않는 등의 이슈가 있어 정리해서 다음에도 유의해야 겠다. 가장 예전에 했던 크로스 브라우징 이슈부터 정리하였다. [목차] 1. input focus를 잃는 현상 2. IE10에서 z-index 어긋나는 현상 3. flex 속성 미적용 4. css var() 미지원 5. 기타 이슈 1. input focus를 잃는 현상 원인: 리액트 컴포넌트 라이프 사이클로 인한 rerendering 2019년 6월 1차 고도화가 끝나고 첫 리팩토링 때 발생했던 이슈..
[리액트] Toast 알람 구현 (1) 2020. 3. 31. 21:50 현재 챗봇 빌더에 구현되어있는 Toast 메세지는 직접 구현한 부분이다. 다만 단점은 여느 라이브러리처럼 여러 개가 뜨는 형식이 아닌 하나만 뜰 수 있는 구조로 구현된 상태였다. 그리고 컴포넌트와 기능 부분을 나눈다고 뷰와 컨트롤러 부분이 각각 /components 와 /helpers에 구현했는데 따로 불러와서 쓰는게 어색했다. 따라서 이번에 Toast 알람을 개선하는 것을 Task로 잡고 시도했었다. 마침 최근에 본 기술 인터뷰 때 받은 테스트에서 유사한 요구사항을 가지고 있어 이것을 집에서 다시 풀면서 어느정도 아이디어를 얻을 수 있었다. (정작 테스트볼 때는 이렇게 못풀었어서 아쉽다...ㅠ 함수형 프로그래밍에 익숙해져 있던 탓인지 OOP로 풀 생각을 못함..U_U) [요구 사항] 1. 여러 개의 T..
해쉬 테이블 2020. 3. 29. 23:00 해쉬테이블은 자바스크립트의 객체, 브라우저 기본객체인 로컬스토리지 등에 사용된 자료구조라 잘 알아야 한다. 해쉬테이블은 key를 해싱(hashing)하여 해쉬 코드로 변환 후 해당 코드의 위치에 값을 저장하는 테이블로, key를 알면 해싱함수를 통해 삽입, 삭제, 검색을 바로 수행할 수 있어 O(1)의 시간복잡도를 가진다. 해쉬테이블에서 중요한 건 해싱 함수인데 해싱 함수는 다음 세가지 성질을 지녀야 한다. 1. 같은 입력값에 대해 항상 같은 출력값을 계산 2. 시간 복잡도는 O(1)이어야 함 3. 배열 내 인덱스를 고르게 분포할 수 있게끔 계산 다른 key라도 해싱함수에 따라 같은 해쉬 코드로 변환될 수 있는데 이를 충돌이라고 한다. 충돌을 해결하는 방법으로는 크게 개방 주소법(Open Addressi..
비동기와 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
[번역] 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..

티스토리툴바