요즘 과제에 치이고 알바도 하느라 블로그를 안쓴지 오래된 것 같은데 나름 짬짬히 이것저것 만들긴 했다. 한 번에 포스팅하려니 막막해서 그중 하나인 mbti 테스트 먼저 포스팅 하려한다. + 아직 디자인은 완성되지 않았는데 포켓몬 세상을 컨셉으로 잡았다 ㅋ mbti 테스트의 기본 알고리즘은 E와 I, N과 S 등 4가지 클래스의 성향을 판단하기 위해 질문이 필요하다. 따라서 각 클래스의 질문은 홀수여야 하고, 어떤 성향이 더 큰지 비교하여 출력한다. 완성 사이트 starlit-frangollo-737871.netlify.app 이렇게 된다면 결과는 각각 2번씩 선택된 ESTP가 출력된다. 여기서 또 문제가 생겼는데 질문을 어떻게 해야할지 문제였다. 그런데 GPT한테 간단히 설명하고 질문지를 만들어달라고 요..

GPT API를 이용해 오늘 입을 옷을 추천해주는 AI를 만들어 보았다. 사실 내가 한것보다 조코딩 님의 강의를 따라한거라고 봐도 되겠지만 아무튼 다 만들고 나니 뿌듯함도 있었다. 미리보기 이 사이트를 만들며 가장 어려웠던 점은 백과 프론트의 연결이였다. 나는 GET과 POST 방식에 대해서도 잘 몰랐었고, 어떻게 프론트와 백을 연결하는지 잘 알아보지 않아서 어려움이 조금 있었다. 아무튼 서론은 여기까지 하고 사이트에 대한 리뷰를 해보려한다. 먼저 해당 사이트 링크는 https://jaehwis-pj.pages.dev/ 이며 동작 원리, 사용된 API, 배포까지의 과정을 간단하게 포스팅하겠다. ※ CHAT GPT API 사용법에 대한 자세한 글은 여기에 있으니 참조바람 작동방식 Chat GPT API 연..

며칠 전 유튜버 조코딩 님이 chat gpt를 이용한 챗도지 만들기를 실시간 강의로 하신 적이 있었다. 나도 GPT API를 사용해보고 싶었는데 어떻게 해야 할지 감을 못 잡고 있던 차에 좋은 강의가 있어 바로 들어가서 따라해 봤다. 강의는 정말 초보자도 따라만 하면 될 정도로 쉬웠고 잘 가르쳐 주셔서 쉽게 이해할 수 있었다. 이 글을 읽어도 이해가 가질 않는다면 조코딩님의 강의를 듣는것을 적극 추천한다. 아 시작하기에 앞서 api에 대한기초내용은 이전 글에 포스팅해놓았으니 참고하면 좋을 것 같다. 그리고 백엔드는 node.js 프론트는 html, css, js만 사용했다. API KEY 발급 가장 중요한 KEY는 GPT 홈페이지에서 발급 받을 수 있으며 삭제도 가능하다. 하지만 처음 발급 때 보여주는 ..

openweather API를 이용해 날씨 정보를 얻을 수 있는 웹사이트를 만들어 보았다. 사실 API를 사용하는 것에 익숙해지기 위해 시작한 프로젝트였지만 하다보니 쓸데없이 디자인에 꽂혀서 시간을 다 쓴것 같다.. ㅋㅋ 그래도 눈이 내리는 애니메이션과 같은 효과도 찾아볼 수 있었고, API의 사용 등 여러 웹을 풍부하게 만들어주는 방법을 익힌 것 같다. 아 그리고 이번에 만든 사이트를 netilfy에 업로드 했었는데 작년 10월에 만들었던 티스토리 클론 코딩 했던 걸 보게 되었다. 그땐 저 정도만 했어도 동네방네 자랑하고 다녔었는데 지금 보니 정말 내가 저걸 왜 자랑하고 다녔을까 하는 창피한 기분도 들고 나름 많이 성장한 것 같아 뿌듯함도 느낄 수 있었다.미리보기 weather API에서 받은 날씨 데..

API(Application Programming Interface) 란 : 클라이언트의 요청을 서버에게 가져다 주며 서버에서 요청에 맞는 데이터를 클라이언트에 가져다 주는 역할을 한다. 쉽게 말해서 식당의 '웨이터'로 많이 표현한다. 클라이언트(손님)이 원하는 음식(데이터)을 주문하면 웨이터(API)가 주방(서버)에 알려준다. 이게 API의 정의이며 역할이다. 사실 나는 누가 물어보면 저런 이론적인 대답을 할 수 있었기 때문에 API에 대해 잘 알고있다고 생각했고, 실제로 친구와 '게시판' 을 만들어보며 기초적인 API를 구현해 보기도 했었다. 그런데 이번에 날씨를 제공하는 OpenWeatherAPI를 사용해보며 그동안 내가 너무 쉽게 생각하고 있다는 생각을 했다. 암튼 이번 포스팅은 API의 설명보다..

