KodeVvon's World

DOM createElement로 생긴 요소는 메모리에만 가상으로 들어가 있다 때문에 append로 실제 화면에 출력되게 추가 처리를 해줘야한다 append는 지정한 요소 뒤, prepend는 지정한 요소 앞에서 생성 요소가 수정/생성/제거되면 브라우저는 변경된 것을 보여주기 위해 랜더링을 한다 요소 1개만 변하더라도 브라우저의 랜더링이 발생해 메모리 문제가 생김 -> 느려진다! 가상 DOM 위의 요소제어/랜더링 문제를 개선하고자 나온 방법(나름 신기술) 가상돔의 경우 이미 DOM을 메모리에 복제 후 이벤트 발생 시 메모리 내 DOM에 적용한다 메모리 DOM의 변경 사항을 실제 DOM과 비교한다 가상돔과 실제 DOM의 차이점만 파악 후 변경된 것들을 한번에 호출해 실시간으로 적용한다

모듈과 번들러 모듈 특정 기능을 가진 작은 코드 단위 기능이 비슷한 것들을 모아서 하나의 의미 있는 파일로 관리하는 것 커다란 장치나 배열 내에서 비교적 작은 크기의 부품 독립적으로 설치되고, 교체되고, 사용될 수 있도록 설계된 구성요소 번들러 의존성이 있는 모듈 코드를 하나(또는 여럿)의 파일로 만들어주는 도구 지정한 단위로 파일들을 패키지로 만들어주는 도구 모듈 번들러 웹개발에 있어 앱을 구성하는 자원(html,css,javascript,image 등)을 모두 각각의 모듈로 보고, 이를 모두 합쳐주는 도구 하나의 파일(또는 소량의 파일)로 결과물을 만들어주기 때문에 빠른 로딩 속도, 높은 성능을 얻을 수 있음 Parcel, Rollup, Webpack등이 있다 Parcel 빠르고 간단하게 앱을 만들 ..

패럴랙스 스크롤링 Parallax Scrolling 배경 이미지는 느리게 움직이게 하고, 사물 이미지는 빠르게 움직이도록 하는 것 원근감, 입체감을 느낄 수 있게 만드는 디자인 기법 웹에서는 스크롤에 따라 요소/배경에 시간차 애니메이션을 적용한다 스크롤을 할 때 개체마다 움직이는 속도를 다르게 적용하기도 한다 요소들간에 서로 다른 속도값을 가지게 만들어 역동성을 부여한다 참고 패럴랙스 스크롤링이 적용된 사이트

Web Storage API Web Storage API란 브라우저에서 제공하는 데이터를 저장 기능이다. '키'-'값'의 형태를 가진다. 저장된 데이터들은 서버로 전송하지 않기 때문에 원하는 정보만 서버로 보내서 저장할 수 있다! ​세션스토리지, 로컬스토리지 두 가지로 분류된다. 분류에 맞게 .sessionStorage와 .localStorage로 사용가능하다. 세션스토리지 페이지 세션이 유지되는 동안 브라우저가 저장공간을 제공(브라우저 탭이 닫히거나 꺼지면 데이터가 사라진다!) 저장 공간이 최대 5MB, 쿠키보다 크다 로컬스토리지 저장 공간이 쿠키, 세션스토리지보다 크다 유효기간 없이 데이터를 저장(세션스토리지와 다르게 브라우저를 닫고 열어도 데이터 남아있음) 자바스크립트를..

유의적 버전(SemVer) Semantic Versioning이라고도 함 유의적 버전, 유의적 버저닝, 유의미 버저닝, 의미 있는 버전 부여, 시맨틱 버저닝, 시맨틱 버전 관리 등을 의미 외부에서 배포중인 공개 API를 선언 후 라이브러리의 버전을 올리는 것 메이저.마이너.패치 순의 형식을 사용 버전 형식 뒤 '정식 출시전'이나 빌드 메타데이터를 위해 표시하는 레이블은 추가할 수 있음 메이저(MAJOR) : 기존 버전과 호환되지 않을 때 올릴 것 마이너(MINOR) : 기존 버전과 호환되면서, 새로운 기능을 추가했을 때 올릴 것 패치(PATCH) : 버그/오타 등 비교적 적은 규모를 수정했을 때 올릴 것 폴리필과 심 브라우저의 버전이 서로 달라도 비슷하거나 같은 기능을 사용할 수 있도록 도..

