개발/JavaScript
-
Vanilla TypeScript + Vite + Web Front개발/JavaScript 2024. 9. 17. 09:52
https://github.com/Hyeonnam-J/assets.git GitHub - Hyeonnam-J/assetsContribute to Hyeonnam-J/assets development by creating an account on GitHub.github.com 1. 현재 폴더에 vite project 생성. npm create vite@latest .차례로 Vanilla, TypeScript 선택. 2. 서버 실행. npx vite 3. 빌드. 의존성 설치: npm install빌드: npm run build
-
Vanilla TypeScript + Electron개발/JavaScript 2024. 9. 16. 15:24
1. 일렉트론 문서를 보고 초기설정. npm init -ynpm i -D electron package.json에서 main 변경, scripts의 start 추가. index.html / main.js / preload.js 파일 추가. 일렉트론 공식 문서의 코드를 그대로 붙여 넣었다. 완료하고 나서 npm start를 입력하면 일렉트론 앱 실행. 2. 타입스크립트 세팅. npm i -D copyfiles npm i -D typescriptnpx tsc --init src 디렉터리를 만들고 main.js와 preload.js를 그 안에 넣어준 뒤 확장자를 ts로 바꿔준다.그 외 index.html도 src 아래로 옮기고, assets, ts 디렉터리를 만든 후 연결한 css와 ts 파일 ..
-
VSCode에서 TypeScript 디버그 환경 세팅개발/JavaScript 2024. 7. 14. 12:27
node npm 설치. npm init -ynpm install --save-dev typescriptnpx tsc --init 위와 같이 설정한 후 vscode에서 F5를 누르면, https://github.com/Hyeonnam-J/assets.git GitHub - Hyeonnam-J/assetsContribute to Hyeonnam-J/assets development by creating an account on GitHub.github.com
-
TypeScript를 이용해서 스도쿠 게임을 만들어보자 !개발/JavaScript 2024. 7. 13. 16:43
스도쿠 게임을 만들어보자 ! 그냥 재미삼아 만들었습니다. 사람이 머리를 써서 만드는 게 아닌 컴퓨터 연산의 힘을 빌려 랜덤하게 모든 빈칸에 수를 넣어 문제를 만드는 탓에 빈칸이 많은 문제는 생성하지 못합니다. 빈칸과 난이도가 반드시 일치하는 것은 아니지만 어쨌든 저는 빈칸이 그리 많지 않은 문제를 랜덤하게 생성하는 데 쓰고, 빈칸이 적은 문제는 직접 하드코딩해서 메모리에 로드해둔 방식으로 완성했습니다. 여기서는 스도쿠 문제를 생성하는 데까지 진행하고, 이후 스도쿠 테이블을 눌렀을 때 어떻게 반응하는지와 같은 게임적인 요소는 생략하겠습니다. 빈칸이 하나 늘어날 때마다 많은 검증을 해야 하기 때문에 유저가 게임을 시작할 때 큰 기다림 없이 1, 2초 내에 실행되기 위해서는 숫자칸이 22개 정도가 한계인 것 ..
-
Vanilla TypeScript + Web Front개발/JavaScript 2024. 6. 1. 23:24
npm init -y npm i -D typescriptnpm i -D copyfilesnpm i -D live-server npx tsc --init index.html 파일의 태그 경로는 후에 빌드될 파일의 경로로 작성. 빌드: npm run build 실행: npx live-server build 개발 중,- ts 파일은 npx tsc --watch를 입력해 src 아래 변경사항을 실시간으로 빌드 디렉터리에 반영해 확인한다.- html / css 파일은 지금 복잡하고 무거운 라이브러리를 쓰고 싶지 않은 것이기 때문에 어쩔 수 없이 build 아래 파일을 직접 수정해서 실시간으로 확인해야 한다. 물론 그러고 나서 수정사항은 다시 src 아래로 덮어씌워줘야 한다. 개발이 완전히 끝나면 빌..