처음 웹 개발을 시작하고, 다양한 언어를 접하고 도전하였다.
코로나로 모든 대외활동이 끊긴 지금 온라인으로 어떤 것을 할 수 있을까 생각을 하다가,
우연히 작년에 온라인 모각코 코뮤니티를 알게 되었고 무작정 파이썬 과정에 도전을 하였다.
파이썬 과정 수료를 통해 파이썬에 대해 익숙해지고, 다른 강의들로 파이썬을 공부하였고 다양한 문제들을 풀이할 때 쯔음
도전의 욕구는 잠시 미뤄둔 채, 시작되는 정규 학기 학업으로 모든걸 중단하였다.
결과적으로는 공대에서 1등이라는 버킷리스트를 이뤘는데, 비대면이 아니었다면 더 고통스러웠을 것이다.
이렇게 3학년 2학기를 끝내고 웹 개발이나 어플 개발쪽으로 선취업을 목표로 하고 있어서,
모각코 코뮤니티에 내가 부족한 부분이 뭐가 있을까 과정들을 쭉 둘러보았다.
아무래도 동적인 부분을 담당하는 자바스크립트 부분은 오픈소스를 많이 사용하는 나에게 많이 부족한 부분이었고,
바로 지체없이 자바스크립트 과정에 신청을 넣었고, 모각코 플러스 과정에 운이 좋게도 합격을 하였다.
이번 과정은 코드메이트라는 카페에 과제를 제출하는 형식이 아닌,
하나의 플랫폼인 '코드메이트' 라는 플랫폼에서 진행을 하게 되었다.
평소에 블로그 형식으로 글을 작성해놓는 것을 좋아하는 나에게는 정말 잘 맞고 괜찮은 방식이었다.
하나의 커뮤니티의 형식으로, 글을 작성하고 다른 사람들과 글을 공유함으로써 서로의 소스코드를 확인할 수 있다.
그리고 프로젝트를 자유롭게 참여함으로써, 자신만의 하나의 포트폴리오를 만들 수 있다.
블로그를 따로 운영하지 않아도, 코드메이트 플랫폼을 통해 자신만의 개발 포트폴리오를 지정할 수 있었다.
원래는 깃허브나, 이런 티스토리 블로그를 통해 포트폴리오를 정리하곤 하였는데 포트폴리오 사이트가 하나 더 늘었다.
다만 글을 작성할 때, 작은 글씨를 좋아하는 나에게 글자 크기를 일정 크기 이하로 줄일 수 없다는 것은
매우 크나큰 절망이었지만 그래도 작성은 해야하니ㄲ,,
이번 과정에서는 기본적인 웹 구조와 자바스크립트를 통해 챗봇을 만드는 과정을 진행하였는데,
생각보다 너무 재미있었고 매일매일 아침부터 저녁까지 코딩하는 맛에 하루를 보냈다.
깔끔한 것을 좋아해서 하루에 한 챕터로 이루어지는데, 제목 별로 분류화를 시켜놓았다.
다음에는 리액트를 신청 할 예정인데, 리액트 또한 저렇게 분류화 시켜놓아서 게시물을 작성 할 예정이다.
아무래도 심화과정이라서 그런지, 기초에 대한 부분이 없는 사람들에게는 과제가 조금 낯설게 느껴질 수도 있다.
위의 첨부한 사진이 내가 조금 골머리를 앓던 과제 중 하나였는데, 자바스크립트에서 낯선 함수로 스톱워치를 구현하는 과제였다.
전공생인 나는 다양한 언어에 익숙해져있던터라 큰 어려움 없이 과제를 구현해냈지만,
기초적인 부분에 있어서 조금 부족함이 있는 사람에게는 구현에 어려움이 있을거라고 생각이 들었다.
그래도 이런 문제들이 코딩 실력을 키우는데는 최고라고 생각한다.
(그래서 웹 심화라는 제목이 붙었겠지 라는 생ㄱ,, 각,,)
이번 자바스크립트 과정을 통해 제작된 챗봇이다.
날씨 API를 통해 각 지역별 날씨 정보를 출력할 수 있고, 챗봇에게 말을 가르칠 수도 있다.
아직 데이터베이스를 사용하지 않아, 영구적인 데이터 저장을 시킬 수는 없지만
데이터베이스를 연동한다면 단기 데이터 저장의 챗봇이 아닌 장기적 데이터 저장의 챗봇이 될 것이라고 생각이 든다.
그 외에 기억나는 과제가 있다면 다음과 같은 과제가 생각나는데,
아이폰 UI를 그대로 구현하여 사용자에게 번호를 입력받으면 페이스타임으로 연결되는 프로그램을 만들어보았다.
개발에 대한 시간보다, 디자인적인 부분을 구현하는데 시간을 엄청 쏟았는데 내가 개발자인지 디자이너인지 혼동이 올 정도였다.
그렇게 킹(?)받는 시간을 제쳐두고 성공적으로 과제 제출에 성공했어서 제일 기억에 남는 것 같다.
최종적인 챗봇에 대한 소스코드는 아래에 첨부를 해놓으려고 한다,
이 또한 내 포트폴리오라서 여러 곳에 남겨두려고 한다.
깃허브에도 커밋해놓았고 모각코 과정 한 부분 한 부분 이 블로그에 다 포스팅 하려고 한다.
- HTML 코드
<!DOCTYPE html> <html> <head> <title> CHAPTER 14 </title> <link rel="stylesheet" href="./Chap15.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- CDN 코드 첨가 --> <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script> </head> <body> <div class = "section1"> <p class="result">챗봇이 이곳으로 대답을 할거예요 ;-)</p> </div> <div class= "section2"> <img src="./mImg.jpeg" alt="메인 이미지 확인" width="auto" height="300dp"> <p class="check">"h4vebeauty chatbot version -0"</p> </div> <div class = "section3"> <input type="text" class="input" name="" value="" placeholder="메세지를 입력해주세요 ;-)"> </div> <div class = "section4"> <button name="submit" class="btn" type="submit" onclick='submit()'>SUBMIT</button> </div> <script src="./Chap15.js"></script> </body> </html>
- CSS 코드
body { text-align: center; } .section1 { width : 300px; height: 35px; border-style: solid; font-size : 11px; color : #1257BC; border-radius: 50px; margin-bottom: 20px; left : 50%; margin : 0 auto; margin-bottom: 20px; margin-top : 90px; } .section2 { margin-bottom: -40px; } .section3 { margin-top: 60px; } .check { font-size : 11px; color : #1257BC; margin-top: 15px; } .input { width: 400px; height: 38px; text-align: center; border-radius: 50px; border-style: solid; font-size : 12px; border-color : #1257BC; background-color : transparent: ; } .input:focus { outline : transparent; } .btn:hover { background-color : #0F5AC7; } .section4 { margin-top: 20px; } .btn { width: 400px; height: 40px; border-radius: 50px; border-style: none; background-color: #1257BC; color : white; font-size : 12px; }
- JAVA SCRIPT 코드
var input = document.getElementsByClassName("input")[0]; var check = document.getElementsByClassName("check")[0]; const statement = document.getElementsByClassName("result")[0]; var check_box = document.getElementsByClassName("section1")[0]; var city_name; let count = 0; // 다크모드, 화이토모드 카운트 값 let weather = 0; // 날씨 API 카운트 값 let key = 0; // 챗봇 말 배우기 카운트 값 let city_value; let weather_value; // json에 필요한 변수 var answer = ""; var question = ""; // CDN 코드 Typewriter 코드 var typewriter = new Typewriter(statement, { loop: false }); var working = [ { "question" : "도움말", "answer" : "도움말을 띄어드릴게요 ;-)" } ] // 인사말 리스트 var hello = ["안녕하세요! 반가워요 ;-)", "오늘도 좋은 하루예요! 반가워요 ;-)", "안녕하세요! 무엇을 드와드릴까요? ;-)"]; // 초기 상단 메세지 typewriter.typeString('챗봇이 이곳으로 대답을 할거예요 ;-)') .pauseFor(500) .start(); // 날씨 코드 값 한글화 코드 function wDescEngToKor(w_id) { var w_id_arr = [201,200,202,210,211,212,221,230,231,232, 30,301,302,310,311,312,313,314,321,500, 501,502,503,504,511,520,521,522,531,600, 601,602,611,612,615,616,620,621,622,701, 711,721,731,741,751,761,762,771,781,800, 801,802,803,804,900,901,902,903,904,905, 906,951,952,953,954,955,956,957,958,959, 960,961,962]; var w_kor_arr = ["가벼운 비를 동반한 천둥구름","비를 동반한 천둥구름","폭우를 동반한 천둥구름","약한 천둥구름", "천둥구름","강한 천둥구름","불규칙적 천둥구름","약한 연무를 동반한 천둥구름","연무를 동반한 천둥구름", "강한 안개비를 동반한 천둥구름","가벼운 안개비","안개비","강한 안개비","가벼운 적은비","적은비", "강한 적은비","소나기와 안개비","강한 소나기와 안개비","소나기","악한 비","중간 비","강한 비", "매우 강한 비","극심한 비","우박","약한 소나기 비","소나기 비","강한 소나기 비","불규칙적 소나기 비", "가벼운 눈","눈","강한 눈","진눈깨비","소나기 진눈깨비","약한 비와 눈","비와 눈","약한 소나기 눈", "소나기 눈","강한 소나기 눈","박무","연기","연무","모래 먼지","안개","모래","먼지","화산재","돌풍", "토네이도","구름 한 점 없는 맑은 하늘","약간의 구름이 낀 하늘","드문드문 구름이 낀 하늘","구름이 거의 없는 하늘", "구름으로 뒤덮인 흐린 하늘","토네이도","태풍","허리케인","한랭","고온","바람부는","우박","바람이 거의 없는", "약한 바람","부드러운 바람","중간 세기 바람","신선한 바람","센 바람","돌풍에 가까운 센 바람","돌풍", "심각한 돌풍","폭풍","강한 폭풍","허리케인"]; for(var i=0; i<w_id_arr.length; i++) { if(w_id_arr[i] == w_id) { return w_kor_arr[i]; break; } } return "none"; } // 날씨 코드 값 한글화 코드 종료 // 날씨 API 연결 내부 함수 구현 function city(city_value) { var apiURI = "http://api.openweathermap.org/data/2.5/weather?q="+city_value+"&appid="+"API 키값"; $.ajax({ url: apiURI, dataType: "json", type: "GET", async: "false", success: function(resp) { //console.log("금일 " + city_name + " 날씨는 " + wDescEngToKor(resp.weather[0].id) + "입니다 ;-)"); //statement.innerHTML = "금일 "" + city_name + "" 날씨는 " + wDescEngToKor(resp.weather[0].id) + "입니다 ;-)"; typewriter .deleteAll() .typeString(wDescEngToKor(resp.weather[0].id)) .pauseFor(30) .start(); } }) } // 날씨 API 연결 내부 함수 종료 // 버튼 이벤트 함수 시작 function submit() { if (input.value == "") { check.style.visibility = "visible"; check.innerHTML = "메세지를 먼저 입력해주세요!"; input.value = ""; } // value 값이 비어있지 않을 경우, 사용자의 검색 내부 과정 else if (input.value != "") { // 기본적으로 값을 입력하면 visibility 활성화 // check.style.visibility = "visible"; check.innerHTML = """ + input.value + """ + " 키워드로 검색하신 결과예요 ;-)"; // 홈페이지 입력 시, 결과 값 출력 if (input.value == "홈페이지") { typewriter .deleteAll() .typeString('www.h4vebeauty.com') .pauseFor(500) .start(); input.value = ""; } else if (input.value.replace(/(\s*)/g,"") == "안녕" || input.value.replace(/(\s*)/g,"") == "안녕하세요") { check.innerHTML = "반가워요, 저는 현우님의 챗봇이에요 ;-)"; typewriter .deleteAll() .typeString(hello[Math.floor(Math.random() * hello.length)]) .pauseFor(500) .start(); input.value = ""; } // 날씨 관련 입력 시, 결과 값 출력 else if (input.value.replace(/(\s*)/g,"") == "오늘의날씨" || input.value.replace(/(\s*)/g,"") == "날씨") { check.innerHTML = "오늘의 날씨를 챗봇으로 알려드릴게요, "서울 날씨, 용인의 날씨" 와 같이 원하는 지역을 검색해주세요!"; weather = 1; input.value = ""; } // weater 값이 1로 활성화 되어있을 때, 날씨 정보 제공 조건문 else if (input.value.replace(/(\s*)/g,"") == "용인의날씨" || input.value.replace(/(\s*)/g,"") == "용인날씨") { if (weather == 1) { city_value = 'Yongin'; city_name = input.value; city(city_value); input.value = ""; } else { check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 "오늘의 날씨" 라고 입력해보세요 ;-)"; input.value = ""; } } //서울특별시 else if (input.value.replace(/(\s*)/g,"") == "서울의날씨" || input.value.replace(/(\s*)/g,"") == "서울날씨") { if (weather == 1) { city_value = 'Seoul'; city_name = input.value; city(city_value); input.value = ""; } else { check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 "오늘의 날씨" 라고 입력해보세요 ;-)"; input.value = ""; } } //인천특별시 else if (input.value.replace(/(\s*)/g,"") == "인천의날씨" || input.value.replace(/(\s*)/g,"") == "인천날씨") { if (weather == 1) { city_value = 'Incheon'; city_name = input.value; city(city_value); input.value = ""; } else { check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 "오늘의 날씨" 라고 입력해보세요 ;-)"; input.value = ""; } } //대전특별시 else if (input.value.replace(/(\s*)/g,"") == "대전의날씨" || input.value.replace(/(\s*)/g,"") == "대전날씨") { if (weather == 1) { city_value = 'Daejeon'; city_name = input.value; city(city_value); input.value = ""; } else { check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 "오늘의 날씨" 라고 입력해보세요 ;-)"; input.value = ""; } } // 대구광역시 else if (input.value.replace(/(\s*)/g,"") == "대구의날씨" || input.value.replace(/(\s*)/g,"") == "대구날씨") { if (weather == 1) { city_value = 'Daegu'; city_name = input.value; city(city_value); input.value = ""; } else { check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 "오늘의 날씨" 라고 입력해보세요 ;-)"; input.value = ""; } } // 울산광역시 else if (input.value.replace(/(\s*)/g,"") == "울산의날씨" || input.value.replace(/(\s*)/g,"") == "울산날씨") { if (weather == 1) { city_value = 'Ulsan'; city_name = input.value; city(city_value); input.value = ""; } else { check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 "오늘의 날씨" 라고 입력해보세요 ;-)"; input.value = ""; } } // 부산광역시 else if (input.value.replace(/(\s*)/g,"") == "부산의날씨" || input.value.replace(/(\s*)/g,"") == "부산날씨") { if (weather == 1) { city_value = 'Busan'; city_name = input.value; city(city_value); input.value = ""; } else { check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 "오늘의 날씨" 라고 입력해보세요 ;-)"; input.value = ""; } } // 광주광역시 else if (input.value.replace(/(\s*)/g,"") == "광주의날씨" || input.value.replace(/(\s*)/g,"") == "광주날씨") { if (weather == 1) { city_value = 'Gwangju'; city_name = input.value; city(city_value); input.value = ""; } else { check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 "오늘의 날씨" 라고 입력해보세요 ;-)"; input.value = ""; } } // 세종자치특별시 else if (input.value.replace(/(\s*)/g,"") == "세종의날씨" || input.value.replace(/(\s*)/g,"") == "세종날씨") { if (weather == 1) { city_value = 'Sejong'; city_name = input.value; city(city_value); input.value = ""; } else { check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 "오늘의 날씨" 라고 입력해보세요 ;-)"; input.value = ""; } } // 제주특별자치도 else if (input.value.replace(/(\s*)/g,"") == "제주의날씨" || input.value.replace(/(\s*)/g,"") == "제주날씨") { if (weather == 1) { city_value = 'Jeju'; city_name = input.value; city(city_value); input.value = ""; } else { check.innerHTML = "날씨 기능을 사용하기 전에 챗봇에 "오늘의 날씨" 라고 입력해보세요 ;-)"; input.value = ""; } } // 블랙모드 else if (input.value.replace(/(\s*)/g,"") == "다크모드" || input.value == "눈이 너무 아픈데?") { if (count == 0) { check.innerHTML = "다크모드로 전환을 해드렸어요 ;-)"; document.body.style.backgroundColor = "#212121"; check.style.color = "white"; check_box.style.borderColor = "white"; statement.style.color = "white"; input.style.color = "white"; input.style.background = "transparent"; input.style.borderColor = "white"; input.style.transition = "all 0.4s"; check.style.transition = "all 0.4s"; check_box.style.transition = "all 0.4s"; document.body.style.transition = "all 0.4s"; count = 1; input.value = ""; } else if (count == 1) { check.innerHTML = "현재 상태가 다크모드예요 ;-)"; input.value = ""; } } // 블랙모드 종료 // 화이트모드 else if (input.value.replace(/(\s*)/g,"") == "화이트모드") { if (count == 1) { check.innerHTML = "화이트모드로 전환을 해드렸어요 ;-)"; document.body.style.backgroundColor = "white"; check.style.color = "#1257BC"; check_box.style.borderColor = "#1257BC"; statement.style.color = "#1257BC"; input.style.color = "#1257BC"; input.style.background = "transparent"; input.style.borderColor = "#1257BC"; input.style.transition = "all 0.4s"; check.style.transition = "all 0.4s"; check_box.style.transition = "all 0.4s"; document.body.style.transition = "all 0.4s"; count = 0; input.value = ""; } else if (count == 0) { check.innerHTML = "현재 상태가 화이트모드예요 ;-)"; input.value = ""; } } // 화이트모드 종료 // 챗봇이 알아듣지 못 할 경우 else { // json 데이터와 사용자가 입력 값이 일치하는지 확인 for (let i=0; i<working.length; i++) { if (input.value.replace(/(\s*)/g,"") == working[i].question) { if (input.value.replace(/(\s*)/g,"") == "도움말") { check.innerHTML = "현재 서비스 되고있는 기능은 날씨 기능이예요, 현재 챗봇은 말을 계속해서 배우고 있답니다 ;-)"; } typewriter .deleteAll() .typeString(working[i].answer) .pauseFor(30) .start(); return; } } // key값 1일 경우에 조건문 실행 if (key == 1) { if (input.value.replace(/(\s*)/g,"") == "YES" || input.value.replace(/(\s*)/g,"") == "yes") { typewriter .deleteAll(30) .start(); check.innerHTML = """ + question + "" 키워드에 대한 대답을 입력해주세요, 다음부터 알려드릴게요 ;-)"; input.value = ""; key = 2; input.value = ""; } // key 값이 1일때, 부정의 답을 들으면 초기화면으로 else if (input.value.replace(/(\s*)/g,"") == "NO" || input.value.replace(/(\s*)/g,"") == "no") { answer = ""; typewriter .deleteAll(30) .typeString('챗봇이 이곳으로 대답을 할거예요 ;-)') .pauseFor(500) .start(); check.innerHTML = "초기화면으로 돌아왔어요 ;-)"; key = 0; input.value = ""; } else { check.innerHTML = "잘못 입력을 하셨어요, 초기화면으로 돌아왔어요 :-)"; key = 0; typewriter .deleteAll(30) .typeString("챗봇이 이곳으로 대답을 할거예요 ;-)") .pauseFor(30) .start(); input.value = ""; } } else if (key == 2) { answer = input.value; working.push({question: question, answer: answer}); check.innerHTML = "챗봇이 새로운 말을 터득하였습니다 ;-)"; key = 0; typewriter .deleteAll(30) .typeString("챗봇이 이곳으로 대답을 할거예요 ;-)") .pauseFor(30) .start(); input.value = ""; } // key값 0일 경우에 조건문 실행, default 값 else if (key == 0) { // json 데이터 및 기존 데이터에 일치하는 값이 없는 경우 실행하는 코드 check.innerHTML = "챗봇이 아직 "" + input.value + "" 키워드에 대한 대답을 몰라요, 알려주시겠어요?"; question = input.value.replace(/(\s*)/g,""); key = 1; typewriter .deleteAll(30) .typeString("YES 또는 NO로 대답을 할 수 있어요!") .pauseFor(30) .start(); input.value = ""; } } } // value 값이 비어있지 않을 경우, 사용자의 검색 내부 과정 종료 } // 버튼 이벤트 함수 종료
'개발적인 > 대외활동' 카테고리의 다른 글
| 리크루팅을 위해 어플라이 사이트를 개발했다 (0) | 2023.03.02 |
|---|---|
| [대외활동] 코뮤니티 추석맞이 코딩 챌린지 (0) | 2021.09.18 |
| [대외활동] 코뮤니티 파이썬 크롤링 과정 (0) | 2021.09.17 |
| [대외활동] 코뮤니티 파이썬 과정 (0) | 2021.08.10 |
댓글