React18 [React] Next.js 관련 면접 질문 및 답변 가이드 개요Next.js 관련 기술 면접 질문과 모범 답변에 대한 정리 글입니다. 면접 준비에 활용하세요.질문 리스트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.. React 2023. 7. 13. 더보기 ›› [React] JWT (JSON Web Tokens)에 대하여 개요이 글에서는 JSON Web Tokens (JWT)에 대해 이야기하려고 한다. JWT는 JSON 객체로 정보를 안전하게 주고받는 표준으로 이 정보들은 디지털 서명되어 있어서 검증하고 신뢰할 수 있다.JWT 제작 시 주의점1. HTTPS는 필수프로덕션에서는 항상 HTTPS를 사용해야 한다. JWT가 전송 중에 암호화되므로, 도청 공격으로부터 안전해진다.2. 비밀키 보안 강화JWT를 서명하는 데 사용하는 비밀 키는 항상 안전하게 보관해야한다. 만약 노출된다면 공격자가 토큰을 위조할 수 있어서 위험하다.3. 토큰 만료 시간 토큰에 만료 시간을 설정하는 것은 꼭 필요하다. 토큰이 노출되더라도 만료 시간이 설정되어 있다면 피해를 최소화할 수 있다.4. 민감한 정보는 패스JWT의 페이로드에 민감한 데이터를 넣지.. React 2023. 7. 4. 더보기 ›› [React] for와 foreach의 차이 개요for와 foreach는 같은 동작을 하는 듯 하지만 차이가 있다. 차이에는 동기, 비동기 차이와 배열 조작 가능 여부 차이가 있다.이 글에서는 이러한 차이점에 대해 알아본다차이점1. 동기(sync), 비동기(async)의 차이for는 동기방식이다따라서, for문 안에 오류가 나면 에러 위치 이후의 이벤트들은 동작하지 않고 멈춰버린다.foreach는 비동기 방식이다. - ES6 문법으로, 콜백함수를 뿌린다.따라서, foreach문 안에 에러가 발생하더라도 멈추지 않고 동작한다.가변적인 배열이나 리스트 크기를 구할 필요가 없어 복잡한 반복문에 적합하다.2. 배열 변경 사항 차이for는 배열을 직접 조작할 수 있다foreach는 배열을 변경하지 않는다.foreach는 주로 배열의 각 요소를 읽기 위한 용.. React 2022. 10. 11. 더보기 ›› [React] input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML` 오류 개요styled-component 사용 시 발생하는 'input is a void element tag and must neither have children nor use dangerouslySetInnerHTML' 오류 해결 방법 안내: input 태그 내 자식 요소 삽입 시 발생하는 문제와 그 해결책을 설명합니다. 올바른 value 속성 사용법 포함.원인styled-component 사용 시 발생하는 문제로 등과 같이 자식을 가질 수 없는 태그에 자식을 넣었을 때 발생하는 에러이다. handleChange(e)}>{val}이렇게 input태그 사이에 UI에 나타나길 원하는 값(val)을 넣었더니 에러가 났다.해결책 handleChange(e)}> 안에 값을 제거해준다.값을 넣고싶다면 input태그 .. React 2022. 10. 6. 더보기 ›› [React] antd table에서 pagination시 rowSelection값 유지하기 개요antd table에서 pagination(페이지 이동)으로 인해 새 데이터셋을 뿌려주게 되면 이전 페이지에서 선택한 rowSelection 배열 값이 초기화된다. 유지하는 법에 대해 알아보자문제점1. 이전 페이지로 돌아갔을 때 선택한 idx정보를 얻을 수 없다.2. 체크 후 제출할 때 현재 페이지에 체크된 정보만 전달되게 된다. 해결책1. 전체 체크된 idx 정보를 저장할 map자료구조를 선언한다.2. 체크 이벤트 때마다 한 페이지의 체크된 리스트를 selectedRowKeys 파라미터로 받아와서 배열에 오버라이팅 한다.3. 체크 이벤트 때마다 2번의 배열을 1번의 배열에 오버라이팅 한다.4. 체크 후 제출할 때나 테이블의 checked UI를 보여줄 때 1번의 배열을 사용한다. 1번의 배열은 전체.. React 2021. 6. 1. 더보기 ›› 이전 1 2 3 4 다음
