React

Nextjs 공식문서로 공부하기 - 동적 라우팅

Dynamic Routes Next.js는 외부 데이터에 따라 동적으로 라우팅 주소를 사용할 수 있는 '동적 라우팅(Dynamic Routing)'을 지원한다. 가장 흔한 예로는 블로그 포스트의 번호에 따라 /post/1, /post/2 이런식으로 나누는 것이다. 구현 방법은 간단하게 [과 ]로 파일명을 감싸면 된다. ./posts/[id].js 이런 식이다. 컴포넌트 이름은 그대로 사용하면 된다. 다음과 같은 형태로 사용할 수 있다. import Layout from '../../components/layout'; export default function Post() { return ...; } export async function getStaticPaths() { //..

NextJS 공식문서로 공부하기 - 블로그 만들기

Next.js는 프레임워크이다. 프레임워크란 일반적으로 '특정 응용프로그램을 만들기위한 클래스와 라이브러리로 이루어진 뼈대'라고 설명된다. 그냥 도구만 주어지는 라이브러리와는 조금 다르게, 프레임워크의 뼈대(요구사항)에 맞춰 코드를 구성하면 프레임워크가 직접 코드를 호출하여 애플리케이션을 구동하는 것이라고 나는 이해했다. 어쨌든 이러한 프레임워크를 잘 사용하기 위해서는 이 '뼈대'를 잘 이해하는 것이 중요하다. 그리고 이 뼈대를 가장 잘 설명해주는 것은 당연히 공식문서일 것이다. 저번에 Next.js의 원리와 목적을 아주 간단하게 훑어봤으니 이번에는 공식문서의 튜토리얼을 따라 블로그 프로젝트를 진행해보려고 한다. Next.js 시작하기 리액트에 CRA나 Vite가 있는 것처럼 Next.js도 초기 구성 ..

NextJS 공식문서로 공부하기 - Next.js 동작 원리

나의 NEXT.JS 입문기 사실 NextJS는 예전에 수강한 리액트 강의에서 블로그 만들기 수준으로 대강 다뤄본 경험은 있었지만 아직 제대로 공부해본 적은 없었다. 마침 진행하던 프로젝트도 끝난 상황이라 잘됐다 생각하여 시작해보기로 마음 먹었다. 따로 강의를 사서 볼까도 했지만, 워낙 NextJS팀의 공식문서가 잘 되어있다는 말을 많이 들었다. 이미 직접 프로젝트로 만들어보며 '우와!' 하는 것은 많이 해봤기 때문에 이번엔 동작 원리부터 제대로 공부해보려고 한다. 최근에 버전 13으로 올라가며 변한 부분도 많다고 들었는데 반영이 안 된 강의가 대부분인 것 같기도 했다. 아마 나만 볼 기록이 될 가능성이 크지만... 누군가 보신다면 부족한 공식문서 번역 + 제가 다시 이해하여 부족한 번역에 첨언한 내용이라..

[옥소폴리틱스 인턴십] Laws Cloud 프로젝트 회고 (1)

완성 배포 페이지 http://lawscolud.top 새로운 인턴십 9월 말부터 감사하게도 옥소폴리틱스 사의 인턴십 프로그램에 다시 참여하게 되었다. 4주과정이 끝나고 마지막 발표만을 앞둔 상태라 그동안의 프로젝트를 회고해보려 한다. 팀 컨벤션 정하기 우선 프로젝트에 앞서 팀 컨벤션과 소소한 규칙들을 정하였다. 별거 아닌듯 하지만 컨벤션과 규칙은 미리 구체화 시켜놓는 것이 나중에 훨씬 편하다는 것을 이전 프로젝트에서 경험했기 때문에 주제 선정 이전에 팀 컨벤션을 미리 정하였다. 더보기 미팅 룰 시간 엄수 사정 있을 시 (불참, 지각 등) 1시간 전에는 알리기 디스코드 미팅 매일 오전 10시 미팅 디스코드 항상 온라인 상태 유지 떠오르는 생각은 바로 디스코드에 정리 의견 교환 부정적 피드백 기분 나빠하지..

[React] 리액트 심화 - SPA, React Router, 비동기 프로그래밍

SPA와 React-Router SPA란? 전통적인 웹 어플리케이션의 경우 각 페이지마다 고유한 HTML 페이지를 만들어 페이지를 이동할 때마다 HTML을 로드해야 했다. 때문에 페이지를 이동할 때마다 깜빡임(새로고침)이 발생했고 이는 사용자 경험을 헤친다고 판단되었다. SPA는 Single-page application의 약자로 하나의 HTML 페이지에 앱 실행에 필요한 자바스크립트와 CSS 같은 모든 자산을 로드하는 애플리케이션이다. App에서 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않기 때문에, 페이지를 이동하더라도 새로고침이 되지 않는다! -> Client Side Rendering Routing URL에 따라 알맞은 콘텐츠(UI)를 전달해주는 기능. JavaSc..

[옥소폴리틱스 인턴십] 옥소폴리틱스 FAQ 페이지 구현하기 (2)

Search Bar 구현하기 대부분 검색엔진은 외부 라이브러리 등을 사용하는 것으로 알고 있다. 하지만 이번 프로젝트에서의 검색 기능은 다른 자료를 참고하지 않고 직접 구현해보고 싶었다. 검색 기능은 Category 영역의 정보를 받고 Answer 영역에도 영향을 주어야했기 때문에 Search Bar에서는 검색어를 state로 받고 초기화 기능만 구현하였다. const SearchBar = ({ search, setSearch }) => { const handleChange = (e) => { setSearch(e.target.value); }; const handleClear = (e) => { e.preventDefault(); console.log('clear'); setSearch(''); }; ..

[Cloning] (Nomad Code) Twitter clone code with Firebase & React (2) - Firestore, Firebase storage, FileReader API

데이터 베이스 - Firestore Firestore는 파이어베이스에서 제공하는 NoSQL 데이터베이스 서비스이다. NoSQL NoSQL은 말 그대로 SQL이 아닌 방식의 데이터베이스다. SQL형 데이터베이스는 '관계형 데이터베이스'라고도 부르며, 이름처럼 모든 데이터들이 관계로 연결되어있다. 가장 간단하게는 행-열 형태의 데이터를 갖는 엑셀도 SQL과 비슷한 데이터베이스라고 볼 수 있다(실제로 연동하여 사용하기도 한다). 반면 NoSQL 방식은 데이터 간의 관계를 통해 데이터를 구조화하는 것이 아니라, key를 통해 데이터를 접근한다. Javascript 객체의 key, value 모델이 대표적인 NoSQL 형식의 데이터 저장 방식이다. SQL 방식은 인덱스와 데이터 관계를 통해 데이터에 접근해야 하기..

[Cloning] (Nomad Code) Twitter clone code with Firebase & React (1) - Firebase, React Router, Vice 최신 버전으로 사용하기

리액트 복습과 파이어 베이스 연습이 필요하여 노마드 코더(Nomad Coder)에 있는 트위터 클론 코딩 코스를 수강하였다. 이런 코스를 무료로 제공하고 있다는 점이 놀랍다. 이 강좌에서는 Firebase와 React Router의 이전 버전을 사용하고 있었고, 해당 버전의 설치 후 수강이 권장되었다. 하지만 나는 호기롭게 공식문서와 함께 최신 버전을 사용해보기로 하였고 이것은 큰 고난의 서막이었다.... React Router 리엑트 라우터가 최근 업데이트에서 크게 바뀌었다. 나는 입문자이기 때문에 애초에 이전 버전을 접해본적이 없어 잘 모르지만 강의와 비교하여 달라진 점을 찾아내느라 애를 먹었다. Upgrading from v5 - React Router 대신 Switch로 Route들을 감싸던 방식..