All

Text content did not match. Server: "x" Client: "o"

위와 같은 오류가 간헐적으로 발생. 말 그대로 됐다 안됐다 해서.. ㅎㅎㅎㅎㅎㅎ 혼란스러웠다. 오류 원인 Next.js 는 기본적으로 SSR 을 따름. 위의 오류는 브라우저에서 렌더링 한 HTML과 서버의 HTML 이 일치하지 않다는 오류다. 사실 여기서부터 이해가 안 됨.. 서버에서 다 만들어서 보내주는데 왜 브라우저랑 비교해서 오류가 난다는 거지..? 😭 근데, 참고한 첫 번째 링크를 보면, 브라우저에서 DOM을 만들고 Hydrate 하는 작업에서 각자 가지고 있는 HTML 이 다르다는 것. 내 오류의 경우 저 Hey 뒤에 있는 사용자가 x와 o를 랜덤 하게 갖도록 초기화가 되어 있는데, 여기서 브라우저랑 서버가 둘 다 같은 사용자(둘 다 x, 둘 다 o) 면 오류가 안 나고 다르면 오류가 나는 거였..

Next.js의 Pre-Rendering(SSR vs SSG) 과 Hydrate

Pre-Render 와 Hydrate Next.js 는 기본적으로 모든 페이지가 pre-renders 된다. 이 말은 클라이언트에서 페이지가 만들어지는 것이 아니라 클라이언트로부터 페이지 요청을 받을 때 서버에서 그 요청받은 페이지가 바로 만들어지는 것을 말한다. 이렇게 만들어진 HTML 이 브라우저에서 로드될 때, 이 페이지에 필요한 JS파일이 실행되어 해당 페이지가 interactive 해질 수 있도록 한다. 이 과정을 Hydrate라고 한다. 즉, Hydrate는 Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭 시키는 과정을 말한다. 브라우저에서 pre-render 된 HTML 이 ..

Next.js redirects 와 rewrites | API KEY 숨기기

