FrontEnd

[React] SEO 처리 하기

1. 개요 React는 기본적으로 CSR(Client Side Rendering), SPA(Single Page Application)으로 동작합니다. 이때 React에서는 HTML 파일이 딱 1개뿐이고, 그 내용조차 서버에서 javascript를 받아서 렌더링하기 전까지는 빈 껍데기인 상태이기 때문에 검색 엔진에 노출되기가 어렵습니다. 따라서 SEO에 노출시키기 위해 html 내용을 미리 만들어야합니다. 2. pre-rendering pre-rendering이란, 빌드할때 미리 특정 페이지를 렌더링해서 html을 만들어 두는 것을 말합니다. 빌드할 때 html 파일을 만들어두기 때문에 검색 엔진이 크롤링하러 사이트에 접근했을 때, 내용물을 보여줄 수가 있게 됩니다. 다만, 빌드 시에는 정적 파일만 가져..

[React] SSR과 CSR(SPA) 차이

1. 개요 먼저 브라우저가 동작되어 우리에게 정보를 표현할 때, HTML의 정보를 읽어 이를 내부적으로 렌더링 한 후 js나 css를 반영해 최종적으로 정보를 표현합니다. 이러한 렌더링을 하는 방식이 SSR과 CSR이 있는데, 이 두 가지 렌더링 방법에 대한 차이를 이해해보려고 합니다. 2. SSR(Server Side Rendering) https://narup.tistory.com/235 [Next.js] SSG, SSR 개념 정리 1. 개요 전 글에서는 Hydrate에 대해서 알아봤는데, 이번에는 SSG(Server-Side-Generation, Static-Site-Generation)와 SSR(Sever-Side-Rendering)에 대해 알아보려고 합니다. React: CSR(Client-Si..

[Javascript] 브라우저 동작 원리, 렌더링 트리

1. 브라우저 기본 구조 사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 웹페이지가 보여지는 창 등 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 렌더링 엔진 : 요청한 콘텐츠를 표시하기 위해 요청된 HTML과 CSS를 파싱해 화면에 표시합니다. 통신 : HTTP 요청과 같은 네트워크 호출에 사용됩니다. 독립적인 인터페이스로 각 플랫폼 하부에서 실행됩니다. 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행합니다. 자료 저장소 : 자료를 저장하는 계층으로 로컬 스토리지, 쿠키와 같이 모든 종류의 자원을 하드디스크에 저장합니다. 크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 인스턴스를 유지해서 독립된 프로세스로 처리합니다(이래서 메모리를 많이 먹는 걸수도?) 2...

[Javascript] 이벤트 버블링

1. 이벤트 등록 이벤트 버블링에 알기 전에 앞서 이벤트 등록에 대해 알아봅니다. var button = document.querySelector('button'); button.addEventListener('click', addItem); function addItem(event) { console.log(event); } 웹 개발을 하셨던 분이라면 익숙한 코드지요? 버튼을 클릭했을 경우 addItem 함수를 실행시키는 코드입니다. 버튼을 클릭하면 addItem함수가 실행되고, event 인자가 넘어오며, console.log를 통해 event에 관련된 정보를 알 수 있게 됩니다. 동작 원리는 이러한데, 브라우저는 어떻게 이벤트를 감지할까요? 2. 이벤트 버블링 이벤트 버블링은 특정 화면 요소에서 이..

[Javascript] 이벤트 루프와 태스크 큐

1. Javascript 이벤트 루프 자바스크립트는 기본적으로 싱글 스레드로 한번에 하나의 작업만 할 수 있는 특징이 있습니다. One thread == one call stack == one thing at a time Call stack(호출 스택)은 우리가 어떤 순서로 작업을 수행하는지 기록하는 작업 스케쥴링과 관련된 도구입니다. 특정 함수를 실행하면 그 함수를 호출 스택의 맨 위에 놓는데 이것을 push 과정이라고 합니다. 만약에 함수가 어떤 값을 리턴하거나 실행을 종료하면, 호출 스택 맨 위에서 그 함수를 꺼내는데 이 과정을 pop이라고 합니다. 이와 같은 코드가 있으면 스택에 순서대로 main() -> printSquare() -> square() -> multiply()로 push가 되고, ..

[Javascript] 호이스팅이란?

