Enjoy Programming

회사 프로젝트가 거의 마무리 되어 간다. 일단 베타 런칭은 시작되었고 요즘은 업데이트 및 수정보완 과 새 기능을 추가 하고있다. 이제 곧 다른 서비스 개발도 준비를 해야하는데~~~ 일이 늘어난다 ㅋㅋ 간만에 포스팅인데 뭘 할까 하다가 그냥 가장 지저분 해 보였던 회원가입 validation error 로직 수정을 살짝 다뤄 볼까한다. 일단 서비스 법인 회원 가입의 경우 각종 중복확인 및 validation이 엄청 많다. 유저가 기입할 필드만 13개 정도 되니까.. 거기다 국세청 api를 통해 사업자 인증도 진행 한다. 위에 이메일 에러 로직의 일부만 발췌한 것인데.. 저게 다가 아니고 setError까지 하면 엄청많은 error 가 띄어진다.. 코드가 너무 조잡하다... 기획에서도 모든 error를 보이..

회사 프로젝트 중 필자가 게시판을 전담해서 맡아서 완료했는데 아직 미완성인 부분이 임시저장 기능과 글 수정 기능이었다. 그동안 다른 파트 회원가입 마페이지 운임제 조회 등등 기능을 만드느라 뒤로 미뤄왔는데 이제 곧 런칭이라 급하게 수정기능을 만들었다. 기존에 고민이었던 부분은 수정페이지를 url을 하나 더 만들어서 하느냐 아니면 해당 페이지에서 컴포넌트 전환으로 만드느냐를 고민했는데 게시판이 많다보니 각 게시판마다 수정페이지를 만드는 것은 router가 지저분해 보여서 그냥 boolean state하나로 수정 버튼 클릭시 기존 board write를 재활용해서 보여주는 것으로 대체했다. 그리고서 board detail에서 받은 postdata와 수정 취소 setStateAction을 props으로 전달해..

이번 포스팅은.. 한 이틀 필자를 너무 힘들게 했던 quill editor를 포스팅한다. quill은 text editor중 참 많이 사용을 한다고 해서 회사 프로젝트에서도 적용하기로 하였다. 그런데 느낀점은 그냥 시간이 걸리더라도 editor하나 만들어 쓰는게 낫겠다 라는 생각이 들었다. ㅎㅎㅎㅎ quill에 대한 설명은 패스하고 겪었던 문제인 이미지 업로드 방식에대해서 알아보자. 자 위 사진의 아래 테스트 창이 editor 부분이다. 그ㅡ리고 커스텀 툴바중 오른쪽에서 두번째! 저기가 이미지 업로드 인풋이다. 자 뭐가 문제인가! 하면 quill에서 이미지를 업로드하고 value를 얻어오면! 이렇게 html 형태로 나오게 된다. 뭐 다시 뿌려줄때 저 형태로 뿌려줄 수 있으니 상관없다 서버에 저렇게 저장하..

이번엔.. 그동안 계속 알아봐야지 하던 useContext를 조금 알아보자. 먼저 프론트엔드 개발을 하며 상태관리는 필연적인 요소이다. 어떻게 하면 더 직관적으로 상태를 소실하지 않고 여러 컴포넌트에서 잘 사용 할 수 있을까.. 필자는 현재 apollo 를 사용하다 보니 redux를 사용하지않고 캐싱을 주된 store로 이용하고 있다. 그런데 이게 좀 어렵긴 하다. fragment를 해주고 cache를 modify하는 작업들이 뭔가 쉽진 않다. 이게 backend에서 어떻게 schema를 구성해주느냐에 따라서도 영향을 미치기 때문에.. 일단 현재 필자가 사용하는 apollo caching을 한번보면 먼저 graphql서버로부터 유저의 프로필을 받아오는 hook을 하나 만들어서 통신을 한다. fetchPo..

프로젝트가 타이트 해서 개발하느라 블로그를 오랜만에 작성한다.. 틈틈히 하려고 하는데 ㅠㅠ 아직 skill이 부족한 탓이지.. 오늘 포스팅은 현재 프로젝트에서 겪은 이슈중 하나인 firebase idtoken이 1시간이 만료인 터라 background에서 주기적으로 refresh를 해줘야 하는 문제가 있었다.. 먼저 맡겼었던 외주쪽은 아에 해결을 못하고 그냥 백에서 인증하라고 했었다가.. 결국 외주와의 관계를 끊었다.. (뭐 이것 뿐만이 아닌 베타를 위해 외주를 맡겼는데 베타테스트도 못할 정도로 마무리를 해놔서 결국 필자가 진행하고 있는 프로젝트로 런칭을 가기로 결정이 났다) 자 본론으로 들어가서 해결한 방법만 빠르게 기술하자. 현재 로직은 이렇다. graphql 서버에서 firebase custom t..

project 진행중 인증 유효시간을 구현중 문제가 생겼다... 시간 state를 로컬스토리지에서 사용하려고 window.localStorage를 사용하려고 했는데 이게 왠걸 useEffect안에서는 사용이 되는데 state안에서는 사용이 안되는 것이다;;; 검색을 해보니 nextjs에서는 먼저 server side가 랜더링되고 그 이후 client side가 랜더링 된다. 당연히 server side에는 window객체가 없다. 그래서 window 나 document 객체는 componentDidMount 내에서 실행해 줘야 하는 것이었다. 그래서 useEffect에서는 발동을 하지만 먼저 선언해버리면 안되는 것이었다. 자 해결을 해보자... 여러가지 시도를 하던중.. 아직 nextjs는 제대로 문서를..