분류 전체보기 (95) Today I am 모듈 번들러, 트랜스 파일러 프론트엔드 개발은 모듈단위로 파일을 엮어서 개발을 진행한다. 이 모듈단위로 개발을 진행하며 아래와 같은 문제가 발생한다. 1. 모듈은 서로 의존성을 띄는데 이 모듈 사이의 우선순위는 어떻게 정할 것인가 2. 모듈이 많아질수록 HTTP 요청이 많아지게 되는데, 이러면 오버헤드의 문제는 어떻게 해결할 것인가 3. ES6스펙의 코드를 어떻게 처리 할 것인가 위와 같은 문제를 해결하기 위해 모듈 번들러가 등장했다. 각각의 의존성을 해결하여 하나의 자바스크립트 파일로 만들어주는 도구이다. 모듈 번들러로 유명한 번들러로 webpack, parcel, rollup이 있다. 트랜스 파일러는 특정 언어로 작성된 코드를 비슷한 언어로 변환해주는 도구이다. - ES6를 ES5로 변환시켜준다 - react JSX를 자바스크립.. Call Stack 콜스택 - 콜스택(호출 스택)은 LIFO(후입선출)을 기반으로 하는 자료구조이다 . - 자바스크립트는 '싱글스레드' 기반의 언어이다. 이 말은 즉, 콜스택이 하나라는 의미이다. 백그라운드 - Wep API가 모이는 장소라고 보면 된다. - 백그라운드에는 이벤트리스너나 비동기 API의 경우에만 들어간다. (무조건적으로 들어간다는 말이 아님) 큐 - 백그라운드에서 정해진 시간이 끝난 함수들이 순서대로 들어온다. 이벤트루프 - 콜스택이 비워져있는게 확인되면, 큐에서 대기하고 있는 함수들이 순서대로 이동된다. - 아래 이미지는 Javascript Event Loop를 도식화 한 것이다 - setTimeout이 호출되고 지워질 때, 백그라운드로 이동 → 백그라운드에서 setTimeout의 정해진 시간만큼 보내다가.. [React 강의 노트(5)] class형 component react강의 노트 | Byte Degree [4주차] 1. class형 컴포넌트 //class형 컴포넌트 class Hello extends Component { //default props 설정하기 static defaultProps = { name: "이름없음", }; render() { const { color, isSpecial, name } = this.props; return ( {isSpecial && *}안녕{name} ); } } //함수형 컴포넌트 function Hello({ color, name, isSpecial }) { return ( {isSpecial ? * : null} 안녕하세요{name} ); } Hello.defaultProps = { name: "이름없음", }; .. [React 강의 노트(4)] 커스텀 Hook 만들기, context API, Immer react강의 노트 | Byte Degree [4주차] 1. 커스텀 hook 만들어보기 useInputs - useState, useCallback import { useState, useCallback } from "react"; //커스텀 hook 만들어서 사용해보기 function UseInputs(inintialForm) { const [form, setForm] = useState(inintialForm); const onChange = useCallback((e) => { const { name, value } = e.target; setForm((form) => ({ ...form, [name]: value })); }, []); const reset = useCallback(() => se.. CORS란? CORS = Cross Origin Resourse Sharing, 교차 출처 리소스 공유 = 서로 다른 도메인 또는 포트에서 데이터(ex) API의 요청, 응답)를 주고 받을 수 있도록 하기 위한 정책, 메커니즘 예를 들어, 다른 도메인에서 이미지를 가져오거나 웹폰트,css를 가져와서 사용하는 것 CORS의 등장 이유 - Same-Origin Policy, 동일 출처 정책 때문이다, Same-Origin Policy는 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한 하는 보안방식으로 서로 다른 origin에서의 자원 공유를 제한한다. - Same-Origin Policy 적용시 다른 origin 에서의 자원 요청이 불가능하기 때문에, SPA에서 클라이언트와 서버의 도메인을 따로 유지하는 경우 자원.. [React 강의 노트(3)] Hook - useEffect, useMemo, userCallback, useReducer react강의 노트 | Byte Degree [3주차] useEffect - component가 화면에 나타나게 될 때, 사라지게 될 때 등 - 첫번째 파라미터에는 함수, 두번째 파라미터에는 deps - return 함수는 뒷정리? 함수이며 , 업데이트 직전에 호출된다 mount - component가 나타나게 될 때 unmount - 삭제될때 useEffect(() => { //comopnent가 나타남 console.log("컴포넌트가 화면에 나타남"); // return () => { //component가 사라짐 console.log("컴포넌트가 사라짐"); }; }, []); - deps(의존 되는 값)가 비워져 있는 경우 - component가 처음 화면에 나타날 때만 실행된다. - 사라지는 .. push 취소하기 프로젝트 진행 중 이미 푸시된 커밋에서 오류 사항을 발견해서 push를 취소해야 했다.! 🤦♀️ 1. 가장 최근의 commit 취소 git reset HEAD^ - 'reset' 은 push를 취소한 commit이 남지 않는다. - 로컬에서 커밋 되돌리고 강제로 푸시하는 경우 협업하는 과정에서 문제가 발생할 수 있다. 커밋을 되돌리고 강제로 푸시하려는 짧은 순간에 다른 팀원이 최신반영된 버전을 pull하면 내가 취소하려는 커밋이 포함되어 있기 때문에 충돌을 발생시킬 수 있다. 팀원과 같이 사용하는 경우 reset보다 revert 명령어를 추천 2. 원격 저장소 강제 push git push origin [branch명] -f LocalStorage, SessionStorage, Cookie cookie - cookie는 웹사이트에 의해 유저의 컴퓨터에 놓여지는 작은 텍스트 파일이다. - 최대 4KB의 용량을 가진 매우 작은 양의 데이터이다. - 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용된다. (유저의 신원확인으로 페이지에서 재인증을 거치지 않는다.) - HTTP 요청과 함께 서버로 보낸다. - 문자열만 저장할 수 있다는 제한이 있다. Seesion cookies - 만료일을 포함하지 않는다. but, 브라우저나 탭이 열려있는 동안에만 저장된다.(은행 웹사이트) Persistent cookies - 만료일을 포함한다.만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제된다. ↓ HTML5에는 데이터를 클라이언트에 저장할 수 있는 WebSt.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음
