🤸‍♀️ 개발 회고

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

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년간 프리티어를 제공한다. 프리티어라고 모두 공짜가 아니라, 일정 유형의 인스턴스에 일정 시간 동안 무료로 제공한다...

매주 월, 목요일 9시 99클럽 스터디가 게더타운에서 진행된다. 이렇게 운영매니저님이 스터디 시간이 가까워지면 오픈채팅방에서 링크를 알려주신다. 해당 링크로 들어간 후 기본 설정을 마치면 이런 귀여운 맵에 들어올 수 있다. 월요일에는 각자 언어/레벨에 해당하는 공간으로 이동해서 클럽장님이 내주시는 문제를 풀고 함께 모각코를 진행하면된다. 문제는 비기너/미들러/챌린저 이렇게 3개로 나뉘어져있다. 나는 미들러, 챌린저 문제를 다 풀어볼 생각이기 때문에 먼저 파이썬/미들러 구역으로 갔다. 이제 오늘의 미들러 문제를 풀어보자 먼저 미들러 첫번째 문제 연습 - 햄버거 만들기 미들러 두번째 문제 연습 - 둘만의 암호 다음으로 챌린저 첫번째 문제 힙(heap) - 이중우선순위큐

메인 페이지 캐러셀 문제 발생 웹 너비 사이즈를 변경했을 때 고정된 이미지 이동 값 때문에 이미지가 밀리는 문제 발생 간단하게 overflow 되는 것을 보이지 않게 처리하고 클릭 이벤트가 발생할 때마다 보여지는 이미지의 위치를 x축으로 이동시키는 식으로 구현했다. 반응형으로 캐러셀을 구현하기에 꽤나 복잡할 것으로 보이고 시간적인 여유가 없어서 라이브러리의 도움을 받기로 했다. 가장 많이들 사용하는 라이브러리는 swiper와 react/slick 정도 일 것 같다. swiper vs react-slick (2024.04.12 기준) npm 패키지의 다운로드 순위를 보여주는 사이트 npm trend를 참고해 보면 다음과 같다. 물론 swiper는 리액트에 국한된 라이브러리가 아니니 개인적인 생각으로는 리액..

성능개선 이어서 들어가 봅시다!  Debounce 적용하기상황프로젝트 검색 기능을 구현할 때, 한 글자씩 입력할 때마다 API 요청하도록 구현했었다.분석위와 같은 방법으로 기능을 구현하면 필요 이상의 요청이 발생할 것이라고 판단했다.검색 input 값을 콘솔창에 출력해봤더니 키워드 완성 전 필요 없는 값들이 입력이 발생할 때 마다 출력되고 있었다. 이렇게 순간적으로 많은 양의 데이터를 서버에 요청하면 서버에 부하가 발생하여 응답 속도가 느려질 것이다.  이 문제에 대한 해결책을 찾기 위해 구글링해본 결과, Debounce라는 기술을 활용할 수 있다고 한다.  Debounce는 검색 기능 등에 자주 활용되는 기술로, 서버 요청 횟수를 효율적으로 개선할 수 있다고 한다. 이를 적용하여 개선해 보자. 💡 D..