Dev Diary 💻

[The Web Developer Bootcamp 2024] section 3: HTML 기초

이 글은 udemy의 The Web Developer Bootcamp 2024 강좌를 바탕으로 정리한 내용입니다. 19. 섹션주제skip 20. HTML 개요HTML은 웹 페이지의 명사 같은 것으로 콘텐츠의 구조를 규정하는 것입니다.It’s just about marking up a documentHTML은 웹 펭이지라는 문서에 마크업을 하기 위한 언어 또는 구문입니다.  21. 우리의 첫 HTML Pageskip 22. Tip 모질라 개발자 네트워크 https://developer.mozilla.org/ko/docs/Web/HTMLMDN Web Docs(Mozilla Developer Network Web Docs)는 웹 개발자들이 HTML, CSS, JavaScript 및 웹 기술과 관련된 정보를 얻..

[Intellij] 인텔리제이 이전 화면, 이전 커서 이동 방법 단축키

Intro안녕하세요. 이번 시간에는 인텔리제이에서 이전 화면, 이전 커서로 이동하는 방법에 대해 알아보도록 하겠습니다. 코딩을 하다보면 이전 부분으로 되돌아 가고 싶거나, 다음으로 되돌아가고 싶은 경우가 생길 수 있는데요, 이럴 때 유용하게 쓰일 수 있는 단축키를 소개해드리겠습니다. How to docommand + ] // 이전 커서 위치로 돌아가기 command + [ // 다음 커서 위치로 돌아가기Alt + command + // 다음 커서 위치로 돌아가기 mac에서는 위의 단축키 사용을 통해 이전/다음 커서로 이동이 가능하므로 편한 방법을 선택하여 사용하시면 됩니다 :)

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

이 글은 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를 설치하고 대신 운영해주는 서비스입니다.