nana_log

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

etc.

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

2023.08.06

Loves

[일기 모아 제본하기]도 이걸로 어느덧 네 번째! 이제 익숙해질 때도 됐는데 여전히 우당탕 헤매면서 마무리했다 (그리고 꼭 끝나야 보이는 오타... 🥹) 올해 제본 컨셉은 뭘로 할까 고민하다가 우주로 정했다. 🪐✨ 매달 회고를 할 때마다 이번 달의 한마디를 적어두는데 그때 적었던 문구 중 하나에 꽂혀서 슥 가져와 넣었다. 주변에 보여주면 '뭔 유니버스?' 물어보는데 마블 영화 시리즈에서 영감을 받은 문구가 맞다. 작년에 개봉했던 마블 시리즈 작품 중 닥터 스트레인지: 대환장… 아니 대혼돈의 멀티버스란 작품이 있는데, 내용을 다 떠나서 영화에서 말하는 멀티버스라는 개념이 무척 신선했던 게 기억이 남는다. "그렇담 수많은 유니버스가 존재하고 내가 있는 곳도 그중 하나의 유니버스?!" 라고 생각하면 꽤 흥미롭..

2023.02.04

Tools

프롤로그 저는 종종 로컬에서 시작해 로컬에서 끝나는 마크업 작업(aka 이메일 템플릿)을 진행하는데요, 나중에 파일을 찾으려면 하나씩 파일을 열고 닫아야 하는 수고스러움이 있었습니다. "로컬에 흩어진 파일을 한 화면에서 볼 수 있게 정리하고 싶어! 하지만 어떻게?!!!"하고 고민하던 중... 그레잇한 개츠비를 알게 되어 찍먹해봤습니다. 결론부터 말하자면 (삽질도 많았지만) 좋은 경험이었어요! 정적 사이트를 만들 생각인데 바닐라는 좀 그렇고 리액트 기반에서 뚝딱 만들어보고 싶다 하시는 분에게 맞을 것 같아요. 까먹을 미래를 위해 가볍게 정리해봅니다. 팁은 공식문서가 더 자세하니 이쪽으로 → Gatsby Documentation What’s Gatsby? React 기반의 정적 사이트 생성 프레임워크 (JA..

2022.12.20

CSS

프롤로그 백만 년 만의 업데이트! 이제 시리즈의 마지막 글입니다 😎 흐름제어와 함수를 통해 Sass를 더 멋진 방법으로 활용해 봅니다. 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 👈 Here! 이번 글에서 다루는 것: - @if, @each 등의 흐름제어문 - list 변수와 map 변수 - 내장 모듈이 제공하는 사용하기 - @function 로 직접 함수 만들기 1) 흐름 제어 Sass의 기본 특징들은 다 살펴봤으니 이번에는 좀더 기깔나게 활용해 볼 차례입니다. 먼저 흐름 제..

2022.11.05

Library

프롤로그 Framer-motion은 Framer가 제공하는 리액트용 애니메이션 라이브러리입니다. NomadCoders의 를 듣던 중, framer-motion 라이브러리를 사용하는 내용이 있어 공식 문서를 슥 훑어보았는데요, 아니... 이것은... 애니메이션 총집합 선물세트?! 정말 다양한 애니메이션 모션을 제공하는 멋쟁이 라이브러리였습니다. 공식 문서 보러 들어갈 때마다 구글 번역을 쓰기 귀찮아서 일부 내용만 발췌해 쫌쫌따리 가져왔습니다. 😽 이 글은 framer-motion v.7 을 기준으로 작성되었습니다. (2022.09) 1. Introduction 🔗 Github (Star 15.4k) MIT 라이센스 요구사항: React 17+ 공식 문서는 요기로 👇 https://www.framer.com..

2022.09.08

CSS

프롤로그 시리즈의 3번째 글! 이런 분들이 읽으시면 좋아요. - CSS를 다룰 수 있어요 - 하지만 Sass는 잘 몰라요 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 👈 Here! 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 이번 글에서 다루는 것: - mixin - extend - 모듈화(import/use) 1) 믹스인: 찍어내기 틀 이번에는 조금 더 우리의 작업을 편하게 해줄 Sass 문법을 써봅시다! 바로 @으로 시작하는 At-Rules입니다. 기본 CSS에서도 @으로 시작하는 문법들이 몇 개 있었죠. (@font-..

2022.07.07

CSS

프롤로그 [아무튼 Sass] 1. 시작하기의 다음 글입니다. 두 번째 글이지만 어느덧 반년만... 😉💦 이런 분들을 위한 글입니다. - CSS를 다룰 수 있어요 - 하지만 Sass는 1도 몰라요 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 👈 Here! 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 이번 글에서 다루는 것: - 중첩, 부모참조 선택자 - 변수, 보간 - 인라인 주석 - 출력스타일 설정 1) 중첩: 이것이 "C"SS 지난 글에서는 Sass 만 설치하고 똑 끝나버려서 '왜 굳이 이걸 설치해서 써야하지 🤔' 하는 ..

2022.04.05

Loves

프롤로그 이 글의 두 번째 글입니다. 대충 일기를 모아서 제본했다는 내용이에요 📚 (1편을 작년에 쓰고 2편을 올해 쓰다니...) 실제로 책 제본을 진행하면서 어떤 식으로 했는지 정리해봤습니다. 개인제본 하실 때 참고하세요! 1. 글 모으기 우선 책으로 만들 글을 한데로 묶습니다. 저는 노션에 적은 일기를 모아서 하나의 텍스트 파일로 취합했어요. 여기에 사진이나 그림 같은 요소를 얼마나 넣을지, 여백은 얼마나 넓게 잡을지에 따라 분량이 달라집니다. 2020년 버전: 184,034자 (총 220p / 두께 약 1.8cm) 2021년 버전: 114,910자 (총 214p / 두께 약 1.8cm) 보면 글자 수는 다르지만 두께가 비슷한데, 2021년 버전에는 사진과 여백이 더 많이 들어가 있습니다. 따라서 두..

2022.03.09

Library

이 글은 NomadCoders의 의 내용 일부를 정리한 글입니다. 멋진 강의 감사합니다! 개인 스터디 글로, 맞지 않는 내용이나 더 나은 방법을 공유해 주신다면 복받으실 거예요 👼✨ 1) 시작하기 2) 기능 연습 & 3) 앱 만들기 4) styled-components 5) 𝒘𝒊𝒕𝒉 타입스크립트 ☀︎ 5-1. 타입스크립트 5-1-1. "타입" 스크립트? 자바스크립트는 너무나 관대(?)해서 오냐오냐 하고 넘어갈 때가 많습니다. const sum = (a,b) => a+b; 에서 a와 b는 숫자로 받을 생각이었지만, 여기에 문자열을 넘기더라도 '그런갑다~' 하고 넘어가 버립니다. 또, 존재하지 않는 프로퍼티를 읽더라도 ‘값이 없는데? 그럼 undefined 줄게’ 하고 대충 넘어가버리기 때문에 나중에 엌??..

2022.02.13