본문 바로가기

전체 글

(38)

redux-saga #. redux-saga란? redux-saga(이하 리덕스 사가)는 redux의 미들웨어로서 비동기 동작을 실행 할 수 있게 한다. 즉 외부에서 데이터 가져오기(fetch)와 같은 비동기 동작들을 더 효율적으로 실행하고, 쉽게 관리하기 위한 라이브러리이다. 예를 들어, redux의 action이 발생하면 reducer가 액션을 처리하기 전에 비동기 작업을 요청하거나 다른 액션을 발생시키는 등 다양한 작업을 할 수 있도록 미들웨어로 동작한다. #. redux-saga 사용하는 이유 1) 주로 서버에 비동기 요청을 할 때 컴포넌트에서 요청하지 않고 Saga에서 모아서 관리해주기 위해 사용한다. 컴포넌트에서 직접 async/await 문법을 통해 서버에 API 요청을 보내는게 가장 간편하다. 하지만 이러한 ..

mysql 특정 문자 데이터 검색 ** LIKE 연산자는 특정 문자가 포함되어 있는 데이터를 검색할 때 사용된다. 1. 특정 문자를 포함하는 데이터의 경우 SELECT [필드명] FROM [테이블명] WHERE [필드명] LIKE '%특정 문자열%'; 2. 특정 문자로 시작하는 데이터의 경우 SELECT [필드명] FROM [테이블명] WHERE [필드명] LIKE '특정 문자열%'; 3. 특정 문자로 끝나는 데이터의 경우 SELECT [필드명] FROM [테이블명] WHERE [필드명] LIKE '%특정 문자열'; 4. 복수개의 특정 문자를 포함하는 데이터의 경우 (Tip. 위의 경우엔 REGEXP 연산자를 사용하는 것이 더 편리하다) SELECT [필드명] FROM [테이블명] WHERE [필드명] LIKE '%특정 문자열%' OR ..

ios 사파리, 크롬 heigth: 100vh 안될 때 (feat. 이것이 크로스 브라우징인가) 기획자로 일하면서 QA를 여러 차례할 땐 당연하듯 하던 브라우저 별 테스트가 이젠 내가 개발자로 코드치면서는 잊고 있었다 😅 사실 어렴풋이 해야지는 생각했는데 당장 개발 작업이 바쁘니깐 일단 넘겼더니 결국..! 배포 전 테스트 때 화면 레이아웃이 일부 깨졌다 😱 진짜 ios..... 왜 안되는 지.... 한참 구글링 해서 해결한 오늘의 주제...! ios 사파리, 크롬 heigth: 100vh 안될 때의 문제 해결방법을 미래의 나를 위해 기록한다. 이슈 iOS 기기 브라우저에서 100vh 를 브라우저의 도구바 영역까지 잡고 있다고 한다. 그래서 하단에 버튼과 같은 무언가 배치하면 가려서 안보이는 현상이 나타난다. 해결방법 구글링을 해보니 방법은 이러하다. 실제 innerHeight 값을 기준으로 css ..

