profile
아직 나는 취해있을 수 없다...
post-thumbnail

useRef 알아보기

useRef(https://ko.reactjs.org/docs/hooks-reference.html - 주로 함수형 컴포넌트에서 사용되며 클래스형 컴포넌트에서는 React.createRef를 사용해야 합니다.또한 전역으로 변수를 관리할 수 있습니다.useRe

2022년 6월 13일
·
0개의 댓글
·
post-thumbnail

React Event Handler

리액트는 이벤트가 발생할 때 해당 이벤트 핸들러는 Event 객체를 받을 수 있습니다.Event 객체는 래핑된 SyntheticEvent의 인스턴스를 전달합니다.일반적인 nativeEvent( 브라우저 기본 이벤트 )가 아닙니다.SyntheticEvent는 자주 사용하

2022년 6월 7일
·
0개의 댓글
·
post-thumbnail

3. Pre-rendering

Next.js는 기본적으로 모든 페이지를 사전에 렌더링 진행 ( Pre-rendering )미리 서버에서 HTML 문서를 만들어서 클라이언트에게 제공페이지를 가져올 때 데이터 패칭이 필요한 경우(pre-rendering) getInitialProps, getStatic

2022년 4월 28일
·
0개의 댓글
·
post-thumbnail

2. _app.tsx 와 _document.tsx

\_app.tsx, \_document.tsx: 두 파일은 server only file 입니다.Next.js server logic에 사용되는 파일이기 때문에 client에서 사용하는 로직 사용 불가ex) EventListener / Window / DOM 서버로 요

2022년 4월 28일
·
0개의 댓글
·
post-thumbnail

1. Next.js 기초 가이드 ( with TypeScript )

React 기반 프레임 워크로 서버 사이드 렌더링을 손쉽게 구성할 수 있도록 다양한 기능을 제공합니다.pages/ 하위에 있는 페이지 단위들은 Next.js 서버에서 SSR 형태로 HTML 문서를 제공폴더 / 파일 기반 라우팅을 지원유저는 더이상 첫 화면에서 로딩을 오

2022년 4월 28일
·
0개의 댓글
·
post-thumbnail

3. useMutation

데이터를 생성 / 업데이트 / 삭제할 때 주로 사용합니다.데이터의 변화가 이루어질 때 다시 서버로 부터 Get 요청을 통해 최신 데이터를 유지할 수 있습니다.또한 optimistic update을 활용해서 미리 UI부터 갱신할 수 있습니다.기본적으러 useQuery와

2022년 4월 21일
·
0개의 댓글
·
post-thumbnail

2. useQuery의 활용

useQuery는 기본적으로 비동기로 작동합니다.enabled 옵션 활용하여 동기처리를 진행할 수 있습니다.promise.all과 동일하게 useQuery를 하나로 묶을 수 있습니다.하나의 배열에 각 쿼리에 대한 상태 값이 객체로 들어갑니다.Unique key를 배열에

2022년 4월 21일
·
0개의 댓글
·
post-thumbnail

1. React Query란?

서버와 API를 통신하면서 가져오는 값들에 대해 Update / Caching / Error-Handling 등 비동기 통신 과정에서 다양한 처리를 진행할 수 있습니다.기본적으로 서버 상태를 관리해주는 라이브러리입니다.컴포넌트는 렌더링만 집중할 수 있도록 도와줍니다.지

2022년 4월 21일
·
0개의 댓글
·
post-thumbnail

React 18 주요 변경점

React-18v 부터 상태 업데이트(setState)를 하나로 통합해서 배치처리를 한 후 리렌더링을 진행합니다.리렌더링 관련 성능 개선과거 React-17v 에서는 이벤트 핸들러 내부에서 발생하는 상태 업데이트만 배치처리를 지원했습니다.하지만 이벤트 핸들러 내부에 f

2022년 4월 17일
·
1개의 댓글
·
post-thumbnail

JSON Schema의 활용

JSON Schema를 활용하기 위해서는 여러 라이브러리들이 필요합니다.JSON Schema를 활용한 Validator 자동화Ajv 라이브러리자동 타입 변환 및 생성Json-schema-to-ts 라이브러리국내에서는 JSON Schema와 타입스크립트를 활용하는 정보를

2022년 3월 22일
·
0개의 댓글
·
post-thumbnail

JSON Schema

