우주먼지 개발 log

쉽지않다.. css 찐 프론트가 되는 길.. 클스 이브에 뭐하는.. TIL 쉽지않았던 무료 특강 : 크리스마스 캘린더 만들기 원래 아직 안온 날짜의 카드는 안열리게 구현 되어있는데, 이미 24일이어서 모든 카드 열람가능. 그래서 약간 수정해서 크리스마스 편지로 활용해보는 중.. 1번카드부터 24번카드 까지 편지를 써놔서, 이전 날짜 카드가 안 열려있으면 열지 못하게 바꾸었다!! github에 올리고 이전 카드 안열려있을 때는 모달창에 내사진 나오게 해줌. 이제 배포해서 친구들 전달..ㅋㅋ https://replit.com/@azazahee/SCC-Advent-Calendar SCC-Advent-Calendar 스파르타코딩클럽 "1시간만에 크리스마스 디데이 캘린더 만들기" 실습 프로젝트 저장소입니다. FO..

점점 재밌어지는.. 프론트의 세계.. 토요일에 처음 써본다 TIL 사실 TIL이라기보다는 정보저장에 가까운데.. TIL 그냥, 어제 canvas 강의를 듣고 너무 재밌어서.. 탐방을 하다가 touch event 로 동작하게하는 소소한 예제를 발견해서 나중에 참고하려고 퍼왔다. 뭔가 참고를 하겠지? Drag Touch 뽀개기 (velog.io) 위 블로그에 적힌 touchscreen 여부를 판단하는 기준도 알아두면 유용하겠다. hover 이벤트가 없고, pointer가 coarse 이면 (미세하지 않은, 러프한) pointer가 fine이면 디지타이저가 되겠다. 어제의 그림판 예제는 마우스 이벤트로만 가능하지만 모바일에서 이용하기 위해서는 터치 이벤트를 사용해야한다. 예제를 스마트폰에서 동작하도록 수정해보..

프론트 밥 아저씨 오창영 튜터님과 함께.. canvas로 그림판 만들기 마지막에 결국에 멘트 해주심 "참쉽죠?" 여튼 나에게 찐 프론트의 영감을 주셔버렸다 TIL Canvas로 그림판만들기 라이브세션에서 순식간에 뚝딱 더 많은걸 만들어주시긴했지만 펜으로 그리기와 펜굵기까지 반영되어있는 코드!! drawing-board-step1 - CodeSandbox MDN 사이트의 튜토리얼을 통해 더 다양한 것을 해볼수 있겠다. 캔버스 튜토리얼 - Web API | MDN (mozilla.org) 1. 리액트 IDE 사이트 : code sandbox 많은 튜터님들이 특강 세션을 해주시는 좋은 점. 개발자마다 사용하는 환경과, 유용한 꿀팁들이 쏟아진다규.. 리액트는 초반에 찾다가 못찾았는데 검색어를 어떻게 했어야했는지..

재밌었다~ 남상림 튜터님 예뻐여.. TIL Redux 대신 Recoil 을 써보자~ 사실 tutorial 그대로라 다시 옮겨 적을 필요는 없지만.. ㄷㄷㄷ 복습차원으로.. recoil 패키지 설치 yarn add recoil recoilRoot redux의 provider 처럼 App.jsx에 전역으로 사용하려는 범위에 감싸 놓기 import React from 'react'; import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( ); } Atom 전역으로 사용하려는 state 변수를 atom을 사용해서 끄적여 준다. key값은 고유값, 보통 변수명과 동일하게..

