본문 바로가기

Front-End Study89

세션이 만료되면 토큰을 먹도록 해 세션 기반 인증?세션이 뭔지부터 알아보자🔖세션이란 서버가 저장하는 사이트 방문자들에 대한 기록기록엔 id, ip주소, 마지막 방문은 언제인지, 어떤 브라우저를 사용했는지 등의 정보가 담김세션 기반 인증이란 세션을 활용하여 서버에서 세션 정보 기록 후 식별 id를 Set-Cookie로 클라이언트에 응답한다.클라이언트가 서버에 요청 시 서버에서 응답한 쿠키를 자동으로 포함하며 서버가 클라이언트의 쿠키에 담긴 세션 id만 확인하여 방문자를 파악한다.유저가 로그인하게 되면 서버에서 세션에 유저 id를 저장 후 이를 기반으로 서버가 요청을 보낸 유저를 특정한다.세션은 일정한 기간이 지나거나 클라이언트에서 로그아웃 요청을 보낼 경우, 해당 세션이나 로그인 유저를 만료 처리한다.토큰 기반 인증인증 토큰토큰 기반 인.. 2024. 6. 17.
모던 리액트 딥다이브 6회차 [2-3, 2-4, 2-5] 2.3.1 클래스 컴포넌트🔖오래된 코드의 유지보수나 라이브러리 사용을 효율적으로 하기 위해선 역사의 뒤안길로 사라진 클래스형 컴포넌트를 알 필요가 있다.기본적으로 클래스 컴포넌트는 클래스 선언과 extends 키워드를 통한 컴포넌트 상속으로 이루어진다.클래스 컴포넌트를 만들기 위해 extends 하는 컴포넌트이고, shouldComponentUpdate 컴포넌트를 다루는데서 둘의 차이가 생긴다.React.ComponentReact.PureComponent// 사용 예시import React from "react";class Sample extends React.Component { render() { return Hi~; }}컴포넌트를 만들 때 사용하는 props, state, 메서드의 정의i.. 2024. 6. 17.
무한 스크롤.. 이건 우째해야 할까.. 초기 로직✨게시글 댓글 페이지 구현을 하면서 limit 파라미터로 지정한 개수보다 댓글 수가 많아질 때 사용할 무한 스크롤에 대해 생각해보게 되었다.🔖작성한 로직에 대한 고민난 상세 페이지와 그 안의 댓글 컴포넌트를 따로 분리했기 때문에, 상세 페이지에서 가져오는 API 호출 로직을 통해 백엔드 서버에 구현되어 있는 nextCursor 값 또한 가져와 사용하고 싶었다.하지만 분리되어 있기도 하고 이걸 어떤식으로 구현해야 할지 감이 잘 오지 않았다. 🫨 해결한 과정들을 하나씩 작성해보고자 한다. 👍// 상세 페이지 로직const ArticleWithComment = () => { ... const [comments, setComments] = useState([]); const [ar.. 2024. 6. 11.
모던 리액트 딥다이브 - 5회차 [2-1, 2-2] 2. 리액트 핵심 요소 깊게 살펴보기리액트를 이루는 핵심 개념들이 자바스크립트를 토대로 어떻게 동작하는지 알아보자고~2.1 JSX란?✨ JSX는 페이스북이 소개한 새로운 구문이지만, 리액트의 전유물만은 아니다.종속적이지 않고, 독자적이며, JS의 일부 또한 아니므로 트랜스파일러를 거쳐야 JS가 이해 가능한 문법으로 완성되며, XML 스타일의 트리 구문 작성에 큰 도움을 준다. 2.1.1 JSX의 정의 🔖 JSXElement, JSXAttributes, JSXChildren, JSXStrings 라는 4가지 컴포넌트를 기반으로 한다.🏷️ JSXElement가장 기본적인 요소로, HTML의 요소와 비슷한 역할이다. 다음 조건들을 하나라도 충족해야 한다.JSXOpeningElement : 일반적으로 볼 수.. 2024. 6. 10.
모던 리액트 딥다이브 - 4회차 [1-6, 1-7] 1.6 리액트에서 자주 사용하는 자바스크립트 문법자바스크립트 문법을 이해한다면 리액트의 작동 방식 또한 이해할 수 있다.🔖 항상 새로운 버전이 나오는 JS의 문법을 숙지하고, 사용자의 입장도 고려하여 개발해야한다.👍 이를 위해 사용하는 것이 바로 트랜스파일러인 "바벨"이다.1.6.1 구조 분해 할당🔖 배열이나 객체의 값을 분해해 개별 변수에 바로 할당하는 것을 의미🏷️ 배열 구조 분해 할당배열의 구조를 분해하여 개별 변수에 할당하는 것","을 이용하여 값을 결정// 스프레드 연산자 활용 예시const arr = [1, 2, 3, 4, 5];const [first, second, third, ...arrayRest] = arr;// 1 2 3 [4, 5]/.. 2024. 6. 8.
[삐릭!] 검색 엔진 로봇과 친구하기 SEO는 또 뭐야🔖 SEO는 Search Engine Optimization의 약자로, 구글과 같은 검색 엔진에 친화적인 사이트를 구축하는 것을 의미광고X! 자연 검색 결과를 통한 트래픽의 양과 질 극대화관련 키워드로 검색과 페이지에 노출을 증가시켜 온라인 가시성을 개선하는 마케팅 작업SE 알고리즘🔖 크롤링 : 첫 번째 단계로 구글 봇이 웹 페이지 내의 콘텐츠를 복사하여 수집, 검색엔진으로 가져오는 단계🔖 인덱싱 : 두 번째 단계로 가져온 정보를 주제별로 인식하고 데이터로 보관🔖 랭킹 : 콘텐츠를 검색 의도에 맞춰 순위 부여, 사용자가 해당 키워드로 검색 시 순위대로 결과 제공✅ 이 3가지 단계를 통해 SERP(Search Engine Result Page) 완성!그럼 어떻게 SEO 개선을 유도해.. 2024. 6. 4.

티스토리툴바