Programming (10) 썸네일형 리스트형 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 [ .. 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.. 제로부터 시작하는 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 웹 리액트 프레임워크. 리액트 컴포넌트 불러다 써주는... 말 그대로 프레임.. [Python]직장인 업무 자동화 활용도 100% 엑셀파일 텍스트 파일로 변환 게임 스크립트(시나리오?) 만들기 게임 개발 + 인턴 생활에 허덕이는 요즘입니다... 인턴십에선 주로 웹개발을 해 게임개발과 관련이 크지 않은데요 두 작업의 공통점이 둘다 열심히 파이썬을 쓰고 있다는 것입니다!!! 1. 엑셀 데이터를 일괄 변환해 활용 2. 데이터 입력 받아 새로운 문자열로 뽑아내기 등등 일일이 했으면 우와 눈 뽑히겠다 싶은 작업들을 파이썬이 대신 해주고 있습니다 ㅎㅎ 오늘은 같이 엑셀시트를 변환해보시죠!! [ 상황 ] 이건 잉크라는 프로그램이고 유니티에서 대화 스크립트를 출력하기 위해 필요한 툴입니다. (나중에 기회가 된다면 이 기능에 대해서도 작성해볼게요 ~_~) 여기서 문제는 스크립트를 맡은 기획팀에서 작성하게 되는데, 1. 기획팀에서 위 태그를 다 작성하면 효율 떨어짐 2. 기획팀은 엑셀이 더 익숙하고 편함 위와 .. 이전 1 2 다음
