전체 글 썸네일형 리스트형 위클리 페이퍼 16주차 1. Authorization Code를 활용하는 구글 소셜 로그인을 실행하기까지 유저, 프런트엔드, 백엔드, OpenID Connect 프로바이더 사이에 어떤 과정을 거치는지 설명해 주세요. 첫 번째로 유저가 프런트엔드에 소셜 로그인 요청을 합니다. 프런트엔드는 해당 요청을 백엔드에 보내고 백엔드에서는 OpenID Connet 프로바이더에 Authorization Code를 요청합니다. 이때 요청에 Client Id와 scope, redirect_url 등을 담아 보냅니다. OpenID Connet 프로바이더는 구글 로그인 페이지를 프런트엔드에게 전달하고, 프런트엔드는 유저를 해당 페이지로 보냅니다.. 유저는 절차에 맞게 로그인을 하고, 로그인에 성공하면 유저는 Authorization Code를 발급.. 더보기 위클리 페이퍼 15주차 1. 세션 기반 인증과 토큰 기반 인증을 비교해서 설명해 주세요. 세션 기반 인증은 서버에서 인증 정보를 저장하고 클라이언트에게 세션 ID를 발급합니다. 클라이언트는 인증 이후의 요청의 쿠키 헤더에 세션 ID를 함께 보내고, 서버에서는 들어온 세션 ID에 해당하는 세션 정보가 있는지 확인하고 있다면 인가하고, 없다면 인가하지 않습니다. 서버에 인증 정보가 저장되어 있기 때문에 공격으로 인해 인증 정보가 탈취되어도 서버에서 인증 정보를 만료시키거나 삭제하는 등의 조치를 취해 보안성이 토큰 기반 인증에 비해 유리합니다. 하지만 서버에 인증 정보를 저장하기 때문에 인증 정보가 많아지게 되면 그만큼 서버의 부담이 커집니다. 또한 여러 대의 서버가 요청을 처리할 경우 별도의 작업을 하지 않으면 세션 불일치 문제가.. 더보기 위클리 페이퍼 14주차 1. CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요. CORS(Cross Origin Resource Sharing) 에러는 프로토콜, 도메인, 포트 번호 중 하나라도 다른 경우의 http 요청에서 요청한 Origin과 응답한 헤더의 Access-Control-Allow-Origin의 값을 비교했을 때 유효한 요청이 아닌 경우 발생하는 에러입니다. 세션을 탈취하여 악의적으로 정보를 추출하거나 다른 사람의 정보를 입력하는 등의 공격을 막는데 목적을 두고 있습니다. 이 CORS에러는 서버에서 Access-Control-Allow-Origin의 값을 Origin과 같은 값으로 기재함으로써 해결이 가능합니다. 2. SEO가 무엇인지 설명하고, 개선을 위해 어떤 작업을 할 수 있을지 설명해 .. 더보기 위클리 페이퍼 13주차 1. 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요. React는 클라이언트 측 라우팅을 위해 React Router와 같은 라이브러리를 사용하며, 서버 측 렌더링을 위해서는 별도의 설정이 필요하지만 Next.js는 내장된 라우팅 및 서버 측 렌더링을 지원하여 페이지를 서버에서 사전 렌더링하고 클라이언트로 전달할 수 있습니다. 또한 Next.js는 파일 시스템의 구조에 따라 자동으로 페이지와 경로가 매핑되어 라우팅 관리가 간편합니다. 2. Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요. SSR은 서버에서 렌더링이 준비된 HTML파일을 클라이언트에 보내서 클라이언트는 받은 HTML을 렌더링 하여 화면에 보이게 되고 그 이후에 JS파일을 .. 더보기 위클리 페이퍼 12주차 1. JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요. javascript의 변수들은 타입이 정해져 있지 않아 number 타입이 들어가 있던 변수에 string, boolean 등 다른 타입을 넣을 수 있습니다. 그러다 보니 변수를 선언한 지 오래된 후에는 해당 변수에 어떤 타입이 들어가 있는지 기억하기가 힘들고, 그로 인해 의도하지 않은 타입의 값이 들어가게 되어 코드에 에러가 발생할 가능성이 있습니다. TypeScript는 그런 문제를 예방하고자 변수 선언 시 해당 변수가 어떤 타입의 값을 가지게 되는지 명시해 주는, JavaScript를 감싸는 포장지 용도로 사용합니다. 그럼으로써 올바르지 않은 타입의 값이 들어가게 되면 실행하기 전에 그 사실을.. 더보기 위클리 페이퍼 8주차 1. 본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요. 장점으로는 스타일을 지정하기 위한 이름이 겹치는 걱정을 하지 않아도 된다는 것과, 어떤 요소에 어떤 스타일이 지정되는지 파악하기 쉬울 거 같습니다. 하지만 js 파일이 커져서 그에 따른 문제로 가독성이 떨어진다거나 렌더링에 시간이 더 걸린다거나 하는 문제가 발생할 수 있을 거 같습니다. 더보기 위클리 페이퍼 7주차 1. 리액트 생명주기(life cycle)에 대해 설명해 주세요. react에서 컴포넌트는 생성, 업데이트, 제거될 때 특정한 이벤트가 발생합니다. 컴포넌트를 처음 사용할 때 그것을 사용하기 위한 준비를 합니다. 이를 mount라고 하며 컴포넌트를 사용하기 위한 data들을 접근성이 좋은 공간에 올린다는 뜻을 가지고 있습니다. 컴포넌트가 시작되면 context, defaultProps, state를 저장하고 componentWillMount를 호출합니다. 그 후 render를 통해 DOM에 컴포넌트를 적용시키고 mount가 완료된 후 componentDidMount가 호출됩니다. 시작하기 전과 완료된 후에 이벤트가 발생하는 것입니다. 업데이트와 제거에서도 비슷한 작업이 일어납니다. 차이점이라면 업데이트에.. 더보기 위클리 페이퍼 6주차 1. 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요. Virtual DOM이란 컴포넌트의 변화에 따라 바뀌게 될 화면을 조금 더 가볍고 쉽게 변경하기 위해 실제 DOM 내용을 요약한 데이터를 말합니다. 실제 DOM의 내용은 화면을 그리는데 필요한 모든 정보가 들어있어 매 변화마다 해당 사항을 확인하고 변경하는 작업은 비쌉니다. 그래서 Virtual DOM은 간략하게 들어있는 데이터들을 확인하고 변경한 후, 그 작업들을 모아서 DOM에 전달하여 한 번에 작업을 처리해 작업량을 줄이는데 목적을 두고 있습니다. 2. 리액트에서 배열을 렌더링 할 때 key를 써야 하는 이유에 대해 설명해 주세요. key를 사용하지 않으면 인덱스보다 이전의 인덱스의 요소를 삭제하거나, .. 더보기 이전 1 2 3 4 다음