nana_log

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

Blog/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. 9. 8.

Blog/Library

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

2022. 2. 13.

Blog/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. 2. 9.

Blog/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. 2. 3.

Blog/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. 2. 1.

Blog/Library

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(3) 8. Vuex 도입 이번 파트에서는 Vuex를 써봅니다 👐 이 어플리케이션은 너무너무너무 간단해서 라이브러리를 도입할 필요가 없지만, 이왕 배운 거 정리하면 좋을 거 같아서요! Vuex란 Vuex에 대한 설명은 공식 문서에 멋지게 정리되어 있습니다. Vuex는 상태 관리패턴 + 라이브러리입니다. 프로젝트 내의 여러 컴포넌트를 쉽고 효율적으로 관리할 수 있도록 도와줍니다. 공통의 state(상태, 컴포넌트 간 공유할 데이터를 말합니다)를 사용하는 컴포넌트가 많아지면 prop가 장황해지고 유지보수가 힘듭니다. 만약 컴포..

2020. 6. 3.

Blog/Library

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(2) 7. UX 업그레이드 이제부터는 꼭 필요한 기능은 아니지만, 있으면 사용자 경험을 개선하는 데 도움을 주는 기능을 개발합니다. 이름 저장하기 저는 서비스의 트렌드 요소 중 하나는 '개인 맞춤'이라고 생각합니다. 로그인 한 사용자에게 맞는 홈 화면을 보여주는 네이버처럼요. 그래서 전 이름을 불러주는 서비스를 좋아합니다. (나에게로 와서 꽃이 되었다... 🌸) Momentum 서비스와 비슷하게, 처음 만난 사용자에게 이름을 묻고 저장하는 과정을 추가해 보겠습니다. 없던 기능이 추가된 거라 개발이 좀 꼬였는데 실무라 생각..

2020. 5. 30.