injae

무한스크롤시 두번 데이터를 받아오는 현상무한스크롤을 구현하기 위해 아래 처럼 ref를 이용하여 페이지의 끝에 도달하였을때를 감지하여 뒤에 더 불러올 데이터가 있는지 확인하는 wineCursor상태, 데이터를 추가로 불러올 시점을 제어하는 isLoading과 hasMore을 이용하여 로직을 짯다. const [wineList, setWineList] = useState([]); const [wineFilterValue, setWineFilterValue] = useState({ wineType: WineEnum.Red, winePrice: { min: 0, max: 100000 }, wineRating: 0, }); const [wineName, setWineName] = useSt..

세션 기반 인증과 토큰 기반 인증을 비교해서 설명해 주세요. 세션 기반 인증방식  그냥 세션 id만 주면 되고, 세션에 대한 모든 정보는 세션 DB에 저장되어 있다. 페이지를 요청하면 서버는 세션 ID를 DB에서 찾으면 된다. 세션마다 별도의 ID가 있어서 해당 세션 ID는 쿠키를 통해 브라우저로 돌아오고 저장된다. 따라서 같은 웹사이트의 다른 페이지로 이동하면, 브라우저는 세션 ID를 갖고 있는 쿠키를 자동으로 서버에게 보내게 된다.  서버는 로그인 된 유저의 모든 정보를 세션 DB에 저장하기 때문에 이 정보들을 이용하여 새로운 기능 추가 가능원하지 않는 디바이스에서 가제 로그아웃을 할 수 있도록 하기OTT 서비스에서 계정 공유 숫자 제한 (현재 로그인 인원을 파악하기 쉬움)일일이 DB에 유저 정보들을..

CORS 에러에 대해 설명과 해결 방법CORS (Cross-Origin Resource Sharing)란? CORS의 문장을 직역하면 "교차(엇갈린) 출처 리소스 공유 정책" 이라고 해석할 수 있습니다. 웹 애플리케이션이 다른 Origin(출처)에서 리소스를 요청할 때 발생하는 보안 메커니즘입니다. 기본적으로 브라우저는 보안을 위해 한 Origin(출처)에서 실행되는 웹 애플리케이션이 다른 Origin(출처)에서 호스팅되는 리소스에 접근하지 못하도록 차단합니다. 그러나 CORS 정책을 통해 특정 도메인에 대한 접근을 허용할 수 있습니다. 출처(Origin) : Protocol (http, https) + Host (사이트 도메인)  + Port (포트번호)   CORS 에러가 발생하는 이유CORS 에러는..

리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.Framework vs LibraryReact는 라이브러리이고, Next는 React의 프레임워크이기 때문에우선 프레임워크와 라이브러리의 차이점을 짚고 넘어가자면,프레임워크개발자가 소프트웨어 기능 구현에 개발할 수 있도록 코드를 구현해 개발 시간을 줄이고,  코드의 재사용성을  증가 시키기 위한 일련의 뼈대, 틀을 라이브러리 형태로 제공되는 것라이브러리특정 기능을 모아둔 코드 혹은 함수들의 집합이며 코드 작성 시 활용 가능한 도구들큰 차이점은 "애플리케이션의 흐름을 누가 쥐고 있느냐"프레임워크는 그 스스로 제어 흐름의 주도성을 갖는 반면, 라이브러리는 개발자가 가지고 있다.프레임워크는 집이고, 라이브러리는 그 집 안의 가구 ..

