본문 바로가기

제니의 개발일지/도움이 되었던 것 정리46

[React] TypeScript로 표 만드는 라이브러리 추천 안녕하세요. 제니입니다! 제가 통계 도구를 만들게 된 경험을 공유하고자 블로그를 작성하게 되었어요. 이번에 제가 만들 통계 도구 중 첫 번째인 [표]에 대한 이야기로 시작하려 합니다. 1-1. 어떤 표를 만드냐면.. 말 그대로 표를 만들건데요. 구글링에서 제가 원하는 정보를 이틀 동안 검색해봤지만 얻을 수 없었어요 ㅠㅠ 대부분, 테이블을 만드는 내용을 작성해두셨기 때문인데요! 제가 만들 표는 통계 도구 안에 들어가면서, 표의 데이터가 그래프화가 될 수 있어야하고 도수분포표나 대푯값등, 설정 해야하는 것이 다양하기 때문에 보여지는 테이블이 아닌 표 가로 행이나 열도 추가할 수 있는 기능을 만들어야 했습니다. 정말 열심히 열심히 찾다가 딱 한 개 비슷하게 발견한 라이브러리는 React Datasheet Gr.. 2023. 12. 1.
JavaScript 절댓값 변환 결론부터 이야기하자면 Math.abs(A - B) 형식으로 작성하면 됩니다! 1-1. 절댓값으로 변환하지 않을 때 사실 외울것도 없이, 너무 심플한 내용인데 기록하는 이유는 자꾸 놓치는 부분이 발생되어서 입니다..ㅎㅎ 개발 경험 1년 넘어가고 있다고 구글링이 많이 줄어들었는데 그러다보니, 생각 없이 코드를 짜게 되는 경우가 종종 있다는 걸 요즘 많이 느끼고 있어요. 포인트와 마일리지를 동시에 사용할 수 있는 상황이었는데 포인트가 마일리지보다 클 수도 있고 마일리지가 클 수도 있는 조건이 있기 때문에 처음에 별 생각 없이 이런식으로 코드를 짠 거죠.. 사실 이런 코드가 문제가 되는 건 없다고 생각은 하는데, 문제는 함수가 너~~무 길어지고 조건이 많아질수록 프론트 개발자로는 한 눈에 안 들어오는 코드가 될.. 2023. 11. 23.
[react-calendar] 프로젝트에 달력 적용하기 TypeScript, react-calendar webpack 문제 해결 안녕하세요. 제니입니다! 오늘은 react-calendar 를 프로젝트에 적용한 기록을 남기려고 합니다. 그동안 여러 프로젝트에 적용을 했지만, 할 때마다 미루게 됐었는데요 ..! 이번엔 잘 기록해 두려고 합니다 ㅎㅎ 1-1. react-calendar 라이브러리 // npm npm install react-calendar // yarn yarn add react-calendar 저는 yarn을 사용하기 때문에 yarn add로 라이브러리를 설치해주었습니다. 1-2. 초기 적용 참고: https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/README.md react-calendar의 github을 참고하면 쉽게 적용할 .. 2023. 11. 1.
[React] styled-component 복잡한 스타일 코드 개선 안녕하세요. 제니입니다. 오늘 정리하고 싶은 내용은 복잡한 기능은 아니지만, 프론트엔드 개발자에게 필수 역량이라 할 수 있는 style 관련한 이야기를 하려고 합니다. 최근엔 Chakra UI로도 작업해봤지만, 평소엔 styled-components를 사용하고 있는데요. Chakra UI의 inline style의 장점도 느꼈다가 styled-components로 다시 작업하려고 보니 style 코드가 길어지면서 너무 복잡하더라구요. 사실 코드를 쓴 저는 또 금방 찾기는 하지만, 협업을 하니까 코드가 한 눈에 보이는 게 좋은 것도 있고 또, 저는 열심히 UI를 만들어 놨더라도 동료가 UI가 왜 그렇게 작성되었는지, 또는 재사용이 되었는지 체크를 하지 않았을 경우 UI가 무너지는 현상을 꽤 여러번 겪어서 .. 2023. 9. 8.
[React] 날짜, 시간을 type int 형일 때 unix 타임 스탬프 변환하여 서버에 보내주는 방법 안녕하세요. 오늘은 서버와 통신할 때, int 형으로 날짜 및 시간을 보냈던 기록을 남겨보려고 합니다. 프론트엔드 개발자들 입장으로 시간은 보통 받는 경우가 더 많으니까 예를 들어 createdAt처럼 만든 날짜! 이런식으로 ? 그러다보니 보내주는 경우에 어떻게 해야 할까 고민이 들었습니다. 왜냐하면, 일단 기획에서 만들어진 형태가 이런 형태였기 때문에, 날짜도 연, 월, 일 따로 받아서 넣어줘야 하고 시간도 시, 분을 나눠서 받아주어야 했기 때문에 조금 더 고민이 들었거든요. 물론 state 나눠서 정보를 관리하면 되긴 하지만, 16223344000 처럼 보내야 하니까 그걸 어떻게 보내야 하지? 라는 궁금증이 바로 생겼어요. 안 해봤기 때문에,,! 옙 제가 안 해봐서 열심히 또 구글링을 했습니다. (이.. 2023. 6. 22.
[React] store 사용하지 않고 페이지 이동할 때 정보 저장하는 법(graphQL 사용, useNavigate, useLocation 활용) 안녕하세요! 저는 오늘은 Redux store를 사용하지 않았을 때 정보를 저장해서 다음 페이지에 보내는 법에 대해 고민을 하는 시간을 가졌습니다. 제가 지금 graphQL을 사용하여 구현중인데, 익숙한 Redux를 사용하지 않으니 아주 간단한 기능에서부터 헷갈리는 것들이 있더라구요. 오늘은 그 중, store로 데이터를 저장하지 않았을 때의 상황에서 페이지를 이동할 경우 어떻게 정보를 보낼 수 있는지에 대해 기록하려고 합니다. 1️⃣ useState로 state 관리하기 const [nameValue, setNameValue] = useState(``); state관리하는 것까지는 간단한 과정입니다. 2️⃣ input 스타일링 당연한 거지만, 시작하시는 단계의 계신 분들은 위 내용도 그대로 따라하시는 .. 2023. 6. 21.

티스토리툴바