/** @type {import('next').NextConfig} */ const API_KEY = process.env.API_KEY; const nextConfig = { reactStrictMode: true, swcMinify: true, async redirects() { // 유저가 알 수 있음. 경로가 바깥에 드러남. return [ { source: "/old-blog/:path*", destination: "/new-sexy/:path*", // 외부로도 리다이렉트 가능, * 붙이면 뒤의 경로 모두 유지되면서 리다이렉트 permanent: false, // status code => false: 307(임시 리다이렉트), true: 308(영구 리다이렉트) }, ]; }, async r..

Context 에 Class 담기

wow.. 알고 나니 정말 당연한 건데, 클래스를 어떻게 제네릭에 담고 초기값을 줘야 할지 1시간 가까이 헤맸다 ㅠㅠㅠㅠ 휴 타스는 익숙해지려고 하면 어느 센가 저 멀리 있어.. import React, { createContext, useContext } from 'react'; import Youtube from '../apis/youtube'; export const youtube = new Youtube(); const YoutubeApiContext = createContext({ youtube }); interface Props { children: React.ReactElement; } export function YoutubeApiProvider({ children }: Props) { r..

웹팩이 뭔가요?

이 글은 웹팩 핸드북을 보며 정리한 글입니다 😅 사실 프론트엔드 공부를 시작하며 드문 드문 웹팩이란 단어를 보았지만, 당장 필요한 기술이 아니라 판단되어 공부하지 않았습니다. 하지만 핸드북을 보며 개념을 이해하고 나니 자바스크립트랑 조금 더 친숙해진 것 같아 기분이 좋습니다! 웹팩 웹팩모듈 번들러. 모듈 번들러란 웹 애플리케이션을 구성하는 자원 ((HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. 모듈 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하면 모듈이 됩니다. 모듈 번들링 웹 애플리케이션을 구성하는 몇십, 몇백 개의 자원들을 하나의 파일로 병합 및 압축해주는 동작을 모듈 번들링이라고 합니다. ..

Github Action test 가 끝나지 않는다..

Github Action으로 CICD 적용하려는데, test 가 계속 돌아가며 끝나지 않았다. 39분 걸린 것도 내가 중간에 취소해서 저 정도.. test 가 로컬에선 성공했고, action에서도 성공은 함! 근데 다음으로 넘어가지는 않았다. 🥲 그래서 yarn 으로 바꿨다가 env: CI=true를 추가했다가 난리 치다가 결국 찾아냄. package.json의 script의 test에 --watchAll 옵션을 준 것을 삭제했더니 됐다! 그 옵션 때문에 계속 테스트가 돌아가는 거였다.. 저것도 모르고 2시간 가까이 삽질했다 😭 아래 처럼 지워주었더니 잘 된다! 참고 https://github.com/orgs/community/discussions/25250

Husky pre-commit fails with code 1 (error)

yml 파일에 문법이 틀린 곳이 없는데 커밋하려고 하면 계속 이런 오류가 떴다. 해당 파일은 eslint 무시한다고 명시를 해줘도 계속 커밋이 안됨. git commit -m "message" --no-verify 커밋할 때 이렇게 명시하여 해결함! 참고 https://github.com/typicode/husky/issues/1014

AWS S3 정책

AWS S3 배포시 사용하는 정책 템플릿입니다. { "Version": "2012-10-17", // 2012-10-17 발표된 정책을 기준으로 하겠다. "Statement": [ { "Sid": "PublicReadGetObject", // 내가 권한에 부여한 이름 "Effect": "Allow", // 이 권한을 허용한다는 뜻 "Principal": "*", // 누구나 접근할 수 있도록 * 로 표현 "Action": "s3:GetObject", // s3 object 가져가라는 뜻 "Resource": "arn:aws:s3:::todots/*" // 버킷ARN(제 버킷명은 todots 입니다)/* } ] }

[재료 제로웨이스트] Refactoring : Context 활용하여 props drilling 정리

현 프로젝트에서 props drilling 가장 심한 곳은 Detail 컴포넌트입니다. 아래 이미지를 보면, 최상위 페이지 컴포넌트에서 최하위 SwiperRecipeItem 까지 보내는 데이터가 많습니다. 중간에 사용하지 않는 데이터들이 절반이 넘으므로 불필요한 props drilling이라 판단했고 이를 해결하기 위해 context 를 사용하기로 했습니다. 리액트 공식 문서를 보면 context 를 사용하게 되면 컴포넌트의 재사용성이 떨어지기 때문에 단순히 props drilling 을 피하기 위해서라면 컴포넌트 합성을 권고합니다. 하지만 저희 프로젝트의 경우 Detail 컴포넌트에 한해서만 context를 적용할 것이므로 재사용성이 떨어지지 않을 것이라 판단했습니다. Detail page 컴포넌트에..

[재료 제로웨이스트] axios interceptors 사용 이유

axios interceptors 사용 이유 1) base url 중복 방지 2) 요청마다 동일한 content-type , token 같은 헤더값 처리 3) 응답 리턴값 설정과 오류 발생에 대한 처리 export const instance = axios.create({ baseURL: process.env.REACT_APP_API, headers: { "Content-Type": "application/json", withCredentials: true, }, }); instance.interceptors.request.use( function (config) { const accessToken = getCookie("accessToken"); const refreshToken = getCookie("..

221016~221022 12주차 [실전 프로젝트 5주차 + 피드백 받은 소감]

✅ 로고 수정 ✅ 온보딩 페이지 추가 ✅ 브라우저 대응 화면 수정 ✅ 메인 페이지 레시피 보는 방법 수정 ✅ 버그 수정 ✅ 코드 리팩토링 작업 중... 서비스 런칭 후 약 60개 정도의 피드백을 받았다! 불편사항, 개선사항, 버그 카테고리를 나누어서 정리했다. 생각보다 엄청 상세하게 피드백을 받아서 정말 감사했다 🥹 버그를 우선적으로 수정했고 많은 사람들이 불편사항으로 적어준 것들을 먼저 수정했다! 대부분이 UX 관련 피드백이었다. 내가 만든 사이트이기에 나는 익숙하게 사용했지만, 처음 사이트를 방문한 사용자는 헷갈려했다. 예를 들어, 메인 페이지의 가로 스크롤 기능. 검색 및 작성을 위해 재료 태그를 만드는 방법 등이 있었다. 개발을 진행하면서 사용자 입장에서 사이트를 바라보는 시간이 부족했던 것 같다..

[재료 제로웨이스트] Refactoring : 소셜 로그인 중복 코드 제거

현재 진행하고 있는 프로젝트는 세 종류의 소셜 로그인이 가능합니다. 카카오, 네이버, 구글 로그인입니다. 각 로그인 기능을 위해 로그인 버튼과 리다이렉트 페이지로 보내는 컴포넌트 (3개) 가 있고 로그인 api 요청하고 사용자 정보를 쿠키에 저장하는 컴포넌트 (3개) 가 있습니다. 쿠키에 저장하는 부분을 util 함수로 따로 빼고 그 외 중복되는 부분들도 정리해서 2개의 컴포넌트로 정리했습니다. 중복 코드 제거 전 중복 코드 제거 후 중복 코드 제거하고 쿠키를 세팅해주는 부분을 따로 뺐더니 가독성도 좋아지고 코드도 깔끔해졌습니다! 로그인 api 를 보내는 것도 컴포넌트에서 분배하는 것이 아닌 request.js 에서 작업했습니다. 처음부터 깔끔하게 코드를 작성하면 좋지만, 프로젝트를 진행하다 보면 기능 ..

Netlify 배포 process.env.CI = true 오류 / Preview 기능 이용하기

Netlify 배포는 굉장히 쉽다! vercel 만큼 쉬움. 깃헙을 연결하고 환경 변수를 사용하고 있다면, 넣어주면 끝! 근데 배포하다가 이런 오류가 떴다. 변수가 true 로 되어 있어서 그랬다. 배포 세팅으로 들어간다. 빌드 세팅 부분에서 CI=false 를 yarn build 앞에 추가해주면 된다! 빌드가 성공적으로 됐다! 🤭 Netlify 사용 이유! 현 프로젝트는 모바일 기준이라 필수적으로 모바일로 UIUX 를 체크해야 한다. 때문에 main 에 합치기 전, 내가 수정한 것이 모바일에서도 원하는 것처럼 보이는지 수시로 확인을 해줘야 한다. 이럴 때 유용하게 쓰이는 Netlify 의 프리뷰 기능!!!!! 이걸 이제서라도 알게 된 것에 정말 감사하다 ㅠㅠ dev 에 pr 을 보내고 merge 가 되..

원티드 프리온보딩 프론트엔드 코스 합격 🎉

서비스 런칭 3일 전, 원티드 프리온보딩을 알게 되어 부랴 부랴 선발 과제를 했다. 현 프로젝트를 놓을 수가 없어서 계속 미루다가 과제 제출 마감 2일 전, 새벽 4시까지 작업해서 제출 완-료! 사실 80명이나 뽑고 지원자가 많지 않은 것 같아 간절함이 덜했던 것 같다. 근데 막상 제출하고 나니 엄청 하고 싶어져서 막 후기 찾아보고 지원한 다른 사람들 깃헙 뒤져서 어떻게 구현했는지 내 코드랑 비교하고 난리부르스 쳤다 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ 빨리 제출한 지원자들에게 가산점이 있는 것도 엄청 큰 차이로 느껴져서 떨어져도 너무 실망하지 말자고 스스로를 위로했다. 결과는 이번 주 금요일 12시에 나온다고 해서 마음 졸이고 있었는데, 오늘(목) 낮에 급 문자가 왔다. 🎉 합격 🎉 현재 진행하고 있는 부트캠프와 ..

221009~221015 11주차 [실전 프로젝트 4주차 + 서비스 런칭 회고]

✅ 채팅 기능 구현 - 채팅 리스트, 새로운 채팅 메시지 수신 여부 메인에서 아이콘으로 표시하기 ✅ 무한 스크롤 - 메인 페이지, 검색 페이지 ✅ 서버 요청 쿼리 React-Query로 모두 변경 ✅ AWS S3 + Cloud Front 배포, 가비아에서 도메인 구매 ✅ 자잘한 버그들 수시로 수정.. 🎉 10월 19일 서비스 런칭 🎉 4주간의 프로젝트가 끝나고 서비스를 런칭했다. 🎉경축🎉 서비스 런칭까지 일주일밖에 안 남은 시점에서 서버 요청 코드를 모두 React-Query로 바꾸기 위해 공부하고 적용하느라 정신없이 시간이 지나갔다. 또한 채팅 기능을 구현하고 무한 스크롤도 적용했다. 배포는 쉽게 되는 듯했으나.. 깃헙 액션으로 자동 배포하는 것에 실패해서 시간을 많이 날려 먹었다..😭 결국은 CLI로..

리액트 디자인 패턴에 대해서..

🤔 포스팅 이유 매주 기술 멘토님에게 프로젝트 피드백을 받고 있는데, 디자인 패턴에 대해 공부해 보라는 피드백을 받았다. 아토믹 패턴.. 무슨 무슨 패턴.. 예시를 들어주셨는데, 기술 구현에만 초점을 맞추느라 공부를 미뤘다가 오늘에서야 찾아본다! 🥲 공부 후 결론 현 프로젝트의 대부분은 Presentational and Container Component Pattern (이하 PCC) 을 따르고 있고 Pages 에서 상태 관리를 하고 있는 부분은 Atomic Design Pattern (이하 Atom) 과 비슷했다. PCC 방식을 사용하면 관심사 분리를 잘할 수 있다. 로직 부분과 UI 분리가 용이하다. 그러나 props 드릴링이 많이 생겨서 코드가 복잡해지고 독립성이 떨어진다. Atom 을 쓰면 컴포넌..

220925~221008 9,10주차 [실전 프로젝트 2,3주차 회고]

로그인, 회원가입 ✅ 소셜 로그인 통합->통합 안 함으로 수정 ✅ 로그아웃, 회원가입, 회원탈퇴 공통 ✅ 레시피 좋아요 기능 컴포넌트로 분리 ✅ 풋터의 [ # ]버튼 클릭 시 Best Tag List 조회 및 태그 선택해서 검색 메인 페이지 ✅ 메인 페이지 로그인 여부, 팔로우한 유저 유무에 따라 보여주는 화면 변경 ✅ 검색 기능 (태그 최대 5개, 제목, 닉네임) 검색 페이지 ✅ 검색 페이지 레시피 관련 페이지 ✅ 레시피 상세 페이지 Swiper 라이브러리로 제작 및 작성자 유무에 따른 버튼 변경 ✅ 레시피 수정 페이지 Swiper 라이브러리로 제작 2주 밀린 WIL .. 🥲 그동안 엄청 시간이 빨리 갔다. 처음 프로젝트를 시작할 땐 여유가 넘쳤는데, 생각대로 잘 안 풀린 부분들도 있었고 하다 보니 전..

AWS Cloud Front 란?

https://inpa.tistory.com/entry/AWS-%F0%9F%93%9A-CloudFront-%EA%B0%9C%EB%85%90-%EC%9B%90%EB%A6%AC-%EC%82%AC%EC%9A%A9-%EC%84%B8%ED%8C%85-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC 위 링크 내용을 스크랩 목적으로 작성한 글입니다. CDN 이란? CDN(Content Delivery Network or Content Distribution Network, 콘텐츠 전송 네트워크) 은 콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템이다. CDN 특징 웹 페이지, 이미지, 동영상 등의 컨텐츠를 본래 서버에서 받아와 캐싱 해당 컨텐츠에 대한 요청이 ..

렌더링이 3번 된다..

리액트에서 렌더링 되는 이유. 1. state 변경이 있을 때 2. 새로운 props 가 들어올 때(props 업데이트) 3. 부모가 렌더링 될 때 4. forceUpdate 가 실행될 때. 문제 원인 1. 부모로부터 받은 editForm 함수를 이용해 setState를 해주기 때문에 부모의 state가 변경되어 자식의 자식 컴포넌트인 TagList 도 재렌더링 됨. 2. TagList 컴포넌트의 tagList state 는 최초에 변경되고 그다음 렌더링부터는 변경으로 인지되지 않아 useEffect 안의 editForm 이 실행되지 않음. 3. 때문에 부모 editForm 함수엔 가장 처음엔 수정된 정보로 나오고 그 후엔 계속 초기 지정 값으로 나옴. 문제 해결 1. editForm 함수가 아닌 ta..

React 상태 관리 비교 Redux & React Query & SWR

상태 관리에 대한 고민 프로젝트의 댓글 기능을 구현하던 중, 습관적으로 사용했던 리덕스 코드를 걷어내고 나니 새로운 문제점을 발견했습니다. 댓글 생성, 업데이트, 삭제시 서버에 API 를 요청하고 응답 값을 받아 오기까지의 시간이 꽤나(?) 길다는 것입니다. 응답값에 따라 성공 여부를 판단하고 추가(수정,삭제) 된 댓글을 보여주기 때문에 이 부분은 어쩔 수 없는 부분이라는 생각이 들었지만..? 순간, 다른 서비스들은 어떻게 실시간으로 반응하지?! 라는 의문점이 들었습니다. 찾아 보니, 해결 방법은 있었습니다. 요청이 성공했을 것이라 예상하고 값을 미리 보여주고! 그 다음 서버에서 응답 값을 받았을 때, 실패했다면 값을 거둬 들이는 것입니다. 저는 이 방법을 활용해야 겠다는 생각이 들었고 현 프로젝트에 잘..

220918~220924 8주차 [실전 프로젝트 1주차 회고]

✅ 메인 페이지(베스트 레시피, 최신 레시피 조회) ✅ 댓글 CRUD ✅ 레이아웃, 태그, 레시피 컴포넌트 제작 ✅ 카카오 로그인, 회원가입 ✅ 이슈, PR 로 협업하기 일주일 단위로 계속 미니 프로젝트를 하다 보니, 기본 CRUD 기능 구현은 빠르게 완료했다. 물론 UX 부분이 아직 부족하고, 무한 스크롤, 스켈레톤, 알럿창 대신 스낵바 사용 등등은 남아 있다. 실전 프로젝트인 만큼 그동안 하고 싶었지만, 시간이 부족해서 하지 못했던 것들을 해볼 생각이다. 또한 단순히 기능 구현에 만족하는 것이 아니라 유지 보수성, 가독성, 최적화 등등을 고려하고 있다. 실전 프로젝트 1주차 회고 1. 리덕스를 꼭 써야할까? 전역으로 데이터를 관리할 때 사용하는 리덕스. 현 프로젝트에서 정말 필요할까? 라는 의문이 든..

220911~220917 7주차

✅ 오설록 클론코딩 프로젝트 마무리 ✅ 깃헙 리드미 작성 ✅ 모바일 환경 개발 유의점 자료 수집 [클론코딩 프로젝트 마무리] 처음 계획했던 기능들 모두 구현하고 오류 없이 배포까지 완료한 첫 프로젝트다. 이제까지 뭐가 하나씩 아쉽고 부족했는데, 이번엔 만족스럽게 끝낼 수 있었다. 여유가 있어서 리드미 작성도 정성껏 했다. 아쉬웠던 점은 트러블 슈팅을 기록하지 않아서 적기 어려웠다는 것. 이슈로 기록하는 습관을 가지도록 하자! [실전 프로젝트 시작] 금요일부터 실전 프로젝트가 시작됐다. 6주라는 긴 시간이 주어진 만큼 욕심이 많이 생겼다. 얼결에 부리더가 되어서 부담감이 더 크다. 먼저 프로젝트 주제를 정하고 최소 기능 구현부터 추가 기능 구현까지 나눠서 계획했다. 그 후, 화면 설계, api 설계를 했다..

220904~220910 6주차 혼자서 프로젝트 완료 🥹

✅ [식물일기] 프로젝트 완료. 게시글 CRUD, 댓글 CRUD, 로그인(JWT), 회원가입, 마이페이지 기능 구현 ✅ MUI 활용. ✅ [오설록] 클론 코딩 프로젝트 시작. PostCss Module 활용. 메인 페이지 완료. ✏️ axios intercepter 공부중.. https://axios-http.com/kr/docs/interceptors ✏️ react 테스트 코드 작성 인강 시작 ✏️ 반응형 사이트 만드는 법 이번 주는 정말 정신이 없었다. 식물일기 프로젝트의 프론트 부분을 혼자 맡아서 했기 때문이다. 다른 조들은 2-3명의 프론트 담당자가 있었지만, 우리 조는 프론트 팀원이 갑자기 입원을 하는 바람에 나 혼자 프론트 전반을 맡게 되었다. 근데 정말 놀랍게도! 나 혼자서 다 할 수 있었..

220828~220903 5주차

✅ 팀 과제 끝! (+게시글 최신 순, 오래된 순 선택 정렬, 헤더 버튼 수정) ✅ axios 공부 및 실습. ✅ heroku 배포 실습. ✅ redux-toolkit 정리, 사용은 할 수 있는데 완벽하게 이해가 되진 않았다. https://lazygay.tistory.com/37 6주차 미니 프로젝트 시작! ✅ material ui 활용해서 로그인, 회원가입 화면 작업! + 정규화 표현식을 이용해 유효성 검사. 🔐 로그인 완료시 토큰 저장 및 활용법 공부중... 5주차 프로젝트는 프론트 팀원들과 함께 했다면, 6주차부터는 프론트 2명, 백 2명이 한 팀이 되어서 미니 프로젝트를 진행하게 됐다. 로그인 성공시 서버로부터 토큰을 받아오는데, 이 토큰을 어떻게 관리해서 로그인 유무를 판단하는지 공부를 하고 ..

React Redux Toolkit 사용하기

Redux Toolkit 은 Redux 를 더 편하게 쓰기 위해 나왔습니다. 기본 사용법은 같으나 Module 파일이 더 간결하게 바뀌었습니다. 1. 툴킷 설치하기 CRA 를 통해 새로운 프로젝트를 생성하고 yarn 을 통해서 아래 패키지를 설치 yarn add react-redux @reduxjs/toolkit 2. Redux 와 Redux Toolkit 의 차이점 큰 차이점은 Action Value와 Action Creator를 이제 직접 생성해주지 않고 Action Value, Action Creator, Reducer 가 하나로 합쳐졌다는 점입니다. 하나로 합칠때 Slice 라는 API 를 사용합니다. 이 Slice 를 사용하면, 한 번에 3개가 만들어집니다. 3. Redux Toolkit 사용..

220821~220827 4주차

한 주 돌아보기. ✅ 개인 과제 To-Do List 완료 (Redux, Router 이용) + GitHub Pages 로 배포 배포시 흰 화면만 보이는 문제 발생! 해결 -> https://lazygay.tistory.com/29 ✅ 늘 헷갈리던 용어 정리 MPA SSR SPA CSR 용어 정리 -> https://lazygay.tistory.com/32 ✅ Life Cycle 개념 정리 -> https://lazygay.tistory.com/34 ✅ Hook 생긴 이유와 종류 -> https://lazygay.tistory.com/35 ✅ Styled Component 사용법 익혀서 팀플에서 사용 중. ✅ 팀 프로젝트 [유머 게시판 만들기] - 헤더, 메인 페이지 (전체 게시글 조회), 검색 기능 구현..

React Hook 이란 ?

Hook 정의 React 공식 문서의 Hook 의 정의입니다. Hook 은 함수형 컴포넌트에서도 생명주기 기능을 사용할 수 있게 함으로써, 함수형 컴포넌트의 활용성을 높이기 위해 나온 함수입니다. 덕분에 복잡한 클래스형 컴포넌트만을 사용하지 않아도 됩니다. Hook 을 프로젝트에 도입하기 위해 기존의 class 형 컴포넌트들을 수정할 필요는 없다고 합니다. 공식 문서에서 설명하듯이 점진적으로 적용 해나는 것이 권장됩니다. Hook 종류 리액트에서 제공하는 Hook 들이 있습니다. 그러나 사용자들이 필요한 Hook 을 만들어서 사용하기도 합니다. 이것을 Custom Hook 이라고 하는데, 개인들이 만든 유용한 Hook 들은 npm 을 통해 다운받아 사용할 수도 있습니다. 리액트 공식 문서에 나와 있는 H..

React Life Cycle [ Class component 와 Function component ]

React Life Cycle 이란? LifeCycle 은 컴포넌트의 생명주기입니다. 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라질 때 호출되는 메서드들이 있습니다. 이 메서드들을 생명주기 메서드라고 합니다. 컴포넌트는 Class component 와 function component 가 있습니다. Class Component Life Cycle Class Component 에서는 라이프 사이클에 따라서 우리가 원하는 순간에 원하는 코드를실행시키고 싶다면, 정해진 메소드를 통해서 사용할 수 있습니다. 원래 function component 에서는 불가능했지만, 현재는 hook 을 통해서 가능하게 되었습니다. 전체적인 흐름은 위의 이미지를 참고했지만 세부적인 메서드명은 공식 문서를 참고했습니다...

React Ref 와 Dom

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. 직접적으로 자식을 수정해야 하는 경우가 있습니다. 그 자식은 React 컴포넌트의 인스턴스 혹은 Dom 엘리먼트 일 수도 있습니다. 두 가지 모두 수정할 수 있는 방법이 있습니다. 그러나 Ref 는 남용하면 안됩니다. 필요한 상황에서만 사용해야 합니다. Ref를 사용해야 할 때 - 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. - 애니메이션을 직접적으로 실행시킬 때. - 서드 파티 DOM 라이브러리를 React와 같이 사용할 때 클래스 컴포넌트와 함수 컴포넌트가 ref 를 활용할 수 있는 범위가 다릅니다. 함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에 ref 어트리뷰트를 사용할 ..

🤔 MPA SSR SPA CSR 용어 정리

MPA (Multiple Page Application) 두 개 이상의 Page 로 구성된 Application 입니다. MPA 는 SSR (Server Side Application) 방식으로 렌더링 합니다. SSR (Server Side Application) 사용자가 새로운 페이지를 요청할 때마다 서버에서 렌더링 된 정적 리소스가 다운로드됩니다. SSR 은 아래의 순서를 따릅니다. 사용자가 사이트(클라이언트) 접속 👉 서버는 잘 만들어진 (HTML, CSS, JS 가 들어 있는) index.html 을 응답 👉 사용자가 사이트를 이용하기 위해서 모든 JS 파일을 서버에게 요청 👉 서버가 모든 JS 파일 응답 👉 사용자는 사이트 사용 가능. 👉 만약 사용자가 A 부분 수정을 서버에 요청하면, 서버는 ..