파피루스

정의: 예상치 못한 레이아웃 이동을 일컫는 것으로, 이로 인한 나쁜 사용자 경험까지 포함하고 있다.이미지 등을 로딩하는 시간 차이로 인해 특정 요소의 위치가 변하면서, 사용자가 원하지 않았던 이벤트가 발생한다.예를 들면 쇼핑하러가기 버튼을 클릭하려고 했는데 갑자기 상단에 로고가 그려지면서 키워드 검색을 눌러진 것으로 인식한다던지 등이다. 해결책이미지, 비디오 요소에 항상 크기 속성을 포함하거나, Aspect Ratio Boxes 같은 방법으로 공간을 미리 확보하기사용자 상호작용에 대한 응답이 아닐 때는 컨텐츠를 삽입하지 않기레이아웃 변경을 트리거하는 속성 대신 transform 애니메이션을 사용하기출처 : https://velog.io/@sunohvoiin/pl2u9xiz

지난 번 https://reeny404.tistory.com/68 4일간 계획했던 플젝이 마무리 되었다.  [팀플.length - 2] 총 4일간 진행할 플젝단 하루의 기획, 2일의 개발, 개발 테스트 및 버그 픽스 0.5일, ppt 및 시연 영상 제작 0.5일 해서총 4일간 진행할 플젝의 기획을 마쳤다. 우선 각자의 능력치를 몰라, 최소한의 요구사항들로 구성했reeny404.tistory.com 전체적인 예상보다 조금 시간이 남아, 코멘트 기능, 깃헙로그인 기능 등을 추가로 구현했고,개발 테스트 및 버그 픽스는 이렇게 : https://github.com/FEsunmin/outsourcing-project/issues?q=is%3Aissue+is%3Aclosed GitHub - FEsunmin/outs..

폴더이름 : 정적 url[이름] : 동적 url파일pages.tsx해당 url로 접근했을 때 뜨는 페이지layouts.tsx자기 자신 + 자기 자신 보다 하위에 있는 모든 페이지에 layout으로 작동한다.ui 공통으로 쓸 수 있다.공통 비즈니스 로직을 정리할 수 있다.Next.js에서 딱 하나 기억 해야한다면?app 디렉터리 아래에서의 폴더 구조가 그대로 url경로가 된다.폴더명[폴더명] : 동적 라우팅예외 사항 = app 디렉터리 아래에 폴더로 존재함에도 불구하고 url 경로가 되지 않는 경우(폴더명) : url 경로에서 해당 폴더가 제외되지만, 라우팅 시스템 내부에 여전히 포함된다._폴더명 : url 경로에서 해당 폴더가 제외되며, 라우팅 시스템 내부에서 완전히 제외된다.라우팅 시스템?(폴더명) v..

단 하루의 기획, 2일의 개발, 개발 테스트 및 버그 픽스 0.5일, ppt 및 시연 영상 제작 0.5일 해서총 4일간 진행할 플젝의 기획을 마쳤다. 우선 각자의 능력치를 몰라, 최소한의 요구사항들로 구성했다. 필수 요구사항은 유튜브 API를 사용하는 것이였고 우리는 기획 상 웹페이지 크롤링이 필수여서 로그인/회원가입을 제외하고 크롤링을 먼저 구현하기로 했다.

https://glitch.com/ Glitch: The friendly community where everyone builds the webSimple, powerful, free tools to create and use millions of apps.glitch.com 1. 회원가입하기 (나는 github계정으로 회원가입했다) 2. 우측 상단의 헤더의 new project 클릭 -> import from github 3. github 주소 넣기 (나는 json-server 배포를 위해 한 거라 미리 만들어놓은 github 주소를 넣어었다.) https://github.com/reeny404/sparta-03-json-server  4. 기다리면 코드를 불러온 모습을 볼 수 있는데, 우측의 shar..

공식 문서를 보면 options.redirectTo를 전달할 수 있다. const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'github' options : { redirectTo : "로그인 완료 후 이동할 페이지 url" }}) vercel 환경 변수에 등록하면 잘 할 수 있다.          https://supabase.com/docs/reference/javascript/auth-signinwithoauth Sign in a user through OAuth | Supabase supabase.com

구매한 도메인을 vercel에 연결하기    끝!  참고) 설정 후에 조금 시간이 걸림!refresh 버튼을 눌러도 반응 없이 다 빨간 불 들어와있는데, 한 5분정도 지나면 아래처럼 refresh 스스로 하고 정상화됩니다

무한 스크롤 구현하려고 하니 너무 막막해서 하나씩 적어보려고 한다. 0. 무한 스크롤은 어떤 순서로 동작할까?일단 무한 스크롤의 동작을 상상해보았다. 아래처럼 움직이면 되지않을까?  // 1. 최초 list 로딩  // 2. scroll 최하단 감지  // 3. hasNextPage 여부 체크 -> false일 때 fetch 요청하지 않도록  // 4. fetch해서 리스트 불러오기  // 5. 화면에 뿌리기 ==> react는 fetch한 데이터 set하면 된다.  1. 최초 list 로딩  const [posts, setPosts] = useState([]);   useEffect(() => {    (async () => {      api.getRecentPosts().then((list) => ..