[유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - 사전직무교육 1주차

비수도권 거주자라 온라인 zep으로 참여했다.

 

일주일 학습 요약

1주차에는 자바스크립트를 간단히 배우고 리액트 프로젝트 2개를 같이 만들었다.

 

cd desktop
npm create vite@latest
Project name: » vite-project (프로젝트 이름은 본인이 원하는 이름으로 생성)
Select a framework: » React
Select a variant: » TypeScript
cd 생성한 프로젝트명
npm install
code . -r

 

 

https://ui.shadcn.com/docs/installation/vite

Vite

shadcn UI를 이용할 것이라서 위 문서를 보고 테일윈드 깔아주었다.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

VSCode 오류 - npx : 이 시스템에서 스크립트를 실행할 수 없으므로 ...

npx오류로 구글링하여 해결하였다.

 

axios와 jotai도 활용하였다

npm install react-router-dom
npm install localforage match-sorter sort-by
npm install sass --save-dev
npm install react-kakao-maps-sdk
npm install axios
npm install jotai

 

지도 생성하기 | react-kakao-maps-sdk docs

지도 생성하기 | react-kakao-maps-sdk docs

 

 

import { Map } from "react-kakao-maps-sdk";
import useKakaoLoader from "@/hooks/useKakaoLoader";
import { Card } from "@/components";

function GetKakaoMapWidget() {
    useKakaoLoader()

    return (
        <Card className="w-1/4 min-w-[25%] h-full">
            {/* 지도를 표시할 컨테이너 */}
            <Map
                id="map"
                center={{
                    /** 지도의 중심좌표 */
                    lat: 37.5683,
                    lng: 126.9778,
                }}
                style={{
                    /** 지도의 크기 */
                    width: "100%",
                    height: "100%",
                    borderRadius: "8px",
                }}
                /** 지도의 확대 레벨 */
                level={13}
            />
        </Card>
    );
}

export { GetKakaoMapWidget };

 

use state와 props를 이용한 데이터 관리, 날씨api연결

function HomePage() {
    const [cityName, setCityName] = useAtom(cityNameAtom);


    const [weatherData,setWeatherData] = useState(defaultWeatherData);
    const [tideData, setTideData] = useState<ForecastTideDay>(defaultTideData);
    const [oneWeekWeatherSummary, setOneWeekWeatherSummary] = useState([]);

    const APP_KEY = "/** 앱키 */";
    const BASE_URL = "http://api.weatherapi.com/v1";

    const fetchApi= async ()=>{
        
        try{
            const res = await axios.get(`${BASE_URL}/forecast.json?q=${cityName}&days=7&key=${APP_KEY}`) ;
            console.log(res);

            if (res.status === 200){
                setWeatherData(res.data);
            }

        } catch(error){
            console.error(error);
        }finally{
            console.log("fetchApi 호출은 되었습니다.");
        }

    };
    
    const fetchTideApi= async ()=>{
//길어져서 생략
    };
    
    const getOneWeekWeather = async ()=>{
        
        try{
            /** Promise 인스턴스 방법을 사용했을 땐, resolve에 해당 */  
            const res = await axios.get(`${BASE_URL}/forecast.json?q=${cityName}&days=7&key=${APP_KEY}`) ;
            console.log(res);

            if (res.status === 200 && res.data ){
                const newData=res.data.forecast.forecastday.map((item: ForecastDay)=>
                {
                    return{
                        maxTemp: Math.round(item.day.maxtemp_c),
                        minTemp: Math.round(item.day.mintemp_c),
                        date: item.date_epoch,
                        iconCode: item.day.condition.code,
                        isDay: item.day.condition.icon.includes("day"),
                    };
            });
            setOneWeekWeatherSummary(newData);
        }
        } catch(error){
            /** Promise 인스턴스 방법을 사용했을 땐, resolve에 해당 */  
            console.error(error);
        }

    };
    

    useEffect(()=>{
        fetchApi();
        fetchTideApi();
        getOneWeekWeather();
    }, [cityName])

 

다음 프로젝트도 비슷하게 진행했다. 한 번 해보고 나니 더 수월하게 진행할 수 있었다.

 

과제

 

ui 이미지만 보고 혼자서 해 봤던 코드!

https://github.com/nrkcode/React-hw

GitHub - nrkcode/React-hw

 

 

깃허브 연결 과제는 이미 깃허브를 많이 사용해보아서 쉽게 해결했다.

프롭스에서 html 특수문자를 string {""}형식으로 전송하니 문자코드 그대로 출력되었는데, 중괄호를 벗기니까 원래 의도한 ℃로 잘 출력되었다.

props 받는 코드를 수정하거나 조건문을 달거나 하려고 여러 시도를 해 보았는데 괄호 제거라는.. 생각보다 간단한 방법으로 해결되었다.

https://ko.legacy.reactjs.org/docs/jsx-in-depth.html

JSX 이해하기 – React

prop에 대해 알아보자!! 하고 찾아본 문서에서 힌트를 얻었다. 역시 공식문서를 보는 습관이 들어야겠다.

 

 

스크롤바 없애기는 알려주신 방법 말고 다른 방법을 구글링해서 찾아보았다.

 

 

npm: tailwind-scrollbar-hide

tailwind-scrollbar-hide

 

npm install tailwind-scrollbar-hide

 

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwind-scrollbar-hide')
    // ...
  ]
}

 

 

어려웠던 점 & 더 찾아본 정보들

 

동기/비동기함수&화살표함수

function a() {
    console.log("1");

    setTimeout( () => {
        console.log("2");
    }, 1000);

    console.log("3");
}

a();

화살표 함수로 적어도 된다

const a = () => {
    console.log("1");

    setTimeout( () => console.log("2"), 1000);

    console.log("3");
}

a();

이렇게도 된다

• 화살표함수와 일반함수의 차이
• [JS] function 대신 arrow function(화살표 함수) 사용하는 이유

      setTimeout( () => {
          console.log("2");
      }, 1000);
  

      setTimeout( function() {
          console.log("2");
      }, 1000);
  

  다 같은뜻
• setTimeout( () => console.log("2"), 1000);
• 자바스크립트 화살표 함수- 일반 함수와의 차이점과 쓰는 이유 - 코딩에브리바디

자바스크립트 동기/비동기함수 할 때 좀 놓쳐서 자습을 더 했다

 

코드 템플릿 단축키가 정말 유용해서 더 찾아봤다!

https://velog.io/@rgfdds98/React-snippets-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%A2%85%EB%A5%98%EB%B3%84-%EB%8B%A8%EC%B6%95%ED%82%A4

 

 

 

일주일 해 보고 느낀 점은,

하루에 8시간 수업이다 보니 한 번 놓치면 따라가기 쉽지 않고 제때 복습을 해야 잊어버리지 않겠다는 점이다.

주말에 문서를 정리하다 보니 상세한 부분이 잘 기억이 나지 않아서 다음 주 부터는 가능하다면 하루에 한 번 일지를 써봐도 좋을 것 같다.

노션에라도 정리해봐야겠다.

그리고 자바스크립트, css 지식이 너무 부족하다는 것을 느꼈다.

알려주시는 부분이라도 열심히 습득하고 주말에 추가적인 공부를 꼭 더 해야겠다..

주말에 추가 공부 하기 위해서는 진도 나간 부분의 공부는 평일에 꼭 끝내야겠다.

 

——————————————————————————

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 과정(B-log) 리뷰로 작성 되었습니다.

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #Next.js #프론트엔드개발자양성과정 #개발자교육과정