Next.js 썸네일형 리스트형 코드 리팩토링 비동기편 (await과 병렬) 비통기 통신 await과 병렬통신 프로젝트 코드를 보던 중 비동기에 대해 생각하고 있었는데 await이 지금 내 프로젝트에 어울릴까 하는 생각이 들었고 await 보다 병렬 통신이 더 잘 어울린다 생각해 병렬 통신으로 바꾸게 되었다! 비동기이란? 두 가지 작업이 동시에 실행되거나, 하나의 작업이 끝날 때까지 기다리지 않고 다른 작업을 실행하는 것을 말한다. 탕짜면 주문이 들어왔을 때와 볶음밥과 짜장면이 하나씩 주문 들어왔을때 써야할 비동기 통신이 다르다! await은 탕짜면? await은 비동기적으로 데이터베이스 쿼리를 실행하고 결과를 가져오는 방식이다. 특징은 아래와 같다. - 개별 데이터 호출에 대해 순차적으로 처리 - 코드의 가독성이 좋음 - 데이터 호출이 순차적으로 처리되므로, 데이터 호출 간의 .. 더보기 솔로 프로젝트 회고! NEXT.js를 이용한 프로젝트가 5일전에 끝이났다. 프론트는 React 와 비슷해 편했고 HTML,CSS를 한 시간은 8시간이 넘지 않았다. 공부한 것을 활용하는 재미가 있었다. 조금 더 규모가 큰 프로젝트를 하고 기능이 많은 프로젝트를 새로 하고싶지만 우선은 취업부터! 배포는 Vercel 을 이용했다. 아쉬웠던 점 1. 시간이 없다고 생각해 작은 프로젝트를 진행한것. 마음이 바빠 규모가 작은 프로젝트를 진행했다. 기본적인 CURD와 서버기능만 넣었더니 섭섭한 느낌이다. 빨리 취업해 몰입하는 삶을 살고싶다! API 연결해서 날씨라도 넣을까.. 2. 디자인 패턴에 대해 깊게 생각하지 않고 개발을 시작했던 것 팩토리 메소드 페턴에 공부하고 먼저 계획을 세워 개발을 시작했다면 더 완성도 있었을것 같다. 3... 더보기 HTML로 구조를 만들고 CSS로 옷을 입히자! HTML로 먼저 구조를 짜고 CSS로 옷을 입혔다! 처음에는 디자인을 보면서 구조를 짰다. 그 후 className과 id를 넣고 display 나 flex-direction 속성을 넣으며 디자인에 맞는 위치에 글이나 박스를 배치했고 배경색과 폰트사이즈, 마진 값을 줬다! 이런식으로 하니 나중에 css를 수정할때 속성이 꼬이지 않아 수월했고 무엇보다 더 재밌었다. 그 후 완성됐다! 이 페이지의 소요시간은 약 1시간 30분? 정도나 걸렸다! (화장실 가는 시간 빼면 더 줄지도,,) 저기 은행 마크 아래 최고연 이라는 글씨나 상세한 CSS 조정에 시간이 소요됐다. 더보기 프로젝트 디자인을 HTML과 CSS로 이틀간 하루에 3페이지씩 만들었다. 이제 4~5 페이지만 만들면 HTML은 끝이다! 처음 홈 화면 만들때보다 나중 갈수록 속도가 더 빨라지는게 느껴져 기분이 좋다. 더보기 Next.js 1 (라우팅) Next.js 는 리액트 문법이 기반이기 때문에 기존에 리액트를 사용해봤다면 수월하다! (개꿀) Next.js는 자동 라우팅 기능이 있다! 자동 라우팅이라니! 리액트에서는 BrowserRouter, Routes, Route = path 같이 여러 작업을 했었는데 next.js 는 사용하지 않는다! 사용법! 위 사진처럼 app 안에 새로운 폴더를 만들어 주면 된다! 그럼 자동으로 폴더 명으로 url이 생성된다. 그리고 이렇게 page.js를 만들어 주고 우리 React 쓰듯이 아래처럼 만들어주면 이렇게 나온다! 만약 /hello/world 라고 만들고 싶을때는? 위에서 app 폴더에서 한것처럼 하면 된다! 더보기 Next.js를 알아보자! Next.js는 무엇이냐! 1. React 라이브러리의 프레임워크로 Server side rendering (서버에서 HTML다 완성해서 보내주는 것)을 할 수 있다. 2. client side rendering으로도 할 수 있다. 3. 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR) 도 가능하다! Next.js를 쓰는 이유! SEO(Search engine optimization)를 위한 SSR(Server side rendering) 이전에는 React 나 vue같은 라이브러리를 써서 client side rendering (CSR)을 했었다. 그 이유는 화면이 부드럽게 렌더링 되고되고 특정 부분의 .. 더보기 이전 1 다음
