시작하게 된 계기
나는 벌써 컴퓨터공학과 3학년이 되었지만 기억나는 내용은 파이썬 기초문법, 자바 기초문법, 알고리즘 개념이 전부인 감자 그 자체이다.
이제 2년 뒤면 졸업하고 취준을 해야하는데 아는게 하나도 없어서 기초부터 하나씩 공부해 나갈 예정이다.
왜 공식문서를 보면서 공부하라고 하는지 체감이 되지 않았고, 영어를 매우매우 못하기 때문에 번역이 된 책이나 남들이 써준 블로그 글을 보면서 개발 프로젝트를 진행해왔다. (지피티만세)
예전부터 인스타 팔로우를 해왔던 개발자 성열 님의 velog를 우연히 보게 되었고, next.js를 쉽게 알아보는 문서를 찾게 되어 이 문서를 기반으로 학습할 예정이다. 영어를 못하지만 천천히 읽고 번역기를 돌려보면서 맥락이 맞는지 체크하면 프레임워크도 배우고 영어실력도 올라가지 않을까 하는 마음에 느리지만 해당 방법을 채택하게 되었다.
- 공부는 능동적인 방법으로 해야 기억에도 오래 남고 더 효율적으로 할 수 있기 때문도 있다.
- 아무튼.. 뭐라도 하면 뭐라도 되겠지 ㅎ..
- 학습한 내용을 이해한대로 정리해서 올리는거라 혹시 잘못된 내용이 있으면 피드백 주시면 감사하겠습니다!!
1. React, Next.js 기초
Next.js는 리액트 프레임워크인데 빠르게 풀스택 웹 애플리케이션을 만들 수 있다.
웹 애플리케이션을 구축할때 고려할 사항들은 아래와 같이 있다.
- 사용자 인터페이스 - 사용자가 애플리케이션을 사용하고 상호작용하는 방식입니다.
- 라우팅 - 사용자가 애플리케이션의 여러 부분 사이를 탐색하는 방식입니다.
- 데이터 가져오기 - 데이터가 어디에 있는지, 그리고 어떻게 가져오는지.
- 렌더링 - 정적 또는 동적 콘텐츠를 언제, 어디에서 렌더링하는지.
- 통합 - 어떤 타사 서비스를 사용하는지(CMS, 인증, 결제 등)와 이러한 서비스에 어떻게 연결하는지.
- 인프라 - 애플리케이션 코드를 배포, 저장, 실행하는 위치(서버리스, CDN, 엣지 등).
- 성능 - 최종 사용자를 위해 애플리케이션을 최적화하는 방법.
- 확장성 - 팀, 데이터, 트래픽이 증가함에 따라 애플리케이션이 어떻게 적응하는지.
- 개발자 경험 - 애플리케이션을 구축하고 유지 관리하는 팀의 경험입니다.
웹의 특성에 따라 각 부분을 직접 만들지, 라이브러리나 프레임워크 등을 사용해서 개발할지 결정해야한다.
리액트(React)는 대화형 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이다.
사용자 인터페이스(UI)란 사용자가 화면에서 보고 상호작용하는 요소를 의미한다.
요약
리액트는 JavaScript 프레임워크이고 Next.js는 리액트 기반으로 만들어진 프레임워크이다.
리액트를 사용해서 UI(사용자 인트페이스)를 구축하고 거기에 Next.js 프레임워크에서 제공하는 기능을 도입해서 라우팅, 데이터 패치, 캐싱 등을 해결할 수 있다.
