내배캠 4기 React - TIL (64) 썸네일형 리스트형 230224 TIL 최종 프로젝트 중간발표 KPT🔥 Keep 모르는 거, 막히는 거, 궁금한 거 그때그때 물어보고 소통을 많이 많이 하는 게 정말 좋은 거 같음!! Problem 문제점 : 기획을 나름 잘했다고 생각했는데 막상 개발을 시작하고나니 부족한 부분이 생각보다 많았음 해결방안 : 기획을 처음 짤 때 정말 완벽하게 유저입장에서 하나도 놓침없이 짜야할 거 같다 Try 리액트 쿼리, 리코일 공부 state에 대해서 정확하게 알기 useRef, useEffect 공부 Feel 팀워크의 중요성을 너무나도 느꼈고 열정도 가득한데 서로 가르쳐주고 배우면서 하니 내가 뭐라도 하고 있구나 싶었고 힘든 것도 많았지만 수료기간 동안 제일 많은 걸 얻어가는 시간이었다. 아직 2주 더 남았지만 2주 동안 열심히 달려서 더 성장하고 싶다. 230217 TIL CORS 에러 알아보기 state 개념 다시 잡기 useRef useQuery {isLoading, isError, data, error} 써서 옵셔널 체이닝 안쓰기(map) 옵셔널 체이닝은 data가 있으면 map을 하고 없으면 안하기 때문에 실행된다 230214-15 TIL 이미지 슬라이드 코드 import React, { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import styled from 'styled-components'; const TestImgSlide = () => { const { state: detailData } = useLocation(); const img = detailData.imgURL; // console.log('det.. 230210 TIL 오늘 한 일 프로젝트 계획 디테일 하게 수정 Figma 수정 파일 구조 조정 오늘 오전에 기술 멘토링 피드백을 받았는데 나름 기획을 잘 했다고 생각했는데 피드백을 듣고 나니 빠진 부분이 많았다... 그래서 오늘 하루는 각 잡고 기획을 다시 하자 해서 하루종일 회의 했는데 왜 하면 할수록 할 게 늘어나는 것인가...ㅜㅜㅜ 진짜 기획이 엄~~청 중요하다는 걸 느꼈다. 이제 본격적으로 시작해야하는데 할 건 세상 많고 시간은 세상 짧은 거 같아서 매우 걱정스럽다... 그래도 해야지!!!! 진짜 최종 프로젝트 끝나고 그래도 내가 얻어 나가는게 있구나 나 뭐라도 했구나를 느끼고 싶다! 우리 팀 화이팅!!!! 230209 TIL 오늘 한 일 db 데이터 추가 230208 TIL 오늘의 삽질 일단 UI는 나중에 디자인 나오면 하는 거로 하고 차례차례 기능 구현해 나가기로 하고 어제부터 내일까지 기한을 주고 시작한 첫 번째 기능은 유저가 팝업스토어 제보하는 게시판을 만들어서 파이어베이스에 연결하는거였다. 파이어베이스도 타입스크립트도 거의 모르는 상태여서 하기 전부터 걱정이 앞섰었다. 그래도 여기저기 찾아보고 다른 사람 코드도 보고 열심히 했지만 에러는 피할 수 없음.... 📌첫 번째 이미지 파일을 추가하는데 위 사진처럼 네모 칸 안을 눌러서 파일을 추가하고 그 이미지 파일이 네모 안에 미리 보기가 됐으면 싶었다. 그러기 위해서는 label 태그를 이용해 input 태그와 id를 동일하게 해서 연결시켜 주고 label을 css 해주면 된다. 그리고 label 태그 안에 image 태.. 230202 TIL Memoization 컴포넌트가 리렌더링 되는 조건에는 state 변경, props 변경, 부모 컴포넌트 변경 3가지 조건이 있다. 그러나 리렌더링은 좋지 않다. 그러므로 리액트에서 불필요한 렌더링이 발생하지 않도록 최적화 하는게 중요! 1. memo(React.memo) : 컴포넌트를 캐싱 -> 부모 컴포넌트 변경 : 컴포넌트를 메모이제이션 export default React.memo(Box1) memo는 리액트 안에 있는 API로 import 해서 쓸 수 있다. import {memo} from "react" 그러면 export default memo(Box1) 로 쓸 수도 있다는 말! *무조건 쓰는게 아니라 자식 컴포넌트가 가벼운 변경이면 굳이 안써도 됨! *props 변경이 많이 일어나는 컴포넌.. 230201 TIL 노션에 필기 정리 해놓은 거 가지고 옴 노션이 정리하기 딱 좋다 리액트 컴포넌트 실행 순서 이전 1 2 3 4 ··· 8 다음
