crabLab

다시 돌아가서 인증방식에 대해 다시 생각해보자. http 통신은 header에 요청에 대한 정보(인증 토큰)가 들어간다. jwt방식은 서버가 클라이언트로 부터 받은 ID와 Password가 맞는지 확인하고 맞으면 JSON Web Token이라는 긴 문자열을 브라우저에 전송해준다. JWT의 TOKEN을 만들기 위해서는 Header, Payload, Verify Signature 이렇게 세 가지가 필요하다. Header : 이 세 가지 정보를 암호화 할 방식, 타입 등이 들어간다. Payload : 서버에서 보낼 데이터가 들어간다. 일반적으로 유저의 고유 ID 값, 유효기간 등이 들어간다. Verify Signature : Base64 방식으로 인코딩한 Header, Payload 그리고 SECRET KEY..

axios에 대해 알아보자. axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다. (Promise API는 나중에 다시 정리할 수 있도록 하자.) 더 쉽게 설명하면 프론트랑 백이랑 통신할때 사용하는 라이브러리이다. 자바스크립트에는 fetch api가 기본적으로 있지만 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 Promise(ES6) API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 와 같은 이유로 axios를 더 많이 사용한다. 나는 지금까지 그냥 다른 레퍼런스 코드들이 axios를 사용해서 따라 똑같이 사용해왔었는데..(아..

들어가는 글 항해99를 할 때 나 나름의 도전과제가 있었다. 그것은 바로 refresh token! 반에서 잘하시는 분이 이것을 도전해서 어찌저찌 성공하셨고 그 후에 나도 어찌저찌 성공했었지만 너무 얼렁뚱땅이었다.. 이번에 다시 도전하게될 기회가 생겨 구현해봤고 전보다는 나 나름대로 만족할만한(적어도 이해는 되는)코드가 나왔기에 포스팅을 해본다. 그전에 배경지식으로 http와 인증의 세가지 방식을 먼저 들어간다. 인증의 구현의 세 가지 방식 인증 구현은 크게 세션, JWT, OAuth가 있다. 전에 항해할때는 백엔드리더가 우리 세션으로 한번 해보죠! 라고 해서 해봤는데 이해가 잘 안됐어서인지 백엔드에서 문제가 생겨서 인지 잘되지는 않았고 JWT 방식으로 돌아왔던 경험이 있었다. 그 경험때문인지 이번에 세..

팔레트 라이브러리 나의 경우 React Color를 사용했다. 제일 사용자가 많았고 레퍼런스도 좋았으며 우리가 추구하는 팔레트 기능과 모양에 가장 부합했다. React Color는 유저가 선택한 컬러를 hex코드로 변환한다. hex코드? 문제없네 아니 당연히 문제가 있다. 지금 하려고 하는 건 실시간으로 색상이 변해야 하는 것이다 중요한건 단색 div의 백그라운드 컬러를 바꾸는게 아니라! 이미 있는 이미지의, 실생활 사진의 이미지의 색상을 전부 자연스럽게 바꿔주는 것이다. 이때 hex코드를 그대로 쓴다는 건 svg시절로 돌아가는 것과 마찬가지이며 이미지마다 들어간 색상들을 찾아내 그 색상들을 하나하나 계산해서 넣어줘야한다. filter 결과적으로 필터를 써야만한다. 그렇다면 어떤 필터를 써야 할까? 제일..

??은 답을 알고 있다. 기록을 남긴다는 것은 여러모로 참 좋은 행동이다. 왜냐면 이번에 이 기록을 통해 이번 해결법의 핵심 키워드를 잡았으니까! 그렇다면 ??은 무엇일까? 정답은 “나를 제외한 모든 사람들” 이다. 하하하.. 디자이너분들은 답을 알고 있다. 내 생각에는 디자이너님들의 아이디어에서 출발한 것 같다. 포토샵에는 서로 다른 요소(ex.레이어)를 겹쳐서 색상에 대한 효과를 주고 싶을 때 블렌드 모드라는 것을 사용해서 그 효과를 준다고 한다. 이걸 css에서 사용하면 이런 느낌인데 이것을 이용해서 우리가 바꾸고자 하는 이미지 하나와 그 이미지의 배경이 될 단색 이미지 하나 총 두 개를 겹쳐서 css의 필터값을 이용해 색상을 변경하면 해결완료이다! 박사님은 답을 알고 있다. svg를 파며 한참 삽..

구현해야 하는 목표 보기와 같이 유저가 파레트를 이용하여 색상을 자유롭게 고르면 그 색상이 우리의 사진에 실시간으로(!) 적용되어 미리보기를 할 수 있어야 했다. 구상 처음 기획을 받았을때는 솔직하게 “이게 말이돼?” 라는 생각과 함께 분명 다른 방법이 있을꺼야 서버를 경유한다거나 특정 전용 라이브러리가 있다거나 하는 생각을 했다. 하지만 마음 한편에는 구현할 수 있으면 진짜 대박이겠다 라는 생각도 했다. 그런 와중에 주위의 다른 기획자분께서 cto님께서 이 부분을 진행중에 있고 코드로 구현한다는 말을 들었다. 그때 머릿속을 딱 지나가는 게 아! svg는 vscode상에서 코드로 볼 수 있으니까 거기서 색상 관련된부분을 css in js 로 제어할 수 있다면 불가능한 일은 아니다! 라는 생각이 들었다. ..

작업을 하다보면 스타일링을 할 때 주로 쓰는 방법이 몇 개 정해져 있다. 자주 쓰는 방법이지만 쓸때마다 레퍼런스를 참고하고는 한다. 이번에는 이런 방법들을 한 번에 모아서 정리해보기로 했다. props in styled-components css in js의 대표격인 styled-components의 장점 중 한가지는 jsx상에서 props를 주면 그거에 맞춰서 조건부로 스타일링을 할 수 있다는 점이다. 이번에 요긴하게 사용한 부분은 유저의 선택에 따라 미리보기 화면에서 특정 버튼의 위치가 바뀌어야 하는 부분이었다. 이걸 만들기 위해서는 // 유저의 선택에 따라 변하는 상태 rightState를 만든다. const [rightState, setRightState] = useState("50px"); //..

중복검사 앞서 onBlur에서 호출한 onClickIdDup에서 idChecker를 통해 공백과 정규식 검사를 통과했다면 다음은 중복검사이다. 중복검사는 서버와의 비동기통신을 통해 검증하면 된다. 나의 경우는 redux-toolkit을 사용했다. 우선 get요청으로 서버에 쿼리스트링으로 이메일을 보내준다. 이 경우 나는 input의 velue가 전달되는 쿼리스트링 값이다. dispatch(__duplicate_check(id)); /duplicate_check?member_id=${encodeURIComponent(member_id)} 이때 이런식으로 encodeURI를 사용해주면 이메일의 경우 @이나 .의 특수문자를 오류없이 잘 보낼 수 있다. 이제 slice에서 initialState에 checkId..

포커스 아웃시 유효성 검사 요즘의 웹서비스들은 따로 중복검사 버튼을 누르지 않아도 유저의 포커스 아웃(기입칸외의 다른 곳을 클릭)시 유효성 검사를 하게 되어있다.(과거에도 많이 그랬다면.. 할 말은 없다) 이것을 구현하려면 기본적으로 input 태그의 onBlur속성을 알아야 한다. onBlur onFocus가 input창이 포커스되었을 때 호출할 함수를 사용한다면 onBlur는 input창이 포커스아웃되었을 때 호출할 함수를 사용한다. 이런식으로 사용한다면 포커스아웃 될때마다 onClickIdDup이라는 함수를 호출하며 유효성 검사를 할 수 있다. const onClickIdDup = useCallback( e => { e.preventDefault(); if (!id.trim()) { setIdTri..

회원가입 기능 웹 서비스를 만든다면 제일 처음에 만드는 기능은 회원가입이지 않을까 싶다. 다양한 회원가입 형식들이 있지만 이번에 내가 사용한 방식을 작성해보고자 한다. 우선 기입사항은 아이디(이메일), 비밀번호, 비밀번호 확인 이렇게 3가지의 기본형태이다. 커스텀 hook 회원가입과 로그인에 사용되는 input은 꽤나 자주 같은 방식으로 사용되기에 useInput이라는 hook을 만들어 관리하면 편하다. 여기서 크게 짚고 넘어갈게 두가지 있는데 하나는 구조분해할당, 다른 하나는 useCallback이다. 구조분해할당 구조분해할당은 객체나 배열을 변수로 ‘분해’할 수 있게 해주는 특별한 문법이다. 따라서 사용할때 const [id, onChangeId] = useInput(""); 을 하면 useInput..