달콤한 개발 일기

Recoil Library리덕스나 리덕스 툴킷과 유사하게 애플리케이션 내에 상태를 처리하기 위한 라이브러리Atoms와 useRecoilState()에 대한 이해 필요Atoms : 리코일을 통해서 보관하고 싶은 데이터를 의미, 리덕스가 애플리케이션당 하나의 상태를 유지하는 것과 달리 리코일은 여러 개의 Atoms를 만들고 컴포넌트들은 자신이 원하는 상태를 선별적으로 접근해서 사용하는 방식useRecoilState() : useState()의 확장판이라고 볼 수 있으며 useRecoilState()의 파라미터에서 Atoms를 설정하는데 이를 통해서 useState()처럼 애플리케이션 내에 공유되는 데이터를 접근, 변경할 수 있음 [리코일 설치와 설정]npm install recoil설치 후 package...

[useQuery를 이용한 상품 조회]useQuery는 특정 데이터를 조회하고 통신 상태나 결과 혹은 에러 데이터 등을 한 번에 처리할 수 있게 도와줌사용 전에 useEffect로 서버 데이터를 가져온 후에 상태를 변경 ...const ReadComponent = ({pno}) => { // 화면 이동용 함수 const {moveToList, moveToModify} = useCustomMove() const { isFetching, data } = useQuery({ queryKey: ['products', pno], queryFn: () => getOne(pno), staleTime: 1000 * 10, retry: 1, })..

React Query리액트 애플리케이션의 데이터를 크게 내부에서 유지되는 데이터와 API 서버에서 발생하는 외부 데이터로 구분되는데 React Query는 주로 외부에서 만들어진 데이터를 관리하는데 도움이 되는 라이브러리 React Query의 가장 중요한 특징은 데이터를 일정 시간 동안 보관하는 캐싱 기능으로 단순히 데이터를 보관하는 기능이 아니라 일정 시간이 지나면 새로 서버에서 호출하도록 구현할 수 있음 [React Query 설정]npm i @tanstack/react-querynpm i @tanstack/react-query-devtoolsnpm을 통해 React Query 5 버전과 편리한 개발을 위해 devtools도 추가 import { RouterProvider } from "react-..

[리액트 로그인 처리]const loginSlice = createSlice({ name: 'LoginSlice', initialState : loadMemberCookie() || initState, // 쿠키가 없으면 초기값 사용 reducers: { login: (state, action) =>{ console.log("login.....") //소셜로그인 회원이 사용 const payload = action.payload setCookie("member", JSON.stringify(payload), 1) // 1일 return payload }, ..

1. 검색 기능 JavaScript 추가 검색창에 Enter 또는 Go! 버튼 클릭 시 기능이 작동하도록 JavaScript를 추가합니다. 검색 값을 가져오기 위해 input 박스에 id를 지정하고 버튼에 onclick 함수를 부여합니다. 검색 버튼에서 지정했던 searchPost 함수를 구현합니다. search-input을 id로 가지는 input 박스의 값을 가져와서 length로 길이가 1 이상인지 판단합니다. 한글자 이하면 짧다는 알럿을 띄웁니다. 검색창에서 엔터키를 눌렀을 때 위에서 구현한 searchPost 함수를 실행하도록 구현했습니다. jquery를 사용했기 때문에 위의 코드를 추가합니다. 2. 검색을 위한 백엔드 작업 views의 PostSearch로 가도록 url을 설정해줍니다. 1. ..

keydown 키가 눌렸을 때 발생합니다. inputBox.onkeydown = function(event) { console.log(event) } $('#inputBox').keydown(function(event) { console.log(event) }); keypress keydown과 동일하게 키가 눌렸을 때 발생하지만 shift, ctrl과 같은 키는 인식하지 않습니다. inputBox.onkeypress = function(event) { console.log(event) } $('#inputBox').keypress(function(event) { console.log(event) }); keyup 키를 놓을 때 발생합니다. inputBox.onkeyup = function(event) ..

노드란? Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임 노드는 서버 실행 뿐만 아니라 런타임으로서도 사용한다. 서버 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있지만, 서버 애플리케이션을 실행할 때 제일 많이 사용합니다. 서버 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램입니다. 클라이언트 요청을 보내주는 주체로 브라우저, 데스크톱 프로그램, 모바일 앱 혹은 다른 서버일 수 있습니다. 웹이나 앱을 사용할 때 데이터(아이디, 비밀번호, 이메일 등)를 저장하고 클라이언트로 받아오는 것이 서버입니다. 예를 들어 아이디와 비밀번호를 클라이언트에서 입력했을 때 서버에 있는지 요청하고 서버에서 확인하여 응답하는 것이라고 볼 수 있습니다. ..