오늘은 이전과 마찬가지로 주말루틴인 수영을 갔다와서 집안일을 하고 점심을 먹었다. 그리고 오후에는 블체스 디코방에 올라왔던 동영상이나 공유해주셨던 정보들을 평일에 수업 따라가느라 급급했기 때문에 찾아서 보는 시간을 가졌고, 정리하지 못했던 부분들이나 몰랐던 기초적인 코딩용어 또는 단어들을 찾아보는데 시간을 보냈다. 그리고 이화매니저님이 알려주셨던 강의를 들어보려고 했으나 강현님이 미리 해보고 알려주셔서 그 강의는 나중에 차후 들어볼 예정이다. 오늘은 잡다하게 이것저것 했는데 가장 기억에 남았던 "프론트엔드만으로 먹고살기 힘든 이유"라는 영상에 대한 정보 정리를 간단하게 하고 오늘 했던 잡다한 일들에 대해서 정리만 하고 쉬어보도록 하겠다.
💻Next.js??
-
프론트엔드만으로 꿀빨던 시대는 지났다고 한다. 전에는 리액트만 좀 할줄알아도 개발자로 살가 편했는데 지금은 프론트엔드 개발자를 뽑는곳도 많이 줄어들고 외주로 돌리는 경우가 많아졌다고 한다.
-
하지만 궁극적으로 이 이야기를 하는 이유는 client-side Rendering의 시대가 가고, server-side Rendering의 시대가 오고있기 때문이라고 한다.
💠server-side Rendering.
- server-side Rendering이란 : html을 서버에서 만드는것.
- 몇년전까지는 client-side Rendering이 유행이였는데
client-side Rendering이란 : 리액트와 뷰같은 라이브러리를 써서 웹페이지를 서버가 아니라 유저브라우저에서 실시간으로 만들어주는것.
- 그러면 페이지 전환이 부드러워지고 앱같이 예쁜 사이트를 만들 수 있음.
server-side Rendering 단점 2가지.
구글 검색노출이 어려움(되긴 하지만 오래걸림)
페이지 로딩속도가 떨어짐.
가장문제는 이 두가지가 사이트의 수익성에 악역향을 미침.
❗server-side Rendering 쓰는이유
server-side Rendering은 웹페이지를 서버에서 다 만들어서 보내주는 개념. 그렇기 때문에 유저한테 JS코드를 많이보낼 필요가없음. 그래서 좀 더 가볍고, 구글검색 노출도 잘되는편임. 심지어 next.js에선 일부페이지에서 client-side Rendering을 하고싶다고 하면 그것도 선택적으로 가능.
그래서 안쓸이유가 없음.
- 이전에는 client-side Rendering를 썼기때문에 리액트나 뷰를 사용하며 어려운 기술들을 많이 사용했었는데 server-side Rendering하면 그런 프론트엔드 전문기술이 그다지 필요가 없어짐.
그래서 앞으로는 AI가 코드를 만들어주고 큰 그림만 알고있으면 개발을 잘할수있는 시대가 올거라는 생각을 많이 한다고 함.
그래서 서버개발을 전혀 모르거나 관심없던 사람들도 서버개발에 대해 맛을 한번 보는게 중요할것으로 생각됨.(강사님이 하신 말씀이 맞았음.)
서버개발에 대한 부분을 크게 어렵지 않게 접할 수 있다고 하는데 next.js가 워낙 잘만들어져서 개발하는게 쉬워졌다고 함.
next.js 신버전 사용해보면 개발하는데 정말 많은 도움이 될거라고 함.
❗next.js의 장단점.
여기서 next.js를 사용하는 중요한 부분이 있는데 먼저 장점은.
- 풀스택 프레임워크임.(프론트,백엔드 전부 개발가능.)
- 폴더와 파일만 만들면 자동으로 html파일을 생성해줌. 그리고 서버기능만들기, DB연결, 회원인증 등 여러부분이 더 쉬워짐.
- 어느 부분에서든 클라이언트 사이드 렌더링이 가능함.
- 서버데이터 캐싱이나 폰트나 이미지 최적화도 가능해서 빠른 사이트를 만들어낼 수 있음.
next.js 단점.
- 폴더기반 라우팅을 하다보니 예약파일이 많아서 프로젝트가 커지면 좀 복잡해짐.
- 리액트의 미완성 기능들을 도입해놨다보니 좀 번거로운 상황들이 생길 수 있음.
- 클라이언트 컴포넌트와 서버 컴포넌트를 구분해서 코드 짜는것도 번거로움.
- 프레임워크 자체가 풍부한 기능이 없음. 그저 html 렌더링만 잘됨.
이렇게 next.js는 장단점이 확실하지만 결과적으로 요즘 가장 많이 쓰는게 next.js이기 때문에 사용할 줄 아는게 개발자로 도약하는데 큰 도움이 될거라고 함. 그리고 강사님도 말씀하셨던것처럼 결국 프론트엔드 개발자도 백엔드적인 부분에 대해서 어느정도 알고있어야하고 언젠가는 프론트가 아닌 다른부분의 개발자로 바꿔나가야하는 상황이 생길수도 있다고 생각함.
- 결론은 백엔드도 잘 배워두자.(강사님이 알려주신 부분만이라도..)
🤓오늘 정리한 잡다한것들.
- 비동기함수 : 비동기함수는 쉽게 설명하면 호출했을때 실행결과를 기다리지 않아도 되는 함수를 뜻한다.
- 동기함수 : 반대로 동기함수는 호출했을때 실행 결과가 리턴될때까지 기다려야 하는 함수다.
- Async : 이미 정리해놨는데 모르고 다시 찾아봤다. 덕분에 두번봤다.
- Dependency : 객체의 세계에서 협력은 필수적이며, 객체가 협력한다는 것은 객체 간의 의존성이 존재한다는 것이다. 여기서 의존성이란 파라미터나 리턴값 또는 지역변수 등으로 다른 객체를 참조하는 것을 의미한다.
- (아래링크 참조하는게 설명이 더 쉬움.)
- Dependency란
- Redirect : 브라우저가 특정 URL을 웹 서버에 요청했을때 서버가 HTTP 메세지를 통해 "다른 URL로 다시 요청하세요" 라고 브라우저에게 다른 URL을 지시하는것을 말한다.
- (아래 링크가 Redirect가 필요한 이유에 대해 설명을 잘해놓음.)
- Redirect란
- 강사님 이것저것 말씀하셨던 부분 노트에 막 작성해뒀던 부분들 찾아볼거 찾아보고 지울거 지움.
- 지금까지 썼던 터미널 용어들 정리.
- 강의날짜별로 이미지 정리해둔 것들 삭제 및 편집
- 수업때 진행했던 이미지나 자료들 중 필요없는 것들 삭제 및 정리.
- 수업때 진행했던 내용들 중 css적인 부분들 변경하고 싶은 코드들을 변경.
- 강사님 notion 정독.
- 블록체인 기본정보 서적 1시간 독서.
🌜하루를 마치며..
별거한게 없는것 같은데 하루가 지나가 버렸다. 주말은 정말 너무 짧은 것 같다.
왜 이렇게 시간이 빨리가지?
깊게 코드를 공부해보는 시간을 가지진 못했지만 그래도 정리가 안되어있던 부분들을 정리하고 나니 한결 마음이 편하다.
내일은 동영상으로 다른 기초강의도 다시 들어보고 강사님이 수업해주신 부분들도 손코딩하는 시간을 가져보려고 한다. 확실히 강사님은 그냥 아무렇지 않게 말씀하시지만 못알아듣는 용어들이 많은데 이렇게 적어놨다가 찾아보고나면 이래서 이때 이 용어를 쓰신거구나하고 생각이 들때가 있다. 역시 기본지식을 중요하다는걸 다시 한번 느꼈다.
그래도 오늘 하루를 생각보다는? 나름 시간을 잘 썼다고 생각한다.
되도록이면 내일은 오늘보다 조금은 더 시간을 보람차게 사용할 수 있으면 좋겠다.
