본문 바로가기

전체 글

 (147)
memory 하버드의 컴퓨터과학 입문 강좌(무료)를 듣고, 요약한 내용을 작성 - 네이버 부스트 코스 2019년 강좌를 무편집본으로 제공 - 커넥트 재단 옛날 버전의 강좌, 비교적 최근 버전의 강좌 편집본으로 제공, 별도의 학습자료 제공 - 아래 요약본은 커넥트 재단의 1: 컴퓨터와 컴퓨팅 - Topic 1, 2를 정리한 것입니다. 요약 컴퓨터로 어떤 작업을 한다고 해 봅시다. 브라우저를 통해 웹 서핑을 하거나, 스포티파이와 같은 스트리밍 서비스로 음악을 듣거나, 문서를 작성할 수 있겠지요. 컴퓨터는 어떻게 이런 작업을 할까요? 우선 컴퓨터에 브라우저, 스포티파이와 같은 프로그램이 저장되어 있어야 합니다. 컴퓨터에는 여러 기억 장치(memory)가 있는데, 보통 HDD(또는 SSD)에 프로그램을 저장해 둡니다. 프로..
mongoDB next.js with MongoDB mongo DB 웹사이트에서 클러스터를 생성한다. 이 때 클러스트는 DB를 호스팅할 서버를 말한다. mongodb를 사용하기 위해 프로젝트에 mongodb 패키지를 설치한다(문서). yarn add mongodb # or npm install mongodb 설치된 mongodb 라이브러리를 통해 서버 측에서 동작하는 코드로 클러스터에 접근, 데이터를 저장하고 불러올 수 있다. 다시 웹사이트로 돌아가서, 처음 단계에서 생성한 클러스터의 connect 버튼을 클릭하면, 프로젝트와 클러스터를 연결할 방법을 선택할 수 있다. 화면에 체크된 옵션을 선택하면 connetion url을 확인할 수 있다. Security/Network Access 탭에서 DB에 접근 가능한 IP ..
API route what is API route? 웹 사이트를 단순한 html 페이지 이상으로 만들기 위해서는 API가 필요하다. API는 웹 서버가 외부로 노출하는 URL을 말한다. 이 때 API는 사용자의 요청에 대해 html 페이지를 반환하는 것 이상의 역할을 한다. JSON 형식의 데이터로 응답 사용자의 데이터를 DB에 추가/삭제/수정 하는 등의 작업 후 그 결과로 응답 이 외에도 어떤 API를 구축하냐에 따라 다양한 작업을 수행할 수 있다. Next.js는 어플리케이션 내에 API를 구축할 수 있게 해주고, 어떤 요청이 들어왔느냐에 따라 다른 작업을 수행할 수 있게 해 준다. how to add api? pages 폴더 내에 api 폴더를 만든다. api 폴더 내에 생성하는 파일, 폴더명의 규칙은 pages 폴..
what is _document.js? before start _document.js에 대해 알아보기 전에, _app.js가 무엇이었는지 간단히 정리해 보자. _app.js는 next.js 어플리케이션의 shell(껍질)이다. // pages/_app.js import Layout from '../components/layout/layout'; import '../styles/globals.css'; function MyApp({ Component, pageProps }) { return ( ); } export default MyApp; next.js에 의해 는 자동으로 렌더링 해야 할 페이지 컴포넌트가 된다. 모든 페이지 컴포넌트에 적용해야 하는 스타일링, Head 태그 등을 여기에서 설정할 수 있다. 즉, 어플리케이션 html 페이지의 ..
optimization with <head> & <image> head & meta html 페이지는 크게 ) } export default MyApp Head 태그는 jsx 코드 상에 위치하기만 하면 된다. 어디에 코드를 위치시켜야 하는지는 관계 없다. main page 뿐만 아니라, 모든 페이지 컴포넌트에서 Head 태그를 사용할 수 있다. jsx 문법을 이용해서 Head 컨텐츠를 dynamic value로 설정할 수 있다. 모든 페이지에 공통적으로 적용할 Head는 _app.js 파일에서 return 할 수 있다. next.js는 하나의 컴포넌트에 존재할 수 있는 여러 개의 Head를 하나로 병합하고, 이 과정에서 생길 수 있는 충돌도 해결해 준다. _document.js로 html 전체 틀 구성하기 document.js는 무엇이고, 언제 사용할까? image..
client side data fetching 언제 client side에서 data fetching을 할까? next.js를 사용한다고 해서 항상 모든 데이터를 미리 렌더링(pre-rendering) 해야 하는 것은 아니다. 아래와 같은 경우에는 사용자가 페이지에 방문했을 때 data fetching을 하는 것이 적절하다. 매우 잦은 빈도로 변경되는 데이터 ex) stock data 미리 데이터를 준비해서 화면에 렌더링하는 순간, 그 데이터는 구식이 된다. 사용자 개인에게만 특정되어있는 데이터 ex) 장바구니, 프로필 SEO와 관계 없음 대시보드 페이지의 부분적인 데이터 모든 데이터를 한 번에 받아오고 페이지를 준비하면, 서버에 부하가 생길 수 있음 client 측에서 데이터를 받아올 때에는 이전처럼 useEffect 훅을 사용할 수 있으며, ta..
sort algorithm(1) +) sorting 알고리즘을 시각화 한 사이트 bubble sort(sinking sort) Bubble sort, sometimes referred to as sinking sort, is a simple sorting algorithm that repeatedly steps through the input list element by element, comparing the current element with the one after it, swapping their values if needed bubbleSort([5, 4, 1, 3, 2]) // [1, 2, 3, 4, 5] 최대값을 찾아 배열을 오른쪽 => 왼쪽 순으로 정렬한다. [5, 4, 1, 3, 2]의 배열을 bubble sort를 ..
pre-rendering data fetching & pre-rendering | React vs. Next React.js에서 데이터를 받아오는 방식과 문제점은 다음과 같다. useEffect 내부에서 필요한 데이터를 backend api에게 요청한다. 성공적으로 받아온 데이터를 state로 업데이트한다. 데이터를 화면에 보여준다. 결론 | 사용자는 html 코드와 js 코드를 한 번에 받아오고, js 코드가 실행되면 동적으로 html을 구성한다. 문제점 js가 실행되어야 데이터를 받아올 수 있다는 것은, 온전한 페이지를 보여줄 때 까지 시간 지연이 발생한다는 것을 의미한다. 뿐만 아니라 최초의 html 코드(page source에서 확인할 수 있는 html 코드)에는 동적으로 생성되는 데이터가 포함되어 있지 않기 때문에, S..

티스토리툴바