Frontend

일괄적인 컬러 적용을 위해 테일윈드 :root 클래스에 darkblue 프로퍼티를 선언하여 사용하고 있었습니다.하지만 크롬에서는 작동하고 사파리에선 작동하지 않는 이슈가 터지고 말았습니다!! 아아~크롬만 보고 테스트해서 이미 메인 서비스까지 올려놨는데 말이죠~ 새벽에 확인하고 허겁지겁 롤백했다 아입니꺼~처음에 추정한 원인은 테일윈드CSS 클래스 관련해서 사파리엔 아직 지원하지 않는게 있나? 싶었지만,결국 원인은 오타였습니다. 사진에서 --darkblue를 선언할 때 중간에 쉼표가 들어간 게 보이시나요?--darkblue: 215, 56%, 17% // 이렇게 쉼표를 모두 붙이거나,--darkblue: 215 56% 17% // 이렇게 모두 없애야 합니다.사파리가 이상한 게 아니고, 크롬 브라우저의 CSS..

개발 중 ref 객체를 자식 컴포넌트에 전달하는 과정에서 에러를 겪었습니다.이왕 정리할 거 ref에 대하여 한번에 다 정리하자 싶어서 작성합니다.ref란?크게 2가지 용도로 ref를 사용할 수 있습니다.컴포넌트가 일부 정보를 기억하고 싶게 하고싶지만 리렌더링을 유발하게 하고 싶지 않을 때DOM 요소에 직접 접근하고 싶을 때이번 포스트에서는 2번 용도에 대한 내용입니다. 1번에 대해서는 기회가 되면 다뤄보겠습니다.Ref로 DOM 조작하기보통 React로 개발을 할 때 DOM을 직접 조작할 일은 많지 않습니다. (React가 자동으로 해주니까요!)하지만 가끔 직접적인 DOM 접근이 필요합니다. 이번 같은 경우는 특정 노드에 포커스를 옮기는 경우입니다.예시 코드를 통해 보겠습니다.import { useRef ..

Next + Nest + Nginx의 조합으로 돌아가는 MVP 제품 개발 환경에서 문제가 발생했습니다.기획 당시 SEO를 중시하는 프로젝트 특성 상 앱 라우터를 선택했고,앱 라우터는 페이지간 라우팅 시 서버 렌더링이 원칙입니다.막상 구현을 하고 나니, 페이지간 전환 딜레이가 거슬릴 정도로 오래 걸려서..Suspense 기능을 이용하기로 마음먹었습니다.(2초~3초나 걸리기도 했음.. 현재는 프론트 백 모두 개선을 거쳐서 1초 미만입니다 ^^)import { Suspense } from 'react';...export default async function PoliticianPage({ params,}: { params: { politicianId: number; issueId: number };}) ..

아래와 같은 코드가 있습니다. // Profile.tsx export default function Profile() { ... } // Card.tsx const Card = ...; const CardHeader = ...; const CardFooter = ...; const CardTitle = ...; const CardDescription = ...; const CardContent = ...; export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } Profile 컴포넌트를 export 할 때는 export default를 사용하고, Card에 관련된 const들을 export 할 때는 export를 사용..

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript LinterA pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.eslint.orgJavaScript 프로젝트를 시작할 때 설정하게 되는 ESLint 설정을 정리하였습니다.저는 TypeScript를 사용하는 nextJS 프로젝트에 적용을 하였으며, Airbnb-lint의 규칙을 따랐습니다.ESLint자바스크립트 코드의 문제들을 찾아 고칩니다.ESLint 공식 페이지에 적힌 소개문입니..