도리쓰에러쓰

구글 개발자 도구 ▶ Lighthouse 에서 페이지 속도 측정을 하여 최적화 점수를 알아낼 수 있다. 페이지 로드되는 속도를 빠르게 하기 위해선 개발자가 할 수 있는 일은 무엇이 있을까? 1. Webpack 사용 1️⃣ 파일 용량 압축 2️⃣ 모듈 번들링을 통한 파일 개수 감소 2. Image Lazy Loading : 화면에 실제로 이미지가 보여져야할 때 이미지를 다운로드하여 CSS, JS보다도 먼저 다운로드하게 함. 3. Lazy Component import { lazy } from 'react'; const AvatarComponent = lazy(() => import('./AvatarComponent')); const DetailsComponent = () => ( ) - 첫화면에 보이지 않..

1. 브라우저란? 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램 브라우저는 유저가 선택한 자원을 서버로부터 받아와 유저에게 보여준다. 이 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함된다. 받아온 자원들은 렌더링 과정을 통해 유저에게 보여준다. 2. 브라우저 렌더링 과정 1️⃣ Parsing단계 :: HTML 파일과 CSS 파일을 파싱하여 각각 Tree를 만든다. - HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성 - 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행 2️⃣ Style단계 :: 두 Tree를 결합하여 Ren..

Firebase Login 1️⃣ yarn으로 firebase 설치 yarn add firebase 2️⃣ firebase.ts 파일을 생성하여 아래와 같이 작성 import { initializeApp } from 'firebase/app' import { getAuth } from 'firebase/auth' const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AUTH_DOMAIN, projectId: process.env.REACT_APP_PROJECT_ID, storageBucket: process.env.REACT_APP_STORAGE_BUCKET, messagingSend..

6월이 시작됐다.. 그리고 나의 개인 과제도 시작됐다.. 일요일까지 할 수 있을까 모르겠지만 하면 어떻게든 되겠지.. 근데 모의 면접 준비는 언제 .. ? 😥😥😥😥 오늘은 파이어베이스 공부도 할겸 디자인을 열심히 해봤다.. 열심히 해도 지적은.. 받겠지..? 지적 받아도 다음에 더 잘하면 되지 ! 💡 함수형 컴포넌트라 부르지 말고 함수 컴포넌트라고 부르자 !

1️⃣ netlify 에러 Module not found: Error: Can't resolve './routes.module.scss' in '/opt/build/repo/src/routes' 모듈을 찾을 수 없다는 에러가 났다.. 사실 firebase 연동을 위해 로그인 화면 레이아웃만 구축하고 netlify에 올렸던 건데.. 좀 당황스러웠다 😱 알고보니 git은 파일명 대소문자를 변경하면 인식하지 못한다고 한다.. (Route에서 route로 파일명을 변경했는데 수정되지 않았다.) 그래서 아래 코드처럼 터미널에 작성하고 git을 다시 올려주면 파일명이 변경된 것을 확인할 수 있었다! git config core.ignorecase false git rm -r --cached . git add . g..

아름다움의 근원은 총 3가지 ! 1. 글꼴 2. 색상 3. 정렬 1️⃣ 글꼴은 대부분 Spoqa로 세팅되어 있으니 무리가 없다. 2️⃣ #000000 같은 야만적인 색상 쓰지 말기 3️⃣ input 옆에 button이 있을 때 input과 button의 높이 통일, border-radius 통일, 그림자 사용할 경우 가능한 한 연하게 사용, input의 내부 패딩은 가로만 주고 세로는 주지 않는다(padding: 0 16px), 글씨 위 아래 정렬은 line-height나 height를 이용한다, input 내부 글씨 크기는 무조건 16px 이상으로 잡는다. (16px 미만이면 사파리에서 화면 줌이 일어난다) 💡 input은 좌우 패딩이 상하 패딩보다 커야한다.

1️⃣ Apple Color (애플 뿐만 아니라 여러 기업이 자신의 사이트에 컬러를 기재한다.) Color - Visual Design - iOS - Human Interface Guidelines - Apple Developer Color Color is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data. Look to the system’s color scheme for guidance when picking app accent co developer.appl..

오늘은 KB 헬스케어 기업 과제를 배포하고 모아데이타 과제를 시작하는 날이다. 내가 맡은 부분은 '회원 상세 정보' 부분인데 사실 9명이서 이 작은 프로젝트를 나누기가 쉽지 않았고.. 나눈 결과가 이거다.. 그래서 난.. '회원 정보'에서 [버튼]을 클릭하면 '회원 상세 정보'에 해당하는 회원의 정보를 뿌려주기만 하면 된다.. 금방 다 만들긴 했는데 화면이 많이 허전하다.. 그래서 지금 뭘 넣으면 좋을까 고민중이다.. 회원 이미지라도 넣을까 ❓