[Next.js] Next.js 에 대해서 알아보기 (기능, 한계점 등)
·
Next.js
0311 ✍️ 🔮 Next.js 의 기본 소개 Vercel에서 React.js를 기반으로 만든, 웹 개발을 위한 프레임워크 Route Handler를 통해 백엔드를 다룰 수 있어, 풀 스택 웹 개발이 가능 + 여기서 프레임워크란? 개발자가 기능 구현에만 집중할 수 있게 필요한 모든 프로그래밍적 재원을 지원하는 '기술의 조합'으로, 별도의 셋팅을 개발자가 할 필요 없이 프레임워크가 다 알아서 해줘서 편리하게 개발할 수 있다! Ex ) Next.js, 혹은 JS기반 웹 FE SPA 프레임워크들인 Vue.js, Augular.js 등) + 이에 반해 라이브러리는 공통 기능의 모듈화가 이루어진 프로그램의 집합. 개발자의 별도 셋팅이 필요하며, 프레임워크보다 기능적으로 부족하다고 할 수 있다. 예를 들어, Rou..
[개인 Project] My To-Do List -React페이지 보완하기 (추가,삭제,완료버튼+날짜입력 및 오름차/내림차순 정렬 과제하기)
·
Today what I Learned _TIL
240129 월 TIL ✍ 저번주에도 my todo list 과제를 하고나서 따로 개선해보고. 과제 답안과도 비교해보며 또 새로 배우고 - 베이직반 2차 과제로도 기존 내 my todo list 페이지를 보완해야 했었다. component를 분리했던 방식도, 좀 더 세분화해서 컴포넌트화해줬다. 그 과정에서 props 등 새로 다시 내려줌 또 이번에는 움짤로 만들어 보았따 !! 생각보다 만들기 어려웠다.. obs스튜디오로 직접 화면녹화하고 또 잘라서 gif로 변환하고, gif변환 사이트 프로그램도 어떤 건 안되고 어떤 건 화질이 너무 안좋게 나오고 (내가 하는 법을 잘 몰라서인걸지도).. 여튼 그래도 GifCam 프로그램 (가볍고 간편한 무료 gif짤 생성 프로그램인데, 기존의 동영상을 변환하지는 못하고,..
[React] CRA 보다 빠른 Vite로 React 프로젝트 생성하기
·
Today what I Learned _TIL
240124 수 TIL ✍ 저번 강의에서 CRA 를 배웠었다. CRA 란, Create React App의 줄임말로 - 한 줄의 명령어 입력으로 React 프로젝트 개발의 필수요소를 자동으로 구성하는 방법이다. (리액트 프로젝트를 구성하는 데에 필요한 WebPack, babel, esline 등을 이 한 줄 명령어로 다 셋팅할 수 있다) 원래 이 방법,명령어로 리액트 프로젝트 생성하도록 배웠었는데 Vite('빗')로 생성하는게 더 빠르고 좋다고 한닷 !! 🐱‍🏍 CRA는 발전이 없고 정체되어서 그렇다나. .. Vite는 프론트엔드 툴로, CRA 보다 Vite를 사용하면 개발 시 속도도 빠르고 메모리도 덜 잡아먹어 좋다고 한다. (React 뿐만 아니라 다른 자바스크립트 프레임워크 -Vue, Vanilla..
[개인 Project] My To-do List 페이지 만들기 _ 간단한 회고
·
Today what I Learned _TIL
240123 TIL ✍ React 기초과정 강좌를 듣고나서, my to-do list 페이지를 만들어보는 개인 프로젝트를 진행했다. 하지만 시간도 부족했고 내 이해 부족으로..?! 완료/완료취소 버튼의 기능 (완료 진행중 상태 변경) 은 시도해보다가, 결국 완전히 구현하지는 못한 채 과제를 제출했다. (+ id도 중복 가능성있게 설정했다거나 등의 문제도 많았다) 답안 설명을 보니, 원래의 추가하기 버튼에서 좀 더 생각해보면 답이 나왔을 것도 같다는 아쉬움이 있었다. 하지만 아직까진 props 활용과 component 분리, state 활용 등 실제로 프로젝트를 만들어보면서 헷갈리는 점과 의문점이 정말 많았기에.. 내게는 절대 수월하지 않았다. 😵 이번 프로젝트를 통해 한 것은, 크게 다음과 같다. 컴포넌..