Enjoy Programming

간만에 html tag 를 기록한다. 기존 개발시에 게이지 바 같은 폼을 만드려면 주로 input tag를 custom 해서 쓰거나 빈태그 두개를 css만 주고 채워질 게이지의 width만 prop으로 전달해서 눈속임의 게이지 바를 만들었었다. 오늘 새로운 태그를 하나 알게 되었는데 혁명이다... https://developer.mozilla.org/ko/docs/Web/HTML/Element/progress - HTML: Hypertext Markup Language | MDN HTML 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다. developer.mozilla.org 바로 progress tag! 작업의 완료 정도를 value로 전달하고 max치만 조절 해주면 알아서..

개발 공부를 하며 한번씩 접하는 fork 라는 단어.. fork한... 이게 뭔 말이야 싶어 mdn을 뒤적였더니 나왔다.. Fork는 프로젝트에 누군가의 자신의 수정 사항을 추가하기 위한 어떤 시점에 있는 기존 소프트웨어 프로젝트의 사본!이라고 한다. 기본적으로, 만약 소프트웨어의 라이센스가 허가한다면, 코드를 복사하여 자신의 추가사항을 가지고 그 코드를 개발할 수 있는데, 이것이 fork가 되는 것이다. fork는 무료 오픈소스 소프트웨어 개발에서 볼 수 있고 이는 Git을 사용한 기여 모델 덕에 더 많이 사용되는 용어이다. 또 검색해보니! 비슷한 내용이긴 하나 프로그래밍의 관점으로 서술한 내용이 있어 끄적여 보면 fork 함수는 원래 실행되던 프로세스의 복사본을 만드는 함수이다. 최초의 프로세스를 부..

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

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

최근 같은 프론트 개발자 동료가 데이터 필터를 하는데 어려움을 겪고 있어서 무언가 봤더니 두개의 array를 비교해서 정확히 같은 값을 가질때만 callback을 하고싶다고 하는 것이다.. 음 한번 만들어보자 싶어서 만들어 봤다. 먼저 bool이란 함수를 하나 만들어서 비교군이 될 arr2와 기준이 될 array의 개별 요소 인자로 받아준다. 그리고 arr2에 해당 item인자가 있는지 확인하고 없으면 false를 반환하고 있다면 true를 반환한다고 해준다. 그리고 실제 체크를할 함수를 하나 더 만드는데 여기에는 각각의 array가 인자로 들어가게 된다. 그럼 기준이 되는 array 를 map을 이용해 bool함수에 대입해주고 비교 대상을 인자로 넣어준다. 아 그리고 정확히 같으려면 위는 빠졌으나 각각..

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