본문 바로가기

TIL✨

 (71)
getStaticProps || getServerSideProps_TIL next.js 공부 중에 getStaticProps를 알게되었는데 조금 이해가 더 필요해서 정리하기로 했다. react로 개발을 하면서 data를 가져오게되면 처음에는 undefined가 되고 두번째에 값이 들어오는것을 알 수 있다. 그 이유는 useEffect로 가져오는 data fetch함수가 최초렌더링시에는 실행되지 않고 jsx가 한번 실행되고 나서 함수가 실행된다. 그래서 그 이유로 화면이 깜빡거리거나 값이 없다고 뜬다. -> 이러면 사용자의 경험이 안좋아질 수 있다. 그래서 이러한 문제를 해결하기 위해서 사전렌더링기능(pre-rendering)을 제공하는 Next.js가 나왔다. next.js? : 렌더링 이전에 미리 만들어놨다가 렌더링 시 바로 값이 보일 수 있도록 하는 기능을 가진 리액트 프..
react-component의 실행 순서 TIL 프로젝트 중에 비동기처리로 data가 오기전에 먼저 렌더링이 되어서 undefined가 되었던 적이 많은데 그래서 예외처리라던가, isLoading, 옵셔널 체이닝 등을 써주었다. 그래서 튜터님이 가르쳐주신 component실행 순서를 기록해보려고한다. 그냥 쉽게 말해서 컴포넌트가 실행되었을때를 mounting되었다라고 하고 내가 다른 페이지이동을해서 그 컴포넌트를 벗어나면 unmounting이라고 한다. 그리고 중간에 있는 updating은 props전달, state변경으로 인해 일어난다. componentDidMount , componentDidUpdata , componentWillUnmount 이 세가지는 useEffect로 구현이 가능하다. 내가 착각하고 있었던 점은 useEffect가 컴포넌트..
가져온 좋아요 수를 어떻게 정렬할까 TIL 하루종일 시간을 잡아먹은것같다. 이것만 완료되면 내가 맡은부분을 거의 다 했는데 머리가 답답했다. 전에 프로젝트에서 최신순, 인기순으로 정렬하는건 해봐서 자신이 있었는데 멘붕이였다. 1. 내가 만난 역경 앞에서 적은 TIL에 이어서 이제 홈에는 좋아요 수 대로 유튜브영상들을 정렬해야했다. 그럼 videoBox에 있던 값이 많은 순서가 되어야하는데...어떻게 가져와야하는지 몇가지 방법을 생각해봐도 도중에 막혔다. contentID가 일치하는 length값을 가져오면 그건 contentID가 아닌 그냥 누적 숫자였다. 숫자가 필요한게아니라 그 누적값이 가장많은 contentID가 필요한거였다. 여기서 멘붕😣 1️⃣ 홈은 가장 상단 페이지니까 props로 받아올 수 없다. 그러니까 내가 data를 likes와..
좋아요숫자를 어떻게 가지고 올것인가 TIL 영상 박스마다 좋아요 갯수가 밑에 뜨도록 하기위해서 비디오영상 component안에 좋아요값을 넣으려고하는 상황이였다. 아래는 프로젝트 db구조 ✅ { "posts": [], "comments": [], "profile": [], "likes": [ "contentID": ..., "userID": ..., "id" :... ], "User": [], "videos": [ "id": "", "contentId": "", "createAt": "", "time": "2023. 1. 28.", "userId": "", "nickName": "999999", "videoUrl": "", "title": "삼등삼등", "content": "삼등삼등" ] } 1.내가 만난 문제 useQuery로 가져오고 있는 "..
설 쉬고 다시 프로젝트 TIL 설날 시작 전 미리 html,css등을 작업해놓고 다시 설날 지나고 나서 팀원들과 그 동안 생겼던 오류들과 해결해야할 부분들을 회의했다. 조금 손 봐야할 곳이 css 쪽이였는데 금방 일줄알았는데 지금이다. 하루종일했다. 1. 만난 문제 메인페이지를 맡아서 기능이라면 유튜브 API를 받아서 map으로 돌리면 된다고 생각했다. 근데 내가 만들어놓은 유튜브 css자리에 영상이 자꾸 짤려서 나온다. 딱 맞고 이쁘게 나왔으면 좋겠는데 안됬다. 유튜브영상을 감싸고 있는 container에 width,height값을 주고나서 유튜브영상에다가 w,h:100%를줘도 안된다. 2.시도 시도..어마무시하게 해서 헷갈릴 정도 그냥 css height 맞출수 있는거라면 다했다. 3.해결 결국에 다시 구조를 짰다. css로 시간..
심화프로젝트 시작_TIL(60) 오늘 최종 프로젝트 전 마지막 프로젝트를 시작했다. 설이 끼여있어서 다른 프로젝트보다 이틀정도 긴것같지만 그래도 기능구현 중에 어떤 오류를 만날지 모르기때문에 미리미리 할 수 있는 것을 해놔야할꺼같다. 1. 맡은 페이지 : 메인 홈 (인기 동영상 + 최신 동영상) -> 메인홈을 만드는건 처음이라...두근세근 2. 기능🔥 Contents db get - 동영상 API로 가져오기 Likes db get - 동영상의 좋아요 가져오기 3.부가적으로 맡은 역할 ⚒️ 동영상 컴포넌트 만들기 ( 유튜브 API를 이용해서 영상을 가져오는거라 컴포넌트 재사용이 높을 예정) - 메인홈에 많이 들어가기때문에 내가 맡는 것이 맞다고 생각함 - 대신 잘해야하므로 쪼금 긴장됨💧 4.느낀 점🦋 오전부터 시작해서 거진 오후 8시쯤까..
typescript TIL(55) 갑자기 타임어택과제로 타입스크립트로 리액트&리덕스를 리팩토링해서 제출하게됬다. 물론 완성하지 못했다. ㅠ 역시 3일만에는..무리인가보다 ㅠ docs고 구글이고 다 해도 오류가 한번나니까 연결되서 나니까 어질했다. 헷갈린다 헷갈려~ 1. JSX.Element type : JSX자료형을 말한다. 이 타입을 지정하고 싶다면 JSX.Element를 사용하도록 - JSX를 변수로 지정한다면 const fruits : JSX.Element = const fuits:JSX.IntrinsicElement['p']= 이 두가지 다른 점은 태그를 앞에 지정해주냐 안해주냐다. 지정을 하면 Intrinsic을 붙여하는데 사전 찾아보니까 '본래 갖추어진'이라고 나온다... 이해하기 좋자면, 기존에있던 태그를 먼저 지정하니까? ..
Object.assign _TIL(54) 1. 어떻게 알게 되었나📝 전에 만들었던 프로젝트에서 다른 팀원분이 짠 코드를 보고 있던 중에 Object.assign이라는 코드를 봤다. 뭔가...가져오는것같은데 뭘까하고 보니까 얕은복사를 할 수 있는 코드 였다. 항상 ...spread문법을 주로 써왔어서 이런 것도 있었구나 라고 알게되었다. 2.어떻게 쓰는가❓ Object.assign(arr,[src1,src2,src3...]) 이런구조로 쓰인다. 1) arr은 복사한값을 다가지고 나올 결과 객체이다. 2)[src1,src2,src3....] : 몇개가 와도 상관없다 복사하고자하는 객체 =>src의 프로퍼티들이 arr에 복사가 된다. 3.응용하자면? // 값을 병합하는 코드예시 let user = {name:"John"}; let per1 ={age..

티스토리툴바