처음 아날로그 시계를 만들기 시작할 때에는 그동안 다중 타이머를 만들었던 것과 날짜 계산기를 만들었던 것을 생각하며 쉽겠지 하며 시작했는데 사실 쉬웠다 ㅋ 아 문자열 포매팅 방법을 몰라 애를 먹었던 기억이 있지만, js에서는 포매팅을 할 때 `${변수명}`을 쓴다는 걸 알았다. 아 그리고 바늘이 회전할 때 transform - origin을 이용해서 회전축을 설정했다. 내가 만들었던 아날로그 시계의 알고리즘은 아래와 같다.현재 시간을 변수에 담아 현재 시, 분, 초를 추출html로 만들었던 바늘도 js에서 변수로 지정시계는 60조각으로 나누어져 있기 때문에 1분에 6도라는 결과가 나옴따라서 분, 초침은 * 6을 해서 각도를 지정시침은 24시간이 아닌 12시간으로 나누어져 있기 때문에 if문으로 오전과 오..

오늘은 날짜를 입력하면 그 날짜에 맞게 카운트 다운을 하는 웹사이트를 만들어보았다. 처음으로 디자인도 신경써서 만들었고 뭔가 있어보이니까 괜히 더 뿌듯했다 ㅋ 앞으로도 이런 몇가지 프로젝트를 꾸준히 할 예정인데 이번 프로젝트를 하며 가장 어려웠던 부분은 input type="date"를 꾸미는 것이였다. 지금 내가 만들어 놓은 코드는 크롬, 파이어폭스에만 적용이 되고 엣지나 다른 브라우저는 호환이 안된다. (input type="date" 꾸미는 방법은 참조해놓은 유튜브에서 자세히 설명해주니 참고 바람 https://youtu.be/LdT4X9GAjr4) 실행영상 htlm 구성은 비교적 간단하게 하늘색 컨테이너박스 안에 calender 클래스를 만들고 4개를 이어 붙혔다. 처음에는 transition을 ..

오늘은 데이터베이스, 서버 없이 그냥 웹 상에만 존재하는 테이블을 만들어 보았다. 아직 서버와 데이터베이스 공부를 하지 않아 구축을 못했었는데 테이블을 만드는 과정에서 데이터베이스와 서버가 어떻게 움직이는지 조금은 알 수 있었다. 사실 원하는 행을 선택해 그 행만 삭제하는 기능을 넣고 싶었는데 insertRow()로 만들어진 행에 클래스를 주는 법을 모르겠어서 구현하지 못했다. 그런데 ChatGPT를 이용해 그 기능을 넣는 방법을 배웠고 조만간 응용해서 코드를 다시 짜던지 추가를 하던지 완벽하게 구현할 생각이다. 아 그리고 창을 2개 만들어 부모창과 자식창의 데이터 교환을 배웠는데 개념을 응용하기가 생각보다 어려웠던 것 같다. 이 부분에서 생각보다 많은 시간이 걸렸었고, input 의 Date 타입에서 ..

웹에 대한 기초를 배우고보니 현대인이 많이 사용하는 스마트폰에 대한 관심이 커졌다. 일반인들은 컴퓨터보단 비교적 핸드폰을 많이 사용하니까 더 많은 사용량을 기대한 것 같기도 하다. 사실 내가 객체지향 프로그래밍에 대해 미숙한 것 같아 자바스크립트 프로젝트를 여러번 해보고 코틀린을 배우려고 했는데 마음이 급한건지 자신감이 넘치는건지 일단 새로운걸 배우고 싶은 생각이 컸던 것 같다. 먼저 아직 무슨 앱을 만들고 싶은건지는 모르겠지만 모바일 게임보다는 인스타그램과 같은 웹을 기반으로 한 앱을 만들어 보고 싶다. 이번 단원은 안드로이드의 구성요소와 특징에 대해 배운다. 어떻게 앱이 작동하는지, 개발을 하며 어떤 것들을 고려해야하는지에 대해 다루기 때문에 완전 초보자인 나한테는 조금 어려웠던 것 같다. 안드로이드..