마이그레이션을 했는데 성능이… 본래 SSR로 마이그레이션하면서 개인적으로 CSR 때보다 기대하고 있던 거라면 당연, 초기 페이지 로딩 속도였다. 그러나, 마이그레이션을 마친 뒤 로그인 후 메인 페이지에 진입하는 걸 지켜봤는데 생각과 달리 느리다는 느…

tsconfig.json부터 배포까지 지난 시간에는 Webpack과 여러 패키지를 설치했고, Webpack에 관한 설정을 이것저것 찾아봤다. 이번엔 후반부로서 TypeScript를 사용할 거라면 알아야 하는 TypeScript의 설정과 마지막으로 React에 App.tsx로 연결까지 완료해 …

프로젝트 세팅은 어떻게 하는거지? 얼마 전 친해지게 된 담 님을 통해서 이런저런 이야기를 하다가, 개발 환경 구축에 대해서 이해하고 싶다면 Webpack으로 환경 구축해볼 것을 권장하는 이야기를 해주셨다. 번들링, 소스맵 등 개발 환경 및 빌드 등을 할 …

⚡ Vite로 프로젝트를 생성해보자! Vite 터미널에 다음과 같이 입력하자. $ npm create vite@latest 다음과 같이 환경을 세팅해주자. Need to install the following packages: create-vite@4.4.1 Ok to proceed? (y) y √ Project name: ... . √ Select a fra…

참고 도서 모두의 네트워크 - YES24 강의 정리 프로토콜 (Protocol) 컴퓨터 간에 정보를 주고받을 때의 통신 방법에 대한 규칙이나 표준 각자의 언어가 다르면 대화가 이어지지 않으므로 공용어를 사용하도록 규칙을 정해 대화가 이어지도록 한다. OSI 7 L…

참고 도서 모두의 네트워크 - YES24 강의 정리 네트워크(Network) 컴퓨터를 두 대 이상 연결하여 서로 데이터를 전송할 수 있는 통신망. Net: 망, 그물이라는 단어 Work: 일, 업무, 작업이라는 단어 Net + work: 일이 그물처럼 촘촘이 얽혀있는 모습 네트…

목차 클론 코딩 챌린지 - 멀티 스텝 폼 현재 진행중인 프론트엔드 스터디에서 JavaScript 회차에 들어온 상황에, 기존에 했던 챌린지들은 React로 만들어갔다면 다시금 기초를 다지기 위해 JavaScript로 페이지를 구현하는 연습을 해보고 싶었다. 이번 챌린…

본격적으로 접근성을 부여할 수 있는 것들을 알아보자. 이전에 웹 표준과 웹 접근성은 무엇인지, 그리고 이를 위한 WAI-ARIA는 또 무엇이며 스크린 리더를 통해 화면을 읽는 방법 등을 학습했다. 학습하는 내용에는 사이사이 ‘aria’를 언급하거나 ‘role’이나 <caption></caption>…

스크린 리더가 읽어야 할 접근 가능한 이름과 설명 앞선 내용에서 웹 접근성이 무엇인지를 살펴봤고, 그 중에서 스크린 리더가 글을 읽어주는 규칙에 대해서 알아봤다. 이번에는 그 스크린 리더가 내용을 읽어주는 이름과 설명을 어떻게 배치하고 지어야하는…

클론 코딩 챌린지 - 뉴스 페이지 만들기 Tailwind CSS 학습을 마치고, Keyframe도 공부했다. 이제 감각을 잊지 않게 다시 사이트를 만드는 연습을 하기 위해 클론 코딩 챌린지를 진행하려 한다. 이번 챌린지는 뉴스 페이지이며, 아래의 이미지를 바탕으로 …

HTML에는 다양한 태그와 특별한 속성들이 있다. 우리는 HTML의 공부를 되게 간단하게 공부하고 넘기는 경향이 있다. 사실 HTML의 태그 요소들을 살펴보면 자주 쓰는 h1, h2, a, p, div, span 등이 있지만, 그 밖에도 section, aside, main, header, footer …

오랜만에 해보는 클론 코딩 챌린지 부트캠프 이전에 JavaScript와 HTML, CSS를 이해하고 싶어서 이용했던 사이트가 있다. 부트캠프가 끝난 이후 할 게 열심히 달려오기는 했지만 내 실력이 과연 어느 정도일까? 라는 의문이 들기 시작하면서 이번에 한 번 …