nana_log

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

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

Library

이 글은 NomadCoders의 와 의 내용 일부를 정리한 글입니다. 🙇🏻‍♀️ 멋진 강의 감사합니다 🙇🏻‍♀️ 개인 스터디 글로, 맞지 않는 내용이나 더 나은 방법을 공유해 주신다면 복받으실 거예요 👼✨ 1) 시작하기 2) 기능 연습 & 3) 앱 만들기 4) styled-components ☀︎ 5) 𝒘𝒊𝒕𝒉 타입스크립트 4-1. 스타일드 컴포넌트? Styled Components는 컴포넌트 단위로 스타일링하기 때문에 개별 케이스로 분리해 CSS를 작성할 수 있어요. 이렇게 분리하지 않고 스크립트 내 작성하는 방식을 CSS-in-JS 라고 합니다. CSS-in-JS 방식을 사용하는 라이브러리에는 Styled Components, emotion, styled-jsx, JSS 등이 있습니다. 여기서는 스타..

2022.02.09

Library

이 글은 NomadCoders의 강의 내용을 정리한 글입니다. 넘나 좋은 강의 (게다가 무료!) 🙇🏻‍♀️ 감사합니다 🙇🏻‍♀️ 개인 스터디 글로, 맞지 않는 내용이나 더 나은 방법을 공유해 주신다면 복받으실 거예요 👼🙌 1) 시작하기 2) 기능 연습 & 3) 앱 만들기 ☀︎ 4) styled-components 5) 𝒘𝒊𝒕𝒉 타입스크립트 2. 연습하기 2-1. To-do App 지금까지 배운 걸 활용해 간단한 투두리스트를 만들어 봅니다! 우선 투두를 입력할 인풋이 있어야겠죠! /* App.js */ function App() { return ( ); } export default App; 이 인풋의 value는 state로 관리하려고 합니다. useState를 쓰윽 써줄 차례네요. const [todo..

2022.02.03

Library

이 글은 NomadCoders의 강의 내용을 정리한 글입니다. 넘나 좋은 강의 (게다가 무료!) 🙇🏻‍♀️ 감사합니다 🙇🏻‍♀️ 개인 스터디 글로, 맞지 않는 내용이나 더 나은 방법을 공유해 주신다면 복받으실 거예요 👼🙌 1) 시작하기 ☀︎ 2) 기능 연습 & 3) 앱 만들기 4) styled-components 5) 𝒘𝒊𝒕𝒉 타입스크립트 1. 시작하기 1-1. 작업 환경 준비 먼저 node.js 가 설치됐는지 확인! $ npx create-react-app {app-name} CLI로 프로젝트를 생성합니다. 참고로 {app-name}에는 대문자를 표시할 수 없으므로 대시(-)로 단어를 연결합시다. (🙅‍♀️ myMovie vs. 🙆‍♀️ my-movie) npx는 npm의 자식으로, npm@5.2.0 ..

2022.02.01