akjfal

코드 분할 코드 분할 – React A JavaScript library for building user interfaces ko.reactjs.org 번들링 코드들이 import 로 엮여있는 경우 이를 webpack등 툴을 통해 묶어줍니다. 코드 분할 앱의 크기가 커지면 번들도 커지기 때문에 로드가 오래걸릴 수 있습니다. 이를 통해 초기 로딩 비용을 줄일 수 있습니다. import() 동적 import()문을 통해 코드를 분할하는 것이 가장 좋습니다. import("./math").then(math => { console.log(...)})); webpack이 해당 구문을 만나게 되면 코드를 분할합니다. 또한 Next.js도 이를 지원합니다. 만약 Babel을 사용한다면 동적 import를 다른 것으로..

접근성 접근성 – React A JavaScript library for building user interfaces ko.reactjs.org 별칭 : a11y 표준 및 지침 WCAG(Web Content Accessibility Guidelines) 접근성을 갖춘 웹사이트를 만드는데 필요한 지침을 제공합니다. WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 접근성을 갖춘 javascript 위젯을 만드는데 필요한 기술입니다. → React에서는 aria-* 속성을 통해 제공합니다. → 카멜케이스로 제공되는 다른 속성과 달리 케밥 케이스로 작성되어야 합니다.. 시멘틱 HTML map등의 내부에서 코드를 동작시키..

Hook API 참고서 기본 Hook useState const [state, setState] = useState(initialState); 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 처음 렌더링 하는 동안, 반환된 state와 첫번째 전달된 인자의 값은 같습니다. setState는 리렌더링시에도 변하지 않아, useEffect와 useCallback의 의존성목록에 추가하지 않아도 됩니다. useEffect useEffect(didUpdate) 명령형 또는 어떤 effect를 발생시키는 함수를 인자로 받습니다. 화면에서 제거될 때 setTimeout과 같은 것들을 제거하기 위해서는 clean-up함수를 반환하면 됩니다. 조건부 발생시키기 useEffect(()=>{}, []) useEffec..

16.8부터 새로 추가된 기능입니다. class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. State Hook function Example(){ const [count, setCount] = useState(0); function onClick = () => { setCount(count+1); } } useState가 Hook입니다. Hook을 사용해 함수 컴포넌트 안에 state를 추가했는데, state는 다시 렌더링되어도 그대로 유지됩니다. this.state와 비슷하지만 이전 state와 새로운 state를 합치지 않는다는 점이 차이점입니다. Hook이란 함수 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수입니다. Hoo..

Effect Hook 사용하기 Using the Effect Hook – React A JavaScript library for building user interfaces ko.reactjs.org useEffect는 class에서 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 방식이라고 생각하면 된다. React에는 두 종류의 side effects가 존재하는데 clean-up이 필요한 것과 필요 없는 것 두가지가 있다. clean-up이 필요 없는 Effects class형에서 어떠한 데이터를 업데이트 하기 위해서는 컴포넌트가 방금 마운트 되엇는지(componentDidMount), 업데이트되었는지(componentDidUpdat..

Draft.js 페이스 북에서 16년도 부터 만들어져서 사용되고 있는데 에디터다. 더보기 star: 21.9k weekly donwloads : 81.5k 장점 1. 페이스북에서 만들었고, 유지보수하며, 많은 사용자들이 사용하고 있어 React와 잘 맞는다. 2. 공식 문서가 나름 상세하게 잘 구성되어져 있다. 3. 확장성과 사용자 정의가 가능하다. 단점 1. SSR에서 에러가난다! https://github.com/facebook/draft-js/issues/2332 물론 해결책은 이슈를 보면 존재한다. const emptyContentState = convertFromRaw({ entityMap: {}, blocks: [ { text: '', key: 'foo', type: 'unstyled', en..

Nextjs 공식 문서를 찾아보면, 로그에 관련되서 구조화된 로크 패키지를 원한다면 Pino를 사용할 것을 권하고 있습니다. 참고 Going to Production | Next.js Before taking your Next.js application to production, here are some recommendations to ensure the best user experience. nextjs.org 해당 로그들을 파일로 뽑아내야 할 일이 있어 Pino를 사용해 getServerSideProps에서 나오는 로그들을 뽑아내보았습니다. 아래는 버전 참고하시면 될듯합니다. // package.json { "name": "my-app", "version": "0.1.0", "private": tr..

dynamic function 실행 dynamic( dynamicOptions: DynamicOptions | Loader, options?: DynamicOptions ) dynamicOptions type DynamicOptions = LoadableGeneratedOptions & { loading?: ({ error, isLoading, pastDelay, }: { error?: Error | null isLoading?: boolean pastDelay?: boolean retry?: () => void timedOut?: boolean }) => JSX.Element | null loader?: Loader | LoaderMap loadableGenerated?: LoadableGenerate..