일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- nextjs
- array정적메서드
- 자주 까먹는
- useRouter
- 스파르타코딩클럽
- vercel
- 코드카타
- 프로젝트 셋팅
- vscode
- 오블완
- js
- React
- CORS
- 코딩테스트
- 셋팅
- deep dive
- 최적화
- 내일배움캠프
- 코테
- domain
- 티스토리챌린지
- 모던자바스크립트
- 소셜 로그인
- 프로그래머스
- git
- 초기셋팅
- 모던 자바스크립트
- error
- 구글 로그인
- Next
- Today
- Total
목록전체 글 (146)
도록

제어판에서 전체적으로 설정을 건들였더니, 창 이동이 안된다 아 세상에.. 이 단축키가 없어지게 설정할 수도 있는거라니 해결책: 제어판 > 접근성 센터 > 보다 쉽게 작업에 집중할 수 있도록 설정 > 창을 쉽게 관리하기 > 화면 가장자리로 이동할 때 창이 자동으로 배열되지 않도록 방지 체크 해제
https://www.miricanvas.com/v/13e2buh [plan] commerce디자인 전문가가 아니어도 무료 템플릿으로 손쉽게 원하는 디자인을 할 수 있어요.www.miricanvas.com
nextJs > Image tagnext의 IMAGE 태그는 상위 요소 중 position이 static 하지 않은 요소 기준으로 그린다. css >> aspect-ratio : OOOcss >> object-fit : OOO object-cover : 비율 유지한채로 넣기object-conatin : 비율 유지unoptimized : 리사이징을 안하고 싶을 때 useRouter : router.push로 페이지 이동시 단점seo 불가 (다른 페이지 탐색을 하지 않는다.)seo 점수 높히는 방법내부 링크 (내 사이트에서 내 사이트로 이동하는 것)외부 링크 (타 사이트에서 내 사이트로 이동하는 것) : 이게 더 점수가 높을 것으로 예상typescript genericexport type SDeal = ..
JSX: Javascript를 확장시켜 만든 새로운 문법으로, 트랜스파일러(ex. babel)를 필수로 거쳐야 자바스크립트 런타임이 이해할 수 있는 JS 코드로 변환된다. xml 스타일의 트리 구문으로 JSX 구성 예시function HelloWorld () { return (hello world);} babel로 컴파일 할 경우 JSX는 React.createElement로 요소를 만든다. // 리팩토링 전function HelloWorld ({ isHead, children }) { return isHead ? ({children}) : ({children})}// 리팩토링 후function HelloWorld ({ isHead, children }) { return R..

components ui libhttps://ui.shadcn.com/https://mui.com/tailwindcss 동적 css 도와주는 libhttps://cva.style/docscva 사용해보기 // 첫번째 인자 : 조합과 무관한 className // 두번째 인자 : 조합 const chipVariants = cva( ["text-sm", "border", "rounded-full", "px-2.5", "py-0.5"], { variants: { intent: { primary: "bg-blue-500 border-blue-500 text-white", secondary: "bg-gray-500 border-gray-500 ..
정의: 예상치 못한 레이아웃 이동을 일컫는 것으로, 이로 인한 나쁜 사용자 경험까지 포함하고 있다.이미지 등을 로딩하는 시간 차이로 인해 특정 요소의 위치가 변하면서, 사용자가 원하지 않았던 이벤트가 발생한다.예를 들면 쇼핑하러가기 버튼을 클릭하려고 했는데 갑자기 상단에 로고가 그려지면서 키워드 검색을 눌러진 것으로 인식한다던지 등이다. 해결책이미지, 비디오 요소에 항상 크기 속성을 포함하거나, 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..