지금 사실은 next js 구간이다.. (?) 언제해 공부.. TIL React query mutation 공통 함수로 빼기 오늘의 에러 : useMutation 같은 React hook은 top level에서 사용할 수 없다. 는 에러 src\query\useTodoQuery.js Line 5:31: React Hook "useMutation" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks 오늘의 실수 () => 이것을 안붙인 것.. 아직도 개념이 안잡혀서 그런 듯ㅠ.ㅠ [공통으로 ..

숙제 5 level 늦은 제출, 막혔던 부분 catch up~ TIL 내가 생각한 typescript의 이해.. 내가 사용하려는 값(위에서 선언한 변수이든 함수의 리턴값이든 매개변수든)이 무슨 타입인지 나는 알지만 컴퓨터도 알게 하자. typescript로 리액트 쿼리 사용하기 javascript로 짠 코드를 typescript로 바꾸는 시작부터 막혔다.. 답을 찾아가는 방법.. 어떻게든 되게 하는 방법?? todolist 조회 함수이다. // 1. as-is // 모든 todos를 가져오는 api const getTodos = async () => { const response = await axios.get(SERVER_URL); return response; }; //(처음에는 response를 통..

오늘도 화이팅! TIL 타입스크립트 보조 교재 ㅊㅊ 동기가 튜터님 질문하는 거 구경하다가 추천 교재 주워왔다. 살까말까. 1) effective typescript 2) https://www.zerocho.com/book/3 리덕스 툴킷 with typescript https://redux-toolkit.js.org/tutorials/typescript https://redux-toolkit.js.org/usage/usage-with-typescript - 공식 사이트인데 이대로만 하자.. - 타입쓰기전에 하던 것과 조금 다르더라도 -0- redux thunk with typescript 블로그 참고한 거 https://i-ten.tistory.com/285 - payload를 여러 변수를 담아 객체로 ..

오늘도 쉽지않군.. TIL TypeScript React 에서 쓰기 함수의 input, output에 type 쓰는 기본부터, 객체 배열 type 까지 원장님 추가 세션에서 받아적은 것 정리했다 !! [TypeScript] React 에서 사용하기 2 지난 포스팅에서 설치만했으니까 이제 사용하는 방법!! 스파르타 내배캠 프론트엔드과정 원장님 추가세션 수업들은 내용 정리 ^.^ 1. typescript 문법을 쓰지 않아도 컴파일러가 추론해서 에러를 잡 developer.happymunzi.com 그 다음은 props랑 children, eventHandler type 주는법 예정... 그 다음은 redux 사용하는 법.. 와.. 어렵다 ^.^ 이러다가 숙제 1level props-drilling 인채로 제..

오늘도 화이팅! TIL Animation css 공부하기 따로 작성하였다~ [css] 애니메이션 @keyframes React App 처음 생성했을 때 이미지가 돌아가는 것에 대해 생각해 본적이 없었는데, 이제야 갑자기 궁금해져서 얘 gif 인가? 했는데 아니었다. css를 통한 애니메이션 효과였던 것이다. ㅇ0ㅇ 팀플 후 developer.happymunzi.com TypeScript React에서 사용하기 이것도 따로 작성하였다~ [TIL] 23/12/12 TypeScript 문법 종합반 : Start 오늘도 화이팅! TIL TypeScript 요약 = > javascript는 웹페이지에 동적인 효과를 주기 위해 만들어진 스크립트 언어인데 -> 발전하여 성능을 높이고자 구글에서 v8 엔진을 크롬 브라..

오늘도 화이팅! TIL TypeScript 요약 = > javascript는 웹페이지에 동적인 효과를 주기 위해 만들어진 스크립트 언어인데 -> 발전하여 성능을 높이고자 구글에서 v8 엔진을 크롬 브라우저에 내장했고 -> 이를 기반으로 Node.js 라는 플랫폼이 나왔고 javascript로 백엔드를 개발할 수 있게 되었다. 그런데 프론트엔드에서 뷰에서 보이는 사소한 에러였던 녀석들이 백엔드에서는 서버를 다운시키는 어마무시한 에러를 볼 수도 있다. javascript는 동적언어이기 때문에 런타임에 (프로그램 실행) 개발자의 실수를 알게 되기 때문이다. javascript의 단점 1) 실행시간에 결정 되는 변수 타입 2) 약한 타입체크 - let, const 무슨 타입인데? 뭘 담는 변수? - let a ..