0910

설치방법 npm install react-icons https://react-icons.github.io/react-icons/ React Icons react-icons.github.io 위의 리액트 아이콘 사이트 접속 후 원하는 아이콘을 클릭하면 아래 사진처럼 나온다. 그리고, 리액트 프로젝트로 돌아가서 사용 할 컴포넌트에 임포트하고 태그식으로 사용하면된다.

개발 실습/WIC(Where Is Coffee) 2024. 2. 3. 16:16

웹 브라우저 기준으로 가로(width) 1500px, 세로의 경우는 헤더200px, 풋터150px 고정 헤더 - 홈화면 이동 링크, 로그인/회원가입등의 고객 서비스 포함 바디 - 장소검색, 현재위치, 검색위치와 현재위치 기반 검색결과 노출 풋터 - 사이트 정보, 고객센터등 노출 - 웹 브라우저를 통해 사이트 접속시, 로그인 유무에 상관없이 장소검색 가능. - 현재위치 기능은 gps정보를 받아 올 수 있는 상태에서만 제공가능하도록 구현 목표 (ex) 모바일 위치서비스 허용상태) - 검색 장소 혹은 현재위치 기준 기본으로 1km 반경의 data를 노출, average 설정으로 1~5km 노출 가능하도록 구현 목표 우선 화면에 보여질 프론트엔드 작업먼저 진행 예정 ( 01.31 마무리 목표 )

개발 실습/WIC(Where Is Coffee) 2024. 1. 22. 16:17

React를 활용한 프론트엔드 프로젝트에서 App.js의 구조를 , , 3개의 컴포넌트로 구성을 했다. 3개의 컴포넌트 각각의 return문 최상위 태그를 시맨틱 태그를 header, body, footer를 이용했다. F12키를 눌러서 개발자 도구 창을 열어서 확인해보면 시맨틱 태그명이 잘 나타난다. 하지만 문제가 있었다. 콘솔을 눌러보면 Warning메시지가 나오고있다. 해석을 해보면, 의 자식으로 를 사용할 수 없다는 내용이다. 이 부분은 생각치도 못한 오류다. Warning 이기 때문에 무시해도 되지만, 태그 구조상 성립이 안되는 에러라고 생각이 들었다. 해결을 해보자... 해결방법 1. 시맨틱 태그를 포기하고 태그로 바꾸면서 className을 header, body, footer로 변경하기 리..

개발 실습/WIC(Where Is Coffee) 2024. 1. 19. 18:43

기획의도 브런치를 먹거나, 식사 후 이야기를 하거나 모임의 장소로 카페를 이용할때, WIC서비스를 활용해서 카페정보를 얻을 수 있도록 하기 위해서. 개발방향 프론트엔드와 백엔드를 포함한 풀스택으로 진행 프론트엔드 - Kakao Map API를 사용해서 지도와 가게정보를 받아온다. - Geolocation API를 사용해서 사용자의 현재 위치 받아온다. 백엔드 - 회원정보를 DB에 저장. - 저장된 회원이 이용한 가게의 리뷰를 남길시 DB에 저장 프론트엔드 - 개발도구 : Visual Studio Code - 언어 : JavaScript ( HTML5, CSS3 포함) - 프레임워크 : React - 라이브러리 : 비동기(AJAX) 통신 = AXIOS 백엔드 - 개발도구 : eclipse - 언어 : Ja..

개발 실습/WIC(Where Is Coffee) 2024. 1. 19. 17:08