본문 바로가기

Web Study124

Custom Hooks 리액트 컴포넌트 설계에 대해 정리하다가 커스텀 훅에 대해 접하게 되었고, 로직과 UI를 분리하면 좋을 것 같아서 정리해본다. 비슷한 로직이 여러 컴포넌트에서 사용될 때 주로 사용 중복되는 로직을 유틸 함수와 같은 느낌으로 커스텀 훅을 만들어서 최소화시킬 수 있다. 커스텀 훅 만드는 법 중복되는 로직을 넣기 파일 이름을 useXXX 로 만든다(약속) // 예 useInput라는 input태그를 위한 state와 onChange 함수를 묶어줌 import { useState, useCallback } from "react"; export default (initialValue = null) => { // state 정의 const [data, setData] = useState(initialValue ); .. 2023. 7. 21.
React 컴포넌트 설계에 대해.. 컴포넌트의 개념 시스템을 구성하는 요소 중 하나의 단위로써, 공통되는 부분을 모듈화하여 재사용할 수 있는 단위, 데이터를 보여주기 위한 UI 요소이다. 설계를 위한 원칙 확장성 재사용성 관심사에 따른 코드 분리 단일 책임 원칙 의존성을 컴포넌트가 직접 참조하지 않고 외부로부터 주입 역할은 드러내고 구현은 감추기 - 순수함수 선언형 프로그래밍 무엇을 할 것인가에 초점을 두고 결과만 기술하여 어떻게 해야하는지는 기술하지 않는 프로그래밍 기법 의도에 집중한 프로그래밍 방법 / 단방향 데이터 바인딩 처리 명령형 프로그래밍 무엇을 어떻게 할 것인가 리액트의 공식문서 상 선언형 프로그래밍 된다고 기재됨 설계를 잘하면 리액트는 데이터가 변경될 때 적절한 컴포넌트만 효율적으로 갱신하고 렌더링한다. ex. React.l.. 2023. 7. 18.
자바스크립트 - 멀티미디어 파일 데이터 자료형 정리 (Blob, File, FileReader, TypedArray) 일을 하다보니 영상 자료를 다루게 되었고 자료형을 정확히 정리할 필요가 있다고 여겼다. Blob 객체 자바스크립트에서 텍스트, 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용하는 자료형 파일류의 불변하는 미가공 데이터를 나타내는 객체 텍스트와 이진 데이터의 형태로 읽을 수 있으며 ReadableStream으로 변환 후 메서드를 사용하여 데이터를 처리할 수 있다. 멀티미디어 파일의 데이터들을 최적화하기 위해 비동기 처리로 읽어올 땐 블롭으로 바로 변환시키는 것이 아닌, ArrayBuffer로 변환을 해주고 이 값을 Uint8Array 등의 DataView로 처리해줘야 한다. Blob은 File 인터페이스를 사용자 시스템의 파일을 지원하기 위해 Blob 인터페이스를 확장한 것이므로 모든 블.. 2023. 7. 17.
코딩애플 - 마지막 Next.js ... Middleware 드디어 완강에 다가왔다 ! 마무리도 확실하게 해주자~ Middleware ? 서버에서 하나의 기능을 100만개의 서버 API 기능에 동시에 적용하고 싶은 경우 미들웨어를 사용하면 가능하다. 즉, 요청이랑 응답 사이에 간섭하는 코드를 미들웨어라고 한다. 미들웨어 만들기 Next.js 폴더의 루트 영역(App폴더와 같은 위치)에 middleware.js 라는 파일을 만들어준다. import { NextResponse } from "next/server"; export function middleware(request) { // 미들웨어 내용 return NextResponse.next() // 서버로 통과 return NextResponse.redirect() // 다른 페이지로 강제 이동 (주소창이 변경).. 2023. 7. 9.

티스토리툴바