타입스크립트에서 기본적으로 제공하는 제네릭 타입 중에서 알아두면 유용한 것들을 소개해 드릴게요. JavaScript 기능들querySelector() 함수기본적으로 어떤 DOM 노드가 리턴될지 모르기 때문에 HTMLElement라는 일반적인 타입으로 정의됩니다. 하지만 타입을 확신할 수 있는 경우에는 아래 코드처럼 직접 제네릭 타입을 정의해 주면 됩니다.const elem = document.querySelector('input.username'); Map키와 밸류를 갖는 자료구조입니다. 타입 파라미터로 키와 밸류의 타입을 정의하고 사용할 수 있습니다.const productMap = new Map();productMap.set(product1.id, product1);productMap.set(prod..

JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요. TypeScript는 JavaScript에서 정적 타입 문법을 부여해 확장된 언어(슈퍼셋)이다. JavaScript 엔진을 사용해 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 JavaScript로 컴파일되어 실행할 수 있다. (컴파일 : 사람이 이해할 수 있는 언어를 컴퓨터가 이해할 수 있는 언어로 바꾸어 주는 과정. Typescript는 Javascript와 달리 브라우저에서 실행하려면 파일을 한번 변환해 주어야 하는데 이러한 변환 과정도 컴파일 뒤에서 자세히 설명 ) TypeScript를 사용하는 가장 큰 이유는 ‘타입’ 때문이다. TypeScript는 JavaScript의 단점 중 하나인..

StyledCompnent를 응용하여 다이나믹한 스타일링과 스타일을 재사용하는 방법들을 정리하려한다. 다이나믹 스타일링 크기를 조절하는 size, 둥근 모양을 지정하는 round라는 Prop을 추가해 버튼 컴포넌트의 크기와 모양을 조절하는 예시를 보며 그 과정을 통해 다이나믹한 스타일링을 하는 법에 대해 알아보자. Button.jsimport styled from 'styled-components';const SIZES = { large: 24, medium: 20, small: 16,};const Button = styled.button` background-color: #6750a4; border: none; border-radius: ${({ round }) => round ? `9999..

Nesting이란? Styled Components에서 지원하는 문법으로, Nesting은 CSS 규칙 안에서 CSS 규칙을 만드는 걸 말한다. Nesting을 활용하는 두 가지 방법인 & 선택자와 컴포넌트 선택자에 대해 정리해보려한다. & 선택자& 선택자를 사용해서 앞에서 만든 버튼 컴포넌트를 호버하거나 클릭했을 때 배경색이 바뀌도록 해볼게요. import styled from 'styled-components';const Button = styled.button` background-color: #6750a4; border: none; color: #ffffff; padding: 16px; &:hover, &:active { background-color: #463770; }`;ex..

StyledComponent란?CSS를 React 프로젝트에 그대로 적용할 때 여러 면에서 불편한 점이있다.이러한 문제를 해결하기 위해 새로운 기술들중에서 가장 인기 있는 기술이 바로 Styled Components이다. 기존CSS 문제점? 1. CSS 클래스 이름이 겹침 예시로 하나의 컴포넌트안에 다른 컴포넌트를 Import한 상황에서 생각해보자면 두 컴포넌트의 CSS 내부의 className이 동일하다면 의도하지 않게 두 CSS가 두 컴포넌트에 모두 적용되버리는 문제가 발생한다. 이는 사용된 클래스 이름이 전역적인 특성을 가지기 때문인데, 한 컴포넌트에서 사용한 클래스 이름을 다른 모든 컴포넌트에서도 사용할 수 있다는 뜻이다.클래스 이름은 모든 곳에서 사용할 수 있기 때문에, import 해오지 않은..

렌더링이란? 웹 페이지에 접속하는 과정에서 링크를 클릭해 원하는 곳으로 이동할 때 HTML,CSS,JS등 개발자가 작성한 문서를 서버에 응답받아 실시간으로 브라우저에 그려지는 과정을 렌더링 과정이라고 말할수 있을 것 같다. 웹 페이지 렌더링 방식으로는 크게 CSR, SSR, SSG 로 나눌수 있다. 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 정리해보려한다. 클라이언트사이드 렌더링(Client-side Rendering) — 웹 브라우저에서 자바스크립트로 HTML을 만드는 것 리액트로 할 수 있는 가장 기본적인 방식의 렌더링이다. 리액트로 작성한 코드는 자바스크립트로 변환 (트랜스파일링)이 가능한데, 클라이언트사이드 렌더링은 자바스크립트로 변환된 리액트 코드를 웹 브라우저에서 실행해서 HTML을..