본문 바로가기

JavaScript

 (9)
문법 2020. 9. 8. 19:46 본 내용은 카일 심슨의 YOU DON'T KNOW JS 타입과 문법, 스코프와 클로저(2017)를 읽고 서술적인 내용을 Q&A 형식으로 정리한 글입니다. 1. 문과 표현식의 차이는? const a = 2*3 // ----- (1) const b = a // ----- (2) b // ----- (3) 문은 '문장'이며 표현식은 '어구'와 일맥상통한다.(연산자는 '구두점') 모든 표현식은 단일한 특정 값으로 계산된다. (1)의 우항, (2)의 우항, (3) 모두 표현식이며, const가 빠진 (1), (2)는 할당 표현식이라고도 부른다. (1), (2)는 const 변수를 선언하는 선언문이다. (3)은 표현식이기도 하지만 그 자체가 문이 되기도 하여 표현식 문이라고 한다. 모든 문은 완료값을 가진다. 콘솔..
강제변환 2020. 8. 23. 13:58 본 내용은 카일 심슨의 YOU DON'T KNOW JS 타입과 문법, 스코프와 클로저(2017)를 읽고 서술적인 내용을 Q&A 형식으로 정리한 글입니다. 1. 추상 연산 1.1 자신의 프로토타입에 toString()이 있는 경우(1)와, 일반 객체처럼 Object.prototype.toString() 메소드를 호출하는 경우(2)의 차이점은? (1) 내장 원시 값은 정해져 있는 방법대로 문자열화되어 반환한다. (2) 내부 [[Class]]를 반환한다. 정확히는 ToPrimitive 과정을 거친 결과값이 반환되어 "[object Object]"가 반환된다. 1.2 JSON.stringify 함수의 각 인자에 대한 설명과 문자열화하는 규칙에 대해 설명하시오. JSON.stringify(value, functi..
[번역] Error handling with Async/Await in JS 2020. 6. 5. 18:48 본 포스트는 Ian Segers의 Error handling with Async/Await in JS를 번역한 글입니다. Error handling with Async/Await in JS Learn error handling in JS. itnext.io 이 글은 다른 개발자들과 토론과 코드리뷰 동안 이해한 짤막한 글입니다. 본 내용은 주니어 JS 개발자들에게 초점이 맞춰져있습니다. A Simple Try Catch 간단한 try...catch 예시로 시작해보겠습니다. 다음은 예상한대로 동작할 것입니다. 일반 에러를 throw하는 thisThrows()를 호출하면 이 에러를 catch하고 log할 수 있습니다. 그리고 finally 블록에서 선택적으로 어떤 코드를 실행할 것입니다. 그다지 특별한 것은 ..
[프론트엔드] 성능 최적화 정리 2020. 5. 22. 00:37 목차 0. 개요 1. 브라우저 동작 원리 2. 성능 최적화 2.1 페이지 로드 최적화 2.2 페이지 렌더링 최적화 3. 성능 측정 기준 3.1 브라우저 내부 이벤트 기준 3.2 사용자 기준 성능 지표 3.3 사용자 기준 성능 최적화 4. 정리 0. 개요 프론트엔드의 성능 최적화는 화면을 설계하는 당시에는 사실 고려하기 힘든 경우가 많았다. 회사의 납기를 준수하여야 하는 경우도 있고, 우선적으로 기능 구현을 해서 테스트를 진행하는게 중요했던 상황도 많았기 때문이다. 하지만 프로젝트가 끝나고 유지보수를 하거나, 다음 프로젝트를 하기 전 시간이 나는 경우에 틈틈히 프론트엔드 성능 최적화에 대해 학습하면서 적용해나가다보니, 다음 프로젝트를 착수하게 되었을 땐, "아, 이 부분을 이렇게 설계하면 성능이 더 좋겠구..
비동기와 Promise 2020. 3. 29. 16:54 현업에서 웹 개발자로 일한지 어느덧 2년이 다 되가는 시점에서 비동기라는 개념을 애매하게 이해하고 있다고 생각되었습니다. 최근 봤던 저의 지식 밑천이 탈탈 털린(...) 면접에서 비동기에 대해 물었을 때 정말 자신없게 대답해서 너무 부끄러웠습니다ㅠ 이제는 비동기에 대한 개념을 제 것으로 확실하게 만들고 싶습니다. 1. 비동기/동기의 차이점 코어 자바스크립트에서 설명한 '비동기'는 A함수에서 B함수로 제어권을 넘겨 A함수는 B함수를 실행하고 바로 다음 작업을 처리하는 동시에 B함수에서 작업이 완료되면 A함수로 그 결과값을 리턴합니다. A함수는 그동안 신나게 B와 관련없는 작업들을 하고 있다가 B함수로부터 결과값을 받으면 그제서야 B함수 다음으로 해야 할 작업을 실행합니다. 스타벅스 온 김에 real wor..
[리액트] 모바일 웹 브라우저에서 가상 키보드 오픈 시 스크롤 내리기 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..
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과 같이, 변수 영역에는 식별자와 실제 데..

티스토리툴바