생존을 위한 코딩, 야매 개발자
개발 정보
열린데이터 광장 공공데이터 사이트로 이동 서울 열린데이터 광장에서는 서울에 관한 여러가지 공공 API 를 제공한다.그 중에는 기상정보, 도로 정보, 지하철 정보 등 API 들이 다양하다. 그 중 오늘은 지하철 실시간 도착 정보 API 를 사용해보려 한다.먼저 공공데이터 사이트로 접속 한 후 지하철을 검색한다. 지하철을 검색하면 지하철에 관련된 여러가지 API 들이 나오는데 그 중 실시간 도착정보를 … Read more
Props props 는 쉽게 생각해서 부모가 자식에게 주는 데이터이다.먼저 부모에게 물려받을 데이터를 자식 컴포넌트에 정의한다. 부모가 준 color 값에 따라 자식 컴포넌트 div 의 color 가 변할 수있도록 div style에 color 값을 줬다.이후 부모 컴포넌트에 자식 컴포넌트를 추가하여 color 값을 넘겨주었다. 이후 결과를 보면 자식 컴포넌트에 부모가 준 데이터가 잘 넘어간걸 볼 수 있다. 현재는 … Read more
이번에는 이자 계산기 사이트를 만들어봤습니다. 이자 계산기 바로가기 vue로 하다보니 금액이나 이자율 같은 input 태그의 유효성을 체크하는데 조금 시간이 꽤 걸렸습니다.처음 한 컴포넌트에서 다 만들다가 나중엔 금액, 년도, 이자율 각각의 컴포넌트로 불리하였고부모 자식 컴포넌트의 컨트롤을 하면서 생각보다 시간이 꽤 걸렸습니다. 개발 공부도 되었지만 예적금 계산에 대한 공부도 같이 되었습니다.
유틸 사이트로 이동 웹사이트 개설 나의 블로그의 접속자 수는 처참하지만 내가 블로그를 시작하면서생각했던 계획은 내 스스로 간단하게 웹페이지를 개발하고그 개발 과정에서 알게된 것들 혹은 사람들이 찾을만한 내용들을 글을 포스팅 하는거였다. 그렇게해서 시작하게 된게 유틸 사이트이다.유틸 사이트는 먼저 나도 쓰기 유용한 기능들을 모은 사이트이다.그래서 먼저 무얼 만들어볼까 고민하다가 핫딜 정보를 모으는 기능부터 만들었다.특별한거 없이 4곳의 사이트에서 … Read more
과정 시작하기에 앞서 과정부터 설명해드리겠습니다.master branch에 push 가 되면 GitHub Actions 에서소스를 build 를 하고 추출된 jar 를 서버에 이동시킨 뒤 서버에서 기동되도록 합니다. master push > github actions > 개인서버 SSH Key 생성 Jar 파일 전송과 서버에서의 script 실행을 위해서 SSH를 사용합니다.그래서 SSH Key 를 생성해줍니다.해당 키는 Actions에서 사용할 SSH 플러그인(?) 에서 요구하는 사항이라PEM … Read more
Intellij 와 Gradle 을 기준으로 하였습니다. Jar 파일 추출하기 인텔리제이 오른쪽 툴바를 보면 Gradle 메뉴가 있습니다.Gradle 을 열어보면 여러가지가 나옵니다. 펼쳐서 보면 Tasks > build > bootJar 가 있습니다.bootJar 를 더블클릭해줍니다. build > libs > 프로젝트명-버전-SNAPSHOT.jar 가 생성됩니다.이 파일을 갖고 이제 서버에서 기동시키면 됩니다. Jar 파일 서버로 이동 Jar 파일을 서버에 기동시키려면 당연히 서버로 Jar … Read more
DB 의존성 추가 먼저 DB 연결을 위한 jdbc dependency가 필요하다.DB는 mariaDB 기준입니다.다른 DB는 그 DB에 맞는 의존성을 추가해주시기 바랍니다. build.gradle 에 의존성을 추가해줍니다. DB 연결 설정 DB 연결을 하려면 application.yml 에 설정해주면 된다.처음 프로젝트를 생성하면 application.properties로 되어있을수도 있는데 확장자를 yml 로 바꿔주자. MariaDB 기준 driver-class-name 은 org.mariadb.jdbc.Driver 이다.각자 사용하는 DB에 따라 Driver class name 을 … Read more
GitHub 계정 준비 시작하기에 앞서 인텔리제이에 gitHub 로그인 하셔야합니다. 공유 하기전에도 github에 로그인 하라고 뜰 것이고 당연히 github 계정도 있으셔야합니다. Repository 생성 인텔리제이 상단에 [VCS > Share Project on GitHub] 을 클릭해줍니다. 창이 뜨고 Repository 이름을 정하라고 뜹니다. 원하는 이름을 적고 외부에 공유되지 않도록 private 으로 하고 Share 해줍니다. Share 를 클릭하면 github에 올릴 파일들을 … Read more
Router 추가 및 설정 Vue에서 페이지를 이동할때 Router 를 사용한다.Router 를 사용하기 위해서는 당연히 Router 의존성이 필요하므로 추가해주자. 템플릿들을 적용하려다 보면 import 경로에 @가 들어가있는걸 볼 수 있는데이는 src 경로를 뜻한다. 설정에서 src 경로를 설정해주어야 한다.vite.config.js 파일에 alias 를 추가해주자. 페이지 생성 이제 가장 먼저 보일 Home.vue 를 생성하자.src 밑에 views 디렉토리를 생성해서 Home.vue 를 … Read more
프로젝트 생성하기 시작하기에 앞서 Vite 는 Node 18 이상 설치 되어있어야 한다.터미널(cmd) 에서 프로젝트가 생성되길 원하는 경로에서 명령어를 실행한다.[my-app] 이란 이름으로 Vite 프로젝트를 생성하였다. 명령어 실행 후 프로젝트를 생성에 관련된 몇가지 질문이 나온다. Framework 는 Vue로 선택한다. Typescript를 주로 하기도 하지만 Typescript로 하면 귀찮은 면도 있어서…Javascript 로 선택하였다. 터미널 명령어를 쳤던 경로에 프로젝트가 생성되어있는 것을 … Read more