본문 바로가기
카테고리 없음

[TIL] 오늘의 개발일지

by 따따시 2023. 1. 31.

 

오늘은 드뎌 배워보고 싶었던 next.js 강의를 들었다 >_<!!

아직 첫날이라 딥하게 들어간 내용은 없었지만 벌써 next가 편하다는게 살짝 느껴지는 느낌..

 

그동안 강의들을때, 계속 노션이나 티스토리 번갈아가면서 키면서 수업 내용을 중간중간 정리했는데

ㄷㅇ님이 마크다운을 알려주시면서, 수업 들을때 바로바로 내용을 받아적기도 너무 편하다고 알려주셔서

진짜 너어무너무 유용하게 오늘 강의를 들으면서 마크다운을 활용해볼수 있었다 ㅠㅠ ❤️❤️

 

강의들으며 공부한 자세한 내용들은 모두 마크다운 파일에 정리했지만, 

개발일지에도 그 중에 오늘 배우면서 더 딥하게 공부하고 재밌었던 내용을 몇가지 적어보고자 한다.

 

### 최적화란 ?
api 아래 있는 코드들이 몇백줄이 되더라도
yarn build를 통해 번들링을 할때 , 클라이언트의 번들 사이즈를 증가시키지는 않는다.
이 api폴더 아래 있는 넘들 같은 경우에는 배포를 하는 순간 서버에 종속되는 것이기 때문에
클라이언트 쪽에서는 번들링 사이즈가 증가되지 않게 next에서 처리를 해주는 것
-> 원래 최적화도 직접 해야하는데, next가 해주는 것


### 번들링이란?
모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업
(yarn 'build'를 통해 '번들링'을 할때)
-> 모듈화했던 자바스크립트 파일들을 '묶어준다'는 뜻


### 모듈이란?
  예를 들어서 함수를 쫘라락 썼어
  근데, 그 함수들을 기능별로 묶어서 나눌수 있자나 (기능별 덩어리로)
  그걸 '모듈화'라고 함
  쫘라락 써져있는 코드를 여러개의 파일로 분리하는 것 = 모듈
  
  
### 프로토콜과 인터페이스

- 프로토콜 : 규약, 약속 (http프로토콜을 사용해요, 호출하고 응답받는 통신을 할때 '같은 프로토콜'을 사용해야한다.)
- 인터페이스 : = '연결' 하는 것 (이 서버 인터페이스는 'http프로토콜'로 할게요)
  ex)인터페이스 어떻게 할래? = 연결 어떻게 할래?


### SSR과 SSG
1)SSR(Server-side Rendering) : SSR은 서버에서 페이지를 렌더링하는 방식으로, Next.js와 PHP, ASP 등이 이에 속한다.
2)SSG(Static Site Generation) : SSG는 프로젝트 빌드 시에 페이지를 사전 렌더링하는 방식으로, Next.js와 Gatsby, Nuxt.js에서 제공한다.

- 런타임에 일어나면 SSR(server-side rendering)
- 빌드하는 순간에 일어나면 SSG(static site generation)

 

오랜만에 다시 개인공부 시간이 주어지면서 내 페이스대로 그동안 모호하게 알고있던 개념이나

까먹어서 다시 상기시키고 싶은 개념들을 중간중간 딥하게 알아보면서 공부를 하다보니 

코딩에 대한 흥미를 또 한번 확인할 수 있는 하루였던것같다

 

무엇보다 모닝운동하고 건강하게 다시 패턴을 찾게된 것 같아 좋았던 하루 ❤️

오늘의 개발일지 끄으읕 ㅎㅅㅎ

 

 


>> 오늘 수업 정리본 전체

https://github.com/ddoqi/studySpace/blob/master/NEXT/my-app/myNote.md

 

GitHub - ddoqi/studySpace

Contribute to ddoqi/studySpace development by creating an account on GitHub.

github.com

 

 

 

(아래는 이미지 캡쳐써야되서 따로 티스토리에 정리했던 포스팅 글) 

 

>> SSR과 CSR 방식 중 뭔지, 개발자도구에서 확인하는 방법
https://warn-code.tistory.com/275

 

SSR인지 CSR인지 확인하는 방법 ? / 개발자 도구에서 java Script 끄기

>> 브라우저에서 js 끄기 ( csr 확인할라공ㅇㅅㅇ) 개발자모드 - settings - preferences - disable JavaScript 오늘 넥스트 강의 들으면서, CSR과 SSR 의 차이를 직접 보여주시려고 튜터님이 이렇게 개발자도구에

warn-code.tistory.com

 

>> 다이나믹 라우팅?

https://warn-code.tistory.com/276

 

다이나믹 라우팅이란??

내가 강의를 들으며 느낀 다이나믹 라우팅? 서버에 요청하는 뒤의 url이 유동적(동적)으로 바뀌는 방식을 뜻하는 것 (다이나믹 라우팅 방식) 폴더에 요렇게 우리가 리액트 라우터 설정할때 :id 이

warn-code.tistory.com

 

댓글