전체 글 (37) 썸네일형 리스트형 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 Next.js 입문: page router to app router!_실전 웹 애플리케이션 개발 (4) 프로젝트 셋업 $ npx create-next-app@latest --ts next-sample$ cd next-sample$ npm run dev-> http://localhost:3000/$ npm run build$ npm run start# 빌드 생성 및 서버 가동페이지 만들고 위 작업 반복Side page (w. app router)생성 : app/sample/page.tsx-> page.tsx 혹은 page.js 와 같은 파일명으로 생성function Sample() { return Hello, world}export default Sample 정적 페이지 테스트 (SSG)import { GetStaticPaths, NextPageContext, NextPage, GetStaticPro.. [시작해요 언리얼 2024 후기] 1. Start Level : Like 마치 오늘의 집 원룸 꾸미기 강의 후기 안냐세요.매일 유니티만 쓰다가 언리얼은 처음인데요.아우.아주 재밌습니다요. 저 왼쪽 상단의 메세지 hide를 했어야 하는데~ 하는 맘이 들 정도로고화질로 뽑혀서 신기할 따름이네요~ 이건 제가 살고 있는 원룸입니다.설마 알아보시는 분은 없겠져.머쨌든 진짜 제 원룸 + 이렇게 꾸미면 어떨까 하는Like 마치 오늘의 집 you know? 로 꾸며봤습니다.맘에 드네요 호호강의 내용 압축폴더 저장 시 config, content, 프로젝트 파일 만 옮기면 됨뷰포트카메라 이동우클릭 드래그wasdqe오브젝트Object 배치Content Browser : Ctrl + Space barMesh - 배치딱딱 끊기는 느낌 - 이동, 스냅 걸려 있음. ⇒ 우측 상단 버튼으로 스냅 온오프오브젝트 카메라 포커스 : F.. 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 [ .. [error] No files matching the pattern were found : Prettier (VSCode) 분명! 책에서 하라는 대로 했는데! > react-sample@0.1.0 prettier-format > prettier --config .prettierrc 'src/**/*.ts' --write [error] No files matching the pattern were found: "'src/**/*.ts'". 이런 오류가 나요! package.json 수정 'src/**/*.ts' -> src/**/*.ts "scripts": { ... "prettier-format": "prettier --config .prettierrc src/**/*.ts --write" }, 허무... 하지만 됐으니 다행~ Bazel & Bazelisk 설치 튜토리얼 왜 설치하려는가? 플러그인을 사용하려는데 요구사항에 Bazelisk 가 있더라구요. 이게... 뭔데? 해서 알아보니 빌드 및 테스트 자동화 도구라고 합니다. 일단? 시간이 없는 관계로 더 알아보지 않고 호다닥 설치로 넘어가 봅시다. 설치 튜토리얼 권장: Bazelisk 사용해 설치 권장사항을 따라가는 새나라의 개발자가 되어 봅니다. Bazelisk 설치 참고 : Bazelisk Gihub Package Download를 위한 Chocolately 설치 Chocolately : 윈도우 커맨드 라인 패키지 매니저 Installing Chocolatey Chocolatey is software management automation for Windows that wraps installers, executab.. 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.. 이전 1 2 3 4 5 다음
