본문 바로가기

Study/Front-End

(3)
Next.js란? 요즘 Next.js도 많이 쓴다고 해서 궁금해서 사이드 프로젝트에서 한번 써보고 싶어서 공부해보려고 했습니다. 공부를 시작하기 전에 Next.js란 어떤 것인지 알고 공부하면 좋을 것 같아서 포스팅을 작성하게 되었습니다. Next.js의 정의 따로 설정이나 라이브러리를 설치하지 않아도 SSR, SEO, TypeScript 등 생산에 필요한 여러 가지 기능들을 제공하는 React 프레임워크입니다. Next.js는 어떤 곳에서 만들었나? Vercel이라는 Front-End Team에서 만들었습니다. Next.js를 사용하는 이유와 특징 SSR(Server Side Randering) 사실 Next.js를 사용하는 가장 큰 이유는 바로 SSR입니다. 이 부분에 대해서 이해하기 위해서는 SSR과 CSR의 차이를..
SSR(Server Side Rendering)과 CSR(Client Side Rendering) 오늘은 Next.js를 공부하면서 알게 된 SSR과 CSR에 대해서 설명을 하겠다. 먼저 SSR에 대해서 설명하겠다. SSR이란? SSR은 Server Side Rendering의 약자이다. SSR은 전통적인 웹 애플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 페이지에 대한 요청을 하게 된다. 이때, 서버에서는 HTML, View와 같은 자원(Resource) 들을 어떻게 보여 줄지 해석하고 렌더링 하여 사용자에게 반환한다. 참고로 웹 서버에 요청할 때마다 브라우저에게 새로고침이 일어나게 되고, 서버에 새로운 페이지에 대한 요청을 하는 방식이다. SSR의 장점? - 검색 엔진 최적화(SEO) 가능 SSR의 가장 큰 장점 중 하나다. SEO에 대해서는 아래에서 설명하겠다. - 초기 로..
React Study 학생 전문가 특강 신청 웹 사이트 학교에서 사용할 '학생 전문가 특강 신청 웹 사이트'를 만들기 위해 선배들에게 React를 배우는 중 (2020. 10. 07 글) 전에 3학년 선배들이 학교에서 사용할 웹 사이트를 만들었는데, 3학년 선배들은 이제 취업을 하고 학교를 떠나기 때문에 웹 사이트를 유지보수할 사람이 필요하다고 하셨다. 나는 비록 유지보수지만 하나의 프로젝트에 참여를 할 수 있으므로 하겠다고 신청을 하였다. 공부를 시작한 건 좀 되었지만 학교 생활과 이것 저것 하느라 못 쓰다 이제서야 블로그를 쓰게 되었다. 오늘 배운 것은 React-Bootstrap 중 Navbar, Nav, NavDropdown, Modal을 배웠다. Navbar는 Bootstrap에서 메뉴바를 만드는데 도움을 준다. 설..