본문 바로가기

Frontend23

[Next.js] 톺아보기 - 1.Pre-rendering ❐ Pre-rendering 기본적으로 Next.js는 모든 페이지를 pre-render한다. pre-rendering이란 각 페이지에 대한 HTML을 사전에 생성한다는 것을 의미한다. 이 작업은 성능과 SEO(검색 엔진 최적화)에 효과적이라고 Next.js는 소개한다. 페이지가 브라우저에 로드된 후에 자바스크립트가 동작하면서 페이지는 반응하기 시작한다. 이러한 과정을 hydration이라고 한다. ❐ Client Side Rendering vs. Pre-rendering 일반적인 React application에서 브라우저는 서버로부터 빈 HTML 껍데기(shell)을 전달받는다. 이때 UI를 구성할 JavaScript 코드도 함께 전달받는다. client-side rendering은 이처럼 최초의 렌.. 2023. 3. 23.
[JS] 이벤트 위임 - 1억개의 자녀요소를 한 번에 통제하기 event delegation CSS에서 부모의 속성이 자녀에게 상속되는 것처럼, 부모의 요소에 특정 이벤트 핸들러를 할당했다면 그것이 자녀에도 그대로 적용되는 것을 이벤트 위임(event delegation)이라고 합니다. event delegation의 활용 API를 통해 사용자의 친구 정보를 불러 온다고 가정해봅시다. 등록된 친구가 5명이라면 데이터 배열안에 다섯 사람 분량의 정보가 담겨 있을 것이고, 100명이라면 100명의 정보가 담겨있을 것입니다. 받아온 정보를 가지고 이름 정보의 태그들을 태그안에 넣어주는 함수를 만들었습니다. 코드를 확인해볼까요? See the Pen Untitled by JO SEOYOUNG (@seoyoung-dev) on CodePen. 사용자에 따라 1명의 친구 등록.. 2022. 3. 6.
[JS] 이벤트 루프 ▷ 동기, 비동기 처리 자바스크립트는 단 하나의 실행 컨텍스트 스택을 가지고 싱글 스레드 방식으로 동작하는데, 이는 한 번에 한가지 일(task)를 처리할 수 있다는 의미이다. 따라서 블로킹(blocking), 즉 특정 태스크를 실행하는 동안 작업이 중단되는 현상이 나타난다. // synchronous function rest(delay) { const delayUntil = Date.now() + delay; while(Date.now() < delayUntil); console.log('finished'); } rest(3*1000) 위 코드를 실행하게 되면 3초 후에 'finished' 라는 메시지를 확인할 수 있다. 이처럼 태스크를 순서대로 하나씩 처리하는 것을 동기(syncronous)처리라고 .. 2022. 1. 27.
[React] useEffect (parameter, clean-up) ▷ useEffect parameter 유무에 따른 차이 #1 두번째 인자(dependency)가 없는 경우 function App() { const [isOn, setIsOn] = useState(false); useEffect(() => { fetch('http://example.com') .then(res => console.log(res)) }); } : useEffect에 인자를 넣지 않고 생략하면 state가 바뀔때마다(DOM이 변화할때마다) 무조건적으로 해당 effect를 실행 #2 두번째 인자가 빈 배열([])인 경우 function App() { const [isOn, setIsOn] = useState(false); useEffect(() => { fetch('http://example.. 2022. 1. 19.
[React] useReducer ▷ useReducer( ) - useState()의 대체 함수로 많이 사용 - useState()보다 상대적으로 복잡하고 많은 데이터를 관리하기 위하여 사용 const [, ] = useReducer(, , ) reducer 함수: 현재 상태의 객체(state)와 수행할 행동 객체(action)을 인자로 받아서 새로운 상태 객체를 반환하는 함수 dispatch 함수: 인자로 reducer 함수에 넘길 행동 객체(type)를 받음, 컴포넌트 내에서 상태 변경을 일으키기 위하여 사용 import ReactDOM from 'react-dom'; import React, { useReducer } from 'react' // count의 초기 state를 0으로 설정 const initialState = {c.. 2022. 1. 19.
[JS] find, findIndex, indexOf, includes 비교 ▷ find( ) : 주어진 판별 함수를 만족하는 첫번째 요소의 값을 반환, 없다면 undefined를 반환 const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); // 12 ▷ findIndex( ) : 주어진 판별 함수를 만족하는 첫번째 요소의 인덱스을 반환, 없다면 -1을 반환 const array1 = [5, 12, 8, 130, 44]; const isLargeNumber = (element) => element > 13; console.log(array1.findIndex(isLargeNumber)); // 3 ▷ indexOf( ) : 문자열 혹은 배열에서 지정된 요소를 찾을 수 있는 첫번째.. 2021. 12. 27.
[JS] JSON(Javascript Object Notation) ▷ JSON - 데이터 전송을 목적으로 사용 - 문자열 상태로 존재 - parsing: 문자열을 네이티브 객체로 변환 stringfication: 객체를 문자열로 전환(네트워크를 통해 전달 목적) - JSON은 순수한 데이터 포멧으로 구성됨 - 값을 표현할 때 문자열, 숫자, 불 자료형만 사용할 수 있음(함수 등은 사용불가) - JSON에서 문자열을 표현할 때는 오직 큰따옴표("")만 사용가능 - key에도 반드시 따옴표를 붙어야 함 2021. 12. 26.
[Git] git 협업 (branch, merge request, pull, origin, main, HEAD) ▷ 협업시 pull의 중요성 - master가 아닌 branch에서 본인이 개인 작업을 하고 있을 때, 팀원이 merge request를 하는 등 master의 내용이 변경된다면 그것을 최신버전으로 업데이트해주어야 한다 - conflict가 발생하는 상황을 방지하기 위해서 자주해주는 것이 좋다 ▷ branch 활용 명령어 - $ git remote update: branch를 업데이트 - $ git branch : 현재 branch를 확인할 수 있음 - $ git branch -a : 로컬, 원격 모든 저장소의 branch 리스트를 확인할 수 있음 - $ git branch -r : 원격 저장소의 branch 리스트를 볼 수 있음 - $ git checkout : 해당 branch로 이동 ▷ 작업물을 원.. 2021. 12. 20.
[JS] map, filter, reduce 함수 # map, filter, reduce 모두 콜백함수를 활용하는 함수라는 공통점이 있다. ▷ map - 콜백 함수에서 리턴한 값들을 기반으로 '새로운 배열'을 만드는 함수 - forEach()와의 차이: forEach()는 배열 내부의 요소를 사용해서 콜백 함수를 호출하는데 그치는 반면, map()은 새로운 배열을 생성함 // 기본문법 array.map(function(value, index, array) { } // 화살표 함수 이용 array.map((value) => value * value) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map Array.prototype.map() - Java.. 2021. 11. 13.
[JS] 함수 선언문과 함수 표현식 ▷ 함수 선언문(function declaration) - 함수의 정의부만 존재하고 별도의 할당 명령이 없는 것 - 반드시 함수명이 정의되어야 함 function a () { } a(); ▷ 함수 표현식(function expression) - 정의한 함수를 별도의 변수에 할당하는 것 - 함수명이 반드시 정의될 필요는 없음 (기명 함수 표현식 / 익명 함수 표현식) // 익명함수 표현식 let b = function () { } b(); // 기명함수 표현식 let c = function d () { } c(); d(); // 에러 발생 ▷ 호이스팅에 따른 차이 - 함수 선언문 : 함수 전체를 호이스팅함, 함수 선언문이 정의되기 전에도 호출할 수 있음 - 함수 표현식 : 함수 선언부만 호이스팅함, 실제 .. 2021. 11. 13.

티스토리툴바