💻Front-End Developer

🗂️ Git

📇 정보처리기사

✒️ t-story

🙋🏻‍♀️ About Me

👣 Major - information electrical electronics

🕹️ MBTI - ESTJ

⚙️ Stack

• Html CSS JavaScript
• React
• PHP
• Java- Spring Boot

📌 Project

• Cup-Zip (solo)
• TAR (solo)

📌 Project

Cup Zip

23.01.04 ~ 23.01.17

Click to Service Site

1. 프로젝트 소개

일상 속에서 내가 먼저 사용하고 싶은 서비스를 생각하였습니다. 평소에 카페를 즐겨가는 현대인으로서 매번 갈 지역에 있는 카페를 카카오맵, instagram, 네이버 등에서 가고 싶은 카페를 찾는 일이 번거로웠으며, 데이터를 수집해 놓고 사람들이 지역, 구,시, 가고 싶은 분위기를 필터링 해서 보여주면 좋을 것 같아서 제작하게 되었습니다.

2. 배운 점

• useState
  • 지역, 구/시 테마 선택 관리

const [selectArea, setArea] = useState("");
const [selectTh, settheme] = useState("");
const [selectsigu, setsigu] = useState("");

• Filter and Map

  • selet 박스 선택 시 해당 지역, 테마에 해당하는 목록을 보여주기 위해 filter로 걸러내어 해당하는 데이터만 return하여 Map으로 뿌려주었습니다.

    const items = CafeInfo.filter((data) => {
        if (selectArea == "" && selectTh == "" && selectsigu == "") return data;
        else if (
          data.area.includes(selectArea) &&
          data.theme.includes(selectTh) &&
          data.gu_si.includes(selectsigu)
        ) {
          return data;
        }
      }).map((data, index) => {
        return (
          <div className="card" key={index} onClick={() => movePage(data.link)}>
            /*필터링에 맞는 지역, 테마, 구/시에 해당하는 카페만 출력*/
          </div>
        );
      });
    

• 상단 바 position 속성

  • 사용자의 편의를 위해 다시 위로 올라가지 않고 아래로 스크롤 된 상태에서도 필터를 수정할 수 있도록 positon을 설정하였습니다.

    position: fixed;
      z-index: 1;
      top: 70;
    

3. 아쉬운 점

• 모바일로 접속 시 이미지 로딩 속도
• 데이터 추가

<이전 버전(2021)>

TAR

(take a rest)

2023.01.19 ~

Click to git

1. 프로젝트 소개

API사용

2. 배운 점

• 오픈 API, 비동기

  • api 활용법과 비동기함수

  async function getData(i) {
    const response = await fetch(url);
    //json형태로 필요한 정보를 data에 넣어줌
    const data = await response.json();
    const info = data.list.map((val) => [
      val.unitName,
      val.weatherContents,
      val.addr,
      val.tempValue,
    ]);
    const latlng = data.list.map((val) => [val.xValue, val.yValue]);
    makeJson(latlng);
    i = show(info, i);
  }