Studyyyyy

보통 input을 꾸미려면 label을 쓰라고 한다. label, ::before, ::after 등등 나도 자주 썼지만 쓸때마다 너무 복잡하다.그래서 요즘은 최대한 간단하게 css의 accent-color를 사용하여 강조색을 변경해 주는 방법을 사용하고 있다. 아래 링크에서 예시를 보면 checkbox 외 range input, process 등등 여러가지에 적용 가능하다.https://www.w3schools.com/cssref/tryit.php?filename=trycss4_accent-color W3Schools online HTML editorThe W3Schools online code editor allows you to edit code and view the result in your b..

특정한 상황에서 페이지 전체(html/body)가 움직여버리는 현상이 생겼다.나의 경우엔 header를 고정, content를 header의 height(60px)만큼 margin-top을 적용시켜놨는데, 특정 상황에서 자꾸 페이지 전체가 60px씩 위로 올라가버리고, 창의 하단엔 그만큼의 여백이 생겨버렸다. https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move ScrollIntoView() causing the whole page to moveI am using ScrollIntoView() to scroll the highlighted item in a list into view. When I..

기존 프로젝트처럼 bootstrap tooltip을 사용하려고했는데, tailwind와 bootstrap은 유틸리티 클래스가 겹쳐 같이 사용하면 안된다고 한다. 그래서 bootstrap 패키지는 삭제, react-tooltip을 설치했다. 사용방법은 bootstrap과 비슷하다. 1. 설치npm install react-tooltip 2.'use client'import { Tooltip } from "react-tooltip";export default function HelpTooltip() { return ( Do you need help? );} 툴팁은 클라이언트 컴포넌트에서만 사용할 수 있다.툴팁을 사용할 곳에 data..

Cognito 설정 방법은 이 글에 없다. 이미 설정이 끝난 걸 받아서 시작했기 때문에..어제 회사에서 하루종일 난리를 쳤는데 cognito console 페이지에서 스타일을 추가 안해줘서 안되는 거였다. 어쩐지 미리보기도 안되더라니ㅠㅠ 일단 .env.local 설정부터 해주자. 나도 아직 배포 전이기에 env는 로컬 기준이다.COGNITO_CLIENT_ID=fakeIDCOGNITO_CLIENT_SECRET=fakeSecretKeyCOGNITO_LOGOUT_URL=http://localhost:3000COGNITO_ISSUER=https://cognito-idp.{region}.amazonaws.com/{poolId}도메인 주소 이런거 필요 없고 딱 이렇게 4개면 충분했다. (로그아웃 때문에 도메인 주소..

https://shiwoo.dev/posts/next-13-and-css-in-js Next js 15로 프로젝트를 시작하기 전, 익숙하고 동적 스타일 적용에도 편리한 Styled-components를 스타일 적용에 사용할 계획이었다. 하지만 막상 프로젝트를 시작하고 styled.ts 파일을 적용하니 저런 오류가 떴다. 일반적인 방식으로는 클라이언트 컴포넌트에서만 사용할 수 있고, 서버 컴포넌트에서는 CSS-in-JS를 쓸 수 없다고 한다.  공식 문서에 보면 추가적인 설정(https://nextjs.org/docs/app/building-your-application/styling/css-in-js)을 통해 서버 컴포넌트에서도 styled-components를 사용할 수 있다고 하지만 복잡도가 증가하고..

1. npm이 깔려있다는 전제 하에 pnpm 설치$ npm i -g pnpm 2. 제대로 깔렸는지 버전 확인$ pnpm --version※나는 여기서 PSSecurityException 오류가 떴다. 오류 해결법관리자 권한으로 powershell 열기Get-ExecutionPolicy로 RemoteSigned가 나오나 확인.나오지 않는다면 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser 을 친다. (현재 사용자에 대한 실행 정책만 변경하는 명령어)다시 Get-ExecutionPolicy로 RemoteSigned가 나오나 확인RemoteSigned가 나오고 pnpm --version을 쳤을 때 버전이 제대로 나오면 해결된것이다.3...

프로젝트에는 bootstrap 5를 도입해서 사용하고있는데, 이런 구조가 가끔 나온다. // 그 외 toggle에 필요한 속성 ... // 내용 Comment comment 버튼을 눌렀을 때 상위 요소의 toggle 기능이 작동하지 않게 하려면 stopPropagation을 추가해주면 된다.하지만 이건 자바스크립트로 추가하는 경우고, 해당 프로젝트에서는 alpine js를 도입중이기 때문에 bootstrap 기능과 호환되지 않았다. 버튼에 @click.stop.prevent를 적어도 마찬가지였다. 하위 요소에서 toggle을 적용시키지 않게 하려면 해당 요소에 data-bs-toggle="collapse"data-bs-target이런식으로 target을 비워준채 옵션을 추가해주면 된다...

보통 이런식으로 대괄호 안에 이름을 넣고 페이지를 생성하면.../book/1, .../book/2 처럼 동적 경로의 페이지가 생성이 된다. 그런데 /book/123/234/345/645/568/123...이렇게 좀 더 범용적인 동적 페이지를 생성하고싶을 때 대괄호 안에 ...을 붙혀주면 된다. next js에서는 이렇게 설정돼있는 "모든 구간에 대응한다" 해서 "Catch-all segment(구간) " 라고 부른다고 한다.  +)그런데 만약 .../book 페이지로 간다면book 폴더 안에 index.tsx가 없기 때문에 404 에러가 뜬다.만약 index.tsx를 생성하지 않고 뒤에 query가 더 붙지 않는 페이지까지 범위를 허용하고싶다고 하면[...id]를 대괄호로 한번 더 감싸주면 된다.  이런..