본문 바로가기

전체 글

25

Express.JS #2 - RestAPI 만들기 목차 RestAPI란 RestAPI란 웹에서 클라이언트와 서버가 데이터를 주고받는 위한 방식 중 하나 입니다.주고받는 데이터 형식은 보통 Json을 사용합니다. 꼭 Json을 사용해야하는것은 아니며, Xml, Html을 사용하여도 무방합니다. Json은 어쩌다 규격이 되었을까?Json은 Javascript Object Notation의 약자로 이름 그대로 Javascript에서 객체를 표현하는 문법에서 시작되었습니다.더글라스 크록포드 라는 사람이 Javascript 객체 표기법을 정리해서 만들게 되었는데아 이거 좀 정리할 수 없을까 해서 나온게 Json이라고 보면 됩니다. 자바스크립트에서의 초기의 객체 표기법은 아래와 같은데아래와 같은 방법은 서버와 주고받는 방식이 아닌, 객체 선언용으로 사용을 했습.. 2026. 8. 28. 16:37

CPU 사용량 프로그램 목차 이번에는 CPU 사용량 프로그램을 만들어보았습니다.베이스로는 Html, Css, Javascript 입니다.Rust로 묶어서 윈도우 프로그램에서 동작할 수 있도록 구성했습니다. IOS는 제가 mac이 없어서 못했습니다. 타우리 vs 일렉트론타우리와 일렉트론이 있지만서도, 타우리를 선택한 이유는가볍게 동작하기 위함이였습니다. 일렉트론 자체는 크로미움을 기본적으로 돌리기때문에 굉장히 무거워져서 슬랙같은 프로그램이 아니고서야 사용할일이 드물다고 판단했습니다.물론 주관적인 의견인만큼 반박시 의견 주신분들의 말이 옳습니다. 굳이 이걸 왜 만들었냐고 하면심심해서 만들었습니다. 그냥 이쁘게 보여질게 필요했던것 뿐 입니다. 프로그램 소개 서론이 길었습니다.프로그램을 소개하겠습니다. 프로그램은 기본형, 가로형,.. 2026. 8. 19. 00:41

화살 피하기 게임 개요화살 피하기 게임을 리메이크 해보았습니다.화살 피하기 게임의 제작 과정은 아래의 블로그에서 확인하실 수 있습니다. 화살 피하기 게임 구현하기안녕하세요. 이번에는 화살 피하기 게임을 구현해 보았습니다. 예전에 죽림 고수라는 게임에서 영감을 받아...blog.naver.com 구글 로그인, 점수 관련한 스킨 상점, 전체적인 디자인 효과 수정 및 아이템 추가를 했습니다.클로드를 이용해 디자인만 변경해보아도 어느정도의 게임 퀄리티는 나오는 듯 합니다. 플레이앞으로의 추가할 보완 및 업데이트 내용들을 해당 게시물에 작성할 예정입니다.누군가가.. 플레이 해주실지는 모르겠지만, 이랬으면 좋겠다는 아이디어가 있으면 적극 반영해보겠습니다. 플레이는 아래의 링크에서 하실 수 있습니다.플레이는 여기서!! 한번만 플.. 2026. 8. 19. 00:05

포티게이트 #1 - 시스로그 설정 포티게이트에서는 시스로그 설정하는 방법은 두가지가 있습니다.첫 번째로 GUI로 설정이 가능하고두 번째로 CLI로 설정이 가능합니다 두개의 차이점이 무엇이냐 하면 참.. 아이러니 하게도 GUI는 최대 2개CLI는 최대 4개까지 설정이 가능합니다. 따로 이유가 있다고 한다면 GUI는 관리 편의를 위해 2개까지 설정이 가능하도록 지원했다고 보면 되겠습니다. 목차 시스로그 설정GUI 설정시스로그에서 GUI로 한번 살펴볼건데필자는 Fortigate-30E ( v5.6.5 build1600 ) 으로 확인을 하였습니다. 메뉴 위치는 Log & Report > Log Settings 입니다. 중간쯤 확인하여 보면, Send Logs to Syslog 에 IP 입력칸이 나옵니다.해당 부분에 전송하고자 하는 .. 2026. 7. 31. 15:36

