Dev Diary 💻

[The Web Developer Bootcamp 2024] section 2: 웹 개발이란?

이 글은 udemy의 The Web Developer Bootcamp 2024 강좌를 바탕으로 정리한 내용입니다.11. 섹션 주제skip 12. 5분 뒤의 인터넷인터넷은 네트워크의 네트워크입니다. 서로 통신할 수 있는 수많은 기기들이며, 인터넷은 모든 것을 가능하게 하는 인프라입니다. 인터넷이 연결된 컴퓨터들의 묶음 13.웹이란? 웹은 인터넷을 통해 리소스를 공유하게 하는 정보 시스템입니다. 웹의 실제 작동 방식으로 정보 전송 방식에는 HTTP (Hypertext Transfer Protocol)이 사용됩니다. 웹이 작동하는 방식 커뮤니케이션 방식 리소스나 웹 페이지를 요청하고 공유하는 방식의 기반입니다. TCP, IP 등 다른 프로토콜도 있습니다. 14.요청/응답 주기skip 15. 프런트 엔드(Fro..

[The Web Developer Bootcamp 2024] section 1: 코스 소개

이 글은 udemy의 The Web Developer Bootcamp 2024 강좌를 바탕으로 정리한 내용입니다 1. 환영 인사skip 2. 커뮤니티 채팅 및 그룹 참여 방법skip 3. 커리큘럼 소개skip 4. 최종 업데이트 일자에 관하여 skip 5. 코스 업데이트 내역https://plum-poppy-0ea.notion.site/Web-Developer-Bootcamp-ChangeLog-45e3eab6be724c5f9a4b83c01044e126 6. 제가 개발자가 될 수 있을까요? skip 7. 코드와 슬라이드skip 8. 대화영 코딩 연습 및 관련팁skip 9. 코드스 코딩 실습 솔루션skip 10. 구버전 강의 구독자들이 새 강의를 보는 법skip

Intro안녕하세요. 이번 시간에는 yarn berry 제거 방법에 대해 알아보겠습니다. 개발 환경은 Next.js + React 구성을 전제로 진행하겠습니다.혹시 yarn berry가 무엇인지 궁금하신 분들은 링크에 걸려있는 포스팅 참고 부탁드립니다 . How to remove yarn berryYarn Berry (Yarn 2+)를 제거하는 방법은 다음과 같습니다:1. Yarn Berry 설정 파일 삭제프로젝트의 루트 디렉토리에서 .yarnrc.yml 파일을 삭제합니다.#.yarnrc.yml filenodeLinker: node-modulesyarnPath: .yarn/releases/yarn-3.6.0.cjs 2. 패키지 매니저 변경Yarn 1.x로 돌아가려면, yarn을 다시 설치해야 합니다. 다..

Intro안녕하세요. 이번시간에는 React MUI에서 anchorEl 란 무엇이며 사용 이유에 대해 알아보겠습니다.  anchorEl ?Material-UI (MUI)에서 팝오버(Popover)나 메뉴(Menu)와 같은 컴포넌트에서 사용되는 속성으로, 팝업의 위치를 지정하는 역할을 합니다. 이 속성은 팝업이 열릴 위치의 기준이 되는 요소(Element)를 지정합니다. 주요 컴포넌트에서의 anchorEl 사용1. PopoverPopover 컴포넌트는 기준 요소인 anchorEl의 위치를 기준으로 화면에 표시됩니다. The content of the Popover. 2. MenuMenu 컴포넌트는 주로 네비게이션 또는 드롭다운 메뉴를 만들 때 사용됩니다. anchorEl을 통해 메뉴가 나타날 위치를 지정..

Intro안녕하세요. 이번 시간에는 TableVirtuoso 사용 중 데이터가 빈 배열일 때 EmptyPlaceholder 속성을 활용하는 방법에 대해 알아보겠습니다.  Example현재 코드는 다음과 같다고 가정해봅시다. 이 상태에서 dataList가 null이거나 빈배열일 때 특정 데이터가 비어있다는 특정 텍스트를 표시해보겠습니다. const VirtuosoTableComponents = (totalColSpan: number): TableComponents => ({ Scroller: React.forwardRef((props, ref) => ( )), Table: (props) => ( ), TableHead: React.forwardRef((props, ref) => ( ..

Intro안녕하세요. 이번 시간에는 react-virtuoso 에서 동적 높이를 설정하는 방법에 대해 알아보겠습니다. 참고로 저는 third-party mui tabler과 결합하여 사용하였습니다.  My casereact-virtuoso mui table 사용법은 아래와 같습니다. height 를 설정해줄 때 다음과 같이 고정값이 들어가게 됩니다. export default function ReactVirtualizedTable() { return ( );} 제 케이스의 경우 여러 rows 데이터가 있고, 그 데이터들은 각각 높이가 달라서 height를 동적으로 설정해줘야 했습니다. 어떤 방법을 사용해야 할까요?  How to solve the problemimport Re..

Intro안녕하세요. 이번 시간에는 react-virtuoso 가 무엇이며, react virtuoso 를 사용하여 react table 렌더링 최적화하는 방법에 대해 알아보도록 하겠습니다. Issuemui react table을 사용하던 도중 데이터 양이 많아지면서 테이블이 그려지는 속도가 느려져 서비스 이용에 문제가 발생하였습니다.  따라서 react table의 성능을 개선하기 위해 개선 방안을 찾아야 했습니다.  관련 라이브러리를 서치하던 도중 TanStack 와, mui 공식 홈페이지에 Virtualized table 부분에 소개되어 있는 react-virtuoso 두개의 라이브러리를 발견하였습니다. star의 수 자체는 TanStack이 더 높았지만 사용방법이 더 쉽고, 기존 프로젝트에 용이하..

Intro안녕하세요. AWS 관련 용어 정리를 해보도록 하겠습니다. 이 글은 생활코딩의 AWS 아마존 웹 서비스(Amazon Web Services) 책을 바탕으로 정리한 내용입니다.  RDS-1아마존 RDS는 Amazon Relational Database Service의 줄임말입니다. 즉 컴퓨터에 DB를 설치하고 대신 운영해주는 서비스입니다.

Intro안녕하세요. AWS 관련 용어 정리를 해보도록 하겠습니다. 이 글은 생활코딩의 AWS 아마존 웹 서비스(Amazon Web Services) 책을 바탕으로 정리한 내용입니다.  S3를 서버로 활용하기CloudFront를 사용하게 되면 더 이상 우리의 웹 서버는 사용자를 직접 만나지 않습니다. 사용자가 CloudFront로 접속하게 되면 CloudFront가 클라이언트가 돼서 웹 서버에게 요청합니다. 그럼 웹 서버가 자신의 정보를 CloudFront에 전송하고, CloudFront는 웹 서버의 정보를 저장하고 사용자에게 응답합니다. 이후 사용자가 CloudFront를 접속했을 때 웹 서버의 정보를 CloudFront가 저장하게 되면 그 다음의 요청은 CloudFront가 응답합니다.  웹 서버는 ..

Intro안녕하세요. AWS 관련 용어 정리를 해보도록 하겠습니다. 이 글은 생활코딩의 AWS 아마존 웹 서비스(Amazon Web Services) 책을 바탕으로 정리한 내용입니다.  AWS 기본 사용법클라우드 컴퓨팅: 인터넷 너머에 있는 남의 컴퓨터를 구름 (cloud)에 비유해서 클라우드 컴퓨팅이라는 이름이 만들어졌습니다. 서버, 스토리지, 데이터베이스, 네트워킹 등의 컴퓨팅 서비스를 인터넷을 통해 온디맨드로 제공하고, 사용한 만큼만 비용을 지불하는 것을 말합니다. 호스팅(hosting): 호스트 컴퓨터를 빌려줘서 서버로 사용할 수 있도록 제공하는 서비스를 말합니다.호스트(host): 인터넷에 연결된 컴퓨터 한 대를 의미합니다. EC2(Elastic Compute Cloud): AWS에서 독립된 컴..