반응형 개발364 링크로 섹션이동시 고정헤더에 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. 객체 변경 방지 하는 법 * 프로퍼티 어트리뷰트가 어떤건지 모르면 프로퍼티 어트리뷰트가 뭔지 공부하고 이 글을 보는것이 더 좋을 것 같다. * Typescript를 사용한다면 as const로 해결 할 수 있다. 객체 변경 방지 const로 정의한 객체는 메모리 주소를 할당하기 때문에, 변화가 가능한 값이다. JS에서는 객체의 변경을 방지하는 다양한 메서드를 제공한다. 구분 메서드 프로퍼티 추가 프로퍼티 삭제 읽기 쓰기 재정의 객체 확장 금지 Object.preventExtensions x o o o o 객체 밀봉 Object.seal x x o o x 객체 동결 Object.freeze x x o x x 객체 확장 금지 : Object.preventExtensions const person = {name:'Lee'} // 확장.. 2024. 2. 8. 이전 1 2 3 4 5 ··· 91 다음 반응형
