profile
그날 그날 정리하기
post-thumbnail

[POB#10] Assignment 3: 자란다 기업 과제 기술 정리. jest를 이용한 test 작성.

Assignment 3: 자란다 기술 정리 ( jest를 이용한 test 작성 )

어제
·
0개의 댓글
post-thumbnail

[POB#03] 커밋 컨벤션 정리

커밋 컨벤션 정리 글. 코드 컨벤션도 추가로 작성할 예정입니다.

2021년 7월 28일
·
0개의 댓글
post-thumbnail

[POB#01] 합격 후기 & 반성문

프리 온보딩 합격 후기, Orientation & 피드백

2021년 7월 27일
·
0개의 댓글

react-slick 이용해 캐로셀 구현하기

React Slice를 이용해 캐로셀을 구현해봤습니다.yarn add react-slickreact-slick의 기본 클래스인 slick-slide을 지정해 줍니다. styled-components를 사용하면 임의로 클래스 이름을 정의하기 때문에 지정된 이름으로 스타일

2021년 7월 8일
·
0개의 댓글

select 태그 사용하지 않고 드롭다운 구현 (ft. React)

select 태그의 디자인 어려움 문제로 select를 사용하지 않고 css(Styled-Components)를 이용해 드롭다운을 구현해봤습니다.드롭다운 기본 기능.드롭다운이 펼쳐졌을 때 css 처리 ( 밑의 DOM 요소를 덮는지, 미는지 )드롭다운 상태를 저장합니다.

2021년 7월 3일
·
0개의 댓글

React CheckBox 정리 ( 전체 선택 하기 )

React에서 체크 박스에 관련된 기능 구현을 정리한 글입니다.전체 체크 기능개별 체크 기능개별 체크 모두 체크 시 자동으로 전체 체크 ( 반대 상황 포함 )checkedList 배열개별 체크 박스들을 저장할 배열입니다.onCheckedAll 함수onChange 이벤트

2021년 7월 2일
·
0개의 댓글

AWS EC2, Nginx 이용해 React 프로젝트 배포

EC2, Nginx를 이용해 React 앱을 배포하는 방법은 검색해보면 많이 나오니깐 보고 하시면 될 것 같습니다.적용하는 과정에서 헤맸던 부분, 오류 해결하는 과정을 정리한 글입니다.참고 글AWS EC2에서 Nginx로 React 앱 직접 배포하기운영체제는 Amazo

2021년 6월 10일
·
0개의 댓글

React에서 Chartjs 도넛 그래프 적용, 타입스크립트 에러 처리

React에서 Chartjs 적용, 오류 해결과 타입 지정에 대한 정리글 입니다.chartjs와 react chartjs를 같이 설치합니다.yarn add react-chartjs-2 chart.jsChartjs에서 공식문서에서 원하는 도형 선택, 차트 데이터와 옵션을

2021년 6월 8일
·
0개의 댓글

Global styled-components 설정, TypeScript에서 styled-components 적용

평소 scss를 그냥 css 쓰듯 써서(..) 프로젝트 무게도 낮출 겸 TS 적용 겸 styled-components로 교체해봤습니다.글로벌 스타일, 초기값들을 정의합니다. css 파일이 아닌 JS 안에서 스타일을 정의하기 때문에 별도의 방법으로 적용합니다.styled

2021년 6월 7일
·
0개의 댓글

React 프로젝트 Redux에 TypeSCript 적용 과정

Redux에 Type 적용 과정data 타입 정의액션 리턴 타입 정의초기값 타입 정의리듀서 타입 정의rootReducer RootState 타입 정의초기값이 객체면서 객체 안의 타입이 많다면 미리 정의 해두는 게 편합니다. 또 전역 상태로 자주 쓰이기 때문에 언제든지

2021년 6월 3일
·
0개의 댓글

CRA React에 TypeScript 적용, 알아두면 좋은 타입들 정리

CRA로 만든 React 프로젝트에 TypeScript 적용 방법과 적용 과정에서 알아두면 좋은 타입들을 정리했습니다.해결하기 힘든 오류로 프로젝트가 엉망이될까봐 새 브랜치에 나누고 merge 하면서 진행했습니다.프로젝트를 처음 만든다면,기존 CRA로 만든 React

2021년 6월 2일
·
0개의 댓글

로그인 후 직전 페이지로 이동하기 (ft.React)

React rotuer의 Redirect를 이용해 로그인 인증 시 로그인 페이지를 불렀던 페이지로 돌아가도록 구현했습니다.Redirect의 속성 중 이동할 url을 적는 to 속성과 state를 담는 state 속성이 있습니다. 이 state에 현재 url 정보를 담아

2021년 6월 1일
·
0개의 댓글

React에서 브라우저의 뒤로가기 버튼 이벤트 감지

브라우저의 뒤로가기, 앞으로가기 버튼 이벤트 감지를 정리한 글입니다.React router에서 파라미터로 페이지를 구분하는 경우, 브라우저의 뒤로가기 버튼을 눌렀을 때 파라미터에 반응하여 페이지가 이동하는 경우가 있습니다.예를 들어 위와 같이 array 원소들의 id를

2021년 5월 31일
·
0개의 댓글

Loadble 이용해 코드 스플리팅

Lodable 라이브러리를 이용해 쉽게 스플리팅 할 수 있습니다.npm i @loadable/componentnpm i --save-dev @types/loadable\_\_component : TS 사용 시위에 설명한 것 처럼 페이지 단위로 코드 스플리팅할 수 있습니

2021년 5월 16일
·
0개의 댓글

SWR 전역 관리 라이브러리 (Redux 걷어내기)

로그인, 회원가입 처럼 한 페이지, 컴포넌트 안에서 네트워크 통신을 할 때, 비동기 통신이 하나밖에 없을 경우 굳이 Redux와 미들웨어들을 사용해 코드가 복잡해질 필요는 없습니다.이 때 전역 상태 관리를 위해 ContextAPI와 같이 간단하게 사용할 수 있는 SWR

2021년 5월 16일
·
0개의 댓글

특정 컴포넌트 특정 페이지에서 제거하기

header나 navbar와 같이 모든 페이지에 있어야 하는 컴포넌트가 특정 페이지 (로그인, 회원가입)에는 보여지지 않아야 할 때도 있습니다.props를 이용해 isVisible값과 같은 변수를 이용해 처리할 수 도 있지만, react-rotuer를 이용해서 처리해봤

2021년 5월 10일
·
0개의 댓글