전체 글

프론트 엔드 기술면접 준비하기(프론트엔드 면접질문)

프론트 엔드 기술면접 질문 20가지를 정리해 보았으며 이번에 정리한 내용은 react, vue 프레임워크 상관없이 프론트엔드 개발자가 필수적으로 알아야 되는 항목들입니다 1. 브라우저 렌더링 원리 HTML 파일을 서버로부터 내려받은 후 파싱하여 DOM 트리를 구축합니다 이후 CSS 파일을 파싱 하여 CSSOM 트리를 구축합니다 이때 HTML중간에 자바스크립트가 있다면 HTML파싱을 중단하고 자바스크립트를 실행합니다 이후 DOM 트리와 CSSOM 트리를 결합하여 렌더트리를 구축합니다 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산하며 이를 Layout 단계라 합니다 계산한 위치/크기를 기반으로 화면에 그리며 이를 Paint 단계라 합니다 2. Reflow와 Repaint 가 실행되는..

React CI/CD 구축 해보기 3(EC2 + Github Actions + CodeDeploy)

React CI/CD 구축 마지막 포스팅입니다 이번에는 S3에 배포된 빌드파일을 EC2인스턴스에 배포하는 방법을 알아보도록 하겠습니다 Github Actions Workflow 수정 저번에 작성한 워크플로우에 CodeDeploy 관련한 부분을 추가해 줍니다 name: Master # Workflow 이름 on: # Event 감지 push: branches: - master # 브렌치 지정 jobs: build: runs-on: ubuntu-18.04 steps: - name: Checkout source code. # 저장소 Check out uses: actions/checkout@v2 - name: Cache node modules # node modules 캐싱 uses: actions/cache..

React CI/CD 구축 해보기 2(EC2 + Github Actions + CodeDeploy)

저번 CI/CD 구축 - EC2 설정에 이어서 이번에는 CodeDeploy 설정 및 GitHub Actions를 사용해서 AWS S3에 업로드를 해보도록 하겠습니다 CodeDeploy란? Amazon EC2 인스턴스, 온프레미스 인스턴스, 서버리스 Lambda 함수 또는 Amazon ECS 서비스로 애플리케이션 배포를 자동화하는 배포 서비스입니다 즉 AWS 서비스에 애플리케이션을 자동으로 배포해 주는 도구입니다 저희는 이런 CodeDeploy를 EC2와 Github Actions와 연결해서 배포를 진행할 예정이고 우선 CodeDeploy 설정부터 진행해 보도록 하겠습니다 CodeDeploy IAM 설정 저희가 S3에 업로드한 파일을 CodeDeploy가 접근해서 EC2에 배포를 해주게 됩니다 이때 Cod..

React CI/CD 구축 해보기 1(EC2+Github Actions + CodeDeploy)

이번에는 create-react-app으로 만들어진 프로젝트를 EC2서버에 자동 배포하는 방법에 대해 알아보도록 하겠습니다 내용이 조금 길어서 주요 작업 별로 구분을 하였으며 오늘은 EC2에 CodeDeploy Agenet 설치 및 권한 설정에 대해 알아보겠습니다 CI/CD 란? CI/CD라는 단어는 개발을 하다 보면 많이 들어본 단어입니다 CI/CD란 애플리케이션 개발 단계부터 배포 단계까지 모든 단계를 자동화를 통해 효율적이고 빠르게 사용자에게 배포할 수 있는 환경을 의미하며 DevOps 엔지니어들의 핵심 업무입니다 여기서 CI 란 새로운 코드 변경사항이 정기적으로 빌드 및 테스트되어 공유 저장소에 통합하는 것을 의미합니다(지속적인 통합) CD 란 개발자의 변경사항이 저장소를 넘어 고객의 실제 환경까..

[NodeJs] Nodejs nodemailer 로 메일 전송 구현해보기

최근 사이드 프로젝트에서 메일 전송 관련한 개발건이 있어서 Nodejs에서 메일 전송을 구현해 보도록 하겠습니다 원래는 SMTP 서버를 자체적으로 구축하고 메일전송을 구현하려 했으나 일정이 촉박하여 Google SMTP 서버를 이용하였습니다 Nodemailer Nodemailer는 Nodejs에서 메일을 보내기 위한 라이브러리입니다 라이브러리가 단순하여 쉽게 메일을 전송할 수 있습니다 Nodemailer 설치 npm install nodemailer Nodemailer 구성 Nodemailer 모듈을 구성하고 메일을 보내기 위한 계정을 설정합니다 저는 smtp.gmgile.com 호스트를 사용하였으며, 저의 계정 정보 보안을 위해 . dotenv 라이브러리를 사용하여 환경변수에 저장하여 사용하였습니다 /..

