개인적으로 티켓은 아웃풋과 아웃풋을 실현시켜주는 사람을 잇는 매개체라고 여기는데요.티켓 내용이 얼마나 잘 작성되었는지에 따라 개발 과정과 결과물의 퀄리티가 달라집니다.아래의 티켓을 보고 모두 동일한 생각을 할 수도 있지만, 그렇지 않은 경우도 분명 발생할 수 있습니다. [티켓 수정 전]해당 티켓을 보고 ‘아, 저 기능이나 디자인에 수정이 필요하구나!’ 라고 생각하는 사람이 있는가 반면‘저런 디자인이나 에러가 있다는 건 알겠는데, 그래서 뭘 하라는거지?’ 라고 생각하는 사람이 존재합니다.그렇기에 티켓명과 그 내용은 무엇을 원하는지, 어떤 처리가 필요한지 명확히 작성할 필요가 있다고 판단했습니다. [티켓 수정 후] 수정 전의 티켓보다는 목적이 무엇인지, 어떤 내용인지가 명확해졌습니다.이처럼 사람은 같은 단어..

한창 일을 하던 중, 법률 자문을 바탕으로 한 기획 내용 변경으로 제가 담당하는 파트 중 하나인 회원가입에 내용 추가가 이뤄지게 되었는데요, 그 중 하나가 미성년자 가입 불가 관련 표기였습니다. 해당 내용이 추가되기 전에는 react-hook-form을 사용해 회원가입의 데이터를 관리했는데요. 미성년자 가입 불가 항목도 처음엔 react-hook-form을 사용하여 한 번에 처리하려 했습니다. 그러자 문제가 발생했습니다. 문제 발생 react-hook-form을 사용할 시, 해당 context에 해당된 모든 form-data들이 onSubmit event에 등록되어지고, onSubmit 내부의data가 그대로 api에 전달되어지게 됨으로서 서버에 전달되지 말아야 할 19세 이상 체크 표기 상태(= adu..

useRef와 setInterval, clearInterval가 사용된 기능의 타입을 지정하던 중, 현재 ref에 대한 타입 에러가 발생했습니다. 이전 코드는 any로 작성되어있었지만 명확한 타입 설정에 대한 필요를 느꼈거든요. const exampleRef = useRef(); 문제 해결 시도 저의 경우엔 ref를 number로 사용하고 있었기에 number 타입을 설정해주었는데요. ref의 current가 타입 에러를 발생시키는 것을 확인할 수 있었습니다. const exampleRef = useRef(); 처음에는 ref가 number 타입만을 취급할 것이라 예상해 number | undefined 등의 여러 설정을 시도하다 아무래도 setInterval과 연관이 있겠다 생각해 구글링을 통해 서칭했..

Next.js에서 D3 라이브러리로 도형을 그려내던 중 이상한 점을 발견했는데요.제가 작성한 요소는 사각형, 원, 선,텍스트 4개였는데 이보다 많은 요소가 화면에 출력되고 있었습니다.문제의 코드import React, { useEffect } from "react";import * as d3 from "d3";const Lesson02 = () => { useEffect(() => { const canvas = d3.select(".canvas"); const svg = canvas.append("svg").attr("width", 600).attr("height", 600); const group = svg.append("g"); group .append("rect") ..

기능 구현 중 input에 들어간 value가 없다면 아무런 에러 메시지를 보여주지 않고 input에 value가 있는데 정규표현식에 위배된다면 에러 메시지를 보여주려고 했습니다. 처음엔 기존 코드에서 사용되었던 matches()의 내부에서 if문으로 기능을 구현하려 했으나 matches()의 사용법에 맞지 않아 실패했는데요. 알고보니 matches()는 첫 번째 인자로 정규표현식을, 두 번째 인자로 조건에 따른 텍스트를 넣어주는 것으로 지정되어 있었습니다. matches(정규표현식 조건, '조건에 맞지 않을 시 노출되는 텍스트') // 예시 코드 phoneNumber: yup .string() .matches(REGULAR_EXPRESSION.example, '형식 오류입니다.') .required()..

서비스에서 사용되는 메서드 중 특이한 map인 flatMap을 발견하여 정리하고자 합니다. 보통 map을 사용해 새로운 배열을 리턴받는 것만 보아왔는데, flatMap을 사용해 새로운 배열을 리턴받는 것을 보고선 문득 둘의 차이가 궁금해졌습니다. 무슨 차이가 있는걸까요? 특징 map() 메서드는 원래의 배열 구조를 유지한 채로 새로운 배열을 반환합니다. 예시: let arr = [1, 2, 3]; let newArr = arr.map(x => [x * 2]); console.log(newArr);// [[2], [4], [6]]. 새로운 하위배열을 포함하는 형태로 반환 flatMap() 메서드는 추가적으로 한 단계 깊이까지 평탄화(flatten) 작업을 수행하며 새로운 배열을 반환합니다. 예시: let ..

1. event type으로 any를 넣는다라.. TypeScript를 처음 접할 시 input이나 form event에 어떤 타입을 지정해야할 지 몰라 무지성 any를 지정할 때가 있었을 겁니다. // 코드 수정 전 const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); // e의 type으로 any를 설정 const handleSubmit = (e: any) => { console.log(e); // 다들 알고계시겠지만 form 제출 시 페이지 새로고침을 막기 위해 e.preventDefault()를 추가했습니다. e.preventDefault(); }; return( React Input Test! s..

Recoil이란 무엇인가 궁금했다 막연히 클라이언트 상태 관리 라이브러리로만 알고있었다. 하지만 recoil은 react와 닮았다는 것을 아래의 예제를 보며 알게 되었다. 그래서 react 유저라면 사용이 쉽다고 다들 이야기를 한 것이었다. //React의 useState Hook const [state, setState] = useState(); //Recoil의 상태 문법 const [state, setState] = useRecoilState(); 위와 같이 react에서 state를 사용할 때와 동일하게 사용하면 된다. 대신 추가 해줘야 하는 설정이 있는데, 전역에서 사용하는 라이브러리이니만큼 RecoilRoot와 Atom, Selector를 만들어줘야 한다. Atom과 Selector 1) At..