전체 글

React를 사용하여 무한 스크롤(infinite scroll) 기능을 구현하는 방법에 대해 공부해보자. 무한 스크롤은 사용자가 페이지를 스크롤할 때 추가 컨텐츠를 동적으로 로드하는 기능입니다. 이를 통해 사용자 경험을 향상시키고 페이지의 성능을 최적화할 수 있습니다. Intersection Observer란? Intersection Observer는 웹 페이지에서 요소의 가시성을 관찰하고 이벤트를 트리거하는 기능을 제공하는 웹 API입니다. 이 API는 스크롤, 뷰포트 크기 변경, 요소의 크기 변경 등과 같은 요소의 가시성 변경을 모니터링할 수 있습니다. 주로 무한 스크롤, 이미지 로딩 지연, 광고 표시 등 다양한 웹 페이지 기능에서 활용됩니다. Intersection Observer의 주요 메서드: ..

1. AWS란? AWS(Amazon Web Service)는 클라우드 컴퓨팅 서비스를 제공하는 프로바이더 중 하나로서, 현재 전 세계에서 가장 많이 사용되고 있는 클라우드 컴퓨팅 서비스입니다. AWS는 단순 컴퓨팅 자원을 제공해주는 것 뿐만 아니라 이를 편리하게 관리할 수 있는 서비스, 서버리스 서비스 등 수많은 서비스를 확장성, 안정성, 높은 보안수준과 함께 제공해줍니다. 2. AWS S3 AWS의 S3서비스는 Simple Storage Service의 약자입니다. Storage라는 표현 그대로 특정한 파일을 저장하고 인터넷상으로 접근할 수 있게 해주는 서비스입니다. 보통 서비스에 필요한 이미지나 파일등을 저장해두는 용도로 사용하지만 정적인 파일들을 안정적으로 제공할 수 있다는 점을 이용해서 정적 웹사..

클라우드 컴퓨팅 클라우드 컴퓨팅은 컴퓨터를 인터넷을 이용한 클라우드 서비스를 통해서 사용하는 것을 의미합니다. 클라우드 컴퓨팅은 직접 물리적인 서버를 구매해서 관리할 필요 없이 클라우드 서비스 프로바이더를 원하는 사양을 원하는 시간만큼 대여해서 사용할 수 있습니다. 🔅 클라우드 컴퓨팅의 구분 클라우드 컴퓨팅은 제공하는 서비스의 수준에 따라서 3개의 계층으로 구분지을 수 있습니다. 👉 IaaS(Infrastructure as a Service) IaaS(Infrastructure as a Service)는 클라우드 컴퓨팅의 기본 형태 중 하나로, 필요한 인프라를 구축하기 위한 컴퓨터 리소스를 대여하는 서비스를 의미합니다. 이는 가상 머신, 스토리지, 네트워크, 운영 체제 등을 포함합니다. IaaS는 대여받..

1. 서버란? 흔히 “서버에 배포한다”, “서버에 올린다”, “서버가 터졌다” 이런 말들을 많이 들어봤을 것입니다. 서버는 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템으로 컴퓨터 프로그램 또는 장치를 의미한다 서버는 "무언가를 제공해주는 컴퓨터"를 의미합니다. 이는 정보나 서비스를 다른 컴퓨터나 디바이스에 제공하거나 저장하고 관리하는 역할을 합니다. IT 분야에서 서버는 웹사이트, 애플리케이션, 데이터, 서비스 등을 제공하는 중요한 역할을 합니다. 우리는 흔히 인터넷으로 특정한 웹사이트나, 리소스에 접근합니다. 하지만 정확히 말하자면 우리가 접근하는 대상은 웹사이트, 리소스 자체가 아니라 해당 웹사이트와 리소스를 응답해주는 컴퓨터에 접속하는 것입니다. 서비스 운영 : 서비스를 제..

1. Git Hooks Git Hooks는 Git 버전 관리 시스템에서 이벤트를 트리거하고 사용자 정의 스크립트를 자동으로 실행하는 기능입니다. 이벤트는 예를 들어 커밋이 생성될 때, 푸시가 발생할 때, 브랜치가 변경될 때와 같은 다양한 경우가 있습니다. Git Hooks은 이러한 이벤트에 대해 자동화 된 작업을 수행 할 수 있으며, 이를 통해 개발 프로세스 자동화, 코드 품질 보증, 프로젝트 유연성 및 안정성 향상 등을 실현할 수 있습니다. Git Hooks는 pre-commit, pre-push, post-commit, post-merge, post-checkout 등의 다양한 종류가 있으며, 사용자가 직접 만들어서 적용할 수 있습니다. pre-commit: 커밋하기 전에 실행되며, 코드 품질 검사나..

React Hook Form React-Hook-Form은 React 기반의 폼 관리 라이브러리로, 간단하고 효율적인 방식으로 폼 유효성 검사와 상태 관리를 처리할 수 있게 도와줍니다. 이를 통해 개발자는 많은 부분을 직접 구현할 필요 없이 더욱 빠르고 효과적인 폼 개발에 집중할 수 있습니다. "React-Hook-Form은 성능이 우수하고 유연한 사용자 정의 훅을 제공하는 React 폼 라이브러리입니다. 이 라이브러리는 컴포넌트 중심의 개발 방식과 결합하여 매우 간단하고 직관적인 API를 제공합니다. React-Hook-Form을 사용하면 복잡한 폼 유효성 검사 로직을 쉽게 작성하고, 컴포넌트 상태를 간단하게 관리할 수 있습니다." 📚 React-Hook-Form 장점 1. 성능 최적화 React-Ho..

📚 사용자 검색 기능을 구현 사용자 검색 사용자 검색 ⭐️ 태그란? 은 미리 정의된 HTML을 복제하여 여러 번 사용할 수 있는 템플릿 역할을 합니다. 브라우저에 렌더링되지 않고 JavaScript 코드에서 템플릿을 복제하여 동적으로 요소를 생성하는 데 사용됩니다. // main.js const userCardTemplate = document.querySelector("[data-user-template]"); const userCardContainer = document.querySelector("[data-user-cards-container]"); const searchInput = document.querySelector("[data-search]"); // 사용자 데이터 배열 let users..

문제 설명 머쓱이는 행운의 숫자 7을 가장 좋아합니다. 정수 배열 array가 매개변수로 주어질 때, 7이 총 몇 개 있는지 return 하도록 solution 함수를 완성해보세요. 해결 과정 function solution(array) { const count = array.join('').split('7').length - 1; return count; } array에 대해 join('') 메서드를 호출합니다. 이는 배열의 모든 요소를 구분자 없이 하나의 문자열로 연결 결과적으로 얻은 문자열을 '7'을 구분자로 사용하여 split('7') 메서드를 호출 문자열을 7이 나타날 때마다 나누어서 부분 문자열로 만들어 배열로 반환 ➡️ 반환된 배열의 길이는 원래 배열에서 숫자 7의 횟수를 나타냄 split(..