input type='file' 파일업로드 버튼 꾸미기 파일찾기 label 태그와 input 태그를 먼저 연결 시킨다. input 태그에 id값을 지정하고, label 태그에서 for로 지정한 id값으로 설정하면 된다! 기존에 설정되어있는 첨부하기 버튼을 없애기 위해서 css를 적용한다. position은 필요할 경우에 지정하면 된다! position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; 그리고 label에 css를 적용한다. font-size: medium; font-weight: 400; display: inline-block; padding: 10px 20px; color: #000; background-c..
📌리액트 체크박스 만들기 원하는 결과물 새로운 게시물 등록할 경우에는 영업일을 체크박스로 선택하고 값을 넘겨주도록 만들고자 했다! 등록된 게시물을 수정할 경우에는 게시물 등록 때 체크한 값은 이미 체크되어 있는 상태로 보여주고자 했다! 📌label 태그와 checkbox onChangeHandler(e)} /> {day} label 태그로 감싸진 checkbox는 label을 눌러도 체크가 된다! 체크박스를 보이지 않게 할 것이기 때문에 ( appearance: none ) 마치 label 자체를 체크박스 처럼 사용할 수 있다. 그래서 체크가 되었을 때와 안되었을 때 label의 background-color를 다르게 지정해주고자 했다. 문제점 background-color: ${(checked) => ..
문제를 보고 일단 풀이 방법을 이 순서로 정해보았다. 주어진 배열에서 중복되는 숫자를 없앤 배열을 만든다. 새로만든 배열을 반복문을 수행하면서, 원래 배열과 같은 숫자일 때 count를 ++한다. (각각의 숫자가 배열에 총 몇 개씩 들어있는지 세는 것!) 제일 큰 count를 구하기 단, 제일 큰 count가 2개 이상일 경우 answer에 -1 넣어주기 제일 큰 count를 가진 수가 어떤 숫자였는지 찾아내기 처음 풀이 function solution(array) { var answer = 0; const newArr = [...new Set(array)]; const count = []; for (let i = 0; i < newArr.length; i++) { count[i] = 0; for (co..
Material UI - TextField는 input 태그 api이다. TextField api안에는 error props가 있다. error인 경우에 input 창을 테두리를 빨간색으로 표시해 주는 기능이다. 이렇게 error 조건이 false가 되면 빨간 색상이 사라진다. input창 아래에 있는 것도 props로 사용할 수 있는 것인데, helperText로 사용하면 된다. kcal 분 위의 방식처럼 error ={ 조건식 } 으로 작성해서 사용할 수 있다. true나 false 값으로 return 되는 것이면 된다! helperText에는 문자열을 직접 넣어도 되고, return값이 문자열인 함수를 넣어도 된다. 그래서 회원가입의 경우 유효성 체크 조건이 조금 더 복잡하기 때문에 error와 h..
sessionStorage에 token 저장하기 useEffect(() => { // auth.onAuthStateChanged(async (user) => { auth.onIdTokenChanged(async (user) => { if (user) { const token = await user.getIdToken(); const userId = user.uid; dispatch(getUser(userId)); sessionStorage.setItem("accessToken",token); setIsLogin(true); } else { dispatch(getUser(null)); setIsLogin(false); } }); }, []); const checkTokenExpiration = async ..
React Query json-server에 데이터 업데이트 하기 (patch) 내가 만들고자 한 기능은 작성한 게시물을 수정하는 기능이었다! 입력한 값을 모두 받아서 수정함수에 전달할 것이지만 put을 사용했을 경우 전달되지 않은 필드는 삭제된다고 한다. 그래서 전달되지 않은 필드가 있더라도 필드를 유지하도록 하기위해 patch를 사용했다.\ id와 password, date 필드는 게시글을 처음 작성한 시점부터 변경되지 않고, 유지되어야 하는 정보이기 때문에 수정된 전달 내용에 포함되지 않을 것이므로 patch가 적절하다! 해당 내용은 아래의 블로그를 참고했다! https://redux-advanced.vlpt.us/3/01.html 3-1. json-server 이해하기 · GitBook 3-1 j..
React Query thunk는 보일러 플레이트 코드량이 많고, 비동기 데이터 관리가 어렵다. 그에 비해 Query는 쉽고 직관적이게 사용할 수 있다는 장점이 있다. Query : 데이터에 대한 요청 Mutation : 데이터를 변경 Query Invalidation : Query를 무효화 시키는 것 패키지 설치 yarn add react-query 가장 상위의 컴포넌트인 App.jsx에서 QueryClient를 불러와야 한다. 데이터를 읽어오는 기능을 App 전체에 주입하는 과정이다! const queryClient = new QueryClient(); 데이터 서버는 json-server를 사용할 것이고, 데이터를 불러오는 api는 axios를 사용할 것이다. axios api관련 내용을 전부 넣어놓..
Axios axios는 node.js와 브라우저를 위한 Promise 기반 http 클라이언트이다. 즉, http를 이용해서 서버와 통신하기 위해 사용하는 패키지이다. yarn add axios 패키지를 다음과 같이 설치하면 바로 사용가능하다! GET, POST, PATCH, DELETE 등 메서드가 있다. axios.get('url') axios.post('url', todo) axios.delete(`url/${id값}`) 위와 같은 방식으로 사용할 수 있다. Axios Interceptor instance.interceptors.request.use( function (config) { // 요청을 보내기 전 수행 console.log("인터셉트 요청 성공!"); return config; }, f..
