전체 글 (35) 썸네일형 리스트형 React React라이브러리와 프레임워크 차이점프레임워크는 모든 것들이 들어 있는 주머니이다. 대신 틀이 있기 떄문에 그 틀에 맞춰어 사용해야 한다.라이브러리는 단 한 가지 문제를 해결하기 위해서 있는 것이다.내가 원하는 것을 골라 쓸 수 있다. 페이스북 에서 UI를 해결하기 위해서 만들었다.리액트가 가지고 있는 철학UI를 표기하고 이벤트에 반응하는 라이브러리다.UI들을 컴포넌트 단위로 보여주고 이벤트로 반응하는 거라고 볼 수 있다.독립적이다.CSR(클라이언트 사이드 렌더링)웹팩이 내가 작성한 코드와 리액트가 동작하기 위한 코드를 압축해서 보여준다.UI를 표기 해준다.리액트 이벤트이벤트 전파 시 함수를 연결해야 해줘야하고 리액트가 한 단계 감싸서 이벤트를 한다.함수는 메모리 셀에 참조 값이기 때문에 함수를 연결을.. 프론트엔드 아키텍쳐 아키텍쳐아키텍쳐란?많은 옷을 정리 할 떄에 옷장에다가 색깔별 또는 그에 맞게 정리하는 것 같은 느낌이다.아키텍처라는 것은 좋은 구조를 만드는 것이다.인터페이스는 서버가 어떤 데이터를 요청받고, 어떤 형식으로 응답할지를 정하고, 클라(프론트엔드)는 그 규격에 맞춰 데이터를 요청하고 응답을 처리한다.MVC란?View(화면): 웹 프론트에서는 대개 최종적으로 HTML과 CSS로 만들어지는 결과물을 의미한다.Model(데이터): 어딘가에는 실제의 데이터가 반영이 되어 나타나야 한다. 이러한 데이터를 주관하는 영역을 Model이라고 한다.JS의 Object일 수도 있고, 서버의 API로 받는 데이터일수도 있고, 서버에 있는 DB일 수도 있다."Model"에서 말하는 객체 형식이란, 자바스크립트의 객체(Object.. 쿠키란 쿠키쿠키란?쿠키는 웹 서버가 생성하고, 이를 웹 브라우저로 전송하는 작은 정보 파일, 쿠키는 브라우저가 수신하여 사용자 세션을 추적하거나, 사용자 경험을 개선하는 데 사용 웹 사이트가 쿠키를 사용하면, 사용자의 다음 방문 때 더 맞춤화된 콘텐츠나 서비스를 제공할 수 있다.쿠키의 주요 기능사용자 정보 제공: 쿠키는 사용자의 기본 정보를 저장하여 사이트가 사용자의 요구에 맞게 개인화된 서비스를 제공하는 데 도움을 준다.장바구니 추적: 전자상거래 사이트에서는 사용자가 장바구니에 담은 상품을 기억하는 데 쿠키를 사용보안: 쿠키는 로그인 정보를 저장하거나 사용자의 인증을 처리하는 데도 사용쿠키의 저장 위치브라우저 내 저장: 쿠키는 웹 브라우저에 저장되며, 예를 들어 크롬에서는 **"쿠키스"**라는 파일에 저장, .. XML, XHTML XML, XHTML, HTML이란HTML(하이퍼텍스트 마크업 언어) HTML은 하이퍼텍스트 마크업 언어 이는 웹 페이지를 구조화하고 웹 브라우저에서 표시할 수 있도록 돕는 마크업 언어 프로그래밍 언어가 아니다는 점에서 중요한 차이점 HTML은 여러 엘리먼트(요소)로 이루어져 있다. 예를 들어 p, div, a 등이 있다. 태그는 웹 페이지 내에서 하이퍼링크를 생성하거나, 텍스트를 강조하거나, 다른 콘텐츠를 정의하는 역할 HTML의 구조 여는 태그와 닫는 태그: HTML 태그는 여는 태그와 닫는 태그로 구성 여는 태그가 있으면 반드시 닫는 태그도 있어야 한다. 주석: HTML에서 주석은 형식으로 작성되며, 주석은 브라우저에 표시(x) XML (확장 가능한 마크업 언어) .. 시맨틱태그란? 시멘틱 태그시맨틱 태그란?시맨틱 태그(Semantic Tags)는 HTML에서 웹 페이지의 구조와 콘텐츠에 대한 명확한 의미를 담고 있는 태그들을 의미합니다. 이 태그들은 페이지의 각 부분이 무엇을 나타내는지 명확히 정의하여, 개발자와 사용자 모두에게 더 나은 웹 경험을 제공합니다.시맨틱 태그의 특징가독성: 시맨틱 태그는 페이지 구조를 더 이해하기 쉽게 만듭니다. 예를 들어, header는 사이트의 헤더 영역을 나타내고, footer는 푸터를 나타내기 때문에 코드의 가독성이 높아집니다.유지 보수 용이: 웹 페이지를 수정할 때 각 부분의 역할이 명확히 구분되므로, 필요한 부분만 쉽게 수정할 수 있습니다.검색엔진 최적화(SEO): 검색엔진은 시맨틱 태그를 활용하여 콘텐츠의 의미를 더 잘 이해합니다. 예를 들.. React-player 라이브러리 Video를 재생시켜주는 라이브러리 설치 방법npm i react-player사용 방법 동영상을 보여줄 주소 입력하기 물론 css도 설정이 가능하다. loop는 동영상이 끝나면 자동으로 다시 시작하는 옵션 controls는 기본 HTML5 비디오 컨트롤을 사용할지 여부를 설정하는 옵션, controls가 true일 경우, 플레이어에 재생/일시정지, 볼륨 조정 등의 기본 컨트롤이 표시 구현 화면출처: react-player 패키지 React Potal Modal 구현하기 처음 모달을 구현할 떄에 넷플릭스 Modal이 무슨 순간이동 마냥 요소가 생겨났다.삽질처음에 modal을 구현할 때 슬라이드 형태에 ul, li로 넣었는데 여기서 열 때마다 모달이 걸려있어가지고 넷플릭스처럼 크게 구현을 하지 못했다.이걸 구현하는데 포지션, px, 등을 써봤지만 원하는 대로 구현이 불가능했다. 이것 떄문에 3시간을 삽질을 했다....😂 저처럼 삽집을 하지말라고 글을 남겨요..Potal을 사용하면 된다. 게임에 포탈같다.PotalcreatePortal을 사용하면 일부 자식을 DOM의 다른 부분으로 렌더링할 수 있습니다.포탈을 사용하면 다른 DOM 트리에 자식을 렌더링할 수 있습니다.React의 상태나 이벤트 처리는 그대로 유지하면서, 렌더링 위치만 변경하는 것포탈을 사용하는 이유스타일링:.. React scroll시 css 변경하기 넷플릭스에 헤더 스크롤 시 변경되는 거 구현하기Code import React, { useEffect, useRef, useState } from 'react'export default function useScrollY() { // requestAnimationFrame 시스템이 프레임을 그릴 준비가 되면 애니메이션 프레임을 호출하여 웹을 원활하고 효율적으로 그려준다. const [open, setOpen] = useState(false) const topRef = useRef(null) useEffect(() => { const handleScroll = () => { if (topRef.current) { cancelAnimationFrame(topRef.curr.. 이전 1 2 3 4 5 다음
