profile
Frontend Ninja

[오즈의 제작소 NINJA] 21/05/28

switch case lexical scope 프로덕트 수정 프로덕트의 텍스트 내용을 수정하면 의 액션을 수행. currentProduct의 내용을 수정하고, reducer로 보내서 reducer에서 products을 순회하며 currentProduct와 일치

2021년 5월 29일
·
0개의 댓글
post-thumbnail

[오즈의 제작소 NINJA] 21/05/27

폰트설정 모달구현

2021년 5월 27일
·
0개의 댓글
post-thumbnail

[오즈의 제작소 NINJA] 21/05/26

react-query 공부하기 context API 셋팅하기 기본 개념 TableContext.Provider의 내부를 보면 children으로 하위 컴포넌트들을 받고, Provider컴포넌트에서 받는 밸류로 로직 정해서 내보내주지 않을까 생각. 다음과 같이 사용

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

[오즈의제작소 NINJA] (21/05/25)

React.FC children children에서 에러가 난다. why? 객체 타입 추론 객체 타입 추론 할때 as const안해버리면 문자열로 인식함. 문자열로 인식하면 밑 프롭스에서 에러남 다음과 같이 선언되어있는 경우 react-query conte

2021년 5월 25일
·
0개의 댓글
post-thumbnail

[오즈의제작소 NINJA] (21/05/24)

다음과 같이 사용시 DeleteButton 인자 타입 추론이 불가능한 경우 에러발생한다. 그렇기에다음과 같이 상속하거나다음과 같이 하자display : flex : 자식요소를 인라인으로 만든다.는 display : inline-flex두 속성다 자식요소에는 영향을 주

2021년 5월 24일
·
0개의 댓글
post-thumbnail

[오즈의 제작소 NINJA] TDD (3)

스냅샷 테스팅(snapshot testing)이란 어떤 기능의 예상 결과를 미리 정확히 포착해두고 실제 결과에 비교하는 테스트 기법입니다. 테스트 대상 기능의 구현이 변경되어 실제 결과과 스냅샷을 떠놓은 예상 결과와 달라질 경우 해당 테스트 케이스는 실패하게 되는데요.

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

[오즈의 제작소 NINJA] TDD(2)

why jest >That said, jest is an excellent unit testing option which provides great TypeScript support. 보통의 폴더구조는 다음과 같다. 리액트-타입스크립트 프로젝트에 jest 도입하기

2021년 5월 21일
·
0개의 댓글
post-thumbnail

[오즈의 제작소 NINJA] TDD(1)

TDD 는 테스트가 개발을 이끌어 나가는 형태의 개발론입니다. 우선 테스트 코드 작성 후 구현입니다.(Test Driven Development) 선 테스트 코드 작성 후 구현하는 방법.실패 : 실패하는 테스트케이스를 먼저 작성한다. 지금 가장 먼저 구현할 기능 하나씩

2021년 5월 21일
·
0개의 댓글
post-thumbnail

[오즈의 제작소 NINJA] 검색화면에서 일반 특수문자가 웹 페이지 특수문자로 보이는 이슈 해결하기

다음과 같이 공백이 웹 페이지 특수 공백문자로 출력되는 이슈웹 페이지에는 특수한 문자 기능을 수행하는 웹 페이지 특수 문자가 존재한다.웹 페이지에서 공백은 여러번 입력하여도 한 번밖에 수행되지 않는다. 문자 그대로의 공백문자를 사용하려면   같이 escape 처리된 웹

2021년 5월 6일
·
0개의 댓글
post-thumbnail

[오즈의 제작소 NINJA] _app.js 구조 바꾸기

로그인 리다이렉트를 수정할 때였다. 로그인 리다이렉트의 에러를 잡기위해 Header컴포넌트에서 useEffect(의존성 빈배열)에 콘솔을 찍은 적이 있었는데, 페이지가 변경 될 때마다 자꾸 찍혔음.처음에는 다시 렌더링되는 거니깐 찍히겠거니하고 넘겼는데, 곰곰히 생각해보

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

[오즈의 제작소 NINJA] JS Preloading

다음은 오즈의 제작소 메인화면이다. Next JS의 경우 코드 스플리팅이 되어있어, 메인 화면으로 라우팅 시 메인화면에 필요한 js 파일만을 로드한다. (React의 경우 코드 스플리팅을 하지않으면, 전체 로직이 담긴 하나의 js 파일 로드.)이 경우 처음 로딩시간이

2021년 5월 4일
·
0개의 댓글
post-thumbnail

[오즈의 제작소 NINJA] 리덕스 환경에서 댓글 무한 로딩 적용하기 (2)

이 컴포넌트를 기준으로 threshold값 넘어가면 다음 댓글들을 로드함.isDisable 이 false 이면 DOM 상에 노출된다. => 가시성 관찰 (가져올 댓글 o) isDisable 이 true 이면 DOM 상에서 지운다. => 가시성 관찰 중단 (가져올 댓글

2021년 5월 2일
·
0개의 댓글
post-thumbnail

[오즈의 제작소 NINJA] 리덕스 환경에서 댓글 무한 로딩 적용하기 (1)

현재 : 게시물 상세 화면→ 모든 댓글 다 로드해서 한 번에 출력적용 이유 1️⃣ : 댓글의 갯수가 200개, 2000개라고 가정하면, 댓글을 로드해오는 시간 길어질 것임.적용 이유 2️⃣ : 보지 않을 댓글도 로드해오는 것이기에 성능, UX 모두 좋지 않다고 판단.뷰

2021년 4월 29일
·
1개의 댓글
post-thumbnail

[오즈의 제작소 NINJA] 특정환경에서 뒤로가기 제어하기

기존 상황 : 카드를 누르면 /honeytip?step=1과 같이 각 카드에 맞는 인덱스 번호 라우터로 이동함.문제 상황 : /honeytip?step=3(3번 카드가 포커스 되어있는 상황) 에서 뒤로 가기를 누름. 라우터는 이전 라우터로 변하지만 계속 3번 카드에 포

2021년 4월 28일
·
2개의 댓글