[코딩온] 프론트엔드 입문 Day 52~53 (3차 프로젝트 5~6)
3차 프로젝트와 관련한 두번째 주간기록.✍
쓰다보니 팀플 진행과정에 대한 회고와 정보처리기사 학습일지가 일대일 비율인거 같지만..😅
5월 4~5일, 주말
종강이 다가오며 바빠져서, 지난 금요일 수업 끝나고 팀장님의 제안으로 팀원 4인과 약속한게 있었다.
→ 현재 팀원 모두 "팀플+a" 로 두 가지씩 진행 중이라 이도저도 안 되는 것 같으니, 평일에 팀플에만 전념할 수 있도록 주말에는 각자가 진행중인 '알파'를 실행 후 일요일 밤까지 인증하고, 만약 제 시간에 인증 못하면 벌칙 받기.
모든 참가자가 동의해서, 나는 정보처리기사 공부기록을 인증하기로 했기 때문에 주말동안 마음 편하게 공부하고 인증했다.📚
💻 프로젝트 작업도 소홀하면 안 될 것 같아서 틈틈이 날씨 API를 봤지만, 데이터를 불러와서 콘솔에 출력되는걸 확인한 이후부터는 어떻게 해야할지 막막했다. 그동안 만져보지 못한 미세먼지 API도 처음 만졌는데, 똑같이 fetch()로 데이터를 불러왔는데 콘솔에 출력되지도 않았다. 정말 2차 팀플때 했던 로그인 API 와는 굉장히 다르다는걸 느꼈다.
5월 6~7일, 월~화
원래는 월요일이 수업날이지만 대체공휴일이라 쉬었다.
팀플 코드는 혼자 힘으로는 도저히 해결이 안 될 것 같아서 포기하고, 대신에 정보처리기사 시험이 20일 정도 남은 상황이라 공부에 매진했다. 가족들부터 친구, 지인들까지 동네방네 가능한 곳이면 전부 시험본다고 소문을 내놓은 상황이라 만약 떨어진다면 엄청난 망신일거고.. 개인적으로는 한 번에 합격한다는 것에 자신은 없지만, 가능하다면 같이 시험보는 친구(?)랑 동반 합격했으면 좋겠어서, 턱걸이로라도 합격하려면 지금부터라도 부지런히 공부해야겠다는 생각에 제법 성실해졌다.😂
사실 응시 가능한 마지막 시험일자보다 일주일 앞으로 일정을 확정해둬서 날짜를 미루고 싶은 마음이 굴뚝 같았지만, 환불기간도 지나서 낙장불입인 상태라는걸 주말동안 알았다.
이왕 이렇게 된거, 어디 한번 가보자고!!🔥
5월 8일 수요일 - Day 52
드디어 길었던 연휴가 끝나고 첫 수업 날이었다.
아침에 이동하는 지하철에서 팀장님이 연휴동안 부상을 당해서 오늘 수업에 못 나온다고, 내가 오늘 하루만 임시 팀장을 해달라고 부탁받았다. 그래서 오전에 회의실로 팀원들 모아서 간단한 회의를 통해, 연휴동안 코드를 만졌는지 진행상황과 앞으로 해야하는 일들을 돌아가면서 공유하고, 교실로 돌아와서 각자 코딩 시작.
나는 날씨 API로 데이터는 불러왔는데 이걸 화면에 보여지게 하려면 어떻게 해야하는지 연구하다가, ChatGPT가 생각나서 가입했다. 현재 같이 공부하는 동기분들 대다수가 이미 사용하고 있지만, 놀랍게도 나는 2차 팀플 당시에도 직접 구글링하고 작성해보며 코딩을 했던터라, 오늘 처음 가입했다.😂 아무튼 내가 작성한 코드 붙여넣고 ChatGPT에게 물어보니까 명확한 답변을 해줘서, 덕분에 문제가 해결되어 귀가 후에 날씨 위젯 디자인까지 마무리해서 github에 push, merge했다.👏
사실 날씨 위젯의 경우에는 Open Weather Map API 웹사이트에 있는 'Weather condition codes'를 이용하여, 날씨에 따라 위젯 배경화면도 변경될 수 있도록 하고 싶었다. if문으로 조건 설정하고 Unsplash에서 찾아온 날씨 관련된 사진들을 return에 경로로 입력했는데도, 지정한 조건에 맞는 사진들이 제대로 나오지 않아서, 고민하다가 결국 포기하고 우리 팀 메인 컬러들을 조합해서 디자인을 완료시켰다. → 이번주 내로 모든 페이지와 컴포넌트의 개발이 완료되어야, 다음주 초에 전체 연결을 해보면서 혹시나 있을 오류에 대응할 수 있는데, 내가 담당하고 있는 미세먼지 위젯은 전혀 진도가 안 나가고 있는 상황이라 더이상 날씨 API만 붙잡고 있을 수는 없어서 이런 결정을 내렸다.
https://openweathermap.org/weather-conditions
Weather Conditions - OpenWeatherMap
We use cookies to personalize content and to analyze our traffic. Please decide if you are willing to accept cookies from our website.
openweathermap.org
미세먼지 위젯은 제자리걸음 상태다.
공공데이터 API로 JSON을 불러와서 콘솔에 출력하는걸 실험하다가, 어렵게 찾은 예시를 보니 프록시 서버를 건드리는거 같아서 '서울 열린데이터 광장'에서 제공하는 API로 변경했는데, 여전히 콘솔에 출력되지 않고 있어서 답답하다.😭
5월 9일 목요일
집에서 작업하려고 했는데 건물 전체 전기 점검으로 오전 내내 정전된다고 해서, 그러면 와이파이도 안 되어 원활한 작업이 불가능하니까 노트북 챙겨서 아침 일찍 집 근처 도서관에 갔다. 미세먼지 위젯의 코드가 어젯밤에 공공데이터에서 서울시 데이터로 변경해서 기초적인 세팅만 해놓은 상태 그대로였는데, npm start 하니까 JSON으로 불러온 데이터가 콘솔에 찍혔다!😱
아무 것도 안 건드리고 npm start만 했는데, 어제는 안 되다가 오늘은 되는 이유가 뭘까..🤔
미세먼지 데이터가 정상적으로 콘솔에 출력되고 있는걸 발견한 것도, 어제 만들어놓은 날씨 위젯의 디자인을 변경하다가 우연히 알게 되어서, 콘솔을 확인하고 이게 왜 되고 있냐며 약간 충격받았다. 그리고 문득, 코딩 작업은 "왜 되지?"와 "왜 안 되지?"의 연속인거 같다는 생각을 했다.😂
어쨌든 미세먼지 데이터를 정상적으로 불러올 수 있다는걸 확인했으니, 이걸 어떻게 다루는게 좋을지 고민했다. 날씨 위젯처럼 현재 위치를 추출하면 서울시 25개 자치구 중에 한 곳이 출력되면 좋겠지만 그렇게까지 하기에는 내 실력이 부족하므로, 해당 데이터에서 내가 원하는 값(서울 강동구)만 추출해서 화면에 띄워주고 scss 파일로 디자인 작업을 시작했다.
저녁에는 팀 노션에서 작업 관련 문서를 확인했다가 Not Found 페이지 디자인이 아직 나오지 않았다는걸 깨닫고 내가 기본 구조부터 디자인까지 완료해서 github에 push했다.
5월 10일 금요일 - DAY 53
오늘은 내가 제작한 Not Found 페이지와 날씨, 미세먼지 위젯에 root.scss 파일이 import 되어있지 않아서 그 부분을 수정했다. 파일 최상단에 경로 설정해서 import를 했는데 자꾸 오류가 떠서 확인해보니 선언 종료(세미콜론 입력)를 안 한게 원인이어서, 제대로 import하고 메인 컬러를 사용하는 부분에 root.scss에서 지정해둔 변수를 입력했다. 단위도 px보다는 rem을 사용하는게 좋을 것 같아서 대부분의 단위를 rem으로 변경했다. 그리고 개별적인 디자인 수정을 했다.
먼저 미세먼지 위젯의 경우에는 기본적인 디자인 작업을 마무리하고 나서, 우리가 기획 단계에서 신호등처럼 결과에 따라 다른 컬러가 보여지도록 하자고 얘기했었기 때문에 그 부분을 반영하려고 노력했다. '서울 열린 데이터 광장'을 통해 받아오는 미세먼지 결과가 '좋음', '보통', '나쁨'으로 표시되고 마침 우리팀의 메인 컬러도 3가지여서 각각 경우에 맞게 대입했다.
그리고 디자인이 끝난줄 알았던 날씨 위젯은, 팀원분에게 보여드렸더니 배경에 default로 사진을 넣으면 좋겠다는 피드백을 받아서, scss 파일에서 배경사진을 불러와서 출력시켰다. 위젯에 배경으로 정상 출력되는걸 확인했으니, 이제 배경사진 투명도를 조절해서 날씨 정보(텍스트)의 가독성을 높이는 작업만 남았다.🙌
이렇게 또 일주일이 바쁘게 지나갔고, 다음주는 벌써 이번 팀플의 마지막 주간이다.
프로젝트 작업하면서 정보처리기사 공부까지 하려니까 정신이 없지만, 팀원들이랑 이번 팀플도 마무리 잘 해보자!🔥
