본문 바로가기

프론트엔드184

Supabase - RLS(Row-Level Security) 최종 수정 : 2024-06-04RLS(Row-Level Security)행 수준의 보안이라고 번역된다.권한 체크에 대한 로직을 의미한다. 만약 없다면?서버에서 권한 체크를 해야 하며, 이를 서버 코드로 구현해야 한다. 그에 따라 버그 가능성이 존재하게 된다. 또한, BOLA 나 BFLA 보안 이슈가 발생할 수 있다. BOLA : Broken Object Level AuthorizationBFLA : Broken Function Level Authorization 이런 이슈를 DB Level에서 권한 체크하여 방지하는 것이 RLS이다. 데이터베이스에 스키마를 정의할 때, 권한에 대한 정책 도 같이 정의하기 때문에 가능하다. 다시 말해, 데이터베이스를 설계할 때 권한까지 함께 설계하는 것이다. 이런 권한 .. 2024. 6. 4.
Next.js API 최종 수정 : 2024-06-04request.http 파일을 만들면 저렇게 보낼 수 있다.이를 위해서는 REST Client 라는 expension을 설치해야 한다. # Request 객체프로퍼티타입설명method문자열리퀘스트로 들어온 HTTP 메소드 값query객체쿼리 스트링이나 Next.js에서 사용하는 Params 값이 들어 있는 객체body자유로움리퀘스트의 바디 값cookie객체리퀘스트의 쿠키가 키/밸류로 들어 있는 객체 // [id].js 파일export default function handler(req, res) { switch (req.method) { case 'PATCH': res.send('ShortLink 수정'); break; case 'GET': .. 2024. 6. 4.
[팀 미팅 질문] React Portal 최종 수정 : 2024-06-04React Portal부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이다. React 라이브러리에서 제공하는 기능 중 하나로, React 컴포넌트에서 DOM 트리 상에서의 위치를 변경할 수 있도록 해준다. 이 기능을 사용하면 컴포넌트의 렌더링 결과를 다른 DOM 노드로 이동시킬 수 있다.ReactDOM.createPortal(child, container)첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React의 자식 요소이다.두 번째 인자(container)는 DOM 엘리먼트이다. Q. 사용하는 이유리액트는 부모 컴포넌트가 렌더링 되면 자식 컴포넌트도 렌더링 되는 T.. 2024. 6. 4.
[팀미팅 질문] 서버 컴포넌트와 클라이언트 컴포넌트의 차이와 용례 최종 수정 : 2024-06-03Q. 서버 컴포넌트와 클라이언트 컴포넌트의 차이를 설명해주시고 각각을 설정하는 기준점은 무엇인가요?? 우성, RSC와 RCC를 적재적소에 배치하여 개발하려는 접근이 필수적이다. 이를 위해서는 둘의 차이를 알고 어떤 상황일 때 사용하는지에 대한 이해가 필요하다. React Server Component(줄여서 RSC)는 React18부터 도입된 개념으로, 말 그대로 서버에서 동작하는 컴포넌트를 가리킨다. 서버 컴포넌트가 있는 것처럼 당연히 클라이언트 컴포넌트도 존재한다. 이전 버전에서 사용했던 모든 컴포넌트가 바로 클라이언트 컴포넌트다. 서버 컴포넌트와 클라이언트 컴포넌트의 가장 큰 차이점은 데이터를 가져오는 방식이다. 컴포넌트가 렌더링되는 장소가 서버냐 클라이언트냐에 따라.. 2024. 6. 3.
next.config 설정 최종 수정 : 2024-06-01 redirectsconst API_KEY = process.env.API_KEY;module.exports = { reactStrictMode: true, async redirects() { return [ { source: '/old-blog/:path*', destination: '/new-sexy-blog/:path*', permanent: false, }, ]; },}; rewritesconst API_KEY = process.env.API_KEY;module.exports = { reactStrictMode: true, async rewrites() { return [ { .. 2024. 6. 1.