![]()
들어가기해당 게시물은 Node.js 와 MySQL이 설치된 환경을 가정합니다. Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org MySQLOver 2000 ISVs, OEMs, and VARs rely on MySQL as their products' embedded database to make their applications, hardware and appliances more competitive, bring them to market faster, and lower their cost of goods sold. Learn More »w..
디자인 시스템 피그마 파일https://www.figma.com/design/jHtvX4Oq2WgNyzbDqRkegP/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%ED%85%9C%ED%94%8C%EB%A6%BF?node-id=0-1&t=7EsTKHizUzgJwu5P-1 FigmaCreated with Figmawww.figma.com 설명### 1. **헤딩(Heading) 스타일** 헤딩은 계층을 명확히 하고 콘텐츠의 구조를 시각적으로 구분하는 데 중요한 역할을 합니다. - **H1 (메인 제목)** - 폰트 사이즈: **48px** - 폰트 두께: **Bold (700)** - 줄 간격(Line height): **1.2*..
![]()
Express 서버를 클라우드에 배포하는 방법은 여러 가지가 있습니다. AWS, Heroku, Vercel, DigitalOcean 등 다양한 클라우드 플랫폼에서 Express 애플리케이션을 배포할 수 있습니다. 이 중 **AWS EC2**를 사용한 배포 과정을 단계별로 설명하겠습니다. ### AWS EC2를 사용하여 Express 서버 배포하기 1. **AWS 계정 생성**: - 먼저, [AWS 공식 사이트](https://aws.amazon.com/)에 가서 계정을 생성합니다. 이미 계정이 있다면, 로그인합니다. 2. **EC2 인스턴스 생성**: EC2(Elastic Compute Cloud)는 AWS에서 제공하는 가상 서버입니다. 1. **EC2 대시보드로 이동**: ..
// 리팩토링 전 useEffect(() => { const fetchData = async () => { const allPokemonData = []; for (let i = 1; i name.language.name === "ko"); allPokemonData.push({ ...response.data, korean_name: koreanName.name }); } const needData = lodash.shuffle(allPokemonData).map((el) => { return { src: el.sprites.front_default, name: el.korean_name, ..
깃허브 계정으로 버셀 로그인을 시도하니 자꾸 사이드프로젝트 팀계정으로 로그인되는 버그가 발생했다.몇시간의 삽질 끝에 문제점과 해결방법을 찾았다.1. 사이드프로젝트 팀의 vercel 계정에서 My Account > setting > Authentication 에 나의 깃허브 개인 계정이 로그인 연동 되어있었다. 이로 인해 vercel에 접속하여 깃허브 연동 로그인을 시도하면 팀계정으로 로그인 되었던 것이었다.-> 팀계정에서 내 개인 깃허브 로그인 연동을 삭제했다. 2. 깃허브 계정 로그인을 하니 가입된 계정이 없다는 오류가 발생했다. 이는 내가 이전에 깃허브의 인증 이메일을 변경했기 때문이었다.깃허브 가입 -> 버셀 가입 -> 깃허브 이메일 변경 -> 버셀에서 깃허브 연동 로그인 시 이메일을 찾지 못해 오..
1. PC (데스크탑)평균 너비: 1280px ~ 1920px평균 높이: 800px ~ 1080px화면 비율은 대부분 16:9나 16:10을 따릅니다.2. 태블릿평균 너비: 768px ~ 1024px평균 높이: 1024px ~ 1366px태블릿은 가로/세로 모드 모두 고려해야 하며, 가로 모드에서 반응형이 어떻게 보이는지도 중요합니다.3. 휴대폰 (스마트폰)평균 너비: 360px ~ 414px평균 높이: 640px ~ 896px최근 스마트폰은 5인치 이상의 대화면이 많아졌지만, 360px ~ 414px 정도의 너비가 여전히 많이 사용됩니다. 높이는 기기마다 다양하지만 세로 길이는 평균적으로 640px 이상입니다.미디어 쿼리 사용 시 대략적인 기준PC: 너비 1024px 이상태블릿: 너비 768px ~ 1..
![]()
useEffect`는 **렌더링 후에 실행**되고, `useMemo`는 **렌더링 중에 실행**됩니다. 이 차이는 여러 가지 중요한 결과를 가져오는데, 구체적으로 살펴보겠습니다. ### 1. **렌더링 중 실행 (`useMemo`)** - **의미**: 컴포넌트가 렌더링되는 동안(`render phase`)에 값을 계산하고, 해당 계산을 메모이제이션합니다. - **결과**: 렌더링이 끝나기 전에 `useMemo`에 의해 계산된 값이 즉시 컴포넌트의 렌더링 결과에 반영됩니다. 즉, **화면이 그려지기 전에** 미리 계산된 값을 얻을 수 있습니다. - **영향**: - 렌더링 과정에서 값을 계산하고 그 값을 바로 렌더링에 사용합니다. 따라서 UI가 렌더링되기 전에 모든 값을 준비할 수 있습니다. - ..
Peer Dependencies란 무엇인가? Peer dependencies는 특정 패키지가 정상적으로 동작하기 위해 다른 패키지의 특정 버전이 프로젝트에 존재해야 하는 경우에 사용됩니다. 보통 라이브러리나 플러그인이 **호스트 패키지**(예: React)와 긴밀하게 연결되어 있을 때 필요합니다.Peer dependencies는 해당 패키지가 독립적으로 설치되지 않고, **호스트 패키지와의 버전 호환성을 사용자에게 맡기는 것**이 특징입니다. 예시로 이해하기: `custom-cursor-react`라는 패키지가 있다고 가정해 봅시다. 이 패키지는 React를 기반으로 작동하므로, 개발자는 프로젝트에 React가 설치되어 있어야 한다고 가정합니다.이때, `custom-cursor-react`는 자신이 **..
