TIL✨ (71) 썸네일형 리스트형 [typescript] cannot find module 타입스크립트를 계속해서 공부 중인데 TodoList를 만들면서 해봐야겠다라는 생각에 간단한 틀을 구성하고 있었다. 1.문제 npm i sass를 설치하고 styles폴더안에 header.modules.scss 파일을 만들었다. 그 안에 Header component 를 감쌀 container역할의 css를 만들고 에서 import를 했다. 그런데 오류가 났다. 오류는 2307이라고 떴으며, 찾아보니 모듈을 찾지 못해서 일어난다고 했다. 2.시도 간만에 이런 에러를 만나니 캡쳐해놓는걸 또 깜빡해서 기억나는 것들로 정리. - 1) npm i --save-dev @types/내파일.js 을 설치 => 해결되지 않음 -2) declare module "*.module.css" { const classes: { .. Next.js 미니프로젝트, 초기설정 next.js의 개념들만 알고 적용을 해보지 못해서 혼자라도 작은 프로젝트를 진행 해봐야겠다라는 생각이 들었다. todolist는 식상하고 새로운게 뭐가 있을까고민하다가 목표를 잡았다. next.js로 지도위치서비스를 만들어보려고한다. 만들기 전 next.js의 장점이 뭐일까에 대해서 궁금했는데 차차 알아가보려고 한다.🌝 시작 하기 전 next.js의 기본 세팅을 했다.(어려웠다...공식문서도 보는 버릇해야지..) 나중에 헷갈려 할 나를 위해 정리ㅎ ESLint npx create-next-app@latest --typescript 1. 난 typescript와 next를 같이 사용할꺼니까 미리 세팅을 해준다.(물론 yarn을 사용해도 된다.) 저렇게 터미널에 치면 프로젝트 이름을 설정하라고 나온다 원하.. TIL-간단한 debounce 1.내가 만난 문제 현재 사용비밀번호를 onchange를 실시간으로 값을 받으면서 현재비밀번호와 입력값이 일치한지 확인하는 함수를 실행시켜줘야했다. 근데 onchange될때마다 함수를 실행하기에는 너무 비효율적이므로 debounce를 사용하기로했다. 2.시도 lodash에서 debounce를 사용했다. debounce를 사용한 이유! : 사용자가 입력하고나서 일정시간 이후에 함수를 실행할 수 있도록 구조를 짜는게 효율적이였다. 입력이 끝나고 나서 0.3초 이후 입력값의 전체를 들고 함수를 한번 실행시킨다. import { debounce } from "lodash"; const debounceFunc = debounce(onChangePassword, 300); //onChagePassword함수를 마지.. 마이페이지 유효성 검사 1.고민 개인정보 수정 버튼이 하나임에 따라 비밀번호를 수정 또는 닉네임을 변경했는지 둘 중에 하나만 되어도 저장이 완료되어야하지만 중간에 수정을 하다가 그만둘 경우(수정이 완료되지 않았던 경우), 현재의 개인정보와 똑같은 정보를 입력하는 경우 버튼의 비활성화가 필요하다. const onChangePassword = (event) => { const currentPassword = event.target.value; setEditUserPassword(currentPassword); signInWithEmailAndPassword(authService, email, currentPassword) .then((userCredential) => { const user = userCredential.user;.. cors 정리 TIL 1.SOP(same-origin-policy) : 동일한 출처에 대한 정책 , 동일한 출처에서만 리소스 공유 가능 => 보안을 위해서 생긴 정책 **동일한 출처? 이 세가지가 동일한 것을 동일한 출처라고한다. 이 출처의 비교를 통해서 차단을 할지 말지 결정을 한다. 그러나 다른 출처에서의 리소스가 필요할 경우가 많기 때문에 cors가 생겼다. 참고사항❗️ 출처비교를 통한 차단은 서버쪽에서하는것이 아닌 브라우저가 한다! 2.CORS(cross-origin-resource-sharing) CORS에러라고했지만 위의 SOP의 해결책으로 나온 것이 cors라고 생각하면된다. 방법 1. client : request시 HTTP헤더에 Origin을 담아 전달한다. *origin: http://localhost:30.. 중간발표 TIL 1.후기 목표한 MVP구현은 어느정도 해결한 거 같아서 다행이라고 생각이 들었다. 다른 팀들이 구현해낸것을 보니까 다들 대단한거같다👍.. 더 노력해야겠다라는 의지가 생겼다. 라이브러리를 그렇게 많이 쓰지 않았는데 필요한부분이 있다면 적극적으로 사용해 볼 경험도 필요하다고 느꼈다. 2. 튜터님 피드백💪 좋은 후기 1) 프로젝트 아이템이 좋다! 일반적으로도 사용하기 좋은 아이템이다. 2) 금융api라 어느정도 금융지식과 api 공부가 필수라고 얘기해주셔서 그 에 대해서 공부한 것.(노션에 api 정리, 금융지식) 3) 최대금리 순으로 나와서 순위가 보여서 사용자 입장에서 선택하기 좋았다. 4) 최적화를 잘했다. 고쳤으면 하는 것 + 팀원들과 피드백에 대한 해결 1) 로고 : 은행 로고 일정하지 않다. => .. TIL 이번주 부터 금요일까지를 목표를 잡고 MVP에 들어갈 기능구현을 시작했다. 시간이 부족해서 마음이 급했다. 원래하고 있던 기능들을 어느정도 마무리하고 다음 작업으로 넘어갔다. 다음작업은 마이페이지다. 파이어베이스로 프로젝트 작업을 하고 있고, 그래서 파이어베이스의 api로 데이터를 읽기 또는 업데이트가 가능했다.🔥 1. 고민 🧐 이러한 형식에서 비밀번호 변경과 닉네임 변경의 버튼은 하나로 수정이 되는데, 파이어베이스에서는 둘의 함수가 달랐다. //Profile update import { getAuth, updateProfile } from "firebase/auth"; const auth = getAuth(); updateProfile(auth.currentUser, { displayName: "Jan.. 데이터가져오기 변경....TIL 원래는 react-query를 사용해서 openAPI를 가져오려고 했으나 그것도 cors에러로 프록시 서버를 끼고 작업을 하고 있었다. query를 실행하면 수시로 데이터를 가져오는데 데이터가 수가 많아서 서버가 자꾸 요청이 많타고 정지되는 경우가 있었다. axios로 한번 가져오면 그 가져온 데이터로 props를 내려서 필요한 데이터만 리스트를 뽑고 있던 상황이였는데 (axios가 불편하진않았다. 실시간으로 데이터가 변경되는 게 아니고 언제 불러와도 같은 데이터이기 때문에 문제가 없다고 생각을 했다.) 더보기버튼을 구현이 생겼고 또 나중에 이 리스트를 눌렀을때 비교할 수 있도록 데이터를 스테이징하는 작업이 필요했다. 그럼 그 제품마다 고유한 id가 있어야하는데 openAPI에는 id값이 없었다 ㅠㅠ 그.. 이전 1 2 3 4 ··· 9 다음
