hmk run dev

리액트 성능 측정하기 - 효율적인 테이블 컴포넌트 구현 사내에서 테이블 컴포넌트를 만들어야 하는 일이 생겼습니다. 그러나 특정 조건들로 인해 성능이슈가 생겼는데요 1. 페이징 처리가 없는 테이블의 형태 2. 옵션값 개수의 모든 경우의 수를 고려한 옵션생성(수십 ~ 수백 개의 테이블 row UI가 생김) 3. 판매 마켓별로 옵션들의 값을 수정할 수 있는 UI 4. 테이블 데이터(옵션)들을 일괄변경 할 수 있는 기능(자주 사용할 것으로 판단) 페이징 처리가 없는 테이블과 자주 사용되는 데이터 일괄 변경 기능은 리액트에서 성능 문제를 초래할 수 있습니다. 특히 수백 개의 테이블 row가 재렌더링 되는 경우, 애플리케이션의 성능 저하가 발생할 수 있습니다. 성능 측정과 개선 성능 측정은 React DevTool..

React를 사용한다는 가정하에 프런트엔드 최적화를 위해 해야 할 것들을 주기적으로 작성해볼 포스팅입니다 :) useMemo & useCallback 위 두 개의 리액트 훅을 사용하기 전에 이 사실들을 알고넘어갈 필요가 있습니다. 1. 함수형 컴포넌트는 함수다. 단지 jsx를 반환하는 함수입니다. 2. 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여 실행된다는 것을 말합니다. 즉, 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 함수 등)도 매번 다시 선언되어 사용됩니다. 3. 컴포넌트는 자신의 상태 값(state)이 변경되거나, 부모에게서 받은 props가 변경될 때마다 리 렌더링이 됩니다. 이렇듯 리액트에선 렌더링이 빈번하게 발생할 수 있으며 렌더링 시 선언해놓은 함수나..

Pre-rendering - 기본적으로 모든 페이지 프리 렌더링 - 사전에 HTML 파일을 만든다는 의미 - 퍼포먼스 향상, SEO next.js에서 자바스크립트를 껐을때 보여지는 화면을 관찰해보자! 끄는 방법 > F12 > F1 > Debugger > Disable Javascript 왼쪽이 끄기 전 오른쪽이 끈 후입니다. 메인페이지 상세페이지 서버사이드 렌더링으로 만든 상세 페이지는 CSS차이 정도 밖에 없는 것 같습니다 :) > 서버에서 이미 데이터를 가져와 HTML로 만든다음에 내려줘서! no Pre-render & Pre-render no Pre-render - 아무것도 없다가 JS가 로드 된 이후에 화면을 그리기 시작함 Pre-render - 사전에 만들어진 HTML 메타데이터 포함 요소들이 ..

Next js의 모든 페이지 들은 사전 렌더링 (Pre-rendering)을 한다. - 더 좋은 퍼포먼스 - 검색엔진 최적화(SEO) Pre rendering엔 두 가지 형태가 있는데 차이점은 언제 html 파일을 생성가는가에 있다. 1. 정적 생성 - 프로젝트 빌드 시점 생성, 모든요청에 활용 - nextjs는 정적 생성을 권고함 - 정적생성된 페이지들은 cdn에 캐쉬됨 - getStaticProps / getStaticPaths - 미리 만들어도 되는 페이지 상품리스트, 블로그 게시글 등을 처리할때 유용 2. SSR - 매 요청시 html 생성 - 항상 최신상태 유지 - getServerSideProps 페이지에 타이틀과 메타 정보들이 비어있는데 검색엔진 최적화를 위해 SSR을 이용해 해결 보겠습니다..

