react

    React 에서 Jest 를 활용하여 TDD 배우기 - 2

    저번에는 Jest를 통해서 함수를 테스트하는 방법을 알아보았는데 이번에는 리액트 컴포넌트를 테스트하는 방법을 알아보도록 하겠습니다 리액트 컴포넌트 테스트 jest 같은 경우는 리액트 컴포넌트를 테스트하기에는 다소 불편한 부분이 많습니다 그래서 리액트 컴포넌트를 테스트할 때는 testing-library를 사용하여 테스트를 진행합니다 이 라이브러리는 컴포넌트의 구현 상세보다는 실제 동작 방식에 집중하며 이로 인해 사용자가 애플리케이션을 사용하는 방식과 가장 유사하게 테스틀 진행할 수 있습니다 라이브러리 설치 yarn add -D @testing-library/react @testing-library/jest-dom 그러면 우선 간단한 예제로 테스팅 라이브러리가 어떻게 동작하는지 알아보도록 하겠습니다 화면에..

    React 에서 Jest 를 활용하여 TDD 배우기 - 1

    최근에 테스팅에 대해 관심이 좀 가지게 되었습니다 그중 단위 테스트가 많이 궁금하였는데 이번에는 React 에서 Jest를 활용하여 Jest가 무엇인지, 그리고 TDD를 어떻게 하는지에 대해 알아보도록 하겠습니다 Jest란? 페이스북에서 개발하고 관리하는 자바스크립트 테스트 프레임워크입니다. Jest는 사용자 친화적이고, 다양한 기능을 제공하며 구성이 간단하고 다양한 환경에서 사용할 수 있기 때문에 많은 자바스크립트 개발자들이 사용합니다 사실 Jest는 주로 TDD를 할 때 많이 사용합니다 그래서 이번엔 Jest도 배우면서 TDD 도 같이 알아보도록 하겠습니다 TDD란? 테스트 주도 개발이라는 의미를 가지고 있으며, TDD는 소프트웨어 개발의 한 방법론으로 코드를 작성하기 전에 테스트를 먼저 작성하고, ..

    프론트 엔드 기술면접 준비하기_Typescript,React

    요즘 이직을 하기 위해 면접을 많이 다니고 있는데 생각보다 쉽지가 않네요 기술면접 때 제가 부족했던 부분들을 정리해 보았습니다 Typescript 타입스크립트란 자바스크립트 타임 개념을 추가한 언어이며 자바스크립트에서 확장된 언어입니다 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 한 번에 컴파일 과정을 진행해야 합니다 왜 타입스크립트를 사용하는가? 타입 스크립트를 사용하면 에러를 사전에 방지할 수 있으며 개발툴에 기능을 최대한 활용할 수 있어서 개발 생산성을 높일 수 있습니다 타입 스크립트 기본 타입 String, boolean, Number 같은 타입은 제외한 주요한 타입입니다 Tuple : 배열의 길이가 고정되어 있고 배열의 각요소들에 타입이 정해져 있는 배열입니다 let arr: [st..

    프론트 엔드 기술면접 준비하기_Vue,React

    오늘은 Vue, React 프레임워크에서 나올 수 있는 질문들을 정리해 보았습니다 Vue 1. Vue 라이플 사이클 beforeCreate : 컴포넌트 인스턴스가 생성되기 이전에 호출 created : 컴포넌트 인스턴스가 생성된 후 호출이 되며 데이터에 접근하거나 이벤트 리스너를 설정할 수 있다 beforeMount : 인스턴스가 실제 DOM에 마운팅 되기 이전에 호출 mounted : 인스턴스가 실제 DOM에 마운팅 된 후 호출이 되며 돔에 접근하거나 조작을 수행할 수 있다 beforeUpdated : 데이터 변경이 일어나 DOM이 업데이트되기 이전에 호출 updated : 데이터 변경이 일어난 후 실제 DOM이 업데이트된 후 호출 beforeUnmount : 컴포넌트가 돔에서 사라지기 이전에 호출 U..

    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 란 개발자의 변경사항이 저장소를 넘어 고객의 실제 환경까..

    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..