본문 바로가기

전체 글135

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.
안드로이드 앱의 기본 구조 웹에 대한 기초를 배우고보니 현대인이 많이 사용하는 스마트폰에 대한 관심이 커졌다. 일반인들은 컴퓨터보단 비교적 핸드폰을 많이 사용하니까 더 많은 사용량을 기대한 것 같기도 하다. 사실 내가 객체지향 프로그래밍에 대해 미숙한 것 같아 자바스크립트 프로젝트를 여러번 해보고 코틀린을 배우려고 했는데 마음이 급한건지 자신감이 넘치는건지 일단 새로운걸 배우고 싶은 생각이 컸던 것 같다. 먼저 아직 무슨 앱을 만들고 싶은건지는 모르겠지만 모바일 게임보다는 인스타그램과 같은 웹을 기반으로 한 앱을 만들어 보고 싶다. 이번 단원은 안드로이드의 구성요소와 특징에 대해 배운다. 어떻게 앱이 작동하는지, 개발을 하며 어떤 것들을 고려해야하는지에 대해 다루기 때문에 완전 초보자인 나한테는 조금 어려웠던 것 같다. 안드로이드.. 2023. 2. 18.
안드로이드 앱 프로그래밍 with 코틀린 안드로이드 앱 프로그래밍 with 코틀린 카테고리에 있는 모든 글은 강성윤 교수님의 안드로이드 앱 프로그래밍 with 코틀린 (이지스 퍼블리싱) 에서 정리 및 요약한 것임을 밝힙니다. 2023. 2. 9.
다중 타이머 만들기 (Java Script) 컴활 준비를 끝내고 다시 자바스크립트를 공부하며 내가 객체지향을 아직도 잘 사용하지 못한다는 것을 알았다. 그래서 자바스크립트의 기초는 어느정도 알고 있으니 간단한 프로그램을 최대한 많이 만들며 언어에 익숙해지려 한다. 며칠 전 "피지컬 100" 이라는 프로그램을 보던 중 참가자들이 공중에 매달리며 버티는 장면이 나왔다. 이 때 가장 오래 버틴 사람이 승자가 되는 그런 게임이였는데 그 장면을 보며 참가자들의 기록을 쉽게 잴 수 있는 다중 타이머를 만들면 좋겠다고 생각했다. 생각보다 알고리즘은 굉장히 쉬웠지만 언어에 익숙하지 않다보니 시간이 조금 걸렸던 것 같다. Algoritm 알고리즘은 하나의 타이머가 흘러가고 해당 인원의 버튼을 누르면 타이머의 시간을 참조해서 시간을 기록하는 형태이다. 또한 타이머는.. 2023. 2. 3.
컴퓨터 활용 능력 검정시험 (1급) 실기 후기 Introduction 작년 이맘때쯤 문득 내가 너무 시간낭비를 하고있다는 생각이 들었다. 그래서 얼떨결에 시간한 공부였지만 고작 하루에 3~4시간이 전부였고 그동안 내가 논 시간동안 벌어진 격차를 줄이기엔 턱없이 부족한 것 같았다. 그래서 당장 눈에 보이는 결과를 얻고싶어 내가 공부하고있는 컴퓨터와 관련된 자격증을 따면 어떨까? 하며 컴활 필기시험을 신청했다. 그때는 내가 너무 불안하다고 생각했던 시기여서 자신감이 필요했고, 정말 열심히 노력해서 단기간에 필기시험에 합격할 수 있었다. 그 후에는 학교생활과 다른 개발 공부를 하느라 잠시 뒷전이였던 컴활은 이번에 끝내버리자 하며 3주뒤에 시험을 바로 잡아버리고 유동균 인강을 들으며 하루에 6시간 정도 컴활 공부를 했던 것 같다. 내가 공부한 방법은 무식하.. 2023. 2. 1.

티스토리툴바