본문 바로가기

전체 글

 (46)
직장인이 되어 처음으로 끄적여보는 글 몇 년 전 우아한테크코스 과정을 들으면서 개설한 이 블로그에 정말 오랜만에 돌아왔습니다. 당시에 배우는 것도 느끼는 것도 많다 보니 조금씩 기록하고 싶어서, 주변 크루들이 열심히 글을 쓰는 모습을 보고 자극받아서 블로그를 개설했었는데요. 한동안(이라기에는 좀 긴 시간인 것 같지만) 블로그에 거의 신경을 못 썼습니다. 그런데 최근에 동료분의 블로그를 보고, 제 블로그가 생각나서 다시 둘러보다가 개발자 지망생에서 현업 개발자가 된 저에 대해서도 조금씩 다시 기록해보고자 합니다. 어떤 날은 기술적인 얘기를, 또 어떤 날은 두서없이 허심탄회한 얘기를 짧게라도 적으러 오겠습니다.우아한테크코스가 끝나고우아한테크코스가 끝나고(좀 더 정확하게는 우아한테크코스 수료 직전) 감사하게도 바로 첫 직장 합격 통보를 받았습니다..
스낵바 성능 개선하기 - 문제 해결(1) 스낵바 성능 개선하기 - 문제 인식 위 글에서 설명한 문제 중 두 번째 문제를 해결한 과정을 적어보려 한다. 우선 스낵바가 열리고 3초 후에 닫히는 로직은 다음과 같다. 스낵바 동작 순서 1. openSnackbar('로그인 되었습니다.') 호출 2. 전역 상태 변경 ▶ isSnackbarOpen = true, message = '로그인 되었습니다.' 3. useEffect에서 isSnackbarOpen = true가 된 걸 감지하고 setTimeout 함수 실행 useEffect(() => { if (!isSnackbarOpen) return; const timerId = setTimeout(() => { dispatch(closeSnackbarAction()); }, 3000); return () =..
스낵바 성능 개선하기 - 문제 인식 백신 중앙 정보원 프로젝트에서는 원래 스낵바 구현을 직접 하지 않고 notistack 라이브러리를 통해 스낵바를 적용했었다. 그런데 아무래도 내 프로젝트에 완전히 커스텀하기 어려웠기 때문에, 스낵바 컴포넌트 + 리덕스 + 커스텀 훅을 통해 내 프로젝트에 완전히 커스텀 된 스낵바 컴포넌트를 만들었고, 이어서 snack-snack 라이브러리도 출시했다. 그런데 최근 프로젝트에 적용한 스낵바에 성능적 문제가 있다는 걸 깨달았다 🥲. 내가 발견한 문제는 다음과 같다. 1. 스낵바가 열릴 때 한번, 닫힐 때 한번 전체 페이지가 리렌더링 된다. 2. 스낵바가 열리고 닫힐 때, 간헐적으로 깜박이며 다시 모습을 나타낸다. 여기서 주목할 점은 열릴 때, 닫힐 때 이렇게 두 번 리렌더링이 발생한다는 점, 그리고 스낵바 컴..
클래스형 컴포넌트 vs 함수형 컴포넌트 - Hook API 등장 전 요즘 React를 사용하는 개발자들은 함수형 컴포넌트를 많이 사용한다. 나 역시도 클래스형 컴포넌트를 작성해본 기억이 거의 없다. 그렇다면 리액트 개발자들은 클래스형 컴포넌트를 왜 만들었을까? 처음부터 함수형 컴포넌트만 사용하지? 🤔 ㅎ ㅎ 앞으로 몇 개의 글에 걸쳐서 리액트 사용법이 어떻게 발전되었는지에 정리해보려 한다. 리액트가 등장했을 초반에는 함수형 컴포넌트보다 클래스형 컴포넌트가 훨씬 더 인기를 끌었다. 왜일까? 클래스형 컴포넌트는 상태를 가질 수 있다 함수형 컴포넌트는 말 그대로 함수이다. 그리고 함수는 한번 호출되면 return과 함께 바로 종료되기 때문에 다시 호출할 수 없다. 물론 새로 호출은 가능하다. 함수 내에 변수를 선언하면서 상태를 가질 수는 있다. 하지만 이 상태의 생명주기는 함..
자바스크립트 Closure (+ 실행컨텍스트, 렉시컬 환경) 오늘은 자바스크립트의 클로져에 대해 얘기해볼까한다. 그런데 클로져를 이해하기 위해서는 클로져가 실행될 수 있는 환경에 대한 이해가 먼저 필요하다. 자바스크립트 엔진는 자바스크립트 코드를 처리할때 평가와 실행의 과정을 거친다. 1. 평가 실행컨텍스트를 생성하고, 선언문(변수, 함수)만 먼저 실행하여 해당 실행 컨텍스트의 렉시컬 환경 안 환경 레코드에 key로 등록한다. 이때 호이스팅이 발생한다고 볼 수 있다. 2. 실행 실제로 실행하는 코드의 정보(식별자에 바인딩 될 값)를 실행 컨텍스트 안의 스코프에서 검색한다. 위의 내용은 자바스크립트를 처음 접하는 사람이 보기에는 낯선 단어가 꽤 많다. 하나씩 알아보자. 실행 컨텍스트 실행 컨텍스트는 코드가 실행될 수 있는 환경을 제공한다. 따라서 이 환경 속에는 코..
자바스크립트 Promise Promise 객체 프로미스 객체는 비동기 통신에 이용되는 객체이다. 프로미스 객체 등장 전에 자바스크립트는 콜백함수를 통해 비동기 통신을 처리했다. 그런데 서비스의 규모가 커질수록, 콜백함수를 통한 비동기 통신 처리는 여러 한계를 마주쳤다. 대표적인 예로, 콜백함수가 계속해서 콜백함수를 낳는 콜백 헬 및 애매한 에러 처리가 있다. 그래서 콜백 헬을 없애고, 더 명확한 비동기 통신의 표현을 위해 ES6에서 프로미스 객체가 도입되었다. 비동기 통신을 callback으로 처리했을 때 문제점 콜백 헬(callback hell) 자바스크립트에서 자주 사용되는 비동기 통신은 각 요청을 병렬로 처리한다. 덕분에 프로그램이 Blocking되지 않는(중단되지 않는) 장점이 있다. 그러나 비동기 통신을 올바르게 처리하기..
Next.js + React를 AWS EC2로 배포하기(2) - 어플리케이션 무중단 배포 저번 포스트에서 EC2 Instance 생성 및 내 컴퓨터에서 접근까지 해보았다! 이번 포스트에서 내 터미널에서 접근한 EC2 Instance에 React 어플리케이션 무중단 배포를 정리해볼까 한다. Next.js + React를 AWS EC2로 배포하기(1) - EC2 인스턴스 생성 React 어플리케이션 무중단 배포 1. 내 프로젝트 clone 받기 배포 할 프로젝트를 클론받자. 2. Clone 받은 폴더로 이동 후, yarn(or npm)을 설치 를 하려하니 에러가 뜬다 🥲 우분투 내에서 yarn을 설치 할 경우에 Node가 다운되어 있지 않아 오류가 발생한다. Node부터 설치해보자. 3. nodejs 설치 아래의 명령어로 Node를 설치하자 $ sudo apt-get update $ sudo a..
Next.js + React를 AWS EC2로 배포하기(1) - EC2 인스턴스 생성 이전에 CSR을 이용하는 React 어플리케이션은 AWS Cloudfront + S3를 통해 배포했다. 이번에 새롭게 SSR을 도입한 React 어플리케이션은 AWS EC2를 통해 배포해볼까 한다. 순서는 다음과 같다. 1. EC2 인스턴스 생성 2. React 어플리케이션 배포 EC2 인스턴스 생성 1. AWS EC2 로그인 후 인스턴스 시작 클릭 2. Amazone Machine Image (AMI)선택 AMI란 소프트웨어 OS, 애플리케이션 서버, 소프트웨어 환경설정 등이 포함된 템플릿(이미지)이다. (어떤 점에서 이미지라는 건지는 공부가 더 필요하다! ) 가상 머신를 운영하는 데에 필요하며, AWS EC2의 경우 AMI는 서버를 이미지 파일로 만든 것이다. 나는 Ubuntu Server 18.04..

티스토리툴바