티스토리

nana_log

검색하기

블로그 홈

nana_log

nykim.work/m

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

구독자: 35

방명록 방문하기

주요 글 목록

[웹 성능 최적화] #1 브라우저는 어떻게 렌더링을 할까 프롤로그 면접관: “웹 사이트 성능 최적화에 대해 아는 대로 얘기해 보세요.” ???: “ㅈ..잘...? 🙄” (기술 면접에서 저 질문을 받았을 때의 짜릿함이란☆) 최적화! 왠지 중요하고 챙겨야할 거 같지만 잘 모르는 그것! 저도 어디선가 줍줍한 지식들로 대략적으로는 알고 있지만 막상 정리하려니 참 어렵게 느껴지더라고요... 사실 꼭 면접에 대비하기 위함이 아니더라도, 웹 사이트를 사용자에게 빠르고 쾌적하게 보여주고 싶은 마음을 다들 한켠에 품고 있으실 거라 생각합니다. 우리는 항상 사용자에게 좋은 UX를 남겨주고 싶으니까요! 언젠가 정리해야지 정리해야지 미루다가 더 이상 미룰 수 없다! 해서 써보는 웹 성능 최적화 글입니다. 내용이 워낙 방대해서 중구난방 시리즈가 될 거 같은데 쫌쫌따리 써보려고 합니다.. 공감수 23 댓글수 14 2023. 8. 6.
2021년 정보처리기사 실기 3회 보고 온 후기 + 요약본 공유 "크크킄 그녀석은 기사 중 최약체지" 라는 말을 듣는 정처기지만, 아무튼 합격했습니다! 모로 가도 땄으면 된 걸로 ;) 이런저런 일로 포스팅을 미루고 있었는데, 이것도 안 쓰면 또 까먹을 거라 더 늦기 전에 써봅니다. 혹시 관련 담당자분들 지나가다 보시면 저희 수험자들의 처절한 마음 좀 알아주시길... 🥺 2021 3회차 정보처리기사 실기 후기 3개월 노가다 정처기 필기를 2021년 1회차 때 응시했지만, 공부하기 너무너무 싫어서 😵 미루고 미루다가 올해가 가기 전엔 끝내야겠다는 마음으로 3회차를 준비했습니다. 일단 전 비전공자고 직장인입니다. 와 자체 하드모드! 하지만 1트에 시험을 끝내고 싶어서 준비기간을 좀 길~~게 잡고 3개월 정도 달렸습니다. (물론 이게 다 공부 시간 아닌 거 아시죠...ㅎㅎㅎ.. 공감수 149 댓글수 69 2021. 11. 27.
2021년 정보처리기사 필기 1회 보고 온 후기 지난 3월 초에 정보처리기사 필기 시험을 보고 왔습니다. (👀 말 그대로 보고 옴) 분명 볼 때는 이게 다 뭐냐고 울부짖은 거 같은데 끝나고나니 다 까먹는 기적! 으아ㅏㅏ 더 이상 까먹으면 안 될 것 같아 나중에 참고하려고 씁니다... 합격하긴 했지만 내용은 팁이라기보단 리얼 후기입니당 ✍️ 왜 봤더라 작년에 비자발적 백수가 된 뒤, 할 일도 없는데 공부나 할까? 라는 안일한 마음으로 정처기 필기책을 샀었는데요. 음, 다섯 장 보고나서 라면 받침대가 되었습니다. 하지만 책 값이 아깝기도 하고(내 치킨 한마리 반!) 올해엔 자격증 취득 좀 해야겠다는 목표로 1월부터 공부를 시작했습니다. 전에도 전공이 아닌 자격증을 딴 적이 있으니까 괜찮지 않을까? 하는 안일한.. 마음으로.....ㅋㅋㅋㅋㅋ 안타깝게도 그때.. 공감수 11 댓글수 7 2021. 4. 5.
JPEG vs. PNG: 적절한 이미지 포맷 선택하기 (2) - PNG편 프롤로그 지난 글에서는 JPEG의 특징에 대해 살펴보았으니, 이번엔 PNG에 대해 알아봅니다! 이 시리즈의 이전 글: JPEG vs. PNG: 적절한 이미지 포맷 선택하기 (1) - JPEG편 PNG를 소개합니다 PNG 역시 웹에서 널리 사용되는 이미지 포맷 중 하나입니다. JPEG와 마찬가지로 픽셀로 이루어진 비트맵 그래픽이기도 하고요. 이름은 Portable Network Graphics의 약자로, 말그대로 ‘인터넷’에서 표현될 이미지를 염두에 두고 개발되었습니다. 따라서 RGB가 아닌 색 공간(CMYK 등)은 지원하지 않습니다. PNG 역시 24비트 이상의 색상, 곧 트루 컬러를 지원합니다. 그런데 JPEG랑 다르게 8비트 알파채널을 지원하기 때문에 다양한 투명도를 표현할 수 있습니다. box-sh.. 공감수 17 댓글수 8 2021. 1. 27.
JPEG vs. PNG: 적절한 이미지 포맷 선택하기 (1) - JPEG편 프롤로그 이미지 저장할 때 이런 고민한 적 없으신가요? 🤔🤔 이미지는 웹페이지에서 많은 부분을 차지하는 리소스입니다. 따라서 용량이 적을 수록 당연히 좋죠. 그래서 이미지를 표시할 때 적절한 포맷을 택하는 것이 여러모로 중요합니다. 웹에서 사용하는 주 이미지 포맷은 JPEG와 PNG일 텐데, 그럼 둘 중에 뭘로 저장하는 게 좋을까요? 저는 기존까지 이렇게 알고 있었는데요, JPEG → 복잡한 이미지나 사진 PNG → 단순한 이미지, 투명 표현이 필요한 이미지 결론부터 말하면 저게 맞습니다! 👀어... 너무 당연한 얘기를 했나요 👀 ‘사진은 JPEG! 투명 배경은 PNG!’라고만 알아도 충분하긴 하지만, 그 이유가 궁금하기도 했고 사진도 아니고 투명하지도 않은 이미지는 어떤 포맷이 맞는 걸까 싶을 때도 있.. 공감수 7 댓글수 6 2021. 1. 23.
[티스토리 스킨 무료 배포] Log Skin; 로그 스킨 티스토리 스타일의 반응형 스킨. 포스트에 집중할 수 있는 깔끔한 스타일입니다 ;) Log Skin v1.1 * 크롬 브라우저 기반이며 IE에 대응하지 않습니다. * 공지사항, 위치 로그 등 일부 페이지는 지원하지 않습니다. 미리보기 현재(2021.1) 이 블로그에서 사용 중인 스킨입니다. 스킨 적용하기 1. 스킨을 다운로드 받은 뒤 압축을 해제합니다. 2. 티스토리에 접속 후, 로그인 - 블로그 관리 - 스킨 변경으로 이동합니다. 3. 새로운 스킨을 적용하기 전, 꼭! 사용중인 스킨을 '보관'해 주세요. 새 스킨 적용 시 모든 내용이 초기화됩니다. 4. 우측에 '스킨 등록' 버튼을 눌러 등록 화면으로 이동합니다. 5. '추가' 버튼 클릭 후, 다운로드 받은 모든 파일을 업로드 합니다. (images 폴더.. 공감수 59 댓글수 59 2021. 1. 13.
브라우저의 동작 (3) - 웹 페이지 최적화 Critical Rendering Path 지난 글에서 웹 브라우저가 어떻게 일하는지 간략하게 알아보았습니다. 구글에서는 이를 Critical Rendering Path(CRP, 주요 렌더링 경로)라고 부르며, 이를 최적화하는 방법에 대한 강의와 문서도 있습니다. 사이트 최적화를 하는 방법 중 하나는 이 CRP를 간결하게 하는 것입니다. HTML 다운로드 Hello, world 우리가 웹 사이트에 접속하면 브라우저는 우선 서버에 페이지를 요청합니다. 이후 html에 대한 응답이 오면, 쉬고 있던(idle 상태의) 브라우저는 DOM을 만들기 시작합니다. 그리고 DOM이 다 그려지면 렌더 트리를 구현하고 페이지를 렌더링합니다. 위 이미지를 보면 html을 다운로드받는 데 205ms가 걸린 걸 볼 수 있습니다.. 공감수 9 댓글수 3 2020. 6. 12.
브라우저의 동작 (2) - CSS : 내 말대로 꾸며줘! 프롤로그 아직 개인홈피*^-^*가 유행하던 시절, 저도 홈페이지를 만들고 싶어서 금손님들의 스킨을 다운받곤 했었는데요. 그때 css파일을 보고 이건 뭘까... 얘는 왜 메모장으로 열리지... 했던 기억이 납니다. 네, TMI였습니다. 그래서(?) 오늘은 CSS를 배웠습니다. 익숙치 않은 개념이라 혹시나 잘못된 내용이 있으면 언제든 말씀 부탁드립니다. (천사님들 사랑합니다!) CSSOM CSS로 트리 만들기 지난 글에서 브라우저는 HTML을 보고 토큰화 과정을 통해 DOM을 만들어낸다고 했습니다. CSS도 이와 유사합니다. 한쪽에서 마크업을 해독하는 동안, 한쪽에서는 스타일시트를 보고 CSS Object Model(=CSSOM)을 만들어냅니다. 자, 브라우저가 HTML을 보고 뚝딱뚝딱 DOM을 설계하는 동.. 공감수 6 댓글수 0 2020. 6. 9.
브라우저의 동작 (1) - HTML : 내 마크업을 이해해 줘! 프롤로그 저는... 처음으로 HTML 파일을 봤을 때... '이게 뭐지?' 싶어서 더블 클릭했더니 브라우저가 열려서 놀랐던 기억이 있습니다ㅋㅋㅋㅋ 사실 지금도 신기해요. 진짜 멋지죠. 그런고로 오늘은 이걸 공부해봅니다! 그래서 말입니다. 브라우저는 어떻게 동작하는 걸까요? (feat. 그알) *이 글은 구글링을 바탕으로 작성했습니다. 추가/수정/삭제가 필요한 부분을 말씀해 주시면 감사하겠습니다 :) 브라우저 브라우저란 브라우저는 서버에 자원을 요청(reqest)하고 그걸 응답(response)해 윈도우에 표시하는 역할을 합니다. HTML 파일이나 CSS 파일, 이미지 등이 서버에서 넘어오면 파싱(Parsing)이란 작업을 거쳐 화면에 그려냅니다. 이 과정에서 '어떻게 해석할까?'의 방식은 브라우저마다 조.. 공감수 11 댓글수 1 2020. 6. 7.
[되짚기] 초보를 위한 Git 다루기 / 풀리퀘하기 프롤로그 처음 Git을 알게 됐을 때 든 생각은 이거였죠. "이렇게 좋은 걸 왜 아무도 안 알려준 거야ㅠㅠㅠㅠ" 과거로 돌아가면 제 자신한테 "야야 이거 먼저 써 봐!!!"라고 말해주고 싶을 정도.... 하지만 저는 웹 퍼블리싱 파트만 따로 작업하는 경우가 많아 다른 팀과 함께 쓸 일이 잘 없었습니다. 저 혼자 브랜치 만들어서 북치고 장구치고 작업하는 게 대부분이었죠 허허허 (외롭...) 그래도 개발자와의 협업을 위해 한 번 짚고 넘어가면 좋을 것 같아 포스팅을 시작합니다. 저(왕초보)를 기준으로 쓴 글이라 깊은 내용까지는 다루지 않았습니다. 히어뤼고! 🤘 Git 시작하기 Git 다운로드 git-scm.com 에 접속하여 다운로드 합니다. (참 쉽죠?) git --version이란 명령어에 반응이 있으면.. 공감수 4 댓글수 2 2020. 4. 16.
웹 퍼블리셔를 위한 VS CODE 확장 프로그램 뒤도 안 돌아보고 백업없이 포맷하는 바람에 적어보는 익스텐션 리스트 🤓 웹 퍼블리셔가 설치해 두면 좋은 확장 프로그램을 모아봤습니다. 멋진 익스텐션을 발견할 때마다 수시로 수정할 예정입니다. 범용 익스텐션 Prettier - Code formatter [링크] 추천 1순위!!! 꼭꼭 설치하세요! 주요 문법(HTML, SCSS, JSON 등)을 예쁜 형태로 정리해 줍니다. Beautify [링크] Prettier와 비슷한 익스텐션입니다. 에디터 내 코드를 예쁘게 정렬할 수 있어요. vscode-icons [링크] VS CODE 내에 이런저런 아이콘을 추가해 줍니다. 아이콘이 큼직하기 때문에 무슨 파일인지 한눈에 알 수 있습니다. indent-rainbow [링크] 인덴트 단계를 색상으로 예쁘게 구분해 줍니.. 공감수 7 댓글수 2 2020. 4. 5.
[DP] Web Publishing Copy - Studio JT https://studio-jt.co.kr/ 디자인이 깔끔하고 예뻤던 사이트. 많이 배웠습니다! 감사함니당( ´ ▽ ` )ﾉ # 프로젝트 리스트의 이미지를 CSS background image 와 태그 두 개로 표현했다. 검색엔진 노출 때문인 것으로 추정. # 어르신 브라우저 대응을 위해 flexbox를 쓰지 않고 있었다. 연습도 할 겸 float, table 등으로 대체해서 써봤다. 써 본 결론은? 그래도 플박이 최고임. # 대부분의 이미지는 jpg로 처리한 듯 했다. 왠만하면 jpg로, 투명처리가 필요할 때만 png로 한다면 이미지 용량을 줄일 수 있을 듯. # 요기서 손이 건물 뒤로 스윽 사라지는 걸 어떻게 표현하지 고민했는데 그냥 overflow 처리했다! 애니메이션은 CSS로 적당히~ 이 영역의.. 공감수 2 댓글수 1 2019. 10. 31.
[SVG] clip path 공감수 0 댓글수 0 2019. 9. 17.
[AWS] S3 버킷으로 정적 웹사이트 호스팅하기 1. S3에 버킷을 만든다. 이때 이름은 웹사이트 도메인과 동일해야 한다. 예를 들어, 사이트 도메인이 thevitolabs.com 이라면 thevitolabs.com 이란 이름의 버킷을 만들어야 한다. 2. 기존 웹호스팅처럼 폴더를 만들고 그 안에 정적 웹사이트를 구성하는 파일을 업로드한다. 3. '권한' 탭으로 들어가 퍼블릭 액세스를 허용해준다. 버킷 정책에 아래 내용을 붙여넣으면 버킷 자체가 퍼블릭으로 변한다. { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::.. 공감수 1 댓글수 0 2019. 7. 1.
iTerm, Zsh, Oh my Zsh 설치하기 iTerm, Zsh, Oh my Zsh 설치하기 - CLI를 제공하는 프로그램을 쉘(Shell)이라고 한다.- 맥에서는 기본으로 터미널(terminal) + 배쉬 셀(bash shell)을 제공하지만 안 예쁨 (검은 건 바탕이요 흰 건 글자니라) [1] iTerm2 설치- 터미널을 대체해준다.1) https://www.iterm2.com/ 사용자 및 그룹 > 자물쇠 해제 > 사용자 우클릭 후 고급 옵션 > 로그인 쉘 에 들어가서 zsh로 경로를 바꿔준다. (경로는 $ which zsh 명령어의 출력값이다) 6. 재시작 후 설정을 요구하는 화면이 나오면 0을 눌러 ./zshrc가 생성되도록 한다. [3] Oh my zsh 설치 1) 아래 명령어로 붙여넣어 설치해준다.sh -c "$(curl -fsSL ht.. 공감수 0 댓글수 0 2019. 3. 7.
[PHP] PHP 맛보기 - 1 이번에는 생활코딩 내 PHP 강의를 기반으로 한 실험(?!)입니다. PHP를 정말 정말 쬐애끔 맛만 보는 정도이지만, JS가 아닌 다른 언어를 알게 됐다는 데 의의를 두겠습니다ㅋㅋㅋㅋ 생활코딩에게 무한한 감사를 드리며, 실험일지 스타트! PHP 설치 (Windows) 윈도우는 Bitnami가 제공하는 WAMP라는 걸 사용해 PHP를 사용합니다. WAMP는 아마 Window, Apach, MySql, Php의 약자로, 여기에 접속해서 설치합니다. PHP는 서버 사이드 언어라 웹 서버 바탕 위에서 돌아가기 때문에 Apache 웹 서버를 돌릴 필요가 있습니다. WAMP Stack Manager Tool을 이용해 서버를 껐다 키는 등 관리를 할 수 있는데, PHP를 재구동하려면 Apache(아파치) 웹 서버를 .. 공감수 2 댓글수 0 2019. 1. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.