Programming/Web (6) 썸네일형 리스트형 Next.js 빌드 자동화 package.json - "watch": "webpack --watch" 추가 "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "watch": "webpack --watch" }, next.js$ npm install -g webpack$ npm run watch$ npm run start React Next.js 기초 튜토리얼 (+Node.js), 세팅을 마쳤으니 개발을 시작하지 _실전 웹 애플리케이션 개발 (4) 안녕하세요 오늘도 개발하기 딱 좋은 날씨입니다. 거짓말입니다. 그런 날은 없습니다. 그래도 해야죠 나는 어른. 이닉가. 리액트 시작하기 리액트-타입스크립트 폴더 생성 # 'react-sample' 이라는 이름의 타입스크립트+리액트 프로젝트 생성 $ npx create-ract-app@latest react-sample --template typescript # 프로젝트 폴더로 이동 $ cd react-sample # 돌리기 $ npm run start Typescript 기본 원리 src/index.tsx ---(Transport)---> public/index.html 리액트 컴포넌트 Component : 생성 폴더와 코드 생성 FYI. 코드를 터미널로 생성하려면? -> code Hello.tsx [ .. React VSCode 세팅 & TyepScript 개발 도구 세팅(Prettier, ESLint, tsconfig.json)_실전 웹 애플리케이션 개발 (3) 리액트 프로젝트 생성 세팅을 위해선 아래와 같은 내용을 Visual Studio Code 터미널에 적어봅시다 전 갠적으로 깃허브에 레포 생성하고 그 폴더에 프로젝트 폴더 생성해놨네요~ 어떻게든 깃헙 잔디를 심겠다. # 아래 명령어로 프로젝트 폴더 생성 $ npx create-react-app react-sample --template typescript # 프로젝트 루트로 이동 $ cd react-sample # 개발 서버 실행 $ npm run start 위 내용을 입력하면 위 형식으로 프로젝트 파일이 생성돼요 우와! node.js 짱이다! 그리고 타입스크립트 기반이기에 src/index.tsx -> public/index.html (js) 이렇게 컴파일 된다고 하네요 짱~ 타입스크립트 개발 도구 설치.. TypeScript, 어떤 타입까지 가능하니_실전 웹 애플리케이션 개발 (2-2) > [ 정의 방식 ] - var : 이제 안 씀 - let : 이걸로 변수 정의 - const : 상수 변수 정의 [ 원시 타입 ] - string - number - boolean - ex. let age: number = 36 [ 배열 ] const 변수명: string[]= [] array.push('') // 변수 타입과 같은 원소 const 변수명: (string|number)[] = ['d', 1] // Union let book__name_price:[string, number] = ['카밍 시그널', 13320]; // tuple - Union : 여러 타입 넣기 가능 - Tuple (https://yamoo9.gitbook.io/typescript/types/tupl.. 제로부터 시작하는 TypeScript VSCode 세팅_실전 웹 애플리케이션 개발 (2-1) 안녕하세요? 웹 알못. 게임 외길 인생. 비트입니다. 이번엔 VSC에서 TSC (라임보세요 푸하항)를 돌리는 방법에 대해 말씀드리겠습니다 1. 확장 : Code Runner 다운로드 -> ctrl + alt + n 으로 코드 실행 2. npm install -g typescript 2-1. test.ts 작성 function sayHello(firstName: string) { console.log('Hello ' + firstName) } let firstName: string = 'nyan' sayHello(firstName) 3. tsc --strictNullChecks sayHello.ts 그으리고! 여기서 오류가 났습니다. tsc : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\.. Node.js, React, Next.js, TypeScript.. 그게 뭔데 개발자야_실전 웹 애플리케이션 개발 (1) javascript 차이점 안녕하십니까 야생의 백수 아주 백수 비트입니다. 과거 대학을 다니고 인턴십을 하며 음~ 다신 웹 개발 안 하겠다! 다짐했는데 또 이렇게 웹 개발을 하게 되었네요 허허 제 수준은 딱 HTML, CSS, JS - Java(DAO, MyBatic 등)- Oracle 이런 MVC 패턴에 멈춰있는데 어우 요새는 뭐 JS 로 다 하더라고요? Latte는 이렇게 어? 이런 웹 개발을 해야 했는데 요즘 친구들은 말이야~ (라고 00년생이 외치다) 어찌됐든 저찌됐든 저처럼 Java와 HTML이 익숙하신 분이 Modern 한 웹 개발에 접근하고 싶으실 때 도움이 되시길 바라며 요런 기록을 해봅니다 :) 뭐시기 js... 그게 뭔데? Next.js 웹 리액트 프레임워크. 리액트 컴포넌트 불러다 써주는... 말 그대로 프레임.. 이전 1 다음
