본문 바로가기

분류 전체보기

 (45)
자연스러운 맥미니 USB-C 허브 추천 외장하드 케이스 HAGiBiS MC25 리뷰 맥미니는 너무 이쁘지만, 시디롬을 제외한 외장 포트들이 뒷면으로 가있어서 뭔가 연결하려면 번거롭더라구요. 더군다나 외장 하드가 여러개로 늘어나고 있어서 뒷부분이 안이뻐지는 단점이 있습니다.정리하자면,USB 포트, SD 슬롯이 뒤에 있어서 케이블 꼽기가 번거롭다.뭔가 점점 주렁주렁 되어간다.구래서 요거슬 해결해줄 제품을 폭풍검색!뭔가 깔끔한 허브겸 케이스를 하나 발견했습니다! 중국 HAGiBiS 사의 MC25 맥미니 모양이랑 딱 떨어져서 쌓아두기만 하면 마치 일체형인 듯한 디자인이 맘에들더라구요. 뭔가 하드도 맞춰서 넣으면 하드 하나로 외장 데이터가 충분할 듯한. 모양이예요. 요즘 맥미니가 USB-C 연결을 지원하다 보니까 Usb Type-C 연결이 기본입니다.USB2.0 2개, USB3.0 2개, SD,..
Next.js 9 - CSS ModuleTypescript 적용하기 CSS Module import한 클래스이름의 타입설정 import taxStyle from '../styles/tax.module.scss' scss파일에서 클래스 이름을 자동으로 가져오는데 타입을 어떻게 할까 궁금했던 친구들 많을 꺼야. 타입 설정파일 생성! 프로젝트 디렉토리에 global.d.ts 파일을 아래와 같이 만들어줘! declare module "*.scss" { interface IClassNames { [className: string]: string; } const classNames: IClassNames; export = classNames; } 끝! 참 쉽죠? 오늘은 요기꽈쥐!
Next.js - Typescript 적용하기 요즘은 타입스크립트가 대세! 왜냐고 묻는다면, 바로 타입이기 때문이야. Javascript의 장점이자 단점이 명시적인 타입이 없다는 점이야. 즉흥적으로 객체에 필요한 멤버변수들을 추가하기때문에 자바스크립트가 매우 빠르게 결과를 얻을 수 있는 반면에, 프로젝트가 커지고, 여러사람이 함께 작업할 수록, 이 멤버 변수가 어디서 정의되서 어떻게 쓰이는지, 어떤 값이 들어오는지 예측하기 힘들어지고, 본인이 만든 코드더라도, 이때문에 발생한 버그를 잡느라 하루이틀 버리는 건 다반사! 결국, 1~2년 이후에는 너도나도 손대기 싫은 코드가 되버리고, 이때 타입을 적용하고자 한다면, 고생이 말도 아니지! 그래서 오늘은 Next.js에 TypeScript를 적용할꺼야. 타입스크립트 아직 모르는 친구 여기 없지? 아직 모른..
Next.js - API 만들기 (API Routes) 이제 클라이언트 쪽은 알겠는데, API는 어떻게 만들까? Next.js에서 함수 하나로 API를 만들 수 있어! 언제든지 Serverless로 전환하기 쉬운 구조야. 'pages/api' 디렉토리에다가 함수하나만 만들면 끝! 쉽지? // req = 요청데이터, res = 응답 데이터 export default (req, res) => { if (req.method === 'POST') { // POST 요청에 대한 처리 } else { // 나머지 메서드에 대한 처리 } } 끝! 소름! 배포에서 이야기 하겠지만 옵션에 따라 서버리스 함수로 배포될수도 있어 ㄷ ㄷ ㄷ 예제하나 만들어볼까? hello.js라는 파일을 pages/api디렉토리 아래에 만들고, 아래 코드를 작성하자! export default ..
Next.js - 페이지 자동 생성하기 - Dynamic Routes (동적 경로) 지금까지 첫페이지에 블로그 제목 리스트가 나오도록 작성했지만, 각 페이지들을 만들지는 않았었어! 페이지들의 URL을 만들고, 요기 접속하면, 각각의 페이지가 나오는 실습을 할꺼야! 한마디로, Dynamic Routes(동적 경로) 기능을 사용 한다는 말씀! 데이터를 이용해 페이지 Path 만들기 이전 튜토리얼에서 페이지 컨텐츠가 외부 데이터에 의존 하는 걸 다뤘어! 'getStaticProps' 함수를 사용해서 첫 페이지에 데이터를 가져왔었지. 이번에는 첫페이지가 아니라 각 페이지 path별로 데이터를 가져오려고 해! Next.js가 외부 데이터를 기반으로 페이지들을 고정적으로 만들수 있다는 건 이전 Pre-Rendering 강좌에서 봤고, 요 기능 덕분에 Next.js가 동적(Dynamic)으로 URL..
Next.js 킬포 Pre-rendering 2. Server-side Rendering 그리고 Client-side Rendering Pre-rendering중 하나인 Static-Generation은 저번시간에 실습해봤고, 이번엔 Server-side Rendering이야 Next.js 킬포 Pre-rendering 1. Static-Generation Next.js의 킬링포인트 Pre-rendering 개념은 잘 보고 왔지? Next.js Pre-rendering 안녕친구들! 스타일링까지 잘 따라오고 있어? Next.js 스타일링 팁 (classnames, postCSS, Sass) 튜토리얼 잘 따라오고 있어? 오.. ppsu.tistory.com 지금 하고있는 튜토리얼에는 적용하지 않지만, 원하는 친구들도 있을것 같아 정리해봤어! Server-side Rendering 이전 Static-Generation이 "빌드타임"에 HTML..
Next.js 킬포 Pre-rendering 1. Static-Generation Next.js의 킬링포인트 Pre-rendering 개념은 잘 보고 왔지? Next.js Pre-rendering 안녕친구들! 스타일링까지 잘 따라오고 있어? Next.js 스타일링 팁 (classnames, postCSS, Sass) 튜토리얼 잘 따라오고 있어? 오늘은 쉬어가는 페이지! 알아두면 좋은 몇가지 라이브러리들을 소개할께! 지� ppsu.tistory.com Pre-rendering 첫번째 시간! Static-Generation을 실습할꺼야! Next.js의 Static-Generation은 말그대로 그냥 빌드타임에 미리 HTML을 생성해 두는 건데, 요기 또 쿨한 옵션이 하나 있다! 페이지를 생성할 때, 외부 데이터를 읽어와서 조합할 수 있다는 거야! 빌드할때 API를 호출한 결과로 페이지 ..
Next.js 킬포! Pre-rendering 안녕친구들! 스타일링까지 잘 따라오고 있어? Next.js 스타일링 팁 (classnames, postCSS, Sass) 튜토리얼 잘 따라오고 있어? 오늘은 쉬어가는 페이지! 알아두면 좋은 몇가지 라이브러리들을 소개할께! 지금당장은 중요하지 않으니 이번 튜토리얼은 스킵해도 좋아! 깔끔하게 classname 초이스! - ppsu.tistory.com 오늘은 Next.js의 완전 킬포! Pre-rendering 기능에 대해 이야기 할꺼야! Pre-rendering이 뭐야? Next.js는 기본적으로, 모든 페이지를 pre-render 해! 보통 성능이 더 좋고 SEO(Search Engin Optimization)에 더 좋아. "Pre"라는 말이 붙으면 "미리", "먼저" 한다는걸 말해. 예를들면 predi..

티스토리툴바