비수도권 거주자라 온라인 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
Install and configure Vite.
ui.shadcn.com
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
지도를 생성하는 가장 기본적인 예제입니다.
react-kakao-maps-sdk.jaeseokim.dev
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
Contribute to nrkcode/React-hw development by creating an account on GitHub.
github.com
깃허브 연결 과제는 이미 깃허브를 많이 사용해보아서 쉽게 해결했다.
프롭스에서 html 특수문자를 string {""}형식으로 전송하니 문자코드 그대로 출력되었는데, 중괄호를 벗기니까 원래 의도한 ℃로 잘 출력되었다.
props 받는 코드를 수정하거나 조건문을 달거나 하려고 여러 시도를 해 보았는데 괄호 제거라는.. 생각보다 간단한 방법으로 해결되었다.
https://ko.legacy.reactjs.org/docs/jsx-in-depth.html
JSX 이해하기 – React
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
prop에 대해 알아보자!! 하고 찾아본 문서에서 힌트를 얻었다. 역시 공식문서를 보는 습관이 들어야겠다.
스크롤바 없애기는 알려주신 방법 말고 다른 방법을 구글링해서 찾아보았다.
npm: tailwind-scrollbar-hide
tailwind-scrollbar-hide
tailwindcss plugin for hide scrollbar. Latest version: 1.1.7, last published: 3 years ago. Start using tailwind-scrollbar-hide in your project by running `npm i tailwind-scrollbar-hide`. There are 95 other projects in the npm registry using tailwind-scroll
www.npmjs.com
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();
이렇게도 된다
자바스크립트 동기/비동기함수 할 때 좀 놓쳐서 자습을 더 했다
코드 템플릿 단축키가 정말 유용해서 더 찾아봤다!
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 #프론트엔드개발자양성과정 #개발자교육과정
