MPA & SPA : 웹 어플리케이션을 구성하는 형태 MPA(Multiple Page Application) - 전통적인 방식, 다수의 페이지로 구성되어 요청마다 정해진 페이지를 반환 SPA(Single Page Application) - 단일 페이지, 해당 페이지 자체에서 화면을 재구성 ex) React CSR & SSR : 렌더링 방식 CSR - 클라이언트 사이드(브라우저)에서 HTML 문서를 렌더링 - SPA의 방식 - 최초 요청 시 받아온 HTML 문서는 거의 비어있으며, 그 후 JS 등 다른 파일을 로드하여 브라우저 단에서 렌더링을 실시해 화면을 구성. 특징 로딩시간 - 초기 로딩이 완료되기 까지 오래 걸림 SEO - 빈 HTML 문서가 넘어오므로 최적화가 어려움 인터랙션 속도 - 번들링된 js..

OG(Open Graph) 오픈 그래프 프로토콜은 어떠한 인터넷 웹사이트의 HTML 문서에서 head -> meta 태그 중 "og:XXX"가 있는 태그들을 찾아내어 보여주는 프로토콜이다. https://namu.wiki/w/%EC%98%A4%ED%94%88%20%EA%B7%B8%EB%9E%98%ED%94%84%20%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C 원리는 플랫폼에 URL을 붙여 넣는 순간 해당 플랫폼에서 일하는 크롤러가 빠르게 해당 URL을 먼저 방문해서 웹페이지에 있는 오픈그래프 데이터를 수집해 미리 보기 형식으로 구성해주는 방식 출처: https://6u2ni.tistory.com/22 [Design Futures:티스토리] 쉽게 말해 링크를 SNS 등의 플랫폼에 추가..

Routing 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 router : 데이터의 경로를 실시간으로 지정해주는 역할을 하는 sth route + ing : 경로를 정해주는 행위 자체와 그 과정을 다 포함하여 일컫는 말 Page Routing 브라우저의 요청에 따라 웹 서버가 어떤 페이지를 보여줄 지 결정하는 과정 MPA multipage Application 여러 html 파일로 이루어진 웹 사이트로, 요청할 때마다 새로운 페이지를 전송 요청할 때마다 새로고침 (페이지 깜빡임) SPA single page application 싱글페이지이므로 페이지 이동이 없음 CSR client side rendering 서버와의 통신 없이 브라우저 자체적으로 페이지 업데이트 (로딩이 짦음)..

생각보다 업데이트를 꽤나 자주 하는 비주얼 스튜디오 코드. 릴리즈 노트가 뜨면 슬쩍 둘러보곤 하는데요, 이번 1.70 버전 릴리즈에서 마음에 드는 업데이트를 발견해서 공유해드리려고 해요. 바로 sticky scroll 입니다! 아래 이미지로 보시는 게 이해가 빠르실 거예요. Sticky Scroll 보시는 것처럼 스코프의 헤더를 고정시켜줘서, 자바스크립트나 scss에서 네스팅이 깊어질 때 유용한 것 같아요. scss를 메인으로 사용하는 제게 꼭 필요했던 부분입니다. 설정 방법 설정 방법은 아래와 같아요. File > Preferences > Settings로 들어가시거나, 혹은 Ctrl + , 누르시면 세팅 창이 열려요. 세팅 창에서 sticky 키워드로 검색을 하시면, 이렇게 세 가지 옵션이 나오는데 ..

useReducer 필요성 초반에 배우는 리액트는 대부분 app 컴포넌트 내에서 useState를 이용해 상태 변화 처리 함수를 사용한다. ✨ 상태 변화 처리 함수의 대표적인 예 : onCreate, onEdit, onRemove 하지만 규모가 점점 커지고 처리 내용이 많아질 수록 컴포넌트가 무거워지고 비효율적이다. 따라서 상태 업데이트 로직을 컴포넌트에서 분리, 즉 컴포넌트 외부 혹은 다른 파일에 작성할 수 있도록 하는 것이 useReducer. 사용법 useReducer는 리덕스의 로직과 흡사하다. 👇 2022.08.01 - [코딩공부] - [Redux] 리덕스의 필요성과 구성 요소, 작동 원리 reducer 그렇기에 reducer 함수가 꼭 필요하다. recuder : 현재 상태와 액션 객체를 인자..

여러분 안녕하세요! 세상의 모든 코린이들을 위한 인강사이트 인프런, 다들 잘 알고 계시죠? 정말 다양하고 많은 강좌들이 있어 저도 애용하는데요, 생각보다 인프런에서 다양한 할인이벤트를 자주 열더라구요. 그래서 이벤트 할 때마다 담아뒀던 강의를 사곤 한답니다 ㅎㅎ 오늘 업무가 많지 않아서 중간에 잠깐 짬내서 강의 하나 들으러 인프런을 들어갔는데요. 방금 전 인프런 사이트를 들어갔다가 발견한 깜짝 쿠폰! 여러분께도 공유해드리려고 오랜만에 포스팅을 써보아요. 사실 이 메세지를 보고도 쿠폰이 그래서 어디 있다는거지? 했는데요, 아무리 찾아봐도 없어서 다시 한번 메세지를 확인해보니... 코드가 한글이었던 거예요!! 쿠폰코드 : 레이니데이응원 마이페이지의 내 쿠폰함으로 들어가셔서 할인쿠폰 코드 입력란에 한글로 '레..