본문 바로가기

분류 전체보기226

[24] modal에 대해 Modal이란?Modal(모달)은 현재 화면 위에 겹쳐서 나타나는 창으로, 사용자의 주의를 특정 작업이나 정보에 집중시키기 위해 사용됩니다. 모달은 사용자가 창을 닫거나 작업을 완료하기 전까지는 다른 작업을 할 수 없도록 제한합니다. Modal의 특징중앙에 표시됨:화면의 중앙에 고정되어 나타나며, 사용자 주의를 끌기 위해 시각적으로 강조.배경 흐림 효과 (Overlay):모달 뒤의 배경을 흐리게 처리하거나 클릭하지 못하도록 막음.작업 완료 유도:사용자가 명확한 행동(확인, 취소 등)을 취하도록 유도.종류:경고 모달: 확인이나 취소 버튼 제공.폼 모달: 사용자 입력(로그인, 등록 등) 처리.정보 모달: 간단한 정보를 표시. Modal 구현 방법1. HTML + CSS로 간단한 ModalHTML &.. 2024. 12. 21.
[23] Element.scroll 메서드 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft Element: scrollLeft property - Web APIs | MDNThe Element.scrollLeft property gets or sets the number of pixels by which an element's content is scrolled from its left edge. This value is subpixel precise in modern browsers, meaning that it isn't necessarily a whole number.developer.mozilla.org Element.scroll() 메서드Element.scroll(.. 2024. 12. 21.
[22] Debounce란? (Throttle의 차이) Debounce란?Debounce(디바운스)는 연속적으로 호출되는 함수 실행을 제어하여, 특정 시간이 지난 후에만 함수가 실행되도록 만드는 기법입니다. 특정 작업이 불필요하게 자주 실행되는 것을 방지하고 성능을 최적화하는 데 사용됩니다. Debounce의 동작 원리이벤트가 발생하면 타이머가 설정됩니다.설정된 시간 동안 이벤트가 다시 발생하지 않으면, 마지막 이벤트를 기준으로 설정된 시간이 지나 함수가 실행됩니다.만약 타이머가 동작 중에 이벤트가 다시 발생하면, 기존 타이머가 초기화되고 다시 시작합니다. 언제 사용하나?Debounce는 주로 사용자 입력 이벤트나 스크롤 이벤트 등에서 사용됩니다. 예를 들어:검색 입력: 사용자가 입력할 때마다 API 요청을 보내는 대신, 입력이 멈춘 후에만 요청을 보냄.창 .. 2024. 12. 21.
[21] React hook 종류 훅(Hook)은 함수형 컴포넌트에서 상태 관리와 생명주기 로직을 손쉽게 구현하도록 돕는 React의 핵심 기능입니다. 주요 훅과 그 사용법을 아래에 정리해 보겠습니다. 1. 기본 훅 (가장 많이 사용하는 훅)1.1 useState역할: 컴포넌트 상태를 선언하고 관리.사용법:import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); // 초기 상태를 0으로 설정 return ( 현재 카운트: {count} setCount(count + 1)}>증가 );}설명:useState는 배열을 반환합니다.첫 번째 요소: 현재 상태 값 (count).두 번째 요.. 2024. 12. 21.
[20] Next JS란 (SSR, 기본 파일 구조, Pre-rendering) Next JSreact의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와 주는 간단한 프레임워크입니다.리액트로 개발할 때 SPA(single Page Application)을 이용하며 CSR(Client Side Rendering)을 하기 때문에 좋은 점도 있지만, 단점도 있는데 그 부분이 바로 검색 엔진 최적화(SEO) 부분입니다.Client Side Rendering을 하면 첫 페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털 검색에 거의 노출 될 일이 없습니다.하지만 Next.js에서는 Pre-Rendering을 통해 페이지를 미리 렌더링하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 .. 2024. 12. 20.
[19] Github Action을 이용한 AWS S3로 앱 자동 배포하기, IAM란? 1. 앱 배포 방법 강의에서 배포하는 방법은 AWS S3를 이용, CI환경깃허브와 같이 CI 시스템을 구성해주는게 다양하게 있는데, 지금은 Zenkins를 큰 앱을 만들 때 많이 사용함.앞으로는 깃허브를 많이 사용하지 않을까 싶어서 Github Action을 이용하려고 한다. 사용 방법1. 저장소 생성 2. 저장소 연결 3. workflow 생성 4. Actions 클릭 -> node.js.yml 들어가기2. 앱 배포를 위한 AWS S3 버킷 생성하기aws 사이트에 로그인 후, 검색창에 'S3'을 검색합니다. 3. AWS S3 버킷 설정 및 애플리케이션 배포하기4. S3로 앱 자동 배포를 위한 yml 파일 완성하기IAM란? (Identity and Access Management)AWS 리소스에 대한 액.. 2024. 12. 20.

티스토리툴바