전체 글 (96) 썸네일형 리스트형 [리액트] 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과 같이, 변수 영역에는 식별자와 실제 데.. 이전 1 2 3 4 다음
요즘 개발
