🤸‍♀️ 개발 회고

🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다. 1️⃣ metadata 이용해서 메타태그 설정Next.js에는 SEO 및 웹 공유성을 개선하기 위해 애플리케이션 메타데이터(예: HTML 헤드 요소 내부의 메타 및 링크 태그)를 정의하는 데 사용할 수 있는 메타데이터 API가 있습니다. 앱에 메타테이더를 추가하는 데는 두 가지 방법이 존재합니다.Config-based : layout.js 또는 page.js 파일에서 정적 메타데이터 객체 또는 동적 generateMetadata 함수를 export 해주기File-based : Next.js는 메타데이터를 명시하기 위한 일..

🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다.   이번 포스팅에서는 LLM Llama3 서버에서 전달받은 비정형 코드 분석 데이터를 파싱하고 포맷팅 하는 기능을 개발하면서 직면했던 문제와 해결 방법을 다룹니다.  1️⃣ 과제 및 목표LLM Llama3 서버에 코드 취약점 분석을 요청한 후, 서버에서 응답받은 결과를 검사 결과 페이지에 표시하는 기능을 담당했습니다.이를 위해 서버에서 응답받는 데이터를 파싱하고, 포맷팅하여 화면에 일관되게 바인딩하는 작업이 필요했습니다. 스팩스페이스에서 제공하는 API 명세서를 보면 다음과 같습니다.스팩스페이스에서 제공한 API 명세서에..

🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다.   이 포스팅은 파일 검사 프로세스에서 발생한 문제를 해결하기 위한 과정의 내용을 담고 있습니다. 백드롭 화면에 가려진 검사 진행 상황 표시 문제를 해결하기 위해 모달 내부로 진행 상태를 옮기고, 이를 통해 사용자 경험을 개선한 방법을 다룹니다. 1️⃣ 프로세스 변경 배경1. 기존 Modal 검사 프로세스의 문제점현재 파일 검사 프로세스에서는 파일들을 선택한 후 검사 버튼을 클릭하면 모달 창이 뜨고, 분석이 진행 중임을 사용자에게 알립니다. 이때 모달 창 뒤에 있는 백드롭 화면에서 전체 파일 검사 진행도가 실시간으로 업데..

🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다.   이 포스팅은 병렬 처리와 ProgressBar UI 도입을 통해 서버 응답 시간을 단축하고 사용자 경험을 개선한 과정에 대해 다룹니다. 또한, 프로젝트를 통해 얻은 성과와 배운 점들을 자세히 설명합니다. 1️⃣ 과제 및 목표스팩스페이스에서 제공하는 LLM Llama3 서버를 활용해 파일 코드의 보안 취약점을 검사하는 기능을 담당했습니다. 해당 기능은 사용자가 검사 페이지에서 원하는 파일들을 선택한 후, "검사하기" 버튼을 클릭하여 파일 검사를 진행할 수 있습니다. 또한, "파일 전체 선택" 버튼을 통해 선택한 폴더 내..

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에 맞는 컴포넌트를 렌더..

2주 차에 배운 핵심 내용을 정리해보고자 한다. React를 사용하는 이유렌더링 퍼포먼스가 좋다렌더링을 최적화해야 하는 이유자바스크립트 요소를 수정(Reflow)하거나 스타일을 수정(Repaint)하면 렌더링이 다시 처음부터 시작하여 많은 시간이 소요된다, 자식 요소를 바꾸려면 부모 요소들도 리렌더링을 해야 한다.렌더링을 최소한으로 하는 것이 프론트엔드의 주요한 과제였다.React의 렌더링 장점Reflow랑 Repaint를 React가 알아서 자동으로 내부적으로 최적화해서 실행해 준다개발자는 비즈니스 로직에 집중할 수 있다.가상돔을 이용해서 렌더링을 자동으로 최적화한다.가상돔가상의 데이터만 가지고 있고, 수정 시 진짜 DOM을 건드리지 않는다렌더링 과정을 거치지 않아 매우 빠르다가상돔 업데이트 과정가상돔..

인스턴스 메모리가 부족해서 로컬에서 파일을 빌드하고 넘겨줄 예정이다. 이 과정을 쉽게 해결할 수 있는 오픈 소스 프로그램을 알아보자.FileZilla파일질라(FileZilla)는 무료로 사용 가능한 오픈 소스 프로그램이다. 워드프레스 운영자들에게 웹 호스팅 서버와의 파일 전송 및 관리를 간편하게 해주는 도구로 널리 사용된다. 1. FileZilla 설치하기FileZilla 공식 웹 사이트에서 최신 버전의 ZileZilla를 다운로드한다.다운로드가 완료되면 설치 파일을 실행한다.설치 프로세스를 진행하고, 사용자 정의 설정이 필요한 경우 적절한 옵션을 선택하여 설치를 완료한다.  Desktop Icon은 생략해도 됩니다. 2. FileZilla 사용법1. 서버 연결 설정FileZilla 실행 후 왼쪽 상단의..

react-app(web server)을 배포하기 위하여 vercel이나 netlify와 같은 무료 호스팅 툴을 이용하여 웹 사이트를 배포할 수도 있지만, 트래픽 제한이 있기 때문에 언젠가 AWS 클라우드를 빌려 배포해야되는 순간이 올 것이다.  현재 무료 호스팅 툴인 vercel을 이용하여 미니쿡을 배포해둔 상태이다. 이 웹 서버를 AWS EC2 인스턴스로 배포해보도록 하겠다. 전체적인 순서는 다음과 같다.웹 사이트 배포AWS 가입인스턴스 생성인스턴스 접속깃 클론 후 빌드 (Git & Node)포트 없애기 (nginx & fowarding) 💡 1. AWS 가입AWS는 가입 1년간 프리티어를 제공한다. 프리티어라고 모두 공짜가 아니라, 일정 유형의 인스턴스에 일정 시간 동안 무료로 제공한다. (인스턴..