곰의 끄덕끄덕

질문 리스트

  - Next.js 정의
  - Next.js의 주요 기능
  - SSR과 CSR의 차이
  - getInitialProps 기능
  - Next.js의 라우팅 방식
  - API 경로 생성 방법

면접 질문

1. Next.js는 무엇입니까? 

Next.js는 React.js, Node.js 및 JavaScript 위에 구축된 오픈 소스 개발 프레임워크입니다. Vercel에서 개발했으며 create-react-app에서 사용할 수 없는 서버 측 렌더링 및 정적 사이트 생성과 같은 기능을 활성화합니다.

2. Next.js의 주요 기능은 무엇입니까?

SSR(Server Side Rendering) - 더 나은 SEO와 더 빠른 페이지 로드 시간을 보장합니다.
SSG(Static Site Generation) - 빌드 시 React 앱을 렌더링할 수 있으며 HTML/CSS 파일로 제공됩니다.
ISR(Incremental Static Regeneration) - 이 기능을 사용하면 전체 정적 사이트를 다시 빌드할 필요 없이 배포 후 정적 콘텐츠를 업데이트할 수 있습니다.
API Routes - Next.js를 사용하면 API 라우트를 구축할 수 있습니다.
내장 CSS 및 Sass 지원, 모든 CSS-in-JS 라이브러리 지원.
Hot Code Reloading - 애플리케이션 코드의 변경 사항은 전체 페이지를 새로 고치지 않고도 즉시 볼 수 있습니다.
자동 코드 분할, 파일 시스템 기반 라우팅 및 경로 미리 가져오기

3. Next.js의 SSR(Server-Side Rendering)에 대해 설명해 주시겠습니까? CSR(Client-Side Rendering)과 어떻게 다릅니까? 

SSR에서 브라우저에 대한 서버의 응답은 렌더링할 준비가 된 페이지의 HTML이므로 브라우저는 모든 JavaScript가 다운로드되고 실행될 때까지 기다릴 필요 없이 렌더링을 시작할 수 있습니다. 이는 더 빠른 FCP(First Contentful Paint)를 제공하며 콘텐츠가 초기 로드 시 이미 사용 가능하므로 검색 엔진 크롤러가 액세스할 수 있으므로 SEO에 탁월합니다. 반면 클라이언트 측 렌더링에서는 페이지를 렌더링하는 데 필요한 JavaScript가 브라우저로 전송된 다음 DOM을 생성하고 페이지를 렌더링합니다. 이것은 보다 상호 작용적인 경험을 제공할 수 있지만 단점이 있습니다. 주요 단점은 특히 느린 네트워크나 장치에서 페이지가 표시되는 데 시간이 더 오래 걸릴 수 있다는 것입니다. Next.js는 개발자가 응용 프로그램의 각 페이지를 렌더링하는 방법을 선택할 수 있는 SSR과 CSR의 하이브리드를 제공하여 많은 유연성을 제공합니다.

4. Next.js의 'getInitialProps' 기능은 무엇인가요?

getInitialProps는 페이지에서 서버 측 렌더링을 활성화하고 페이지가 렌더링 전에 일부 데이터를 기다릴 수 있도록 하는 Next.js의 기능입니다. Next.js 애플리케이션의 모든 페이지에 추가할 수 있는 비동기 정적 메서드입니다. getInitialProps로부터 반환되는 데이터는 페이지 컴포넌트의 props를 채우는 데 사용됩니다. 이 함수는 필요한 데이터를 가져오는 데 유용할 수 있는 여러 속성을 포함한 컨텍스트 객체를 받습니다. 그러나 Next.js 9.3부터는 getInitialProps 대신 getStaticProps 또는 getServerSideProps를 사용하는 것이 좋습니다.  두 방법으로 더 나은 성능과 유연성을 얻을 수 있기 때문입니다.

5. Next.js에서 라우팅이 작동하는 방식을 설명해 주시겠습니까?

Next.js에는 파일 시스템 기반 라우팅 메커니즘이 있습니다. 이는 라우팅이 프로젝트의 'pages' 디렉토리에 있는 파일 구조를 기반으로 한다는 것을 의미합니다. 'pages' 디렉토리 내의 모든 파일은 자동으로 경로가 됩니다. 예를 들어 'pages' 디렉토리에 about.js 파일을 생성하면 your-site.com/about처럼 제공됩니다. 대괄호 []로 시작하는 파일 및 디렉터리 이름을 사용하여 동적 라우팅을 수행할 수도 있습니다. 예를 들어, pages/post/[id].js는 /post/1, /post/abc 등과 일치합니다.

