404 page not found : 기록장

useMemo와 useCallback은 React Hooks API의 일부로 두 가지 모두 성능 최적화에 사용됩니다. useMemo useMemo는 계산에 많은 시간이 걸리는 함수의 결과값을 기억합니다. 그리고 해당 함수가 다시 실행될 때마다 결과값이 계산되는 것을 방지합니다. 예를 들어, 다음과 같은 코드가 있을 때: const myList = [1, 2, 3, 4, 5] const total = useMemo(() => { console.log('Calculating total...') return myList.reduce((acc, curr) => acc + curr, 0) }, [myList]) 위 코드에서 myList 배열이 변경될 때마다 새로운 배열을 생성하고, 이전과 다른 참조값을 가지게 됩..

React는 매우 빠른 렌더링 성능을 자랑하지만, 큰 규모의 애플리케이션에서는 여전히 성능 문제가 발생할 수 있습니다. 이를 해결하기 위해 함수형 컴포넌트를 사용할 수 있지만, 함수형 컴포넌트 역시 최적화 작업이 필요합니다. 다음은 React 함수형 컴포넌트 최적화를 위한 몇 가지 팁입니다. 1. React.memo 사용하기 React.memo는 컴포넌트의 props가 변경되지 않으면 이전 렌더링 결과를 재사용하여 렌더링 성능을 향상시키는 함수입니다. 함수형 컴포넌트에서는 React.memo를 사용하여 props가 변경되지 않는 경우, 불필요한 렌더링을 방지할 수 있습니다. import React from 'react'; const MyComponent = React.memo(({prop1, prop2}..

엄청난 삽질을 많이했던, Pagination 작업을..마무리하며 일기 겸 구현한 페이지를 보기로 한다...ㅠ... 기초적으로 먼저 Pagination을 연습해보기 위해서, Container / Presenter로 나누어져 있는 컴포넌트가 아닌 원페이지에 먼저 작업을 해봤는데 너무너무 할만하고 쉬웠던 것이다! (물론 한페이지에 다 몰려있었으니 어려울리가...) 이제 자유게시판에 응용해서 집어넣어볼까! 라고 생각했는데.. 생각보다 어려운것이다.. 1. 리스트도 10개씩 계속 데이터가 refetch 될것, 2. 화살표를 누르면 10개씩 넘어갈것 (ex. 현재 1페이지에 있었다면 11페이지로 가야함..!) 3. 현재 1페이지에 있다면 이전버튼은 disabled 될것 4. 마지막 페이지는 10개씩 표출되는 것이 ..

API는 애플리케이션 소프트웨어를 구축하고 통합하기 위한 정의 및 프로토콜 세트로, 애플리케이션 프로그래밍 인터페이스(Application Programming Interface)를 나타냅니다. 그래서 REST API와 Graphql 의 차이점은 무엇일까요? 1. REST API REST API(RESTful API, 레스트풀 API)란 REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 뜻합니다. REST는 Representational State Transfer의 줄임말입니다. REST는 프로토콜이나 표준이 아닌 아키텍처 원칙 세트입니다. API 개발자는 REST를 다양한 방식으로 구현할 수 있습니다. RESTful API를 통해 요청이 수행될 때 RESTful API는 리소..

"" 상위의 link 태그 속성처럼 다른 폴더의 파일을 가져올 수 있는 방법이 있는데, 웹 퍼블리싱을 조금이라도 접해보았다면, @import는 한번 쯤 접해봤을 것이다. (필자는 구글폰트에서 웹폰트를 가져올 때 주로 사용했었다. 하위에 예시 참고) React에서도 다른 폴더에 있는 모듈이나, 파일을 불러올 수 있는데 그 때 사용하는 것이 "import"이다. 만약 경로를 지정하지 않는다면 어느 폴더에서 파일을 가져오는 것일까? 경로 지정을 하지 않았을 때에는 node_modules 모듈은 설치하게 되면 node_modules에 모듈의 파일이 저장되게 됩니다. node_modules에 설치된 모듈을 불러올 때에는, 경로를 지정할 필요 없이 모듈 이름만 작성하면 됩니다. 그렇기 때문에 우리는 리액트 모듈을 ..

웹 퍼블리싱을 배웠거나, 웹 제작에 관심이 있는 사람이라면 누구든지 아는 웹 퍼블리싱의 "꽃" 바로 CSS 이다. CSS는 마크업 해놓은 html을 꾸며주는 역할을 합니다. 웹 퍼블리셔로 일했던 나는 CSS에 친숙해져 있는 상태였는데, CSS-IN-JS 를 공부하면서 새로운 것을 다시 접한 기분을 느끼고있다. 1. CSS-IN-JS CSS-in-JS는 스타일 정의를 css 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법 입니다. 기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데 (기존 회사에서 사용했던 방식 필자의 전 회사는 php 를 주로 사용하는 회사였다 asp,jsp 사이트도 많이 접해봄), React나 Vue, Angluar와 같은..

1. JSX 란 무엇인가? JSX 를 알기전 React 에 관한 기본 지식이 있어야 하는데, React는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리 입니다. 하나의 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 것을 가능케하는 프레임워크 입니다. //잘못된 예시 const element = ( Hello, react! Hello, react! ); ReactDOM.render(element, document.getElementById("root")); JSX 는 JavaScript 의 확장 문법인데, DOM 엘리먼트들을 만들 때 JavaScript 형식으로 작성해야 하는 것을, XML 과 비슷한 형태로 작성할 수 있게 해줍니다. 공식적인 문법은 아..