'react' 태그의 글 목록

Yarn berry에서 React + Jest + Cypress + TypeScript + Github Actions CI/CD를 세팅해보자

Unit Test & e2e Test & TDD 2021. 10. 11. 15:55

이 글은 Yarn berry package manager를 사용하여 React 프로젝트에서 초기 세팅하는 방법을 다루고 있으며, 여러 시행착오를 겪어가며 경험한 것들을 토대로 작성한 글입니다.😉 이 글의 목적은 겪었던 시행착오들을 한 번 더 기억을 되새기기 위해서 작성하였습니다. 추가적으로 TypeScript와 프론트엔드 e2e 테스트 프레임워크 Cypress, 프론트엔드 unit 테스트 프레임워크 Jest 세팅과 더불어 Yarn berry에서 Github Actions을 사용해 CI/CD 파이프라인을 구축 후 Github Pages에 배포하는 것까지 담고 있습니다. 이 내용은 각각의 공식 문서를 기반으로 작성되었습니다. 해당 예를 담은 Github Repository를 참고해주세요. 🙄 Yarn ber..

코드숨 2기 그 3달간의 여정!

회고 2020. 12. 26. 15:13

🙄 어쩌다가 신청하게 됐어? 이직을 계획하고 있었다. 1월 말에 퇴사하겠다고 말했고, 다시 처음으로 돌아간다는 생각으로 프론트엔드 개발자가 되는 데 필요한 결정이었다. 나에게 있어서 공부하는 즐거움을 주고 즐기며 일할 수 있겠다고 확신을 준 프론트엔드 녀석…. 그 녀석으로 인해서 더는 지체할 수 없었고, 이직을 위해서 회사에 다니는 와중에 퇴근 후 공부하기를 매일 반복하였다. 회사보다 퇴근 후가 나의 하루 시작이라고 생각했을 만큼 즐기며 공부하는 와중에 회사의 과장님 추천으로 코드숨을 알게 되었다. 혼자 프론트엔드를 공부하면서 이렇게 하는 게 맞는 걸까? 라는 의문이 들었고, 그 의문을 해결해주기 위해 누군가의 가이드가 필요하다 생각했고, 회사에 다니면서 할 수 있는 점이 가장 매리트를 많이 느꼈던 부분..

✔ 우아한 테크러닝 3기: React & TypeScript 8회차(마지막 회차)

우아한 테크러닝 3기 2020. 9. 26. 02:07

✌ 9월24일 (목) 우아한 테크러닝 3기 8회차 강의 정리 🚀 8회차 강의 목표 마지막 예제 살펴보기 Mobx 살펴보기 🚀 예제 살펴보기 🌈 React-Router 이 예제는 1년전 예제라 react-router 공식 문서를 참고하며 보기를 바란다. router의 진행 동작은 URL이 바뀌는 것을 내부의 location의 path를 감지해서 해당 location의 주소에 맞는 컴포넌트와 연결시켜주는 간단한 동작이다. 그렇기 때문에 서버 사이드에서 말하는 router와 다르다. 서버 사이드에서는 요청 URI end point path에 따라서 다른 비지니스 로직을 실행하는 컴포넌트를 연결시키는 것이고 여기서의 router는 URL의 변경 사항과 그것과 mapping되는 페이지 컴포넌트들을 연결시켜주는 역..

✔ 우아한 테크러닝 3기: React & TypeScript 6회차

우아한 테크러닝 3기 2020. 9. 20. 20:45

✌ 9월17일 (목) 우아한 테크러닝 3기 6회차 강의 정리 🚀 6회차 강의 목표 webpack에 대한 흐름 이해하기 React & Typescript 살펴보기 redux-saga 사용하기 🚀 Webpack 흐름 이해하기 Webpack은 Webpack Cli라고 하는 도구가 존재한다. 단지 Hello world를 찍기 위해서 필요한 설정들이 이렇게나 많이 필요하다 @babel/core과 같은 @가 붙여져 있는 것들은 트랜스파일링 할때 사용된다. 일종의 플로그인이다. webpack은 webpack.config.js라는 이름을 갖는 설정 파일을 갖는다. 이름 변경될 수 있지만 관례적으로 사용된다. webpack은 webpack.config.js읽어서 실행시켜주는데 실행시켜줄 때 config객체를 export..

