Juwon

NextJs는 왜 사용할까? NextJs는 React로 만드는 SSR(Server Side Rendering) 프레임워크 입니다. ( Create React App과는 다른 Create Next App 명령어를 사용합니다.) npx create-next-app@latest --typescript 클라이언트 사이드 렌더링이 특징인 SPA를 서버 사이드 렌더링을 함으로 다음과 같은 이점이 있습니다. 1. 클라이언트 사이드 렌더링의 경우에는 모든 javascript 코드를 로드하고 난 이후에 사용자는 웹을 보게됩니다. 모든 javascript 코드를 읽을 때 까지 사용자는 많은 시간을 대기해야합니다. 2. SEO(Search Engine Optimization) 문제 해결 SEO는 검색 엔진 최적화를 말합니다..

useMemo Hook과 useCallback Hook은 메모이제이션( memoization )을 활용하는 React Hook입니다. memoization이란? 어떠한 연산의 수행한 결과값을 메모리 내에 저장하여 동일한 입력이 들어오는 경우 기존에 메모리에 저장된 연산 결과를 그대로 반환해주는 프로그래밍 기법입니다. memoization은 중복된 연산을 피하기 때문에 메모리를 조금 더 사용하더라도 애플리케이션의 성능을 최적화 할 수 있습니다. 이러한 특성을 이용해 React의 Component가 동일한 입력에 대해 재렌더링 되는 상황을 막을 수 있는 유용한 Hook입니다. useMemo란?? useMemo 함수는 메모이제이션된 값을 반환하는 Hook입니다. 하위 컴포넌트에서 2개의 props 인자를 받는..

이번 포스팅에서는 React의 Design 패턴 중 하나인 Atomic Design Pattern 에 대해 알아보겠습니다. Atomic Design Pattern 다섯 단계로 구성된 Atomic Design Pattern은 개발 개념의 방식뿐만 아니라 디자인에도 적용되는 설계 패턴입니다. Atomic의 어원 그대로 작은( 원소 ) 단위의 컴포넌트를 구성하여 강력한 재사용성과 단단한 설계 바탕으로 지속적이고 점진적으로 개발하기 용이한 디자인 패턴입니다. React만이 아닌 Flutter, Vue 또한 컴포넌트 단위로 개발하기 때문에 이러한 컴포넌트 중심 설계 패턴이 더욱 주목받게 되었습니다. 단계 별로 어떤 역할을 갖고 있는지 알아보겠습니다. Atom 가장 작은 단위의 컴포넌트를 말합니다. 원자는 어떠한 ..

이번 포스팅에서 알아볼 내용은 React-Redux입니다. React-Redux란?? 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전송할 때 Props를 이용해 데이터를 전달합니다. 하지만 데이터가 필요한 자식 컴포넌트의 깊이( Depth )가 늘어날수록 Props->Props->Props... 를 계속 타고 들어가 야한 번거로움이 있습니다. 이를 해결하기 위한 라이브러리가 Redux입니다. Redux는 React뿐만 아니라 Vue, Angular, Pure Js에서도 사용가능하지만 React 전용 Redux, React-Redux를 지원합니다. React-Redux를 사용하는 이유 앞서 말한 연쇄적인 Props 전달을 피함과 State의 종속성 탈피입니다. useState Hook을 사용할 경우 컴포넌..

이번 포스팅에서 알아볼 내용은 React의 탄생 React의 특징 React-Native 에 대해 알아보겠습니다. React란 React.Js는 자바스크립트 라이브러리로서 사용자 인터페이스를 만들기 위해 사용됩니다. 페이스북과 개별 개발자 및 여러 기업에 의해 유지 보수되고 있습니다. 리액트는 Vue, Angular와 같은 싱글 페이지 애플리케이션( Single Page Application : SPA )입니다. React는 2011년 페이스북의 뉴스피드에 처음 적용되었으며 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였습니다. 2012년 인스타그램에 적용되었습니다. 2013년 5월 JSConf( JavaScript Conference ) US에서 오픈 소스화 되었습니다. React의 특..