Frontend (9) 썸네일형 리스트형 [Next.js 14(SSR app route) + supabase auth] 삽질 supabase auth에서 미들웨어 로직 404 문제회사에서 일을 하다가 supabase auth 로직을 짜고있는데 이상한 문제가 발생했다.import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";import { NextRequest, NextResponse } from "next/server";export const middleware = async (req: NextRequest) => { const res = NextResponse.next(); const supabase = createMiddlewareClient({ req, res }); const { data: { session }, } = await supa.. [React] 클래스 컴포넌트와 함수 컴포넌트 정리 클래스 컴포넌트 기존 리액트 16.8 버전 미만으로 작성된 코드로 클래스 컴포넌트가 대다수이다. 즉, React의 초기 버전부터 사용되어 온 전통적인 방식으로, 복잡한 상태관리와 생명주기 관리가 필요한 경우 유리할 수 있다. 생명주기 메소드(LifeCycle Method) : 컴포넌트가 브라우저상에 나타나고, 업데이트 되고, 없어지게 될 때, 또는 추가적으로 에러가 났을 때 호출되는 메소드들이다. 생명주기 메소드는 클래스 컴포넌트에서만 사용할 수 있고, 예를들어 componentDidMount(), componentDidUpdate(), componentWillUnmount(), render() 등이 있다. 클래스 컴포넌트를 알아야하는 이유 : 지금은 함수 컴포넌트 사용을 권장하기 때문에 알 필요 없다고.. [React] 프로젝트에 eslint 적용 시 발생한 이슈 이슈 원인 React 프로젝트에 처음으로 ESLint를 적용하던 중 생긴 오류로 화살표 함수로 생성된 함수형 컴포넌트에 발생한 오류 해결 방법 eslintrc 설정파일의 rules에 react/function-component-definition을 추가하여 함수형 컴포넌트의 정의 방식을 지정해주자. rules:{ 'react/function-component-definition':[2, {namedcomponents:'arrow-function'}] } 추가 이슈 init을 활용해 eslint 코드 컨벤션 설정하기 Parsing error: Unexpected token =eslint 해결하기 npm install eslint babel-eslint --save-dev module.exports = { .. [HTML] 메타(meta) 태그의 개념과 종류 메타 태그(meta tag) 란 무엇인가? 요즘 브라우저로 수많은 좋은 웹사이트와 콘텐츠들을 접할 수 있게 되었다. 그런데 아무리 좋은 사이트나 콘텐츠를 구축해도 구글이나 네이버와 같은 대형 검색 엔진 사이트에서 검색이 되지 않는다면 해당 사이트의 사용자 수가 매우 적을 것이다. 이러한 문제를 해결하기 위해 개발적인 측면에서 사용되는 가장 핵심적인 역할이 바로 태그인 것이다. 태그는 해당 웹 페이지의 요약이므로 매우 중요하다고 볼 수 있으며, 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다. 하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태그로 태그 사이 또는 뒤에 있어도 되지만 반드시 BODY 태그 앞쪽에 위치해야 한다. 브라우저와 검색 엔진.. [HTML] DOCTYPE 의 의미와 HTML 태그 정리 DOCTYPE 정의 지금껏 당연하다고만 생각하며 깊게 알아보지 않고 넘어갔던 DOCTYPE 선언은 Document Type의 줄임말로, 웹문서가 어떤 버전 및 형식의 HTML로 작성되었는지 정의 하는 데 사용하는 마크업 선언이다. DTD(Document Type Declaration)를 통해서 현재의 웹문서가 어떤 버전의 HTML 기술로 작성되었는지 웹브라우저에 전달한다. 왜 선언 할까? 문서간의 호환성을 높이기 위해서이다. HTML 문서 버전에는 옛부터 사용되었던 HTML4 이전의 문서들, 현재 사용되고 있는 HTML5와 XHTML 등이 있다. HTML의 버전마다 적용되는 태그와, 적용되지않는 태그가 따로 존재한다. 만약 html4 이전 버전에서 html5의 새로운 태그를 사용한다면 브라우저에서 문법 .. [SCSS] SASS(SCSS) 기본 정리 Sass 란? Sass는 CSS로 컴파일 되는 스타일 시트 확장 언어이며 CSS 전처리기의 하나이다.기술 방식에는 sass 와 scss 가 있는데 sass 는 우리가 일반적으로 쓰는 css 문법과 다르기 때문에 동일하게 중괄호 문법을 사용하는 scss 를 쓴다. 파일분리와 Nesting(중첩) 📒 파일분리 scss 에서는 이렇게 여러 파일을 분리햐여 코드를 작성할 수 있다. 파일명 앞에 _(언더바)를 붙이면 해당 파일은 컴파일 되지 않는다. 만약 를 붙이지 않을 경우 다 컴파일 되어서 각각의 css 파일이 만들어진다. 하지만 우리에게 필요한건 저 사진상으로 style.scss이므로 나머지에는 _(언더바)를 붙여줘야 한다. Sass에게 이 파일이 main파일의 일부분임을 알려줘서 해당 파일은 css파일로 .. [React] Hooks 기초 정리/가장 많이 쓰이는 hooks React Hook 정의 React의 Hook은 16.8 버전부터 새로 추가된 기능이다. Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수라고 하고, Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해주는 것이다. 현재는 React Hook이 없다면 React 프레임워크를 사용하는 의미가 없을 정도로 매우 중요하다고 볼 수 있다. React Hook 규칙 React Hook은 반복문, 조건문, 중첩된 함수내에서 호출하면 안됨. 이 규칙을 지키면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 훅이 호출되는 것이 보장된다. 일반적인 javascript.. 자주쓰는 정규식 표현 (Regex) 정리 // Regex.js // Chimsil 제작 // ID 체크 const idRegex = new RegExp(/^[a-z0-9_]{6,20}$/); // 한글+영문 2글자 이상 20글자 이하 체크 const nameRegex = new RegExp(/^[가-힣]{1,6}$/); // 성 regex 체크 const lastNameRegex = new RegExp(/^[가-힣]{1,3}$/); //email형식 체크 const emailRegex = new RegExp(/(([^()\[\]\\.,;:\s@"]+(\.[^()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-.. 이전 1 2 다음