✔ 우아한 테크러닝 3기: React & TypeScript 5회차

우아한 테크러닝 3기 2020. 9. 19. 19:03

✌ 9월15일 (화) 우아한 테크러닝 3기 5회차 강의 정리 🚀 5회차 강의 목표 javascript로 만든 Redux 리뷰 Redux의 비동기 Redux 미들웨어 알아보기 💻 Redux 리뷰 2회차때 만든 리덕스를 사용하여 store와 reducer 생성 해준다. 자세한 내용은 위 링크 참조 🙏 index.js import { createStore } from "./redux"; function reducer(state = { counter: 0 }, action) { switch (action.type) { case "inc": return { ...state, counter: state.counter + 1 }; default: return { ...state }; } } const store = ..

✔ 우아한 테크러닝 3기: React & TypeScript 4회차

우아한 테크러닝 3기 2020. 9. 11. 23:26

✌ 9월10일 (목) 우아한 테크러닝 3기 4회차 강의 정리 🚀 4회차 강의 목표 💻 React 컴포넌트의 상태와 관리 🎯 커뮤니케이션!! 😤 비동기와 제너레이터 타입스크립트는 다음주부터! 🤩 🚀 React 컴포넌트의 상태와 관리 React 애플리케이션을 만든다. index.jsimport React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( , document.getElementById("root") ); App.jsimport React from "react"; const App = () => { return ( React and TypeScript 1회차: Overview 2회차: Redux 만들기 3회차: React 만들기 ..

✔ 우아한 테크러닝 3기: React & TypeScript 2회차

우아한 테크러닝 3기 2020. 9. 7. 22:45

✌ 9월 3일 우아한 테크러닝 3기 2회차 정리 🚀 2회차 강의 목표 JavaScript에 대한 지식을 A~Z까지 할 수 있는 만큼 해보기! (70%) JavaScript의 아주 기초적인 내용보단 전체적인 흐름을 타면서 스펙들을 쭉 훑어보기 상태관리자인 Redux를 직접 만들어보기! 만들어보면서 어떤 기술로 이루어져있는지! (30%) 🚀 JavaScript 훑어보기 변수에 이 값이라는 것을 넣을 수 있다. var x = 10; //x: 변수 10: 값 let y = 10; const z = 10; 🌈 값에 대해서 📌 값에 대해서 굉장히 강조를 하셨다. 아주 바닥의 절대불변의 원칙같은 것들을 세워놓고 (ex. 1=1, 1+1=2 불변(공리)) 이런 원칙을 충분히 이해하면 아무리 복잡한 것이라도 그 원칙으로..

✔ 우아한 테크러닝 3기: React & TypeScript 1회차

우아한 테크러닝 3기 2020. 9. 2. 23:10

🚀 우아한 테크러닝 3기 교육생 원래 오프라인으로 100명정도 뽑아서 한다고 하는데, 이번에는 코로나의 영향으로 온라인으로 진행되었습니다. 거기다가 이번에는 코로나 때문에 띄어 앉아야해서 약 30명 정도 뽑을 생각이시라고 하셨지만, 코로나가 심해져 온라인으로 진행되서 약 400여명의 교육생으로 뽑았다고 하셨습니다. 근데 이 교육을 듣고싶어서 지원한 사람만 1200여명.. 😤 열정적인 사람이 굉장히 많은 거 같다.. 이번 교육은 zoom을 이용해서 온라인으로 진행되었고, 강사님은 우아한형제들의 김민태님(웹프론트엔드개발 그룹장)이 진행하셨습니다. 또한, 9월 한달동안 화, 목으로 진행되고 총 8회차로 진행될 예정이고 저도 계속 끝날때마다 블로깅을 할 예정입니다. ✌ 🚀 우아한 테크러닝 3기 그 첫 시간 소개..

ABOUT ME

haranglog haranglog

티스토리툴바