전체 글226 [29] 리덕스 ver.자세한 설명 Redux에 대하여https://ko.redux.js.org/ Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux자바스크립트 앱을 위한 예측 가능한 상태 컨테이너.ko.redux.js.org 1. Redux자바스크립트 앱을 위한 예측 가능한 상태 컨테이너data의 흐름을 일방향화하여 산재되어 있는 구조와 흐름을 정리해주고, 이에 따른 코드의 유지보수와 무결성을 높여주는 도구일관적으로 동작하고, 서로 다른 환경에서 작동하며, 테스트하기 쉬운 앱을 작성하도록 도와줍니다.Redux는 React와 다른 라이브러리지만, 함께 사용할 수 있습니다.애플리케이션의 모든 상태를 하나의 중앙 저장소(store)에서 관리하는 것이 특징입니다. 2. Redux의 핵심 개념(1) Store애플리케이.. 2025. 1. 8. [28] 리덕스 ver.간단 설명 리덕스는 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리 입니다.리덕스를 사용하면 훨씬 코드가 깔끔해집니다. 리덕스를 이용하면 한 곳에 관리를 합니다. 로직이 깔끔해지고 어떤 것을 구현할 때 쉬워집니다. 리덕스의 흐름?-> 한 방향으로만 흐릅니다. 그림을 간단히 설명하자면, 어떤 사람이 입금(deposit), 출금(withdraw)을 할 수 있다고 가정해보겠습니다.처음에는 0달러인데, 10달러를 입금한다고 했을 때, 0달러라는 데이터를 10달러로 업데이트한 뒤에 10달러가 업데이트 되면 화면에 나타나게 해줍니다. store에 있는 0달러를 10달러로 변경한 다음, 변경된 값을 구독하는 컴포넌트들은 리 렌더링 되게 됩니다. 정리하자면,Action- Action은 간단한 JavaScript 객체입니다.. 2025. 1. 7. [250106] 이슈 트래커 협업 생산성 도구 소프트웨어 개발 방법론에 의한 이슈 트래커, 협업 도구, 생산성 도구 기초목차> 소프트웨어 개발 방법론> 애자일(Agile), 스크럼(Scrum), 칸반(Kanban)> 익스트림 프로그래밍(XP), 데브옵스(DevOps)> 칸반과 데브옵스 결합 소프트웨어 개발 방법론- 소프트웨어를 생산하는 데에 필요한 프로그래밍 개발 과정들을 표준화하여 프로그래머들이 프로그래밍 개발 과정에서 각 개인이 개발 과정에서 일관성을 유지하고 프로그래머들 간의 효과적인 협업이 이루어질 수 있도록 돕기 위한 방법론- 소프트웨어를 어떻게 만들지에 대해 관심을 가지며 단계별 산출물 뿐만 아니라 산출물은 누가 어떤 순서로 어떻게 만들어야 하는지 그리고 어떤 도구를 사용해야 하는지 구체적으로 정의- 소프트웨어 개발에 필요한 반복적인 과정.. 2025. 1. 7. [27] Typescript Type 추가 타입 2024. 12. 21. [26] TypeScript란? https://www.tutorialspoint.com/typescript/typescript_overview.htm TypeScript - OverviewTypeScript - Overview - JavaScript was introduced as a language for the client side. The development of Node.js has marked JavaScript as an emerging server-side technology too. However, as JavaScript code grows, it tends to get messier, making it difficultwww.tutorialspoint.com 2024. 12. 21. [25] Data Fetching 데이터를 가져올 때, getStaticProps, getStaticPaths, getServrSideProps 3가지를 이용한다. 1. getStaticProps 2. getStaticPaths params와 fallback 3. getServerSideProps SSG란? 2024. 12. 21. [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. 이전 1 2 3 4 5 6 7 8 ··· 19 다음