리액트 디자인 패턴 알아보기

리액트 혹은 vue 프로젝트를 진행하다 보면 폴더 구조도 잡는 거랑 협업을 할 경우 발생하는 이슈들로 일이 힘들어지는 경우가 많습니다 저도.. 회사에서 일할 때 소스코드 충돌을 많이 경험해 보았고요.. 오늘은 이러한 이슈를 해결하는 방법으로 리액트 디자인 패턴 3가지를 알아보도록 하겠습니다 1. Presentational & Container 디자인 패턴 2. Atomic 디자인 패턴 3. VAC 디자인 패턴 먼저 Presentational & Container 디자인 패턴입니다 Presentational & Container Presentational & Container 디자인 패턴은 다름과 같은 특징을 가지고 있습니다 1. 로직을 수행하는 컴포넌트와 , UI를 보여주는 컴포넌트가 분리되어 있는 패턴..

React StoryBook 배포 해보기

이번에는 저번에 만들었던 Storybook 프로젝트를 배포해보도록 하겠습니다 작업된 내용은 아래 프로젝트에서 확인가능하십니다 https://github.com/jungHyeonS/React-stroybook GitHub - jungHyeonS/React-stroybook: react-stroybook-study react-stroybook-study. Contribute to jungHyeonS/React-stroybook development by creating an account on GitHub. github.com 스토리북을 배포하는 방법은 일반적인 리액트 프로젝트처럼 정적 앱으로 내보내는 방법과 스토리북 관리자가 만든 무료 배포 서비스인 Chromatic을 이용한 방법이 있습니다 이번 포스팅에..

React Recoil 알아보기

새해가 밝았네요 다들 새해 복 많은 받으세요! 저번에 상태관리 와 Redux에 대해서 알아보았는데 이번엔 React 상태관리라이브러리 중 하나이며, 페이스북에서 직접 개발한 Recoil에 대해 알아보도록 하겠습니다 이전 상태관리 관련 글을 보고 오시면 이해가 조금 더 쉽습니다 (Redux 프로젝트 관련한 글을 조만간 작성하겠습니다..ㅠㅠ) https://haruluka.tistory.com/38 상태 관리 및 Redux 오늘은 프론트 개발이라면 가장 많이 듣고 중요한 상태 관리에 대한 내용과 React 프레임워크에 대표적인 상태 관리 라이브러리인 Redux에 대해 알아보도록 하겠습니다 우선 상태 관리에 대해 알 haruluka.tistory.com React Recoil Git https://github..

React Story Book 알아보기

갑자기.. React 관련한 글이네요..ㅎㅎ 개인 노션에 정리해둔 게 계속 쌓여서 차근차근 블로그에 작성하고 있는 단계이고 오늘은 React Story Book에 대해 정리해보도록하겠습니다 소스 코드는 아래 GIT에서 확인 가능하십니다 https://github.com/jungHyeonS/React-stroybook GitHub - jungHyeonS/React-stroybook: react-stroybook-study react-stroybook-study. Contribute to jungHyeonS/React-stroybook development by creating an account on GitHub. github.com StoryBook 이 뭘까? 스토리북은 다양한 방식으로 사용되고 있는 U..

브라우저 저장소

오늘은 브라우저 저장소에 대해 알아보도록하겠습니다 Web Storage HTML5에는 웹의 데이터를 클라이언트에 저장할수있는 자료구조인 WebStorage가 포함되어있습니다 웹스토리지의 개념은 key,value 구조로 데이터를 저장하고 키를 기반으로 데이터를 조회할수있는 저장소입니다 저장소는 크게 영구저장소(로컬스토리지), 임시저장소(세션저장소)로 구성이 되어있으며 데이터의 지속성을 구분할수있기에 응용환경에 맞는 선택이 가능합니다 쿠키와의 차이점 1. 쿠키는 매번 서버로 전송됩니다 웹사이트에서 쿠키를 설정하면 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송이되게 됩니다 반면 웹스토리지는 저장된 데이터가 클라이언트에 존재할뿐 서버로 전송은 이루어지지 않기 때문에 네트워크 트래픽 비용이 줄어듭니다 2. 단순..