분류 전체보기

[youtube] tailwind grid auto-fill, router, axios 리팩토링

tailwind에서 auto-fill쓰기 // tailwind.config.js module.exports = { content: ["./src/**/*.{html,js,jsx,ts,tsx}"], theme: { gridTemplateColumns: { "fill-auto": "repeat(auto-fill, minmax(15rem, 1fr))", }, }, plugins: [require("@tailwindcss/line-clamp")], }; 쓰고 적용할 곳에 grid-cols-fill-auto 라고 써주면 된다. https://github.com/tailwindlabs/tailwindcss/issues/1403 [Feature request] CSS Grid - Auto-Fit & Auto-Fill..

[youtube]

https://developers.google.com/youtube/v3/docs/videos/list?apix_params=%7B%22part%22%3A%5B%22snippet%2CcontentDetails%2Cstatistics%22%5D%2C%22id%22%3A%5B%22Ks-_Mh1QhMc%22%5D%7D Videos: list | YouTube Data API | Google Developers Videos: list 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. API 요청 매개변수와 일치하는 동영상의 목록을 반환합니다. 지금 사용해 보거나 예를 참조하세요. developers.google.com id로 Detail 정보 받아오기 https://youtube.g..

[youtube] tailwind, react-router, popular list, search

yarn add -D @tailwindcss/line-clamp 유튜브 제목이 두 줄까지만 나오고 그 뒤는 ...(말줄임표) 처리 되도록 하기 위해서 line-clamp 플러그인을 깔았다. // tailwind.config.js module.exports = { content: ["./src/**/*.{html,js,jsx,ts,tsx}"], theme: { extend: { spacing: { 1: "1px", 2: "2px", }, }, }, plugins: [require("@tailwindcss/line-clamp")], // 이 부분 추가 }; plugins에 line-clamp를 추가한다. line-clamp-{n} 이렇게 적어주면 된다! 그리고 h도 지정을 해줘야 한다. 이렇게 두 줄까지만 ..

[youtube] 1/11, 유튜브 클론 코딩

시작은 개미미하지만... 끝은 성대하길^^~~~ 처음 써보는 것 : tailwind, mock data 만들어 쓰기 거의 처음인 것 : postcss, react-query tailwind 아직 뭐 쓸 수가 없다 몰라서... postcss는 그냥 module만 붙이면 되는 거 아닌가?! 근데 tailwind 시작할 때 같이 깔고 뭔가 했단 말이지..🧐 이건 내일 알아봐야지 내일 하루종일 하면 익숙해지겠지!!! tailwind할 생각에 신난다~!~~~!!!~~~ 오늘 할 일 : 포장, 송장 붙이기, 송장 뽑기 하고 싶은 것 : 꾸덕이 회고 이 정도면 회고 중독 취미 후보 : 보드게임, 주짓수

[tailwind&emotion]

오늘은 리액트 쿼리 강의 마저 듣고 유튜브 프로젝트 api 받아보기, 회의, 테일윈드 알아보는 것만 했다. 더보기 tailwind에 대한 생각은 뭔가... 내가 커스텀하기 어려울 것 같고 세세하게 정할 수 없을 것 같아서 꺼려졌는데 엘리쌤이 추천하기도 하고 검색해보니까 그런 애는 아닌 것 같아서(?ㅎ) 쓰게 됨! 아직 쓴 건 아니지만. yarn add @emotion/react @emotion/styled @emotion/css @emotion/server yarn add -D twin.macro tailwindcss postcss@latest autoprefixer@latest @emotion/babel-plugin babel-plugin-macros yarn add -D tailwindcss post..

[Todo] 회고?ㅎ 아무튼 끝

강의 들으면서 아쉬운 것들 적어보기 1. AddTodo를 분리하지 않은 것 - input부분을 따로 떼낼 수 있었는데 컴포넌트화하지 않았음 2. AddTodo에서 form을 사용하지 않은 것 - 난 키 입력에 함수를 바인딩해서 그게 엔터면 onClickAdd()하는 식으로 했었는데, form으로 하면 굳이 이렇게 하지 않아도 된다. 자꾸 form의 존재를 까먹음... 3. AddTodo에서 if(input==="") return; 이라고 썼는데 if(input.trim().length === 0) return; 이렇게 하면 ""뿐만 아니라 " "도 거를 수 있다! trim() 은 공백제거한 순수 문자열을 반환함 const filters = ['all', 'active', 'completed']; ... ..

