전체 글

🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다.   이번 포스팅에서는 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에 맞는 컴포넌트를 렌더..

💡 브라우저의 렌더링 과정용어 정리파싱(구문 분석)프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 실행하기 위해 텍스트 문서의 문자열을 토근으로 분해(어휘 분석)하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다.일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트 코드를 생성하고 실행한다.렌더링HTML, CSS, 자바스크립트로 작성된 문서를 파싱 하여 브라우저에 시각적으로 출력하는 것을 말한다.✨ 브라우저 렌더링 과정HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답 받는다브라우저의 렌더링 엔진은 HTML과 CSS를 파싱 하여 DOM과 CSSOM을 생성하고 이들을..

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

💡 ES6 함수의 추가 기능함수의 구분ES6 이전의 모든 함수는 일반함수, 생성자함수, 메서드 구분 없이 사용할 수 있었다.똑같은 함수를 호출하는 방식에 따라 다르게 사용했다사용 목적에 따라 명확한 구분이 없었음함수의 세가지 종류 (ES6)일반함수함수 선언문이나 함수 표현식으로 정의한 함수ES6이전의 함수와 차이가 없다✨ ES6 메서드✨ 화살표 함수 ✨ 메서드(ES6)메서드 축약 표현으로 정의된 함수ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없다. (new랑 같이 못씀)자신을 바인딩한 객체를 가리키는 내부슬롯을 갖는다//ES6foo() {...}//ES6이전foo : function() {...} ES6이전에는 프로퍼티 값에 익명함수 표현식으로 할당했었는데, 그러면 안 됨 일반함수로 취급하게..

💡 클로저클로저란?클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 렉시컬 스코프(정적 스코프)자바스크립트 엔진은 함수를 어디에 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프) 라 한다.상위 스코프에 대한 참조는 함수 정의가 평가 or실행되는 시점(함수 객체 생성)에 함수가 정의된 위치에 의해 결정된다.함수 선언문 → 호이스팅 때 결정(평가)함수 표현식 → 실행되어 함수 객체 생성될 때 (실행)결정 시기만 다를 뿐 상위 스코프는 정의된 위치에 따라 결정된다.스코프스코프의 실체는 실행컨텍스트의 렉시컬 환경이다스코프 체인외부 렉시컬 환경에 대한 참조를 통해 상위 렉시컬 환경과 연결된다. 함수 객체의 내부 슬롯 [[Environment..