티스토리

Seop_E [Frontend Study]

검색하기

블로그 홈

Seop_E [Frontend Study]

seop-e.tistory.com/m

섭이님 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

JavaScript / React - IntersectionObserver IntersectionObserver는 웹 개발에서 아주 유용한 API 이다.이 API는 특정 요소(target)가 뷰포트나 지정한 컨테이너와 교차하는 정도를비동기적으로 감지할 수 있게 해준다.즉 스크롤할 때 요소가 화면에 나타나거나 사라지는 시점을 효율적으로 파악할 수 있도록 해준다.IntersectionObserver를 사용하는 이유성능 최적화- 스크롤 이벤트를 직접 감시하는 방식은 매번 스크롤 이벤트가 발생할때마다많은 연산을 해야하기 때문에 성능 이슈가 발생할 수 있다.IntersectionObsever는 브라우저가 최적화한 방식으로 감지하므로 성능 부담이 적다는 장점이 있다.간편한 API- 요소가 화면에 들어왔는지 여부를 쉽게 감지할 수 있어, lazy loading (이미지나 리소스의 지연 로.. 공감수 1 댓글수 0 2025. 3. 28.
React - useRef useRef는 리액트의 훅(Hook)중 하나로변수를 유지하지만 컴포넌트가 리렌더링될 때 값이 초기화되지 않도록 하는 역할을 한다.const fileInputRef = useRef(null);// handleImageChange 생략 fileInputRef.current && fileInputRef.current.click()}> 파일 선택 위 코드에서 useRef는 fileInputRef를 생성하고 요소의 참조 (reference) 역할을 한다.즉, fileInputRef.current에는 해당 요소가 직접 저장된다. const fileInputRef = useRef(null);▲ fileInputRef라는 변수를 useRef(null)로 초기화하고이 변수는 렌더링이 다시 일어나도 값이 유지된다. ▲.. 공감수 1 댓글수 0 2025. 3. 12.
React, JavaScript - 타임스탬프 날짜 변환 { "id": 1, "title": "결백", "imgUrl": "", "rating": 2, "content": "유명 로펌의 에이스 변호사 ‘정인(신혜선)’은 아빠의 장례식장에서 농약 막걸리 살인사건이 일어났음을 알게 된다. 치매에 걸린 엄마 ‘화자(배종옥)’가 용의자로 지목되고, 그녀의 결백을 주장하기 위해 고향으로 내려가 직접 변호를 맡는다. 사건을 추적하던 중 시장 ‘추인회(허준호)’를 중심으로 한 마을 사람들의 조직적 은폐와 거짓 진술 등 수상한 정황을 포착한 ‘정인’. 그날의 기억을 모두 잃은 ‘화자’의 결백을 입증하기 위해 모든 사람들과 맞서기 시작하는데…! 파헤칠수록 커지는 의혹, 과연 진실은 무엇인가?", "createdAt": 1591714800000,.. 공감수 1 댓글수 0 2025. 3. 4.
React - 평점 등록하기 (별 5개) 코드 function StarRating( {rating, setRating}) { // rating과 setRating을 props로 전달받음 return ( {[...Array(5)].map( // map 함수를 사용하여 5개의 별을 생성 // map 함수의 콜백함수의 인자로 배열의 요소값과 인덱스값을 전달 (_, index) => ( // 배열의 요소값은 사용하지 않으므로 _로 대체하고 배열의 인덱스 값 사용, setRating (index + 1)} // 별을 클릭하면 setRating 함수를 호출하여 rating 값을 변경 > ★ ) )} );}export.. 공감수 0 댓글수 0 2025. 3. 4.
개발 참고 사이트 update : 25/03/03 참고 사이트온라인 코드 편집기(HTML, CSS, JS)CodePen: https://codepen.ioReact 웹 기반 개발 환경Codesandbox: https://codesandbox.ioStackblitz: https://stackblitz.com바벨 REPLhttps://babeljs.io/replReact 공식 홈페이지https://ko.react.devJSX 변환기 (HTML을 JSX로 변환)https://transform.tools/html-to-jsx객체 불변성 라이브러리 immerhttps://immerjs.github.io/immerprops의 타입 검증을 위한 PropTypeshttps://www.npmjs.com/package/prop-typesF.. 공감수 1 댓글수 0 2025. 3. 3.
React- React에서 인라인 스타일 사용하기 리액트에서 컴포넌트 스타일을 적용하는 여러 가지 방법중인라인 스타일(Inline Style)을 사용하는 방법을 알아보자.인라인 스타일 (Inline Style)인라인 스타일은 컴포넌트의 style 속성에 직접 스타일 객체를 전달하는 방식ㅇ이다.리액트에서는 style 속성에 객체(Object) 형태로 스타일을 적용해야 한다.원래는 다음과 같이 HTML 방식을 사용했었다.function InlineStyleExample() { return ( {/* HTML 방식 (잘못된 코드*/} 안녕하세요 )}export default InlineStyleExample하지만 리액트에서는 문자열 (" " 안에 스타일을 작성)로 인라인 스타일을 적용할 수 없다.결국 다음과 같이 오류가 발.. 공감수 0 댓글수 0 2025. 2. 28.
React - React의 렌더링 방식 : State State가 변경될 때 React는 어떻게 렌더링할까?React는 가상 DOM (Virtual DOM)을 기반으로 효율적인 렌더링을 수행하는 프레임워크이다.※가상 (Virtual) DOM ?리액트가 효율적으로 UI를 업데이트하기 위해 사용하는 가상의 DOM 구조이다.기존 웹 브라우저는 일반적인 HTML DOM에서 직접 수정하면 속도가 느려지고DOM 조작이 많아질 수록 성능이 크게 저하되는데여기서 가상 DOM의 역할이 중요시하게 된다.리액트는 가상 DOM을 메모리에 저장하고 실제로 DOM을 직접 조작하지 않으며여기서 놀라운점은 상태(state)변경이 발생하면 가상 DOM에서 먼저 변경된 부분을 적용한 후,실제 DOM과 비교하여 최소한의 변경만 적용한다.이로써, 브라우저의 성능을 최적화하면서도 빠른 UI 업.. 공감수 0 댓글수 0 2025. 2. 27.
React - State State(상태)는 리액트에서 컴포넌트 내부에서 관리되는 동적인 데이터를 의미한다.사용자 입력, API 응답, 버튼 클릭 등과 같은 이벤트에 따라 변할 수 있는 값을 저장하는 공간으로,state가 변경될 때 마다 리액트는 자동으로 컴포넌트를 재렌더링하여 UI를 최신 상태로 유지한다.State 사용방법▼ 함수형 컴포넌트에서 useState 사용하기import { useState } from "react"function Counter() { // count 상태(state)와 이를 변경할 수 있는 setCount 함수 선언 const [count, setCount] = useState(0) return ( 현재 카운트 : {count} setCount(count + 1)}>증.. 공감수 0 댓글수 0 2025. 2. 26.
React - children props 리액트에서는 모든 컴포넌트가 props를 받을 수 있지만children prop은 특별한 역할을 하는데컴포넌트 태그 내부에 있는 내용을 동적으로 전달할 때 사용하고레이아웃 컴포넌트, 재사용 가능한 UI 요소 등을 만들 때 매우 유용하다. 기본적으로는 props는 부모 -> 자식으로 데이터를 전달하는 역할을 한다고 했을 때,children prop은 컴포넌트 태그 사이의 내용을 가져오는 역할을 한다.즉 children을 사용하면 부모 컴포넌트에서 원하는 내용을 동적으로 넣을 수 있다. children prop 기본 사용법// Card.jsxfunction Card({ children }) { return ( {/* children을 통해 태그 내부의 내용을 랜더링 */} {chi.. 공감수 0 댓글수 0 2025. 2. 21.
React - props 앞서 공부했던 내용들 중에 다양한 예시로 props를 사용했었다props가 도대체 무엇이고 어떻게 사용하는지 이 글을 통해 알아보자. 리액트에서는 컴포넌트가 재사용 가능해야 하므로특정한 값(데이터)을 외부에서 받아서 동적으로 다룰 수 있어야 한다.이때 외부에서 값을 전달해주는 역할을 하는 것이 바로 props이다.React props의 기본 개념props (프로퍼티)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이며리액트에서는 컴포넌트 간에 데이터를 주고 받을 때직접 값을 수정하는 것이 아니라,props를 통해 데이터를 전달해 줘야한다. 만약 props없이 고정된 값이라면 다음과 같은 예시를 들 수 있다.// Greeting.jsxfunction Greeting() { return ( .. 공감수 0 댓글수 0 2025. 2. 20.
React - 리액트 컴포넌트 (React Component) 리액트 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드블록이다.컴포넌트를 사용하면 코드를 모듈화할 수 있어 유지보수가 쉬워지고재사용성이 높아지는 특징을 갖고 있다.React 컴포넌트 종류리액트 컴포넌트는 두 가지 주요 컴포넌트 유형이 있다. 1. 함수형 컴포넌트 (Functional Component) 함수형 컴포넌트는 React 16 이후의 최신 방식이며 function 키워드를 사용한다.function Greeting() { return ( 안녕하세요 )}export default Greeting; 2. 클래스형 컴포넌트 (Class Component)클래스형 컴포넌트는 16 이전에는 많이 사용했지만 지금은 함수형 컴포넌트와 hook(useState, useEffe.. 공감수 0 댓글수 0 2025. 2. 19.
React - JSX에서 자바스크립트 사용하기 JSX는 리액트에서 UI를 구성하는 기본적인 문법으로자바스크립트 코드 안에서 HTML과 유사한 구조를 작성할 수 있도록 도와준다.하지만 실제로는 자바스크립트의 확장 문법이므로 몇 가지 차이점을 이해해야한다.천천히 알아보자.1. 기본 JSX 문법 이해하기JSX는 자바스크립트의 확장 문법이므로return문 안에서 HTML과 비슷한 코드를 작성할 수 있다. ▼ HTML 코드처럼 JSX 작성하기function App() { return ( Vite + React )}export default App는 프래그먼트(Fragments) 이며 이전 글을 참고하면 되고h1 태그는 마치 HTML을 작성하는 것처럼 보이지만 실제로는 JSX 문법이다.2. JSX에서 자바스크립트 표현식 사용하기JSX.. 공감수 2 댓글수 0 2025. 2. 17.
React - 프래그먼트(Fragments) 프래그먼트는 Reaxt에서 여러 개의 요소를 그룹화 할 때 사용되는 빈 태그이다.보통 JSX에서는 반드시 하나의 부모 요소가 있어야 하는데이때 불필요한 div 태그를 추가하지 않고도 여러 요소를 그룹화할 수 있도록 도와준다. JSX에서는 반드시 하나의 부모 요소가 필요하다고 이전 글에서 설명했는데다시한번 복습하자면// 잘못된 태그 (부모 태그 없이 여러 요소 반환)return ( 안녕하세요 반가워요 ); // 올바른 태그 (부모 태그로 감싸기)return ( 안녕하세요 반가워요 );이렇게 JSX에서는 여러 개의 요소를 감싸는 부모 태그가 반드시 필요하다.하지만 태그가 필요 이상으로 많아지게 되면 복잡해지고CSS 스타일링에 영향을 줄 수있다.이 문제를 해결하기위해 프래그.. 공감수 0 댓글수 0 2025. 2. 13.
React - JSX JSX (JacaScript XML)은 React에서 사용하는 특별한 문법으로자바스크립트 안에서 HTML과 유사한 문법을 사용할 수 있도록 만든 기술이다.일반적으로 자바스크립트에서 DOM을 조작할 때는 document.createElement 와 같은 메소드를 사용해야 하지만JSX를 사용하면 HTML처럼 직관적으로 UI를 구성할 수 있다. ▶ JSX를 사용하지 않는 React 코드JSX 없이 순수 자바스크립트로 React를 사용하려면UI 요소를 만들 때 React.createElement()를 사용해야 한다.그 예시는 다음과 같다.import {createRoot} from "react-dom/client";const element = React.createElement("h1",null, "Hello.. 공감수 1 댓글수 0 2025. 2. 12.
React - main.jsx (index.js)에서 하는 일 React 18 버전 이전에는 index.js파일이 존재했는데현재 18버전 이후 main.jsx파일로 대체 되었다. 보통 index.js에서 ReactDOM.render()를 사용해서React 애플리케이션을 root에 렌더링을 했었다.import React from "react";import ReactDOM from "react-dom";import App from "./App";ReactDOM.render( , document.getElementById("root")); React 18 이후부터는 ReactDOM.createRoot() 방식이 도입되면서Vite 프로젝트에서는 index.js 대신 main.jsx가 기본 파일명으로 사용된다. 파일이 변경된 이유는 다음과 같다. Vite의 기.. 공감수 0 댓글수 0 2025. 2. 12.
React - 리액트 프로젝트 세팅 주사위 게임 만들어보기 위해 프로젝트를 다시 처음부터 세팅해보자PJ_dicegame 이라는 파일하나 만들고 터미널을 열어서 vite + react 설치를 진행한다.npm create vite@latest . -- --template reactnpm install프로젝트를 설치하고나면 위와 같이 웹 개발 파일들이 미리 만들어지는데모든 파일을 다 사용할 것이 아니기 때문에 필요 없는 것들을 지우는 작업을 해야한다.▼ 삭제해야하는 파일들Public - 파비콘 파일src - assets - 아이콘 파일PJ_dicegame - App.css, index.css 파일 ▼ 수정해야 하는 파일들 1. index.html 파일에서는 다음과 같이 웹 언어와 title을 수정해준다. 2. App.jsx 파일에서는 다.. 공감수 0 댓글수 0 2025. 2. 12.
React - 리액트 개발자 도구 살펴보기 HTML, CSS, 자바스크립트를 다뤄본 적이 있다면대부분 크롬 브라우저의 개발자 도구를 사용했을 것이다.개발자 도구에서 요소 (Elements) 탭에 들어가면현재 페이지의 HTML 코드를 확인할 수 있는데HTML 태그들과 스타일 정보를 볼 수 있다. 마찬가지로 리액트도 현재 페이지에 있는 리액트 코드를 검사할 수 있는 도구가 있는데리액트 개발자 도구를 설치해보자. 구글 검색창에 React Developer Tools 라고 검색하고오른쪽 상단에 "Chrome에 추가"를 클릭하여 확장 프로그램을 설치해준다.그런다음 다시 개발자 도구에 들어가보면Components와 Profiler 라는 새로운 탭이 생겼다.이 두 탭은 리액트로 만들어진 웹페이지에서만 나타나며리액트 페이지를 관리 할 수 있게 된다. 다시 리액.. 공감수 0 댓글수 0 2025. 2. 12.
React - 리액트 프로젝트 생성과 실행 리액트 프로젝트 만드는 방법은 여러가지가 있는데그 중에서 이번에는 리액트 공식 사이트에서 소개하는 방식인프로젝트 생성에 Vite라는 도구를 사용할 것이다.우선 React_Study라는 이름의 파일 하나를 생성한다.생성 후 VSCode 내에서 터미널을 열어주고 [Ctrl + `]다음과 같이 두 가지 명령어를 입력해준다.1. 프로젝트 생성 명령어npm create vite@latest . -- --template reactnpm install위와 같이 설치할건지 물어보면 y를 눌러 다음으로 넘어고그런다음 프로젝트 이름을 작성해준다. (본인 자유)이어서 패키지 네임을 작성해주고프레임워크를 React 로 설정해준다. 마지막으로 npm install을 입력해주면 설치가 진행된다.설치가 끝나면 다음과 같이 프로젝트.. 공감수 1 댓글수 0 2025. 2. 11.
(1)~ (6) Web data storage - 쿠키, 웹 스토리지 정리 보호되어 있는 글입니다. 공감수 0 댓글수 0 2025. 2. 11.
(6) Web data storage - 테마 저장, 장바구니 구현하기 테마 저장 구현하기사용자가 선택한 색상을 저장하고 다시 불러올 수 있도록 해야하고사용자는 배경색과 테두리 색상을 변경할 수 있으며,변경된 색상은 로컬 스토리지 (localStorage) 에 저장되어야한다. ▶ html, css 파일더보기 테마 설정 채우기 테두리 @font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); font-weight: normal; fon.. 공감수 1 댓글수 0 2025. 2. 10.
(5) Web data storage - 웹 스토리지 다루기 자바스크립트 코드를 사용해 웹 스토리지를 다루는 방법을 알아보자. 로컬 스토리지와 세션 스토리지는 모두 Web Storage API를 따르며, 동일한 방식으로 사용할 수 있다. 이 API는 Storage 객체의 메서드인 getItem(), setItem(), removeItem() 등을 제공해 데이터를 쉽게 관리할 수 있다. 로컬 스토리지▶ HTML 파일 예시로컬 스토리지를 테스트하기 위해 다음과 같은 HTML 파일을 사용한다. 웹 스토리지 테스트 초반에 localStorage를 확인해보면 데이터가 저장되어있지 않는 것을 확인할 수 있다. ▶ 데이터 추가하기localStorage.setItem(이름, 값)을 통해 데이터를 추가할 수 있다.localStorage.setItem('language', 'k.. 공감수 1 댓글수 0 2025. 2. 7.
(4) Web data storage - 웹 스토리지 쿠키에 이어 또 다른 웹 브라우저의 저장소인 웹 스토리지는쿠키의 단점을 보완하기 위해 쿠키 이후에 새롭게 나온 저장소이며로컬 스토리지와 세션 스토리지 두 가지 종류가 있다.이 두 가지 역시 쿠키와 같이 '이름(Key)과 값(Value)의 쌍'의 형태로 데이터를 저장한다.로컬 스토리지: 사용자가 브라우저를 닫더라도 저장된 데이터가 유지된다.예를 들어 인터넷 댓글 창이나 메신저 창에서 작성 중이던 메시지가 전송되지 않은 상태로 페이지를 닫더라도, 다시 해당 페이지를 열었을 때 메시지가 그대로 남아있는 경우가 많으며 이는 로컬 스토리지를 활용한 사례이다.세션 스토리지: 브라우저 탭을 닫을 때 데이터가 삭제되고 임시 데이터 저장에 적합하다.로컬 스토리지와 셔선 스토리지의 자세한 내용은 잠시 후에.. ▶ 디스코드.. 공감수 1 댓글수 0 2025. 2. 7.
(3) Web data storage - 쿠키 (Cookie) 다루는 함수 만들기 지금까지는 개발자 도구의 콘솔 창에서 쿠키를 확인하거나 변경하는 작업을 해 보았는데 특정 쿠키가 있는지 확인하거나,내가 원하는 쿠키의 값을 가져오거나,쿠키를 추가/삭제하는 작업 등을 하는 함수를 만들어 두면필요할 때 편리하게 가져다 쓸 수 있다.쿠키가 있는지 확인하는 함수먼저 특정 쿠키가 있는지 확인하는 코드를 작성한다.function isCookieExist(name) { const encodedName = encodeURIComponent(name); return document.cookie .split('; ') .find((cookie) => cookie.startsWith(encodedName)) ? true : false;}코드를 하나씩 살펴보면먼저 document.. 공감수 2 댓글수 0 2025. 2. 6.
(2) Web data storage - 쿠키 (Cookie) 추가/수정/삭제 자바스크립트로 쿠키 추가하기쿠키를 추가하는 방법은 매우 간단하다다음과 같이 document.cookie에 새로 추가하고 싶은 쿠키의 값을 넣어주면 된다.document.cookie = 'language=korean'; 여기서 봐야할 것은 document.cookie 자체를 덮어 쓰는 것이 아니라새로운 쿠키를 추가만 한다는 점이다.보기엔 document.cookie 라는 변수에 새로운 값을 할당하는 것처럼 보이지만사실 내부적으로는 조금 다르게 동작한다.자바스크립트로 쿠키 수정하기만약 현재 있는 쿠키의 값을 변경하고 싶으면변경하고 싶은 쿠키의 이름에 새로운 값을 넣은 문자열을document.cookie에 넣어 주면 된다. 방금 language라는 쿠키의 값을 korean으로 넣었는데 english로 바꾸고 .. 공감수 1 댓글수 0 2025. 2. 6.
(1) Web data storage - 쿠키 (Cookie) 상품 후기를 쓰고 있었는데 잘못해서 브라우저 창을 닫아 버려서다시 창을 켜고 들어갔더니 작성했던 내용이 다 날아갔다면?사이트 설정을 다크 테마로 바꾸고 언어를 한국어로 설정했는데, 사이트에 다시 접속할 때마다 그 모든 설정들이 초기화된다면?하루에도 몇 번씩 접속하는 사이트인데 들어갈 때마다 공지 팝업창이 떠서 매번 닫아야 한다면? 장바구니에 사고 싶은 상품을 넣어 놨는데 새로고침을 했더니 그만 장바구니가 싹 날아가 버린다면? 이러한 사용자 경험이 계속되면 기분이 좋지 않을 것이다.다행히도 요즘 대부분의 사이트들은 이렇지 않고입력 중이던 내용은 새로고침을 해도 남아 있는 경우가 많고, 한 번 해 놓은 설정은 계속 유지된다.광고 팝업에도 '오늘 하루 동안 보지 않기' 이런 옵션이 있어서 체크를 하면 하루 .. 공감수 4 댓글수 0 2025. 2. 5.
(8) ~ (9) axios 정리 보호되어 있는 글입니다. 공감수 0 댓글수 0 2025. 2. 5.
(9) Sending a request with JavaScript - axios 오류 처리 ▶ 다음과 같은 openAPI를 사용합니다.더보기실습용 서버 호스트실습용 서버 호스트입니다.learn.codeit.kr설문 응답사용자가 제출한 MBTI와 선호 색상 데이터를 저장합니다.엔드포인트 POST /api/color-surveys GET /api/color-surveys GET /api/color-surveys/:idDELETE /api/color-surveys/:id PATCH /api/color-surveys/:id설문 응답 객체속성id: integer 설문 응답 객체에 대한 고유 식별자mbti: string 응답자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다.colorCode: string 응답자의 선호 색상 코드: HEX 코드만 허용하고 # 유무와 대소문자.. 공감수 0 댓글수 0 2025. 2. 5.
(8) Sending a request with JavaScript - axios 문법 ▶ 다음과 같은 openAPI를 사용합니다. 더보기실습용 서버 호스트실습용 서버 호스트입니다.learn.codeit.kr설문 응답사용자가 제출한 MBTI와 선호 색상 데이터를 저장합니다.엔드포인트 POST /api/color-surveys GET /api/color-surveys GET /api/color-surveys/:idDELETE /api/color-surveys/:id PATCH /api/color-surveys/:id설문 응답 객체속성id: integer 설문 응답 객체에 대한 고유 식별자mbti: string 응답자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다.colorCode: string 응답자의 선호 색상 코드: HEX 코드만 허용하고 # 유무와 대소문.. 공감수 2 댓글수 0 2025. 2. 4.
(1) ~ (7) fetch 정리 보호되어 있는 글입니다. 공감수 0 댓글수 0 2025. 2. 4.
(7) Sending a request with JavaScript - 웹에서 리퀘스트 확인(Network 기능) ▶ 다음과 같은 openAPI를 사용합니다.더보기실습용 서버 호스트실습용 서버 호스트입니다.learn.codeit.kr설문 응답사용자가 제출한 MBTI와 선호 색상 데이터를 저장합니다.엔드포인트 POST /api/color-surveys GET /api/color-surveys GET /api/color-surveys/:idDELETE /api/color-surveys/:id PATCH /api/color-surveys/:id설문 응답 객체속성id: integer 설문 응답 객체에 대한 고유 식별자mbti: string 응답자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다.colorCode: string 응답자의 선호 색상 코드: HEX 코드만 허용하고 # 유무와 대소문자.. 공감수 4 댓글수 0 2025. 2. 4.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.