6. Next.js에서 API 경로를 어떻게 생성하나요?

Next.js는 서버 사이드 API 경로를 생성하는 솔루션을 제공합니다. API 경로를 생성하려면 프로젝트의 'pages/api' 디렉토리 내에 파일을 생성합니다. 이 디렉터리의 각 파일은 호출할 수 있는 API 경로가 됩니다. 파일 이름은 경로 경로로 사용됩니다. 예를 들어 'pages/api' 디렉토리에 'hello.js'라는 파일을 생성하면 'yourwebsite.com/api/hello'에서 이 API 경로에 액세스할 수 있습니다. API 경로는 서버 측 전용이며 클라이언트 측 JavaScript 번들의 일부가 아니므로 브라우저로 전송되는 JavaScript 코드의 크기가 증가하지 않습니다.


이상 Next.js 관련하여 면접에서 물어볼 것 같은 사항들을 정리해보았다. 다들 면접 잘 뿌수고 오자 화이팅 !

개요

이 글에서는 JSON Web Tokens (JWT)에 대해 이야기하려고 한다. JWT는 JSON 객체로 정보를 안전하게 주고받는 표준으로 이 정보들은 디지털 서명되어 있어서 검증하고 신뢰할 수 있다. 주로 인증이나 정보 교환에 사용된다.

JWT 제작 시 주의점

1. HTTPS는 필수

프로덕션에서는 항상 HTTPS를 사용해야 한다. JWT가 전송 중에 암호화되므로, 도청 공격으로부터 안전해진다.

2. 비밀키 보안 강화

JWT를 서명하는 데 사용하는 비밀 키는 항상 안전하게 보관해야한다. 만약 노출된다면 공격자가 토큰을 위조할 수 있어서 위험하다.

3. 토큰 만료 시간

 토큰에 만료 시간을 설정하는 것은 꼭 필요하다. 토큰이 노출되더라도 만료 시간이 설정되어 있다면 피해를 최소화할 수 있다.

4. 민감한 정보는 패스

JWT의 페이로드에 민감한 데이터를 넣지 않는 것을 추천한다. 만약 토큰이 노출되면 그 안의 데이터도 노출되기 때문이다.

5. 클라이언트에서 토큰 처리 잘하기

브라우저의 로컬 스토리지나 세션 스토리지에 토큰을 저장하는 것은 피해야 한다. JavaScript로 접근할 수 없는 HttpOnly 쿠키를 사용하는 것이 제일 좋다.

6. 에러 처리 꼼꼼하게

JWT가 유효하지 않거나 만료되었거나 존재하지 않는 경우, 서버는 반드시 적절하게 응답해야 한다.

구현

그럼 이제 TypeScript와 Express를 사용해서 Node.js 서버에서 JWT 인증을 어떻게 구현하는지 알아보자.

먼저, 필요한 npm 패키지를 설치해야 한다.

npm install jsonwebtoken express
npm install @types/jsonwebtoken @types/express --save-dev

다음은 JWT 인증 구현 예시이다.

import express, { Request, Response, NextFunction } from "express";
import jwt from "jsonwebtoken";

const app = express();
const SECRET_KEY = "YOUR_SECRET_KEY";  // 비밀 키

// JWT를 확인하는 미들웨어
function authenticateToken(req: Request, res: Response, next: NextFunction) {
  // 헤더에서 토큰을 가져옵니다
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];

  if (token == null) return res.sendStatus(401); // 토큰이 없는 경우

  jwt.verify(token, SECRET_KEY, (err: any, user: any) => {
    if (err) return res.sendStatus(403);

    req.user = user;
    next();
  });
}

app.post('/login', (req, res) => {
  // 사용자 인증
  // 사용자 인증 로직 구현
  // 사용자 이름과 비밀번호를 req.body에서 가져오기 
  // 데이터베이스와 대조 (ex. bcrypt 활용)

  const username = req.body.username;
  const user = { name: username };

  // 액세스 토큰 생성
  const accessToken = jwt.sign(user, SECRET_KEY);
  res.json({ accessToken: accessToken });
});

app.get('/protected', authenticateToken, (req, res) => {
  // 이 경로는 JWT로 보호됩니다
  // 'authenticateToken'을 호출한 후에는 'req.user'에 사용자 정보가 있습니다
  res.json({ title: 'Protected content', user: req.user });
});

