Front end/JavaScript8 포켓몬 MBTI Test 만들기 요즘 과제에 치이고 알바도 하느라 블로그를 안쓴지 오래된 것 같은데 나름 짬짬히 이것저것 만들긴 했다. 한 번에 포스팅하려니 막막해서 그중 하나인 mbti 테스트 먼저 포스팅 하려한다. + 아직 디자인은 완성되지 않았는데 포켓몬 세상을 컨셉으로 잡았다 ㅋ mbti 테스트의 기본 알고리즘은 E와 I, N과 S 등 4가지 클래스의 성향을 판단하기 위해 질문이 필요하다. 따라서 각 클래스의 질문은 홀수여야 하고, 어떤 성향이 더 큰지 비교하여 출력한다. 완성 사이트 starlit-frangollo-737871.netlify.app 이렇게 된다면 결과는 각각 2번씩 선택된 ESTP가 출력된다. 여기서 또 문제가 생겼는데 질문을 어떻게 해야할지 문제였다. 그런데 GPT한테 간단히 설명하고 질문지를 만들어달라고 요.. 2023. 5. 12. Weather site 만들기 openweather API를 이용해 날씨 정보를 얻을 수 있는 웹사이트를 만들어 보았다. 사실 API를 사용하는 것에 익숙해지기 위해 시작한 프로젝트였지만 하다보니 쓸데없이 디자인에 꽂혀서 시간을 다 쓴것 같다.. ㅋㅋ 그래도 눈이 내리는 애니메이션과 같은 효과도 찾아볼 수 있었고, API의 사용 등 여러 웹을 풍부하게 만들어주는 방법을 익힌 것 같다. 아 그리고 이번에 만든 사이트를 netilfy에 업로드 했었는데 작년 10월에 만들었던 티스토리 클론 코딩 했던 걸 보게 되었다. 그땐 저 정도만 했어도 동네방네 자랑하고 다녔었는데 지금 보니 정말 내가 저걸 왜 자랑하고 다녔을까 하는 창피한 기분도 들고 나름 많이 성장한 것 같아 뿌듯함도 느낄 수 있었다.미리보기 weather API에서 받은 날씨 데.. 2023. 3. 19. (JavaScipt) OpenWeatherAPI 사용법 API(Application Programming Interface) 란 : 클라이언트의 요청을 서버에게 가져다 주며 서버에서 요청에 맞는 데이터를 클라이언트에 가져다 주는 역할을 한다. 쉽게 말해서 식당의 '웨이터'로 많이 표현한다. 클라이언트(손님)이 원하는 음식(데이터)을 주문하면 웨이터(API)가 주방(서버)에 알려준다. 이게 API의 정의이며 역할이다. 사실 나는 누가 물어보면 저런 이론적인 대답을 할 수 있었기 때문에 API에 대해 잘 알고있다고 생각했고, 실제로 친구와 '게시판' 을 만들어보며 기초적인 API를 구현해 보기도 했었다. 그런데 이번에 날씨를 제공하는 OpenWeatherAPI를 사용해보며 그동안 내가 너무 쉽게 생각하고 있다는 생각을 했다. 암튼 이번 포스팅은 API의 설명보다.. 2023. 3. 17. (Java Scipt) 아날로그 시계 만들기 처음 아날로그 시계를 만들기 시작할 때에는 그동안 다중 타이머를 만들었던 것과 날짜 계산기를 만들었던 것을 생각하며 쉽겠지 하며 시작했는데 사실 쉬웠다 ㅋ 아 문자열 포매팅 방법을 몰라 애를 먹었던 기억이 있지만, js에서는 포매팅을 할 때 `${변수명}`을 쓴다는 걸 알았다. 아 그리고 바늘이 회전할 때 transform - origin을 이용해서 회전축을 설정했다. 내가 만들었던 아날로그 시계의 알고리즘은 아래와 같다.현재 시간을 변수에 담아 현재 시, 분, 초를 추출html로 만들었던 바늘도 js에서 변수로 지정시계는 60조각으로 나누어져 있기 때문에 1분에 6도라는 결과가 나옴따라서 분, 초침은 * 6을 해서 각도를 지정시침은 24시간이 아닌 12시간으로 나누어져 있기 때문에 if문으로 오전과 오.. 2023. 3. 13. 카운트다운 계산기(JavaScript) 오늘은 날짜를 입력하면 그 날짜에 맞게 카운트 다운을 하는 웹사이트를 만들어보았다. 처음으로 디자인도 신경써서 만들었고 뭔가 있어보이니까 괜히 더 뿌듯했다 ㅋ 앞으로도 이런 몇가지 프로젝트를 꾸준히 할 예정인데 이번 프로젝트를 하며 가장 어려웠던 부분은 input type="date"를 꾸미는 것이였다. 지금 내가 만들어 놓은 코드는 크롬, 파이어폭스에만 적용이 되고 엣지나 다른 브라우저는 호환이 안된다. (input type="date" 꾸미는 방법은 참조해놓은 유튜브에서 자세히 설명해주니 참고 바람 https://youtu.be/LdT4X9GAjr4) 실행영상 htlm 구성은 비교적 간단하게 하늘색 컨테이너박스 안에 calender 클래스를 만들고 4개를 이어 붙혔다. 처음에는 transition을 .. 2023. 3. 1. JavaScript를 이용하여 동적 테이블 만들기 (1) 오늘은 데이터베이스, 서버 없이 그냥 웹 상에만 존재하는 테이블을 만들어 보았다. 아직 서버와 데이터베이스 공부를 하지 않아 구축을 못했었는데 테이블을 만드는 과정에서 데이터베이스와 서버가 어떻게 움직이는지 조금은 알 수 있었다. 사실 원하는 행을 선택해 그 행만 삭제하는 기능을 넣고 싶었는데 insertRow()로 만들어진 행에 클래스를 주는 법을 모르겠어서 구현하지 못했다. 그런데 ChatGPT를 이용해 그 기능을 넣는 방법을 배웠고 조만간 응용해서 코드를 다시 짜던지 추가를 하던지 완벽하게 구현할 생각이다. 아 그리고 창을 2개 만들어 부모창과 자식창의 데이터 교환을 배웠는데 개념을 응용하기가 생각보다 어려웠던 것 같다. 이 부분에서 생각보다 많은 시간이 걸렸었고, input 의 Date 타입에서 .. 2023. 2. 27. 이전 1 2 다음
