[20220515 S]

오늘은 (5) 월 (15) 일 / 날씨: (공부하기 좋은 날씨🎏)

한줄: 일요일목표 - 도서관 1등으로 입장하기🏛 / 6월달부터 날짜말고 카테고리 별로 정리할까? / 코딩공부하는 기분=영어 처음 배울때의 기분🐣척하면 척 알아듣고 싶다..plz 코딩도 10년하면 뭔가 되겠지

💻 1) WORK MEMO & REVIEW

Everyday

✍️ 대제목:

• 소제목
  • 주석?
• 소제목

💻 2) CODING & STUDY

Every Morning

✍️ 코딩 중 메모

• PS1

  • https://flatuicolors.com/palette/gb color

  • https://github.com/zacanger/styled-reset/blob/master/src/index.ts reset

  • source sans pro 폰트

  • https://coinpaprika.com/ko/api/ 코인 api

  • https://coinicons-api.vercel.app/ 코인 icon api

  • https://www.online-toolz.com/tools/unicode-html-entities-convertor.php entity 변환

  • styled-component-> 가독성에 굿 / 조금 더 많이 써보기

  • <Link></Link> 이거 css 는 a 태그에

  • 특정한 시점에만 코드실행 => useEffect

    useEffect(()=>{
    
    (()=>console.log(2))()    // 바로실행되는 함수
    
    },[])

    useEffect(()=>{
    
    (async()=>{
    	const response =await fetch(url);
        const json = await response.json();
        console.log(json);
    })()    
    
    },[])

    => react query로 대체하기

  • array.slice(시작, 갯수)

  • 리액트 Link state 실어 보내기
    https://v5.reactrouter.com/web/api/Link

    https://typescript.tv/react/upgrade-to-react-router-v6/

    https://velog.io/@jungyh0528/React-Router-%EC%82%AC%EC%9A%A9-%EB%B0%8F-State-%EC%A0%84%EC%86%A1-%EC%A0%95%EB%A6%AC

    import { useParams } from "react-router-dom";
    
    interface RouteParams {
     coinId: string;
    }
    
    interface LocationParams {
     state: {
     name: string;
     rank: number;
     };
    }
    
    function Coin() {
     const { coinId } = useParams<keyof RouteParams>() as RouteParams;
     const { state } = useLocation() as LocationParams;
     return (
     <div>
     <h1>Coin: {coinId} {state}</h1>
     </div>
     );
    }
    
    export default Coin;
    

  • 코드 줄이기

     useEffect(()=>{
    
    (async()=>{
    	const firstData =await (await fetch(url)).json();
        const secondData = await (await fetch(url)).json();
        setFirstData(firstData);
        setSecondData(secondData);
    })()    
    
    },[])
    
    

• PS2

  • backend rest apis - crud

    router.get("/", (req,res,next)=>{
    const username = req.query.username;
    const data = username? posts.filter(post=>post.username === username) : posts;
    res.status(200).json(data);
    })
    router.get("/:id", (req,res,next)=>{
    const id = req.params.id;
    const post = posts.find((post)=>post.id ===id)
    if(post){
    	res.status(200).json(post)
    }else {
    	res.status(404).json({message: `Post id(${id}) not found` });
    }
    })
    

    router.post("/:id", (req,res,next)=>{
    	const {text,name,username } =req.body;
        const post = {
        	id:Date.now()
            text,
            createdAt: new Date(),
            name,
            username
        }
        posts = [post, ...posts];
        res.status(201).json(post);
    })

    router.put("/:id", (req,res,next)=>{
    	const id = req.params.id;
        const text = req.body.text
       	post = posts.fine(post => post.id ===id);
        if(post){
        post.text=text;
    	res.status(200).json(post)
    	}else {
    	res.status(404).json({message: `Post id(${id}) not found` });
    }
    })

    router.delete("/:id", (req,res,next)=>{
    	const req.params.id;
       	posts = posts.filter(post => post.id !==id);
        res.sendStatus(204);
    })

    데이터베이스로~ / 프엔 구현

🆎🎾 3) ENGLISH/ GERMAN / TENNIS

Monday/ Wednesday/ Thursday (Clarisse랑 날짜 조정하기)
Wednesday/ Saturday

📌 4) ETC (READING/ ECONOMY)

Free time

6) TODO & QUESTIONS

• 주말 공부 정리하기
• task1 data fetch/nested routes => ok
• task2 crud => ok
• task3 nested routes2 =>ok
• task4 mvc
• next week plan(notion) =>ok
• 에어컨
• hair cutcut =>ok
• 미술관예약

❤️ 5월 GOALS

• 재밌는 프론트엔드기능 만들어보기
• nodejs 공부하기
• 실무 질문 많이하기
• 테니스 꾸준히 나가기 (운동량 너무 부족해 테니스를 늘리든지 운동을 하나 더 하든지)
• 책읽을 휴식시간이 필요해