Express.JS #1 - 3분만에 서버 만들기 백엔드를 시작하는 분들의 경우 (JAVA 제외) Express는 필수적으로 거치게 됩니다.아니면 무거운 Spring, Nest 대신 Express로 서버를 만드는경우도 종종 있습니다.상황에 따라 선택하는건 자유입니다. 목차 Express란Express는 웹 및 모바일 애플리케이션 개발에 필요한 다양한 기능을 제공하는 간결하고 유연한 Node.js 기반 웹 애플리케이션 프레임워크 입니다. NodeJS란NodeJS는 Chrome의 V8 Javascript 엔진을 기반으로 javascript를 브라우저 밖에서도 실행할 수 있게 해주는 런타임환경 입니다.이를 이용하면 Javascript로 웹 서버, API 서버, 명령 프로그램 등을 개발할 수 있습니다. NodeJS와 Express의 관계Node.JS는 Ja.. 2026. 7. 31. 09:58

WebPack5 #3 - 파일 로딩 안녕하십니까.노래듣다가 과몰입한 하프 입니다. 🎶 이번에는 번들링을 할 때 파일로딩을 어떻게 하면 좋을지를 알아보도록 하겠습니다. 📝 목차 Module Loading기본 설정폴더 구조를 다음과 같이 설정합니다. 📁 webpack-demo |- 📜 package.json |- 📜 package-lock.json |- 📁 dist |- 📜 index.html |- 📁 src |- 📜 index.js (수정) |- 📜 style.css (추가) |- 📜 image.jpg (추가) |- 📜 Pretendard.ttf (추가) |- 📜 webpack.config.js 기본 설정을 위해, 이미지와 폰트를 먼저 다운 받고, 다음 경로로.. 2024. 6. 16. 11:38

WebPack5 #2 - 번들링 셋팅 안녕하세요.도서관 갔다가 휴관으로 집으로 다시 돌아온 하프입니다. 🥹 이번에는 번들링을 하기 위한 초기 셋팅을 해보려고 합니다. 프로젝트 셋팅라이브러리 설치cmd 터미널에서 진행해주시면 됩니다.mkdir webpack-democd webpack-demonpm init -ynpm install webpack webpack-cli --save-devnpm install --save lodash VSCode 플로그인 설정번들링 된것을 실행하기 위해서는 VSCode에서 Live Server라는 플로그인이 필요합니다. 설치하게 되면 오른쪽 하단에 Go Live 라고 하나가 생깁니다. 이 버튼을 누르게 되면, 현재 경로에 서버가 켜진다고 보시면 됩니다. 폴더 구조 생성다음과 같이 프로젝트를 셋팅해줍니다. .. 2024. 6. 14. 11:31

WebPack5 #1 - 핵심 내용 안녕하세요.비트코인 하다가 나락간 하프입니다. 😂 이번에 알아볼것은 웹팩 입니다.제가 참조했던 자료는 webpack 사이트 입니다.한국어로 번역이 되어있고 가이드도 친절하니 한번 해보시면 좋을 듯 합니다. 📝 목차 웹팩이란?웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리 입니다. webpack 버전 4.0.0 이후로는 프로젝트를 번들링하기 위한 설정 파일을 필요로 하지 않습니다. 하지만 사용자 요구에 따라 기대 이상으로 유연하게 설정이 가능 합니다. 웹팩의 장점1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있습니다.2. 모듈 단위로 개발이 가능하며.. 2024. 6. 14. 10:37

GIT Bash를 이용해서 브랜치 생성 및 머지를 해보자! 안녕하십니까코딩하다 늦잠 잔 하프 입니다. 이번에는 Git Bash를 이용해서 브랜치를 생성해보고 머지를 해보도록 하겠습니다. 목차 깃허브에서 새롭게 저장소를 하나 만들어주겠습니다. git remote를 이용하여 저장소와 연결시켜주면 됩니다 😊구글링 또는 이전 글에 정보가 있으니 참고하여 주시길 바랍니다! 브랜치 생성&삭제브랜치 구조git branch를 이용하여 새로운 브랜치를 만들 수 있습니다.브랜치는 버전관리를 하기 위해서 만들기 위함이라고 보시면 됩니다. 제가 회사들을 다녀보면서 구조들을 보아온 결과..아래와 같은 구조를 많이 사용하더라구요.이와 유사한 형태로 만들어보도록 하겠습니다.prd└─ dev └─ feat-[이슈 번호] └─ feat-[이슈 번호] ... 아무래도 .. 2024. 6. 9. 12:34

1 2 3

티스토리툴바