오픈 그래프 태그 미리 보기 화면을 구성할 수 있도록 해주는 Meta태그 웹페이지가 sns에 공유될 때 우선적으로 활용되는 정보를 지정 링크 미리보기 정보 트위터 카드 트위터에 있는 기능 140자 텍스트만 표현할 수 있는 트위터의 제약을 풀어주는(?) 기능 추가적인 이미지/내용을 미리보기처럼 보여줄 수 있다 웹페이지가 트위터로 공유될 때 우선적으로 활용되는 정보를 메타태그에 설정해두는 것 메타 정보 기존의 데이터를 구조화한 데이터 다른 데이터를 설명해 주는 녀석 이녀석을 이용하면 검색엔진을 활용해서 특정 데이터를 쉽게 찾아낼 수 있음 파비콘, Favicon 웹페이지를 나타내는 아이콘, 웹페이지의 로고를 의미 기본적으로 root경로에 favicon.ico 파일을 두면 브라우저가 자동으로 로딩함 브라우저가 ..

React에서 div, svg 값 가져오기 리액트는 input이나 textarea, select같은 태그 요소에서 target이라는 속성(attribute)을 지원해준다. 이를 이용해 target.value을 사용하면 원하는 값을 얻을 수 있다. 제어 컴포넌트를 만들기 위해 사용하는 태그들에게 지원해주는 기능인 것이다. 그러나 div와 같은 다른 요소에서는 value를 지원하지 않는다. div같은 것은 일명 '비제어 컴포넌트'를 만드는 것이기 때문이다. 때문에 이런 태그들은 defaultValue로 접근할 수 있다. 그렇지만 value/defaultValue가 아닌 다른 이름으로 가져오는 방법도 알아보고 싶었다. div에서 값 가져오기 결론적으로 말하면 div에 아래 리엑트가 지원하는 속성..

BOM, DOM, CCSOM, Javascript BOM BOM(Browser Object Model)은 브라우저와 관련된 객체들의 집합을 의미 현재 웹 페이지를 열고 있는 웹 브라우저 자체가 객체로 표현된 것 BOM을 이용하면 브라우저와 관련된 기능들을 구성할 수 있음 BOM의 최상위 객체는 window BOM은 공식적인 표준이 없어서 브라우저마다 API가 조금씩 다를 수 있음 DOM은 BOM중의 한 녀석 DOM Document Object Model(DOM)은 HTML, XML, SVG 문서에 접근하기 위한 인터페이스 BOM과 다르게 공식적인 표준이 존재함 W3C(World Wide Web Consortium)의 DOM 표준은 크게 세 가지 모델로 나뉨 Core DOM : 모든 문서 타입을 위한 DO..

React router ! 6버전 기준으로 정리 리액트 라우터 6 설치 yarn add react-router-dom@6 Link, useNavigate 리엑트 라우터를 이용해 페이지 이동 방법에는 2가지가 있다 Link 사용 useNavigate Hook 사용(옛날의 history) 두 기능의 차이점과 활용 방법에 대해 조금 더 알아보자 Link Link 컴포넌트를 사용해 라우터에서 설정한 경로로 이동 Link 컴포넌트는 DOM 에서 a 태그로 변환됨 태그와 같은 개념이나, 리액트 프로젝트 내에서 페이지를 전환한다는 것이 차이점 ( 는 외부 프로젝트 링크로 연결시키는 목적으로 사용 ) 클릭 시 바로 이동하는 로직 구현 시에 유용 ex) 제품 목록 -> 제품 상세 페이지로 이동 시 import { Lin..

react useReducer 복잡한 상태변화 로직을 컴포넌트로부터 분리하기 위한 hook useState를 이용해 상태변화 시키는 것이 많아지면 너무 무거워지는 문제가 있다 상태변화를 처리하는 함수의 로직이 길어지는 것은 좋지 않다 useReducer를 사용하면 컴포넌트로부터 상태변화 로직을 따로 분리시킬 수 있다 useReducer를 사용해 컴포넌트로부터 분리시키고, switch case로 관리하자 사용법 비구조화 할당으로 사용 useState처럼 [state,setState]에 있는 것 반환 상태 상태 변화시키는 함수 [관리할 상태, dispatch] = useReducer(reducer, 상태의 초기값) reducer함수를 컴포넌트를 벗어난 영역에서 만들어 사용 인자로 state,action 받고..