Key와 Value로 이루어진 JSON Data를 정해진 규칙으로 구성되었는지 유효성 검사를 제공합니다.검사하는 규칙을 의미검증 과정 => 아래의 기준을 키워드를 이용해 명시할 수 있습니다.데이터의 타입이 정확한가?필수로 받아와야 하는 데이터를 포함하는가?데이터가 원하

2022년 3월 22일
·
0개의 댓글
·
post-thumbnail

4. Tailwind CSS 활용(3)

반응형 디자인을 쉽게 적용할 수 있습니다.이외에도 더 많은 것들을 변경할 수 있습니다. 예시Hover 기능을 쉽게 사용할 수 있습니다.예시예시예시그림자 속성을 추가할 수 있습니다.예시투명도를 설정할 수 있습니다.예시커서의 형태를 지정할 수 있습니다.예시선택할 때 범위를

2022년 3월 10일
·
0개의 댓글
·
post-thumbnail

3. Tailwind CSS 활용(2)

테두리 두께를 지정할 수 있습니다.태두리의 색상을 지정할 수 있습니다.테두리의 디자인을 선택할 수 있습니다.테두리의 Radus를 설정할 수 있습니다.예시CSS의 display 속성을 자유롭게 설정할 수 있습니다.예시Flex도 자유롭게 사용 가능합니다.예시

2022년 3월 10일
·
0개의 댓글
·
post-thumbnail

2. Tailwind CSS 활용

손쉽게 배경을 변경할 수 있습니다.예시만약 브라우저에서 1rem === 16px일 경우 size\*4px를 통해 넓이 / 높이를 손쉽게 지정해줍니다.w-32 => 32\*4 = 128px예시패딩과 마진을 클래스 형태로 지정할 수 있습니다.만약 브라우저에서 1rem ==

2022년 3월 7일
·
0개의 댓글
·
post-thumbnail

1. Tailwind CSS란?

Utility-First를 지향하는 CSS 프레임워크입니다.CSS의 각 속성들을 클래스에 직관적으로 표현함으로써 효율적으로 사용할 수 있게 됩니다.스타일링에 필요한 대부분의 속성들이 클래스 형태로 사전에 정의되어 있고 사용자는 클래스들을 조합해요 사용하면 됩니다.예시

2022년 3월 7일
·
0개의 댓글
·
post-thumbnail

5. Create 통합 테스트

모듈을 통합하는 단계에서 수행하는 테스트먼저 단위 테스트를 수행하여 잘 작동하는지 확인한 후 이 모듈들을 연동해서 테스트를 수행합니다.모듈들의 상호 작용이 잘 이루어지는지 검증합니다.통합하는 과정에서 발생하는 오류를 검출합니다.SuperTest 모듈을 이용해 통합 테스

2022년 1월 9일
·
0개의 댓글
·
post-thumbnail

4. Create 에러 처리하기

에러를 생성하기 위해 Postman을 활용합니다.Postman: API 테스트 프로그램https://www.postman.com/단위 테스트 수정controllers/products.js 수정에러 발생시키는 방법Model에서 정의한 필수 프로퍼티를 받지 못했을

2022년 1월 9일
·
0개의 댓글
·
post-thumbnail

3. Create 단위 테스트

데이터 베이스에 Product를 저장하기 위한 함수를 생성하기 전에 먼저 단위 테스트를 진행 ( 예상 )테스트에 대응하는 실제 코드를 작성controllers/product.jsnpm test로 확인해보기앞 서 생성한 createProduct() 함수 내부 로직을 검증

2022년 1월 9일
·
0개의 댓글
·
post-thumbnail

2. Jest

FaceBook에서 만들어진 테스팅 프레임워크 입니다.Test Case를 바탕으로 어플리케이션 코드가 잘 작동하는지 점검합니다.보통 단위 테스트에 자주 사용됩니다.Test Scriptnpm test를 진행하면 알아서 Test 파일을 찾아 테스트를 진행합니다.Jest가

2022년 1월 9일
·
0개의 댓글
·
post-thumbnail

1. TDD란?

Test Driven Development: 테스트 주도 개발을 의미애플리케이션을 더 안정적으로 구현 및 운영할 수 있습니다.디버깅 시간 감소 및 생산성 증가재설계 시간 단축확장성 용이이번 TDD는 Node Server에 관련해서 진행할 예정입니다.Node.js 설치기

2022년 1월 9일
·
0개의 댓글
·