Frontend40 [HTML & CSS] CSS Grid minmax로 내부 요소 비율 유지하기 (feat. text 말줄임표 처리) 문제 발생 CSS Grid를 사용한 반응형 페이지에서 내부 요소의 width가 길어지면 grid의 비율이 깨지는 현상이 발생했습니다..lectureCardWrapper { display: grid; gap: var(--margin-size-lg); grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto;}@media screen and (max-width: 880px) { .lectureCardWrapper { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }}@media screen and (max-width: 530px) { .lectur.. 2024. 6. 23. [JavaScript] 웹팩 웹팩이란?자바스크립트 애플리케이션의 모듈 번들을 위해 사용되는 오픈 소스 모듈 번들러 모듈모듈은 자바스크립트 애플리케이션을 구성하는 개별 단위 파일종류에는 자바스크립트 모듈, CSS 모듈, 이미지 파일 / 폰트 파일, 라이브러리 모듈 등이 있습니다. 모듈의 장점유지보수성네임스페이스화재사용성 모듈 시스템자바스크립트의 모듈들을 독립적으로 분리하고 의존성을 정의하는 시스템을 말합니다.종류CommonJS주로 Node.js 환경에서 사용다른 모듈을 사용할때 require을, 모듈을 해당 스코프 밖으로 보낼 때에는 module.exports를 사용// math.jsmodule.exports.add = function(a, b) { return a + b;};// app.jsconst math = require.. 2024. 6. 15. [React] 합성 컴포넌트 패턴으로 모달 만들기 Introduction 토이 프로젝트 중 위와 같은 다양한 형태의 모달을 제작해야 할 상황이 생겼고, 예전부터 사용해보고 싶었던 합성 컴포넌트 패턴으로 모달을 제작해보기로 했습니다. 합성 컴포넌트 패턴(Compound Component Pattern) 이란?합성 컴포넌트 패턴은 여러 작은 컴포넌트들을 조합하여 하나의 컴포넌트를 만드는 React 디자인 패턴입니다.이 패턴을 사용하여 컴포넌트를 구현한다면 높은 재사용성을 갖습니다.또한 한 컴포넌트에 무지막지한 양의 props가 주입되는 대신 상위 컴포넌트에서 각 컴포넌트에 필요한 props만 주입할 수 있기 때문에 관심사 / 책임 분리, props drilling 방지 등의 장점을 갖습니다. 예시로는 아코디언 컴포넌트가 있습니다. 아코디언 컴포넌트는 제목,.. 2024. 6. 12. [NextJS] NextJS에 React-Query Provider 설정 IntroductionNextJS 환경에서 React-Query를 적용하기 위해 Provider를 설정하는 방식에 대해 알아보려 한다.설치npm install @tanstack/react-querynpm 환경이기 때문에 npm을 기준으로 작성하였다.React-Query Provider 적용NextJS의 App Router에는 가장 상위 컴포넌트인 Layout 페이지에 Provider를 적용한다.const [queryClient] = useState(() => new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, } } })); return ( .. 2024. 5. 16. [styled-components] Grid로 반응형 구현 Introduction Styled-components 를 이용하여 Grid로 반응형을 구현하는 법을 알아보려 한다. 1. theme에 break point 설정 desktop, tablet, mobile에 대한 break point를 정하고 theme에 다음과 같이 설정해준다. // PC: 1024px ~ // tablet: 768px ~ 1023.9px // mobile: ~ 767.9px const theme = { media: { desktop: '@media screen and (min-device-width: 1024px)', tablet: '@media screen and (min-device-width: 768px) and (max-device-width: 1023.9px)', mobile.. 2024. 1. 5. [Typescript] Binding element '~' implicitly has an 'any' type. 문제 발생 컴포넌트의 props에 대한 타입을 지정할 때 에러가 발생했다. return ( ~ ) // interface/main.ts export interface ReviewMainData { age: number; comments: number; content: string; endDate: string; gender: string; hashtags: string[]; hits: number; image: string; likes: number; nationName: string; regDateTime: string; regionName: string; reviewId: number; startDate: string; title: string; useProfileUrl: string; usernam.. 2024. 1. 1. 이전 1 2 3 4 ··· 7 다음
