codinghatso

GoogleMap API, OpenWeatherMap API날씨 정보를 가져와 UI로 표시하는 프로젝트를 시작하려 합니다.프로젝트의 주제는 K리그 경기장들의 날씨를 한눈에 볼 수 있는 웹 서비스입니다.우선 날씨 정보를 가져와서 지도 위에 표시하는 것을 완료했습니다.추가 기능을 넣어서 UX 개선을 하고 싶은 상황에서도시를 클릭하면 별개의 창을 띄워 상세설명을 할 것인지. / 도시를 클릭하면 클릭된 박스를 확장시켜 상세설명을 표시할 것인지 선택해야 했습니다.결과적으로 아이콘을 클릭하면 전체 아이콘 변경과 클릭된 도시의 자세한 정보를 오른쪽 상단에 따로 표시해 주는 방향으로 선택했습니다. Tip 버튼 (이용방법 안내)는 왼쪽에서 오른쪽으로 글을 읽는 한국인의 특성을 고려해서 왼쪽에 배치했습니다.아이콘 같은 경..

https://kciter.so/posts/principles-of-debugging/ 디버깅 원칙디버깅, 개발자라면 누구라도 한 번쯤 겪었고 앞으로도 꾸준히 겪어야 할 피할 수 없는 숙명이다. 우리는 간단한 논리적 실수부터, 도저히 원인을 알 수 없어 며칠 동안 머리를 싸매는 버그를 해kciter.sokciter님의 포스팅을 보면서 이해한 내용을 나만의 방식으로 정리한 리뷰글입니다. 디버깅을 할 때 한 부분에 집착하는 사고방식을 모든 것을 의심하는 사고방식으로 바꾸는 것을 권하고 있다.나 또한 프로젝트를 하면서 디버깅을 할 때 꼬리에 꼬리를 무는 형식의 문제해결 방식으로 힘들게 학습을 했던 개발자였다. 해당 포스팅을 읽고 공감하는 부분이 많았기 때문에 집착하는 사고방식을 개선하려고 한다. 직관과 탐정이..

끝말잇기 웹 게임을 만들면서 사고력 기르는 훈련을 하고자 합니다.순서도 설계를 통해 절차를 정리한다면 좋은 결과를 얻을 수 있다.내부함수[prompt : 입력값 받기alert : 공지하기confirm : 의사를 물어볼 때 ] 입력태그는 value로 값을 가져오며, 이외 태그들은 textContent로 값을 가져오고 설정한다.순서도의 의사결정 부분에서 OR 또는 AND인지에 따라 최적화가 가능하다.최적화는 진리표를 사용하면 더 정확하게 구분할 수 있다. 예) OR 진리표첫 번째 조건두 번째 조건최종 결과truetruetruetruefalsetruefalsetruetruefalsefalsefalse내용 정리순서도 그리기대화 상자 띄우기태그 선택하기태그에 이벤트 달기순서도 최적화하기 1번째 참가자..

react를 사용해서 개인적으로 하는 첫 프로젝트입니다. react 공문서를 학습하고, 이해하기 힘들거나 정보가 마음에 안 들 때는 ChatGPT를 활용해서 학습했습니다. 그리고 글이 맥락이 없을 것입니다. 개발하면서 생각나는 대로 끄적이는 낙서장이니 가볍게 구경하고 가시면 될 것 같습니다. 감사합니다. 1. flexbox 같은 css 기능이 왜 적용이 안 되지? react로 개발을 하면서 javascript를 사용하듯이 개발하면 여러 문제를 만나는 것 같습니다. css에서 직접 사용 /* YourComponent.css */ .flex-container { display: flex; /* 다양한 Flexbox 속성을 여기에 추가하세요 */ } /* 각각의 Flex Item에 대한 스타일 */ .flex..