반응형 전체 글601 웹개발 vscode prettier 설정 https://green-grapes.tistory.com/entry/VSCode-prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0 [VSCode] prettier 설정하기 1. 일단 확장(extensions) 들어가서 prettier 치고 가장 처음 나오는 거 다운 받는다. 2. ctrl 과 , 키를 동시에 눌러서 설정 창을 연다. 3. 설정에서 Editor: Default Formatter 검색 Prettier -Code Formatter 선택 4. 설 green-grapes.tistory.com 2024. 3. 17. 링크로 섹션이동시 고정헤더에 h태그가 가리는 이슈 문제 : 링크로 섹션 이동시에 고정헤더에 h태그가 가려짐 cc cc 위 gif처럼 링크로 섹션이동시에 해당 id를 가진 h태그가 고정헤더에 가려지는 이슈가 있었다. 해결 ':target'과 가상선택자 '::before' 이용 :target을 이용하여 해당 링크로 이동했을때의 스타일을 다음과 같이 지정해주었다. .anchor{ &:target::before { content: ""; display: block; height: 86px; /* 헤더의 높이와 동일 */ margin-top: -86px; /* 음수 마진으로 헤더 높이만큼 오프셋 조정 */ visibility: hidden; } } {children} 이젠 고정헤더에 가려지지 않는다. https://dev.meye.net/entry/%ED%8E%.. 2024. 2. 28. middleware.ts middleware middleware는 request가 완료되기 전에 실행된다. 그 후 들어오는 request에 따라 헤더를 다시 작성하거나 리다이렉트를 한다. app폴더와 동일한 레벨에 두어야 한다. app 폴더 안에 있으면 안된다. // middleware.ts import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' // This function can be marked `async` if using `await` inside export function middleware(request: NextRequest) { return NextResponse.redirect(new URL('/home'.. 2024. 2. 11. Next 서버 컴포넌트 이용시 보안 이 글을 읽고 기억해야 할 부분들을 메모 How to Think About Security in Next.js Learn about what security protections are built-in Next.js and view a guide for auditing applications. nextjs.org 보안 관련된 것은 props나 url이 아닌 cookie같은 것으로 검증하기 예를 들어 url에 isAdmin = true 같은 값을 사용하거나 로그아웃 혹은 변경사항 저장 같은 것을 수행하는데 사용되서는 안된다. 이는 클라이언트단에서 오용될 가능성이 있다. 그렇기 때문에 보안과 관련된 것들은 cookies같은 것들을 이용하는 것이 좋다. 클로저 서버컴포넌트에서도 클로저가 적용되고 서버액션은 클.. 2024. 2. 11. 이전 1 ··· 8 9 10 11 12 13 14 ··· 151 다음 반응형
