전체 글

1️⃣ metadata 이용해서 메타태그 설정Next.js에는 SEO 및 웹 공유성을 개선하기 위해 애플리케이션 메타데이터(예: HTML 헤드 요소 내부의 메타 및 링크 태그)를 정의하는 데 사용할 수 있는 메타데이터 API가 있습니다. 앱에 메타테이더를 추가하는 데는 두 가지 방법이 존재합니다.Config-based : layout.js 또는 page.js 파일에서 정적 메타데이터 객체 또는 동적 generateMetadata 함수를 export 해주기File-based : Next.js는 메타데이터를 명시하기 위한 일련의 파일들을 갖고 있다.favicon.ico, apple-icon.jpg , icon.jpg : 파비콘 및 아이콘 활성화opengraph-image.jpg , twitter-image...

Github 계정에 로그인하고 Add Project를 클릭하면 빌드 가능한 프로젝트들이 나와있습니다.현재 빌드하려고 하는 프로젝트가 목록에 없는 상황입니다.  1. 우선, 프로젝트 검색창에 아무 값이나 입력해 주세요 저는 프로젝트 명의 일부분인 flaw라고 입력했습니다.  2. Configure GitHub App 버튼을 클릭하세요.  3. Github 계정 옆에 Configure을 클릭하세요.  4. 스크롤을 내려서 Select repositories에서 빌드할 프로젝트를 선택합니다.

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..

💡 this 키워드this란?자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.this 바인딩은 **함수 호출 방식에 의해 동적으로 결정**된다. ✨ 함수 호출 방식과 this 바인딩함수가 어떻게 생겼든 간에 이 함수를 어떻게 호출하느냐에 따라 안에있는 this에 바인딩되는 값이 달라진다!!// foo 함수const foo = function(){ console.log(this) } 함수 호출 방식1. 일반 함수 호출 : this → 전역객체       1. 일반 함수로 호출된 모든 함수(중첩 함수, 콜백 함수 포함)// 일반 함수로 호출foo() // this => 전역객체  ..