리액트에 SSR이 가능하게 만드는 nextjs를 다시 공부해보려고 한다! 예전에 한번 작은 프로젝트를 진행해본 적은 있지만 그땐 SSR, CSR에 대한 경험과 지식이 다소 부족한 부분이 있어서 이해를 잘못하고 개발했던 것 같다. 현재는 리액트, 뷰, JSP 등을 다루면서 좀 더 피부로 와닿는 이해를 할 수 있을 것 같고 다시 상기시킬겸 작은 프로젝트를 하면서 깔~뜸하게 정리해보겠다. nextjs를 쓰는 이유 장점은 많겠지만 아주 간략하게 적어보도록 하겠습니다 :) 검색 SEO에 좋음 - 이미지로 볼 수 있듯이 nextjs는 html을 그대로 확일할 수 있다! (static파일 지원) 번들링이 자동으로 된다. - 일반적으로 SPA(weppack를 사용하지 않은)는 초기 화면 로딩 시 모든 파일들을 한 번에..

async, await 비동기 처리할 때 필요한 친구다... 함수가 특정 함수가 실행된 후에 다른 함수를 실행시키고 싶을 때 아래처럼 써주면 된다! 아래 코드는 각각 유저의 마이페이지를 옮겨 다닐떄 (나의 페이지 >> 다른 유저 페이지 or 다른 유저 페이지 >> 다른 유저의 페이지) 원래 있던 데이터를 초기화 시켜주고 새로운 데이터를 넣어주기 위해 비동기 처리를 해주었던 코드이다 const initializeApp = async () => { await dispatch(profileActions.resetProfile([])); await dispatch(storyPostActions.resetStory([])); dispatch(profileActions.getUserInfoAPI(userId)); ..

// 키값 기준으로 쿠키에 저장된 값을 가져오는 함수 const getCookie = (name) => { // 쿠키 값을 가져옵니다. let value = "; " + document.cookie; // 키 값을 기준으로 파싱합니다. let parts = value.split("; " + name + "="); // value를 return! if (parts.length === 2) { return parts.pop().split(";").shift(); } }; // 쿠키에 저장하는 함수 const setCookie = (name, value, exp = 5) => { let date = new Date(); // 날짜를 만들어줍니다. date.setTime(date.getTime() + exp *..

파이어베이스의 데이터를 긁어오고 이니셜 스테이트 값과 형식 맞추기 const getPostFB = () => { return function (getState, dispatch, { history }) { const postDB = firestore.collection("post"); // 콜렉션선택 postDB.get().then((docs) => { // 가져오는 방법 문서참고 https://firebase.google.com/docs/firestore/query-data/get-data?authuser=0 docs.forEach((doc) => { console.log(doc.id, doc.data()); let _post = { id: doc.id, ...doc.data(), //파이어 베이스 데..

개발자 도구를 켜서 콘솔창에 입력을 한다 document.cookie = "MY_COOKIE = here ;" ; 이렇게 입력하면 여기서 MY_COOKIE는 키값(name)이 되고 here은 value값이 된다 여기서 expires 라는 만료일이라는 옵션을 더해줄 수 있는데 이때 자바스크립트의 문법을 사용한다 let date = new Date('2022-10-05') >> 이렇게 date라는 변수에 자바스크립트 Date함수를 사용해 변수로 지정해주고 date를 출력해주면 Wed Oct 05 2022 09:00:00 GMT+0900 (대한민국 표준시) {}가 출력된다 그렇다면 아까 했던 document.cookie = "MY_COOKIE = here ;" ; 쿠키설정에 만료일도 넣어주면된다 넣어주기전에 ..

firebase.js에 만들어둔 auth 가져오기 리덕스에서 signupFB 함수 만들기 auth.createUserWithEmailAndPassword()로 가입 시키기 Signup 컴포넌트에서 signupFB를 호출! 가입한 후, display_name 바로 업데이트하기 사용자 정보 업데이트 후에 메인 페이지로 이동하기 const signupFB = (id, pwd, user_name) => { // 파이어베이스 회원가입 함수 // 회원가입 버튼 할때 작동 return function (dispatch, getState, { history }) { auth .createUserWithEmailAndPassword(id, pwd) .then((user) => { console.log(user); //사..