Web
Next.js의 기본 구조 정리
Next.js의 기본 구조 정리
2020.11.22Next.js 구조 Next.js의 기본 구조는 다음처럼 구성됩니다. |-- pages | |-- _document // HTML Document, Application Container, 각종 페이지 등을 작성한다. | |-- _app // Application Container. 공통의 레이아웃을 작성한다. | |-- _error // Error Page. | |-- hello // Hello Page /hello로 시작되는 경로의 페이지 컴포넌트 _app // import App from 'next/app' function MyApp({ Component, pageProps }) { return } // Only uncomment this method if you have blocking data ..
Creative Coding을 들어가며
Creative Coding을 들어가며
2020.11.14Creative Coding 몇 년전에 김종민님이라는 개발자분의 포트폴리오를 보고 엄청 놀랐던 기억이 난다. 웹에서 예술을 구현했다고 해야할까 웹이라는 접근 편의성과 인터페이스를 이용한 인터렉티브를 정말 제대로 이용하였고, 몇몇 작업물만 보아도 내공이 느껴지는 작품들이였다. 그 당시, FE 개발자를 희망하고 디자인에 관심이 있다보니 저런 작업물을 만들어보고 싶었지만, 현재까지 생업을 핑계삼아(라고 쓰고 귀찮아서라고 읽음) 이런 생각들을 구석에처박아 놨었다. 그러다가 해당 개발자분이 운영하는 채널의 영상이 드문드문 유튜브에서 추천되어서 봤더니 올 해부터 유튜브 영상으로 작품에 대한 스토리 혹은 튜토리얼 등을 올리시는 걸 알게되었다. 이렇게 본격적으로 알려주는데 구석에 쳐박아 놓았던 나의 생각을 이제 꺼내볼..
Next.js에서 Apollo Client 사용하기
Next.js에서 Apollo Client 사용하기
2020.11.14Apollo Client @apollo/client 라이브러리를 이용합니다. Apollo는 GraphQL 서버에서 필요한 정확한 데이터를 쉽게 query할 수 있는 GraplQL 클라이언트입니다. 데이터를 가져오고 변조하는 것 이외에도, Apollo는 query와 그 결과를 분석하여 클라이언트 사이드 캐시를 구성하며 이를 통해 추가 query와 mutation이 실행될 때 최신 상태로 유지되게 합니다. Next.js에서 Apollo Client 사용하기 SSR을 할 수 있는 Next.js 프레임워크에서 Apollo Client를 사용하는 방법이 여러가지 있다. next-with-apollo라는 라이브러리가 유명하지만 아쉽게도 최신 스펙인 getServerSideProps나 getStaticProps를 정..
Express와 Koa를 비교해보자
Express와 Koa를 비교해보자
2020.09.15비교 기준 인기(GitHub 스타 수, npm 다운로드 수) 설치 기초 Hello World 앱 장점 단점 성능 보안 커뮤니티 참여 Express GitHub 스타 수: +50,100 npm 주간 다운로드 수: +12MM Express는 최소한의 유연한 웹과 모바일 애플리케이션을 위한 탄탄한 특징들을 제공하는 Node.js 웹 애플리케이션 프레임워크로 서버와 라우트를 다루는 걸 도와주는 미들웨어처럼 작동합니다. 설치 express를 설치하기 위해서 Node.js가 설치되어있어야 합니다. 만약 express를 특정 위치에 설치하고자한다면 $ npm install express --save 잠깐 설치하고 dependencies 목록에 추가하기를 원하지 않는다면 $ npm install express --no..
create-react-app 와 next.js 어떤 걸 써야 할까?
create-react-app 와 next.js 어떤 걸 써야 할까?
2020.09.15CRA(eject X) vs CRA(eject O) vs Next.js CRA without eject CRA에서 eject를 하지 않고 사용하는 방법 React를 이용하여 프로젝트를 만들 때 사용하는 가장 기본적인 방법 장점 신경써야 할 코드량이 적음 webpack 설정을 신경쓰지 않을 수 있음 단점 react-scripts로 인한 추상화로 설정 flow 이해가 힘듬 추상화 정도가 높아서 라이브러리 적용시 webpack등 코어한 부분을 건드려야할 경우, 결국 eject를 해야 함 (CRA 공통) webpack-dev-server를 이용한 개발 모드를 위한 서버만 제공, build된 파일로 프로덕션 서버(BFF) 실행을 위해서는 CRA와 동떨어진 새로운 서버를 만들어야함 (CRA 공통) SSR을 자체적으..
tsconfig.json 컴파일 옵션 정리
tsconfig.json 컴파일 옵션 정리
2020.05.28tsconfig.json Typescript는 동적 타입언어인 JavaScript를 타입이 있는 형태로 코딩할 수 있게 해주는 언어입니다. 따라서 TypeScript로 짜여진 코드를 JavaScript로 변환해 줄 트랜스파일러(컴파일러)가 필요합니다. 컴파일은 다음과 같은 커맨드로 사용 가능합니다. tsc foo.ts 해당 컴파일 과정에 여러 옵션을 정할 수 있는데 이 옵션을 작성하는 파일이 tsconfig.json입니다. tsconfig.json의 기본 형태는 다음 커맨드를 통해 생성할 수 있습니다. npx tsc --init 해당 커맨드로 생성되는 기본 형태의 tsconfig.json 및 옵션들은 다음과 같습니다. tsconfig.json의 컴파일 옵션 정리 { "compilerOptions": { ..
[HTML5] <audio> 요소
[HTML5] <audio> 요소
2020.04.12HTML 요소는 문서의 소리 콘텐츠를 포함할 때 사용한다. HTML5 이전에는 웹 페이지에서 오디오를 들려주기 위한 표준안이 없어서 오디오를 삽입하기 위해서는 플래시와 같은 외부 플러그인에 의존해야했다. 하지만 HTML5에서는 요소를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공한다. src 값 또는 요소를 사용하여 하나 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 자동으로 선택한다. MediaStream을 사용하면 미디어 스트림을 할 수도 있다. 오디오 파일 형식 HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, OGG이다. 오디오 관련 요소 요소 설명 오디오와 음악 등 오디오 파일을 명시한다. audio 요소의 원본..
직접 제작한 리액트-타입스크립트-보일러플레이트 소개
직접 제작한 리액트-타입스크립트-보일러플레이트 소개
2020.03.15👋 들어가며 오늘은 필자가 간단한 프로젝트를 시작할때마다 사용하는 React와 TypeScript를 이용한 보일러플레이트를 소개하고자한다. 해당 보일러플레이트의 링크는 다음과 같다. react-typescript-boilerplate 🏗 기본구조 기본은 create-react-app의 타입스크립트 템플릿 기본적으로 create-react-app의 타입스크립트 템플릿 기반이다. 해당 템플릿은 다음 커맨드로 설치할 수 있다. npx create-react-app my-app --template typescript # or yarn create react-app my-app --template typescript global-styles.ts 전역으로 쓰이는 CSS 파일은 global-styles.ts라는 파..
리액트에서 새로고침을 해야 함수가 작동하는 경우
리액트에서 새로고침을 해야 함수가 작동하는 경우
2020.03.02문제 webstomp-client라는 라이브러리를 이용중인데 Opening Web Socket... 위 콘솔만 찍히고, 소켓에 연결이 안되는 버그가 있었습니다. 그런데, 새로고침 이후에는 제대로 연결이 되었습니다. 해결 여러 삽질을 한 결과, react-router-dom의 의 props인 history를 이용한 코드가 문제였습니다. history.push("/"); react-router-dom의 경우 SPA(Single Page Application)에서 CSR(Client Side Routing)을 구현하기위한 라이브러리이기 때문에 history.push("/")를 이용해 url이 변경된 것처럼 보이지만, 실제로는 변경되지 않은 상태입니다. 따라서 실제로 url을 변경하기 위해서, 여기에서는 아래의..
내가 쓰고 싶은 데이터 오픈 API에서 찾아보자!
내가 쓰고 싶은 데이터 오픈 API에서 찾아보자!
2020.02.16👋 들어가며 최근 오픈 API를 정리하는 오픈소스 프로젝트 public-apis-korea를 만들고 있다. 기존에 있는 public-apis를 번역만 하자는 생각이었는데, 제대로 정리된 곳도 없는 것 같고, 국내에서도 네이버나 카카오등에서 제공하는 오픈 API가 많아지면서 좀 더 욕심내보기로 했다. 아무튼 이 프로젝트를 진행하면서 공부한 API가 무엇이지 그리고 여러 오픈 API를 제공하는 서비스에 대해서 알아보고자 한다. 🤔 API란? Application Programming Interface의 약자로 운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식을 말한다. 즉, 어플리캐이션의 프로그래밍을 위한 인터페이스라 할 수 있다. 여기에서 API는 사람을 위한 인터페이스가 아닌 프로그래밍을..
[Next.js] 공유된 컴포넌트 사용하기
[Next.js] 공유된 컴포넌트 사용하기
2020.01.21이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. Next.js는 결국 페이지라는 것을 알 것입니다. 리액트 컴포넌트를 내보내고 해당 컴포넌트를 pages 디렉토리 안에 넣으면 페이지를 만들 수 있습니다. 그 결과로 파일명에 기반한 고정된 URL을 얻을 수 있습니다. 내보내진 페이지들은 자바스크립트 모듈이기 때문에, 다른 자바스크립트 컴포넌트도 불러올 수 있습니다. 무슨 자바스크립트 프레임워크를 쓰던지 이와 같은 기능을 기대할 것입니다. 이번 수업에서 우리는 공통된 헤터 컴포넌트를 만들고 여러 페이지에서 이를 사용할 것입니다. 마지막으로는 레아아웃 컴포넌트를 구현하고 이것이 어떻게 여러 페이지가 어떻게 보일 지를 정하는 데 도움을 줄 것..
[Next.js] 페이지 간 이동하기
[Next.js] 페이지 간 이동하기
2020.01.20이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. 이제 간단하게 Next.js 앱을 생성하고 실행하는 법은 알 것입니다. 이 앱은 오직 하나의 페이지를 가졌지만, 우리는 가능한 많은 페이지를 추가할 수 있습니다. 예를 들어, pages/about.js에 다음과 같은 내용을 추가하여 "About" 페이지를 생성할 수 있습니다. export default function About(){ return( This is the about page ); }이제 http://localhost:3000/about 페이지에 접근할 수 있을 것입니다. 다음으로는 이 페이지들을 연결해야하는데, 우리는 HTML의 태그를 사용해왔습니다. 그러나 클라이언트 사이..