1. 호이스팅이란? 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다. 2. 자바스크립트 함수 동작 원리 1) 자바스크립트 Parser가 함수 실행 전 해당 함수를 한번 훑는다. 2) 함수안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행한다. (함수 블록 {} 안에서만.) 3) 함수를 실행할 때, 호출한 위치보다 해당 함수가 하단부에 있을 경우 자바스크립트 Parser가 내부적으로 함수 위치를 끌어올려서 처리한다. -> 호이스팅 * 실제 메모리에서는 변화가 없습니다. Why? 자바스크립트에서 함수를 선언하는 방식이 함수선언식과 함수표현식이 있습니다. // 함수선언식 function test1() { return 1; } // 함수표현식 var ..

[React] 콜백에서의 useState, useEffect 사용 이슈

1. 개요 위 아래로 스크롤 할 때, 섹션별로 스크롤이 이동하는 기능을 구현하는 과정에서 scroll event를 사용하게 되었는데, 이때 event가 발생할 때 콜백으로 scroll section index 값을 변경하려고 했습니다. 이때, 스크롤 인덱스가 무조건 변경되는 것이 아니라, 인덱스가 특정 범위를 넘지 않도록 필터링을 하는 조건을 추가하였는데요. useEffect의 dependency로 등록한 scrollIndex의 console은 잘 찍히는 반면, 필터링하는 부분에서의 scrollIndex 값은 1로 고정이 되어 있었습니다. 사용된 코드 const outerDivRef = useRef(); const windowSize = useRef(getWindowDimensions()); const ..

[React] Redux Toolkit 에서의 비동기 처리(createAsyncThunk, extraReducers)

1. 개요 앞서서 Redux Toolkit의 상태관리를 위한 기본적인 사용법에서 알아보았는데요, createSlice()를 통해 Slice라는 것을 생성하며, 여기에 초기 default 값과 dispatch를 통해 호출할 reducer 함수를 지정했었습니다. 프로그램 개발을 하다보면, 전역에서 자주 사용되는 api를 호출하거나, api 호출한 결과를 여러 군데에서 사용해야 할 상황이 생기는데, 이와 같은 비동기 처리를 redux store에서는 자체적으로 하지 못하는 단점이 있습니다. 따라서 Redux를 사용할 때는 redux-thunk, redux-saga와 같은 미들웨어를 사용해서 비동기 처리를 진행했습니다. 하지만 위의 기능들 같은 경우 Redux와 같이 사용하기 위한 러닝커브가 조금 있기 때문에,..

[React] Redux Toolkit 사용법

1. 개요 React에서 상태관리 툴로 Redux를 사용하는데, Redux를 사용하기가 상당히 까다롭고 진입장벽이 높습니다. 액션 함수, 액션 생성 함수, 리듀서, 스토어... 또 타입스크립트를 쓰게 되면 해당 타입을 또 일일히 지정해주어야 하고 관리할 상태값이 1개가 생길 때마다 작성하는 코드도 많아집니다. 가독성도 안좋아지고요... 이러한 문제 때문에 상태관리를 도와주는 라이브러리가 등장하게 되었는데, 사실 Redux Toolkit보다 더 직관적이고 좋은 라이브러리는 많습니다. 다만 상태관리라는 개념에 대해 정확하게 알고 사용하는 것이 좋을 것이라고 생각이 되어 Redux를 먼저 사용해보고 그 Redux를 편리하게 만든 Redux Toolkit에 알아보려고 합니다! 2. 설치 공식사이트는 아래와 같습..

[CSS] 자주 쓰는 CSS 정리

1. img, video 등 오브젝트 요소에는 object-fit: cover 속성을 사용 내용의 크기가 요소의 크기와는 상관없이 기본 알고리즘에 의해 조정된다. 이 알고리즘은 원본의 크기에 가운데 정렬된 형태를 띈다. 2. 반응형 css 작업 우선순위 레이아웃을 작성할 때 반응형으로 작업하고 있고, 반응형을 나누는 기준이 min-width라면 모바일 크기부터 데스크탑으로, 작은 화면에서 큰 화면으로 우선순위를 맞춰서 작업한다. 3. display: flex 사용 되도록이면 flex를 사용하되 flex를 아무 이유 없이 남발하지 말것. flex 밑의 자식은 flex-item이 된다. flex-item이 1일 경우 flex: 1 1 0이 된다. grow: 늘어남 / shrink 줄어듬 flex-grow가 ..