nana_log

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

🐿/JS

CRA - 리액트 프로젝트를 뚝딱 시작할 수 있게 돕는 보일러 플레이트* (*자주 쓰는 수식, 명령어 등을 미리 입력해 놓는 것) - 그래서 번거롭게 Babel, ESLint, Webpack 등을 따로 설치할 필요가 없다 CRA(create-react-app)에서 config 건드리기 절대경로 설정(alias)을 하려면 Webpack의 config를 건드려야 하지만, CRA로 생성하면 기본적으로 config 파일을 볼 수 없다. eject 하면 숨겨져 있던 config 파일을 밖으로 꺼낼 수 있지만, 이거 한 번 하면 못 돌리는 옵션인데.... 웹팩이랑 안 친한데.... 🥺 이럴 땐 CRACO(Create React App Configuration Override) 를 사용하자! eject 없이 설정을 ..

2022. 3. 16.

Blog/Loves

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

2022. 3. 9.

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.

🐿/CSS

결론 border: 0 쓰자! 👻 보더 없앨 때 none 보다 0을 썼었는데 이유는 그게 더 치기 편하니까 🙄 (손꾸락은 소중하자나여) 그러다 어느날 앗 내가 혀를 어디다 두고 있었지! 를 자각하는 것처럼 0과 none의 차이가 뭐지!를 자각해버린 바람에 정리하는.. 그런... 글.... 일단 W3C의 문서를 촤르륵 훑어보면 border 단축 속성은 border-width, border-style, border-color 를 한번에 적용할 수 있다. 여기서 0과 none의 차이가 갈린다. border: 0; border: none; border-width: 0; border-width: medium; border-style: none; border-style: none; 즉, border-width를 0..

2022. 1. 17.