nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/etc.

프롤로그 면접관: “웹 사이트 성능 최적화에 대해 아는 대로 얘기해 보세요.” ???: “ㅈ..잘...? 🙄” (기술 면접에서 저 질문을 받았을 때의 짜릿함이란☆) 최적화! 왠지 중요하고 챙겨야할 거 같지만 잘 모르는 그것! 저도 어디선가 줍줍한 지식들로 대략적으로는 알고 있지만 막상 정리하려니 참 어렵게 느껴지더라고요... 사실 꼭 면접에 대비하기 위함이 아니더라도, 웹 사이트를 사용자에게 빠르고 쾌적하게 보여주고 싶은 마음을 다들 한켠에 품고 있으실 거라 생각합니다. 우리는 항상 사용자에게 좋은 UX를 남겨주고 싶으니까요! 언젠가 정리해야지 정리해야지 미루다가 더 이상 미룰 수 없다! 해서 써보는 웹 성능 최적화 글입니다. 내용이 워낙 방대해서 중구난방 시리즈가 될 거 같은데 쫌쫌따리 써보려고 합니다..

2023. 8. 6.

Blog/etc.

"크크킄 그녀석은 기사 중 최약체지" 라는 말을 듣는 정처기지만, 아무튼 합격했습니다! 모로 가도 땄으면 된 걸로 ;) 이런저런 일로 포스팅을 미루고 있었는데, 이것도 안 쓰면 또 까먹을 거라 더 늦기 전에 써봅니다. 혹시 관련 담당자분들 지나가다 보시면 저희 수험자들의 처절한 마음 좀 알아주시길... 🥺 2021 3회차 정보처리기사 실기 후기 3개월 노가다 정처기 필기를 2021년 1회차 때 응시했지만, 공부하기 너무너무 싫어서 😵 미루고 미루다가 올해가 가기 전엔 끝내야겠다는 마음으로 3회차를 준비했습니다. 일단 전 비전공자고 직장인입니다. 와 자체 하드모드! 하지만 1트에 시험을 끝내고 싶어서 준비기간을 좀 길~~게 잡고 3개월 정도 달렸습니다. (물론 이게 다 공부 시간 아닌 거 아시죠...ㅎㅎㅎ..

2021. 11. 27.

Blog/etc.

지난 3월 초에 정보처리기사 필기 시험을 보고 왔습니다. (👀 말 그대로 보고 옴) 분명 볼 때는 이게 다 뭐냐고 울부짖은 거 같은데 끝나고나니 다 까먹는 기적! 으아ㅏㅏ 더 이상 까먹으면 안 될 것 같아 나중에 참고하려고 씁니다... 합격하긴 했지만 내용은 팁이라기보단 리얼 후기입니당 ✍️ 왜 봤더라 작년에 비자발적 백수가 된 뒤, 할 일도 없는데 공부나 할까? 라는 안일한 마음으로 정처기 필기책을 샀었는데요. 음, 다섯 장 보고나서 라면 받침대가 되었습니다. 하지만 책 값이 아깝기도 하고(내 치킨 한마리 반!) 올해엔 자격증 취득 좀 해야겠다는 목표로 1월부터 공부를 시작했습니다. 전에도 전공이 아닌 자격증을 딴 적이 있으니까 괜찮지 않을까? 하는 안일한.. 마음으로.....ㅋㅋㅋㅋㅋ 안타깝게도 그때..

2021. 4. 5.

Blog/etc.

프롤로그 지난 글에서는 JPEG의 특징에 대해 살펴보았으니, 이번엔 PNG에 대해 알아봅니다! 이 시리즈의 이전 글: JPEG vs. PNG: 적절한 이미지 포맷 선택하기 (1) - JPEG편 PNG를 소개합니다 PNG 역시 웹에서 널리 사용되는 이미지 포맷 중 하나입니다. JPEG와 마찬가지로 픽셀로 이루어진 비트맵 그래픽이기도 하고요. 이름은 Portable Network Graphics의 약자로, 말그대로 ‘인터넷’에서 표현될 이미지를 염두에 두고 개발되었습니다. 따라서 RGB가 아닌 색 공간(CMYK 등)은 지원하지 않습니다. PNG 역시 24비트 이상의 색상, 곧 트루 컬러를 지원합니다. 그런데 JPEG랑 다르게 8비트 알파채널을 지원하기 때문에 다양한 투명도를 표현할 수 있습니다. box-sh..

2021. 1. 27.

Blog/etc.

프롤로그 이미지 저장할 때 이런 고민한 적 없으신가요? 🤔🤔 이미지는 웹페이지에서 많은 부분을 차지하는 리소스입니다. 따라서 용량이 적을 수록 당연히 좋죠. 그래서 이미지를 표시할 때 적절한 포맷을 택하는 것이 여러모로 중요합니다. 웹에서 사용하는 주 이미지 포맷은 JPEG와 PNG일 텐데, 그럼 둘 중에 뭘로 저장하는 게 좋을까요? 저는 기존까지 이렇게 알고 있었는데요, JPEG → 복잡한 이미지나 사진 PNG → 단순한 이미지, 투명 표현이 필요한 이미지 결론부터 말하면 저게 맞습니다! 👀어... 너무 당연한 얘기를 했나요 👀 ‘사진은 JPEG! 투명 배경은 PNG!’라고만 알아도 충분하긴 하지만, 그 이유가 궁금하기도 했고 사진도 아니고 투명하지도 않은 이미지는 어떤 포맷이 맞는 걸까 싶을 때도 있..

2021. 1. 23.

Blog/etc.

티스토리 스타일의 반응형 스킨. 포스트에 집중할 수 있는 깔끔한 스타일입니다 ;) Log Skin v1.1 * 크롬 브라우저 기반이며 IE에 대응하지 않습니다. * 공지사항, 위치 로그 등 일부 페이지는 지원하지 않습니다. 미리보기 현재(2021.1) 이 블로그에서 사용 중인 스킨입니다. 스킨 적용하기 1. 스킨을 다운로드 받은 뒤 압축을 해제합니다. 2. 티스토리에 접속 후, 로그인 - 블로그 관리 - 스킨 변경으로 이동합니다. 3. 새로운 스킨을 적용하기 전, 꼭! 사용중인 스킨을 '보관'해 주세요. 새 스킨 적용 시 모든 내용이 초기화됩니다. 4. 우측에 '스킨 등록' 버튼을 눌러 등록 화면으로 이동합니다. 5. '추가' 버튼 클릭 후, 다운로드 받은 모든 파일을 업로드 합니다. (images 폴더..

2021. 1. 13.

Blog/etc.

Critical Rendering Path 지난 글에서 웹 브라우저가 어떻게 일하는지 간략하게 알아보았습니다. 구글에서는 이를 Critical Rendering Path(CRP, 주요 렌더링 경로)라고 부르며, 이를 최적화하는 방법에 대한 강의와 문서도 있습니다. 사이트 최적화를 하는 방법 중 하나는 이 CRP를 간결하게 하는 것입니다. HTML 다운로드 Hello, world 우리가 웹 사이트에 접속하면 브라우저는 우선 서버에 페이지를 요청합니다. 이후 html에 대한 응답이 오면, 쉬고 있던(idle 상태의) 브라우저는 DOM을 만들기 시작합니다. 그리고 DOM이 다 그려지면 렌더 트리를 구현하고 페이지를 렌더링합니다. 위 이미지를 보면 html을 다운로드받는 데 205ms가 걸린 걸 볼 수 있습니다..

2020. 6. 12.