본문 바로가기
728x90
반응형

분류 전체보기362

Lighthouse로 performance 측정하기 우리의 친구 개발자 도구(F12)는 개발 시 유용한 도구들을 제공한다. (console이라던지... console이라던지...) 그중 페이지 performance의 전반적 결과를 측정할 수 있는 Lighthouse를 사용해보자! 크롬 개발자 도구의 경우 이렇게 숨어있다. 클릭하면 이렇게! 원하는 카테고리와 기기로 검사할 수 있다. 클릭! 그럼 이런 식으로 결과가 뜨는데... 3주간 만들었던 Groomer페이지의 첫 report. 참담한 수준이다!!! 1차 수정 network payloads에서 가장 큰 크기를 차지하던 font 파일 삭제 font 5개 중 3개를 삭제, 글꼴 수정 필요시 css의 font-weight 속성으로 조절 index.html에 preload로 font와 첫 슬라이드 이미지를 렌더.. 2021. 5. 12.
개발 개발 개발 어제 오후 lighthouse라는 희한한 녀석을 처음 알게 되었다. 물론 없었어도 해결은 해야 했었겠지만, 처참한 로딩 속도를 직접 보니 좀 더 충격(과 공포)이었달까... 이리저리 코드를 고치고 추가해봐도 속도가 늘지 않아 퇴근할 때까지 고민 고민 고민. 그런데 참 요상한 건, 다음날 아침에 와서 해보면 어찌저찌 해결될 때가 많다는 것이다. 폰트 포맷 타입 이라는 생각지도 못한 곳에서 해결책을 찾아 아침부터 기분이 좋았었다. 그런데 또 참말로 요상한 건 오후가 지나고 퇴근할 때가 가까워지면 새로운 문제가 생긴다는 것. 오늘도 퇴근하기 한 30분 전쯤... state가 업데이트되면서 시도 때도 없이 useState가 작동되는 곳을 발견하고 말았다. 하지만 오늘 그랬던 것처럼, 내일 아침에 보면 또 해결책.. 2021. 5. 12.
GitHub 활용하기 우리의 친절한 GitHub는 만든 웹사이트를 쉽게 배포하도록 도와준다. 2021.04.06 - [Deploy] - GitHub로 배포하기 GitHub로 배포하기 GitHub는 Code 저장, 이전 상태 복구, 협업 이라는 전통적인(?) 기능뿐만 아니라... 우리가 만든 웹 페이지를 다른 사람들도 이용할 수 있도록 서버에 호스팅 하는 기능을 포함하고 있다! 제일 먼저 23life.tistory.com 요리요리 따라 해 보면... https://본인유저네임.github.io/ 로 페이지 배포가 완료된다! 그런데... 해당 레포지토리에 올라가 있는 기존 파일 대신, 다른 HTML 파일로 배포를 하고 싶다면? 1. 레포지토리 삭제 후 재생성 제일 간단... 하면서도 간단한 방법! 레포지토리 이름이 github... 2021. 4. 27.
허리가 뽀개졌다 걱정하던 목 어깨가 아니라 허리가 뽀개져버렸다. 금요일에 저녁 약속이 있었는데... 가는 도중에 못 걸을 정도로 통증이 와서 서면에서 맛난 건 커녕 통증의학과에 가 진료를 받았다. 사실 군대 갔다 오고 허리 아플 때가 종종 있었는데 며칠 지나면 괜찮아져서 병원도 안가보고 그냥 지냈더랬다. 그런데 이번에는 진짜 진짜 말도 안 되게 아파서 혹시 모르는 마음에 CT도 한방 찍었다(아까운 돈 와장창) 다행히 디스크는 아니라는데 문제는 정말 못 걸을 정도로 아파서... 오늘(토) 눈 뜨자마자 택시 타고 한의원에 다녀왔다. 침을 맞으니 훨씬 낫다. 동양의 신비 만세! 월요일에는 집에 있는 커블 의자도 사무실에 챙겨가야지. 2021. 4. 24.
CSS 가상 선택자 이용하기 CSS에는 가상 클래스(:pseudo-class)와 가상 요소(:pseudo-element)란 개념이 존재한다. 요놈들을 사용했을 때의 장점은 → 오직 CSS를 적용하기 위해 HTML을 수정하는 불상사..!가 발생하지 않는다는 점! 가상 클래스로 우리에게 가장 익숙한 녀석은 :hover 되시겠다. 사실 여태가지는 별 생각없이 :hover를 사용해 property와 value를 지정해줬지만... 알고 보면 '사용자가 해당 요소에 커서를 가져다 댔을 때'란 가상의 클래스를 입힌 후 CSS를 적용시킨 것! 덕분에 HTML상에서 각 부분마다 div를 비롯한 태그들로 감싸지 않아도 원하는 스타일을 입힐 수 있다. 와우! :hover 이외에 자주 쓰이는 가상 클래스로는... :link : 방문하지 않은 페이지 :v.. 2021. 4. 21.
모래시계 갑자기 모래시계 생각이 났다. 드라마만 틀면 주무시는 우리 아부지가 난생처음 1화부터 끝까지 다 본 드라마. 그것도 모자라 USB에 담아 몇 번이나 돌려보시는 바람에 가끔 특유의 그 BGM(우우우우~우~ 하는거) 머릿속에 맴돌 때가 있다. 아아아 그런데 생각났다던 모래시계는 이게 아니고 진짜 모래시계였다. 왜냐면 오늘 이런 생각이 들었기 때문. 모래시계의 윗부분만 보면 그 많던 시간들이 어디로 사라진 것인지 의아할 때가 있다. 동시에 그 많던 모래가 없어지는 동안 무의미한 시간을 보낸 게 아닌가 불안할 때도 있다. 하지만 자신이 노력한 그 시간들에 떳떳하다면 아래쪽으로 착실하게 모래를 흘려보내고 있었다면 뒤돌아 봤을 때 가득 쌓인 모래들이 우릴 반겨줄테니 의미 없거나 헛되게 보낸 것 같은 시간이란 건 사.. 2021. 4. 16.
하고 싶은 것만 하면서 살 수는 없더랬다. 어릴 적 초코송이를 먹을 때면 항상 이런 생각을 했다. 위에 꼭다리 부분만 빨아먹으면 달달하이 참 맛나겠다는. 하지만 그랬다간 어무니가 매몰차게 등짝 한 대 때리실 게 뻔하기 때문에... 퍽퍽한 과자 부분까지 꾹 참고 먹어야만 했다. 자기가 먹고 싶은 부분만 먹고, 하고 싶은 것만 하면서 살면 참 좋겠지만 그럴 수 있는 사람은 아무도 없고, 또 그러지 못하니까 매일 노력하는 맛이 있는 것일 테다. 2021. 4. 13.
CSS _ rem 이용하기 웹 사이트를 만들 때 반드시 고려할 요소 중 하나가 바로 반응형이다. 이를 위해 너비나 높이를 px 대신 % 나 vw/vh로 주게 되는데... 그럼 글자 크기(font)는 어떻게 하면 좋을까? 이 경우 우리는 html 태그의 font-size 값을 1로 가지는, rem이란 단위를 이용한다. 그런데 여기서, 그렇다면 아무 것도 지정해주지 않은 기본 html 태그의 font-size는? → 바로 16px! 헉 따라서 이를 통해... 초기화 코드로 다음과 같이 html 태그의 font-size를 62.5%로 맞춰두면, 1rem = 10px 즉 원하는 px 값에 1/10만 해주면 rem 값으로 곧바로 변환할 수 있다! 와우! 2021. 4. 12.
기본 웹사이트 제작하기 HTML5의 페이지 구성! 기존 div의 id를 통해 해당 구역을 나타내던 것에서, 각 구역별 태그를 사용해 해당 구역을 나타내는 방식으로 바뀌었다. 이를 통해 서버에서 HTML 파일을 읽을 때 조금 더 빨리 해당 구역의 속성을 파악할 수 있겠다. 더보기 각 구역의 추가적인 의미가 궁금하다면! header 요소는 도입부에 해당하는 콘텐츠를 가지고 있는 부분을 의미한다. nav 요소는 HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의한다. section 요소는 제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미한다. article 요소는 HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의한다. article의 내용은 그 자체만으로도 .. 2021. 4. 8.
728x90
반응형

티스토리툴바