jayspod

SEO SEO(Search Engine Optimization)는 웹사이트나 웹페이지를 검색 엔진에서 더 잘 찾을 수 있도록 최적화하는 과정입니다 이는 웹사이트의 검색 엔진 순위를 향상시켜 더 많은 트래픽을 유도하는 것을 목표로 합니다 SEO를 진행하는 방법 적절한 메타 태그 사용: , 등의 HTML 메타 태그는 검색 엔진에 페이지의 내용을 알리는 중요한 요소입니다 정적 URL 사용: 검색 엔진은 정적 URL을 동적 URL보다 더 쉽게 이해하고 분석합니다 페이지 로딩 속도 개선: 이미지 최적화, 레이지 로딩, 비동기 스크립트 로딩 등을 통해 페이지 로딩 속도를 향상시킵니다 모바일 최적화: 반응형 디자인이나 별도의 모바일 페이지를 제공하여 모바일 사용자에게도 좋은 사용자 경험을 제공합니다 HTML 시맨틱 ..

Problem 파이널 프로젝트 댓글 CRUD시 바로 웹사이트에 적용되지 않는 문제 Solution react-query invalidateQuery로 캐시 무효화 하여 최신 값 갱신하기 const queryClient = useQueryClient(); const deleteCommentMutation = useMutation( deleteComment, { onSuccess: () => { queryClient?.invalidateQueries(['postDetail', postId]); }, }, ); const createCommentMutation = useMutation( createComment, { onSuccess: () => { queryClient?.invalidateQueries(['..

문법과 구조 클래스형: class 키워드를 사용하며, render 메소드를 통해 UI를 반환합니다 함수형: 단순한 함수 또는 화살표 함수를 사용하며, 함수의 반환값이 UI입니다 State와 라이프사이클 메소드 클래스형: setState를 사용해 상태를 관리하고, 라이프사이클 메소드를 활용할 수 있습니다 함수형: useState, useEffect 등의 훅을 사용해 상태와 라이프사이클을 관리합니다 this 키워드 클래스형: this 키워드를 사용해 클래스 내부 메소드나 상태에 접근합니다 함수형: this 키워드가 필요 없습니다 코드의 간결성 클래스형: 상대적으로 코드가 길고, 설정해야 할 부분이 많습니다 함수형: 코드가 간결하고 가독성이 좋습니다 클래스형과 함수형 컴포넌트는 React에서 UI를 구성하는 ..

HTTP (HyperText Transfer Protocol)와 HTTPS (HyperText Transfer Protocol Secure)는 웹에서 데이터를 전송하는 두 가지 기본 프로토콜입니다 둘 다 웹 브라우저와 웹 서버 간에 정보를 교환하는 데 사용되지만, 주요한 차이점은 데이터의 보안성에 있습니다 HTTP 보안 레이어가 없음: HTTP는 암호화가 적용되지 않은 상태로 데이터를 전송합니다 이로 인해 중간자 공격(Man-in-the-Middle Attack)이나 데이터 탈취가 쉽게 발생할 수 있습니다 속도: 암호화와 복호화 과정이 없기 때문에 HTTPS에 비해 빠를 수 있습니다 사용 사례: 보안이 중요하지 않은 사이트나, 데이터의 민감성이 낮은 경우에 사용됩니다 HTTPS 보안 레이어 존재: HTT..

Trouble 이미지를 서버에 전송하는 것에 대한 고민 형식(url, 파일)에 대한 고민 여러장의 이미지를 전달하는 방법에 대한 고민 이미지와 다른 post data를 함께 보내는 방법에 대한 고민 Solution 이미지 요청: url이 아닌 파일 자체를 배열로 FormData에 append 후 서버에 전송 하나의 FormData 키값 ‘images’에 반복문(forEach)를 활용하여 배열의 요소를 하나씩 할당 content-type은 ‘multipart/form-data' ↔︎ 함께 보내는 string, number 데이터는 'application/json’ (string, number)데이터 요청: JSON.stringyfy로 전송할 데이터들을 json문자열로 변환한 후 객체화이미지와 함께 전송하고..

쿠키, 세션, 웹 스토리지는 웹에서 사용자의 데이터를 저장하고 관리하기 위한 기술들 입니다 차이점은 1. 쿠키 개념: 클라이언트에 저장되는 작은 데이터 조각입니다 특징: 만료 기간이 있습니다. 설정하지 않으면 세션 쿠키가 되어 브라우저 종료 시 사라집니다 도메인과 경로에 연결되어 있습니다 이로 인해 쿠키는 해당 도메인 및 경로에서만 액세스 될 수 있습니다 용도: 사용자 세션을 관리하거나, 사용자의 환경설정, 로그인 상태 등을 기억하는 데 사용됩니다 2. 세션 개념: 서버 측에서 관리되는 사용자 정보나 상태입니다 각각의 사용자에 대해 고유한 세션 ID가 생성되며, 이 ID는 쿠키를 통해 사용자의 브라우저에 저장될 수 있습니다 특징: 쿠키와 달리 서버에서 관리되기 때문에 용량 제한이 쿠키보다 크거나 구체적으..

1. 클라이언트 사이드 렌더링 개념: CSR은 브라우저에서 직접 페이지를 렌더링하는 방식입니다 초기 요청 시에는 HTML 구조나 내용을 포함하지 않는 최소한의 HTML 템플릿과 JavaScript 파일을 받아옵니다 JavaScript가 실행되면 필요한 데이터를 AJAX 요청으로 가져와서 페이지를 동적으로 생성하고 렌더링합니다 장점: 사용자 경험: 초기 로딩 후에는 필요한 부분만 변경하기 때문에 페이지 내의 동작이나 다른 뷰로의 이동이 매우 빠릅니다 서버 부하 감소: 서버는 주로 정적 자원을 제공하고 API 요청을 처리하기 때문에 렌더링 부담이 감소합니다 단점: 초기 로딩 속도: 초기 페이지 로드에 필요한 자원을 모두 다운로드 받아 실행해야 하기 때문에 첫 로딩이 느릴 수 있습니다 SEO: 검색 엔진이 J..

1. Array.fill을 활용해 text slide animation refactoring before import { FlowText, FlowWrap } from './style'; export const TextSlideView = () => { const text = `행복한 동네를 위한 대화의 장소 `; return ( {text} {text} {text} {text} ); }; after import { FlowText, FlowWrap } from './style'; export const TextSlideView = () => { const text = `행복한 동네를 위한 대화의 장소 `; const texts = new Array(4).fill(text); return ( {texts..

var, let, const의 차이 var는 재선언, 재할당이 모두 가능하며 var로 선언된 변수는 호이스팅이 되어 스코프의 최상단으로 끌어올려집니다 let은 재선언은 불가하지만 재할당은 가능합니다 let과 const는 같은 블록 스코프를 가집니다 const는 재선언, 재할당이 불가해 한번 선언하면 그 값을 변경할 수 없습니다 호이스팅은 의도치 않은 에러를 발생시킬 수 있으므로 var사용은 지양하는 것이 좋습니다 promiss, async&await 차이 Promiss와 Async/Await은 모두 비동기 연산을 처리하기 위해 사용합니다 다만 Promiss는 연속직인 비동기 연산을 처리하기 위해 .then 체이닝을 반복적으로 사용해야하므로 코드가 복잡해질 수 있었습니다 Async/Await의 await을..

상태 관리는 웹 애플리케이션이 복잡해짐에 따라 중요한 주제가 되었습니다. 단순히 useState, props drilling으로 상태를 관리한다면 depth가 깊은 하위 컴포넌트로 전달 과정이 번거로울 뿐만 아니라 의도치 않은 상태변화를 일으킬 수도 있습니다. 이를 방지하기 위해 상태는 중앙에서 관리하는 것이 효율적입니다. 중앙상태관리의 장점은 1. 웹애플리케이션의 동작을 예측 가능하게 만들어 버그를 줄이고 디버깅을 쉽게합니다 2. 변경사항에 쉽게 대응할 수 있어 유지보수성을 높입니다 3. 상태관리 로직을 분리하면 재사용성이 높아집니다 4. 코드의 일관성을 가져 팀원들과의 협업을 원활할게 합니다. Recoil을 사용하는 이유는 1. 간결한 코드로 보일러플레이트 코드를 줄일 수 있었습니다. 2. 무엇보다 ..