next.js

1️⃣ 프로젝트 기획💡 프로젝트 소개 제안 배경개발 과정에서 생성된 코드는 보안 취약점을 포함할 가능성이 항상 존재합니다. 이러한 취약점은 애플리케이션의 안전성을 위협하고, 사용자 데이터의 무단 액세스, 정보 유출, 심지어 시스템 전체의 침해로 이어질 수 있는 심각한 보안 사고의 원인이 될 수 있습니다. 이를 방지하기 위해, 코드의 보안 취약점을 사전에 식별하고 수정하는 과정은 소프트웨어 개발의 필수적인 부분입니다.제안 내용국내/해외 보안시장 이슈시스템을 제작하여 해킹의 위험이 있는 취약점 정보들을 수집하여 최신 해킹 트렌드처럼 뉴스를 볼 수 있는 웹 기반 플로디텍터 개발 프로젝트를 제안합니다. 💡 주요 기능 취약점 정보 수집 및 게시판 구현데이터 수집 및 처리 시스템 구현보안 취약점 리포트 💡 팀..

📝 데이터 패칭 방법 - CSR, SSR (feat. Next.js)💡 CSR(Client Side Rendering)렌더링이 클라이언트 쪽에서 일어나는 방식 렌더링 주체클라이언트React는 기본으로 CSR 합니다. CSR 동작 과정첫 로딩시유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다.이에 서버는 빈 뼈대만 있는 HTML을 응답으로 보내준다.브라우저가 연결된 JavaScript 링크를 통해 서버로부터 다시 JavaScript 파일을 다운로드한다. (이때, 유저는 아무것도 볼 수 없다.)다운 완료된 JavaScript가 동적으로 페이지를 만들어 브라우저에 띄워준다.첫 로딩 이후 달라진 부분(데이터)만 서버에서 불러온다(Ajax)즉, 서버에서 처리 없이 클라이언트로 보내주기 때문에 자..

💡 용어 정의라우팅라우팅은 사용자가 요청한 URL에 따라 어떤 페이지를 보여줄지를 결정하는 과정입니다.Next.JS는 앱 라우팅 / 페이지 라우팅을 사용하여 URL 경로와 페이지 파일을 직접 연결합니다.예를 들어서 사용자가 ‘/about’ 경로를 입력하면, Next.JS는 해당 경로와 맞는 페이지를 표시합니다.일종의 행위라우터(Router)라우터는 이러한 라우팅을 관리하고 처리하는 기능을 제공하는 도구입니다.Next.JS에서는 페이지 라우터는 ‘next/router’, 앱 라우터는 ‘next/navigation’가 라우터 관리 도구입니다.우리는 해당 도구에서 제공하는 여러 가지 훅, 컴포넌트를 사용하여 페이지를 탐색합니다.일반적으로 라우터는 사용자의 URL을 해석하고 해당 URL에 맞는 컴포넌트를 렌더..

소스코드의 표준화와 자동 포매팅을 수행해, 소스 코드의 품질을 유지하는데 도움을 주는 도구들을 설치해 보도록 하겠습니다. 다음 플러그인들을 설치합니다. typescript-eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import npm install --save-dev prettier eslint typescript-eslint @typescript-eslint/parser@6.1.0 @typescript-eslint/eslint-plugin eslint-config-prettier e..

Next.js 프로젝트를 생성하기 위해서 아래와 같은 명령어를 사용하여 만들었습니다.(pages 폴더 없이 생성하는 명령어) npx create-next-app@latest --ts 버전이 올라가면서 폴더 구조가 바뀐 건지 pages 폴더가 없습니다 이럴 경우, 먼저 빈 폴더를 만들어주시고 그 폴더로 이동해서 아래 명령어를 입력해 주세요.(pages 폴더 생성) npx create-next-app@12.1.0 --typescript ./ 조금만 기다리시면 프로젝트가 생성됩니다. 사진에서 보이는 것처럼 pages폴더가 생성되었습니다. 저는 src 폴더를 새로 만들어서 그 안에다가 pages와 styles를 넣어 정리했습니다. HTML 삽입 미리보기할 수 없는 소스