iwinv 서버에 mysql 파일 옮기기 ( feat. mysql 백업) iwinv를 이용해 서버를 하나 빌렸다. 그리곤 내 프로젝트를 깃허브에 올리고 임대 서버에 clone 하였다. 근데 로컬에 저장된 mysql 파일을 어떻게 옮겨야 될지 몰라서 한참 헤맸다. 그래서 미래의 나를 위해 남기는 메모...! iwinv 서버에 mysql 파일 백업하기...! 🔥 1. 로컬 서버에 있는 mysql 데이터베이스 파일 export 하기. 일단 나는 mysql workbench를 이용했다. 1) mysql workbench에 접속하면 좌측에 Data Export 메뉴 클릭. 2) export할 스키마 즉, 데이터베이스가 보여지고 해당 스키마 클릭. 3) 하단에 Export to Self-Contained File 옵션 클릭. (*이때 파일경로 잘 기억해두기.) 4) 맨하단에 [Start..

git clone 에러 'remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.' 임대 서버에 git clone을 하는데 에러가 났다. 검색을 해보니 뭐 비밀번호 인증 지원이 2021.08.13 이후로 안된다는 내용 같았다. 그래서 결론은 깃허브에 들어가서 토큰이나 ssh 둘 중 하나로 인증을 해야하는데, 생각보다 작업이 어렵지 않았어서 블로그에 내용을 정리해본다. 1. 일단 내 깃허브로 이동 후 아래 이미지대로 이동하자. 토큰 만드는 페이지로 이동하는 건데 은근 한참 찾았다. 2. 해당 Personal access token 페이지까지 이동했다면 그 후엔 아래 링크를 참고하자. 난 이미 토큰을 만들어서 이미지 캡쳐가 어렵네 헤헿ㅅㅎㅎㅎ. 👇👇👇👇👇👇👇👇👇👇 https://docs.github.com/en/authentication/keeping-your-account-and-data..

#7. 회원가입 유효성 검사 (react-hook-form) #7-0 들어가는 말 기존에 작성한 회원가입 폼의 유효성 검사기능을 보완하려던 차에 react-hook-form이 있다는걸 알게 되었다. react-hook-form을 이용하는게 기존 코드의 양도 줄일 수 있고, 좀 더 잘 짜여진 기능을 빠르게 가져다 쓸 수 있을거 같아 한번 적용시켜 보았다. #7-1 react-hook-form 이용후기 먼저 npm install react-hook-form을 하여 설치한 후에 공식 홈페이지(https://react-hook-form.com/kr/get-started/)에 안내된 대로 실행해 보았으나 "Uncaught TypeError: path.split is not a function" 란 에러가 떴다.검색해보니 여러 해결방법 중 react-hook-form 버전을..

#6. 로그인 기능 구현 (1차) #6-0 들어가는 말 이전에 포스팅 했던대로(https://white-salt.tistory.com/26) JWT 방식으로 로그인 기능을 구현해보았다. jwt 개념을 이해하는 것도 조금 어려웠는데 실제로 코드 짜는건 더 어려웠다 (^_^;;). 일단 지금까지 짠 코드를 한번 정리 후 백엔드 친구와 회의를 진행해보자. #6-1 로그인 기능 로직 1. 아이디와 패스워드를 서버로 전송하여 accessToken과 refreshToken 받기. 입력받은 id와 password 값을 서버로 보내면, 서버는 유저확인 후 등록된 유저가 맞다면 accessToken, refreshToken을 발급해준다. (Q1. 이때 발급 받은 refreshToken을 httpOnly cookie로 서버단에서 바로 저장해주고, 이후 클..

#5. 약관동의 체크박스 기능 구현 #5-0 들어가는 말 회원가입 페이지에 들어갈 약관동의 체크박스 기능을 구현했다. 처음엔 왠지 조금 어려울꺼 같아서 일단 혼자 시도해보고 안되면 구글링 해보자 싶었다. 근데 웬걸 성공했다. 콩나물 처럼 나도 조금씩 자라고 있나보다. 뿌듯! #5-1 약관동의 체크박스 기능 설계 1) 전체동의 체크 시 세부항목 3개 모두 자동체크 2) 전체동의 체크해제 시 세부항목 3개 모두 자동 체크해제 3) 세부항목 3개 모두 체크 시 전체동의 자동체크 4) 전체동의 + 세부항목 3개 모두 체크된 상태에서 세부항목 1개 체크해제 시 전체동의 자동 체크해제 #5-2 약관동의 체크박스 기능 구현 1) 체크박스의 checked 속성값인 true / false 를 useState를 이용하여 저장 및 변경함. 2) 기능 1번과 ..

이전 1 2 3 4 5 다음

티스토리툴바