app.listen(3000, () => console.log('Server started on port 3000'));

토큰 저장

마지막으로, 액세스 토큰을 어디에 저장할지 결정하는 것도 중요하다. 이는 애플리케이션의 맥락과 보안 고려사항에 따라 달라진다. 각 방법의 장단점을 보고 판단하면 된다.

1. Cookie

쿠키에 토큰을 저장하는 것은 일반적인 방법이다. HttpOnly 쿠키는 JavaScript에서 접근할 수 없으므로 XSS 공격에 대해 안전하다. 하지만 CSRF 공격에 취약할 수 있으며, 이는 동기 토큰 패턴이나 SameSite 쿠키 속성과 같은 기법으로 완화할 수 있다.

2. LocalStorage

LocalStorage에 토큰을 저장하는 것은 쉽고 편리하며, CSRF 공격에 대해 안전하다. 하지만 JavaScript를 통해 접근할 수 있으므로 XSS 공격에 취약하다.

3. Private variable

JavaScript 클로저 내의 변수에 토큰을 저장하는 것은 가장 안전한 옵션이다. 이 방법은 토큰이 전역적으로 노출되지 않으며 XSS를 통해 접근할 수 없다. 하지만 이 방법은 페이지 간에 지속되지 않는다 즉, 사용자가 페이지를 이동하거나 새로 고침하면 토큰이 소실된다.
단일 페이지 애플리케이션 (SPA)의 맥락에서는 일반적인 패턴은 메모리에 액세스 토큰을 저장하고 (예: private variable), 만료될 때 새로운 액세스 토큰을 얻기 위해 HttpOnly 쿠키에 저장된 새로 고침 토큰을 사용하는 것이다. 이 방법은 사용성과 보안 사이에서 좋은 균형을 제공한다.

결론

어떤 솔루션도 100% 보안은 아니다. 애플리케이션의 특정 필요에 따라 최선의 방법이 결정된다. 패키지를 최신 상태로 유지하고, 사용자 입력을 sanitize하여 XSS 공격을 방지하며(ex. sanitize-html), 쿠키에 대해 HttpOnly와 Secure 플래그를 사용하고, CSRF 보호를 활성화하여 애플리케이션의 보안을 강화해야한다.

개요

리액트로 개발하던 도중 for와 foreach가 왜 굳이 따로 존재할까 의문이 들었다.

뭔가 foreach가 간결하게 value를 탐색하는것 같아 더 간지가 나지만

for문에서도 of를 사용하면 value로 탐색이 가능하고

foreach문에서도 두번째 인자를 통해 idx를 가져올 수 있다.

이렇게 보면 둘이 같은 기능을 제공하는데 무엇이 다를까?

차이점

동기(sync), 비동기(async)의 차이

for는 동기방식이다

따라서, for문 안에 오류가 나면 에러 위치 이후의 이벤트들은 동작하지 않고 멈춰버린다.

foreach는 비동기 방식이다. - ES6 문법으로, 콜백함수를 뿌린다.

따라서, foreach문 안에 에러가 발생하더라도 멈추지 않고 동작한다.

가변적인 배열이나 리스트 크기를 구할 필요가 없어 복잡한 반복문에 적합하다.

foreach 사용시 주의점

우리는 동기보다 비동기를 사용할 때 상대적으로 더 많은 오류를 만난다.

따라서 비동기 기반인 foreach 사용시에 만날 수 있는 오류들을 미리 알아두어야한다.

1. 원하는 순서와는 다르게 프로그램이 동작할 수 있다.

foreach문 이후에 반복문에서 수정한 변수를 사용할 때,

2. break, return로 반복문을 탈출할 수 없다.

비동기 방식이기 때문에 break나 return를 만나더라도 멈추지 않고 동작한다.

해당 번째의 루프만 진행되지 않고 다른 루프는 여전히 진행된다. 

예시)

개요

웹 UI를 제작하던 도중

오류를 console에서 만나게 되었다.

원인

styled-component 사용 시 발생하는 문제로

<input/> 등과 같이 자식을 가질 수 없는 태그에 자식을 넣었을 때 발생하는 에러이다.

<input type="button" onClick={(e) => handleChange(e)}>{val}</input>

이렇게 input태그 사이에 UI에 나타나길 원하는 값(val)을 넣었더니 에러가 났다. 

해결책

<input type="button" value={val} onClick={(e) => handleChange(e)}></input>

<input></input> 안에 값을 제거해준다.

값을 넣고싶다면 input태그 내 value를 이용한다.