본문 바로가기
728x90
반응형

source-code229

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.
GitHub 활용하기 우리의 친절한 GitHub는 만든 웹사이트를 쉽게 배포하도록 도와준다. 2021.04.06 - [Deploy] - GitHub로 배포하기 GitHub로 배포하기 GitHub는 Code 저장, 이전 상태 복구, 협업 이라는 전통적인(?) 기능뿐만 아니라... 우리가 만든 웹 페이지를 다른 사람들도 이용할 수 있도록 서버에 호스팅 하는 기능을 포함하고 있다! 제일 먼저 23life.tistory.com 요리요리 따라 해 보면... https://본인유저네임.github.io/ 로 페이지 배포가 완료된다! 그런데... 해당 레포지토리에 올라가 있는 기존 파일 대신, 다른 HTML 파일로 배포를 하고 싶다면? 1. 레포지토리 삭제 후 재생성 제일 간단... 하면서도 간단한 방법! 레포지토리 이름이 github... 2021. 4. 27.
CSS 가상 선택자 이용하기 CSS에는 가상 클래스(:pseudo-class)와 가상 요소(:pseudo-element)란 개념이 존재한다. 요놈들을 사용했을 때의 장점은 → 오직 CSS를 적용하기 위해 HTML을 수정하는 불상사..!가 발생하지 않는다는 점! 가상 클래스로 우리에게 가장 익숙한 녀석은 :hover 되시겠다. 사실 여태가지는 별 생각없이 :hover를 사용해 property와 value를 지정해줬지만... 알고 보면 '사용자가 해당 요소에 커서를 가져다 댔을 때'란 가상의 클래스를 입힌 후 CSS를 적용시킨 것! 덕분에 HTML상에서 각 부분마다 div를 비롯한 태그들로 감싸지 않아도 원하는 스타일을 입힐 수 있다. 와우! :hover 이외에 자주 쓰이는 가상 클래스로는... :link : 방문하지 않은 페이지 :v.. 2021. 4. 21.
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.
GitHub로 배포하기 GitHub는 Code 저장, 이전 상태 복구, 협업 이라는 전통적인(?) 기능뿐만 아니라... 우리가 만든 웹 페이지를 다른 사람들도 이용할 수 있도록 서버에 호스팅 하는 기능을 포함하고 있다! 제일 먼저 새로운 레포지토리 생성! (repository가 뭔디? 코드를 보관할 수 있는 저장소라고 생각하면 된다) 이때 주의해야 할 건...! 레포지토리의 이름을 .github.io 로 지정해줘야 한다는 점! 제대로 입력한 것 같으면 Create repository를 눌러주자. 와우! 여기서 uploading an existing file을 클릭. (올리고 싶은 파일이 있으니까!) 쨔잔. 여기서 드래그&드롭으로 올리고 싶은 파일을 넣어줘도 되고, choose your files를 클릭해 원하는 폴더로 이동한 .. 2021. 4. 6.
Props 전달 에러 해결 또 blog를 만드는 과정! Object가 담긴 Array인 data를 mapping 해 OnePost란 컴포넌트에 넣어줬다! 이를 통해 data Array 속 Object가 하나하나 돌면서 OnePost 안에 전달될 테다. 요놈이 하위 컴포넌트인 OnePost! props로 전달해준 blogData를 받아 비구조화 객체 할당을 통해 변수에 할당해줬다. 따라서 blogData 속 title이 화면에 뜰 테다! 오잉? 그런데 hi만 뜨고 {title}이 제대로 뜨지 않는다. Console에 찍어보니... 분명 존재하는 데이터인데 undefined가 뜬다. 대체 왤까? 문제는 바로 이 곳! 하위 컴포넌트에서 전달받은 props인 blogData는 JS 요소! 전달해줄 때도 { } 속에 넣었으니, 받을 때도 .. 2021. 4. 6.
.map() is not a function 에러 해결 역시나 Blog Project를 진행하던 중... 우리의 친구 TypeError! 하도 많이 만나서 이제는 익숙하다. X.map() is not a function 에러는 → .map은 Array에 해당되는 함수! 따라서 X가 Array가 아닌 형태일때는 TypeError가 뜨고 만다. 즉 위 사진의 경우에는 data라는 녀석이 Array가 아닐 가능성이 오천퍼센트! data는 API 요청을 통해 받아온 값들을 map으로 return해 준 녀석이다. 전체 코드! 받아온 data 상태를 다시 mapping 해주면서 렌더링하고 있다. data를 console에 찍어보면 정체가 밝혀지겠지! 어...라라? Array 형태가 맞는데??? Array.map()을 했는데 왜 is not a function 에러가 뜬.. 2021. 4. 5.
CORS 에러 해결하기 React로 개발한 Frontend에서 DRF로 개발한 Blog Backend로 API 요청을 보내려 시도했다. 흔한 async await 요청. 혹시 몰라 Postman을 통해 직접 요청도 보내봤다. DRF Pagination을 적용했어서 next와 previous가 있긴 한데, 어쨋든 results 속에 우리가 원하는 데이터가 담겨있는 모습! 으악! 자세히 읽어보면 blocked by CORS policy → CORS 정책에 의해 막혔단다. 그럼 CORS 정책이 뭔디? 보안상의 이유로 브라우저는 교차 출처 HTTP 요청을 제한한다! 즉 한 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응.. 2021. 4. 5.
728x90
반응형

티스토리툴바