Frontend

DOM (문서 객체 모델)이란?문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당합니다. 해당 문서 트리 구조로 표현JavaScript와 DOM, 다른 개념인 이유는?DOM은 자바스크립트 없이 DOM 인터페이스 구현만으로도 DOM을 조작할 수 있기 때문입니다. DOM은 앞서 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스라고 설명했습니다. 조금 더 부연 설명을 하자면 ..

📌Recoil이란? 비교적 간단한 프로젝트엔 무겁게 느껴질 수 있는Redux, 그리고 Redux 는 근본적으로 React를 위해 출시된 것이 아니다. Recoil은 React 자체에 내장된 상태 관리 기능인 ContextAPI를 한계를 보완하고자 facebook에서 개발한 라이브러리이다. 📌Recoil은 무엇이 다를까? 우선 첫번째, Recoil은 배우기 쉽다. API가 단순하고 이미 hook을 사용하고 있는 사람들에게 익숙할 것이다. Recoil을 시작하기 위해서는 어플리케이션을 RecoilRoot로 감싸고, 데이터를 atom이라는 단위로 선언하여 useState를 Recoil의 useRecoilState로 대체해야 한다. 두번째, 컴포넌트가 사용하는 데이터 조각만 사용할 수 있고, 계산된 select..

TailwindCSS란? HTML을 벗어나지 않고도 최신 웹사이트를 빠르게 구축할 수 있습니다 Tailwind CSS는 사용자(개발자)가 앱을 더 빠르고 쉽게 만들 수 있도록 설계된 유틸리티 우선 프레임 워크이다. 유틸리티 클래스를 사용하여 레이아웃, 색상, 간격, 타이포그래피, 그림자 등 을 제어하여 HTML을 벗어나거나 사용자 정의 CSS를 한 줄도 작성하지 않고 완전한 사용자 정의 구성요소 디자인을 만들 수 있다. Tailwindcss 설치하기 설치하는 방법은 프레임워크 별로 달라서 공식 문서를 참고하는게 가장 좋다. 1. 패티지 설치 npm install -D tailwindcss 2.tailwind.config.js 파일 생성 npx tailwindcss init 3. tailwind.confi..

📌redux를 이용해 만든 계산기 기능 import React from "react"; import { createStore } from "redux"; import { Provider, useDispatch, useSelector } from "react-redux"; // Actions const ADD_NUMBER = "ADD_NUMBER"; const ADD_OPERATOR = "ADD_OPERATOR"; const CALCULATE_RESULT = "CALCULATE_RESULT"; const CLEAR_DISPLAY = "CLEAR_DISPLAY"; const addNumber = (number) => ({ type: ADD_NUMBER, payload: { number } }); const ..

Array.from() 사용하기 Array.from() 메서드는 유사 배열 객체(arrat-like object)나 반복 가능한 객체(literable object)를 얕게 복사해 새로운 Array 객체를 만든다. array.from(object, mapFunction, thisValue) object - 배열로 변환할 객체 mapFunction - 배열의 모든 요소에 실행할 함수 thisValue - 함수 내부에서 사용될 this에 대한 값 1. 2. 2번의 예시는 첫번째 인자로 배열을 두번째 인자로 각각의 배열에 적용할 함수를 건내주고 있다. Array.from({length: 20}, () => Array(10).fill(0) ); 위와 같이 사용하면 20*10의 2차원 배열을 리턴한다. ※ 왜 {..

📌Redux란? React 프로젝트의 규모가 커질때마다 자식으로 넘겨주어야 하는 props의 깊이도 점점 깊어진다. 따라서, 어디에서든 내가 원하는 state를 사용할 수 있는 라이브러리 Redux이다. 리덕스를 사용하면 상태값을, 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다. 참고로 Redux는 react의 종속된 도구가 아니다! 📌Redux 설치 npm 명령어를 통해서 라이브러리를 설치해준다. 리액트에서 redux 라이브러리를 더 효율적으로 사용할 수 있는 react-redux 라이브러리도 설치해주는 것이 좋다. npm install redux npm install react-redux 이렇게도 가능 npm install redux react-redux 📌Red..

📌스크롤 유도 가이드 구현 "use client"; import { useState, useEffect, useRef } from "react"; import gsap from "gsap"; export default function page() { const [isSpecialCase, setIsSpecialCase] = useState(false); const handleScrollGuideClick = () => { if (isSpecialCase) { window.scrollTo({ top: 0, behavior: "smooth", //스크롤 부드럽게 }); } }; useEffect(() => { const handleScroll = () => { const isScrollAtBottom = w..

📌가로 스크롤바 구현 page.js "use client"; import { useState, useEffect, useRef } from "react"; import gsap from "gsap"; export default function page() { const scrollSectionRef = useRef(null); const scrollContentRef = useRef(null); useEffect(() => { const scrollSection = scrollSectionRef.current; const scrollContent = scrollContentRef.current; const handleScroll = () => { const scrolled = window.pageYOff..