[Todo] css, htmlFor, 다크모드 하고 싶은데

모코코 이미지 - 스마일게이트 로스트아크 폰트 - 휴먼범석체 형광펜 그어지는 게 어두워지니까 별로기도 하고... 완전 쭉 그어져서 그냥 줄 그어지고 색 어둡게 하는 걸로 바꿨다. 지금 궁금한 건 체크박스 커스텀, 라이트모드 추가하기! 아직까지 우산을 한 번도 씌워본 적이 없다. 체크박스가 쉬울 것 같아서 그것부터! input을 숨기고 label을 커스텀하는 방식이라고 하는데.. .최근에 라디오 버튼인가 체크박슨가 커스텀 가능하게 됐다고 본 것 같은데 아닌가? 최근도 아냐 학원 다닐 때였는데? 근데 아닌가봄... 검색해도 안 나오네 .todo-li label:before { content: ""; display: inline-block; border: 1px solid gray; width: 14px; h..

[Todo] All, Doing, Done 클릭한 것만 보이게하기

{list .filter((el) => { if (activeMenu === "All") { return true; } else if (activeMenu === "Doing") { return el.done === false; } else { return el.done === true; } }) ?.map((item, i) => ( {item.name} onClickDelete(e.target.id)} > X ))} 이거 일반적인 방법인가? 좀 돌아돌아가는 느낌

[Todo] Checkbox, 형광펜 긋기, 네비게이션 모르겠다

요즘은 생각을 블로그로 하는 듯 맞다 블로그에 눈 오는 거 추가했다 노마드코더 영상 보고,, 아 썼던가? 체크박스를 추가하고 체크가 되면 줄 그이게 하기 checkbox에 대해 좀 더 알아보자.. 왜 체크해도 아무런 반응이 없지? 했는데 생각해보니 checked 됐을 때 바뀌어야 하는 건 todo item이다... 그럼 어쩌란말인가 이모션밖에 몰랐던 나에게 ,,, 나 정말 기초가 없네 ~ 일반 형제 결합자 같은 부모를 공유하는 두 번째 요소 선택 왜 반응이 없지 캡쳐는 실수로 아무것도 체크 안 한 걸 한건데 체크해도 반응없음 ㅎ; +도 안되고 그냥 띄우는 것도 안되고 delete-button(저긴 오타났지만 수정했음...)도 안되는 걸 보면 내가 분명 뭔가 단단히 잘못한 것 같은데ㅠ checkbox:ho..

[Todo] 아이템 삭제하기 delete item

딸기랑 꿀 먹는데 생각보다 맛있어서 행복하당 지금 만드는 거 id를 item 그 자체로 설정해놔서 하늘보기 하나만 지워도 두 개가 없어진다. id를... 어떻게 해줘야지? 하다가 장바구니랑 비슷한 것 같아서 장바구니 로직을 보기로 했다. 보니까... 장바구니는 아이템을 담을 때 아이템 자체에 id값이 있었다. 그럼 나도! 저거 만들 때 랜덤으로 id를 만들어주자,,, 근데 어떻게...? 왜 생각이 안 날까? 객체를 만들어야 할 것 같은데 이렇게 했는데 이젠 눌러도 아무 반응이 없다. 나 투두리스트도 못 만드는데 어떻게 먹고 살지? 아 이건 uuidv4로만 써서 생긴 문제였다. uuidv4() 라고 써줘야한다... 왤까? 원리가 뭘까...? 왜 얘는 ()를 써줘야하는가 일단 그래서 만들고 지우는 것까진 된..

[Todo] 시작

추가하면 빈거 하나가 같이 추가되는 현상,,, 영어는 괜찮은데 한글은 안eho input에 한글 치고 엔터 누르면 엔터가 두 번 눌리는 현상 press로 하면 괜찮다고 한다. 왜지? onKeyDown, onKeyUp 을 onKeyPress로 바꾸니까 됐다.

Styled-Components