Dalin's Archive

상황 설명 🌈 이번 스프린트에 사용자가 송장(invoice)을 신청하고, pdf로 받아볼 수 있는 기능을 추가했다. 나는 인보이스 신청하는 프론트엔드 코드도 작성하고, pdf생성을 위한 html,css를 작성해서 백엔드 개발자님에게 넘기기로 했다. 디자인도 심플하니까 빨리 할 수 있을 것이라고 생각했다. 그.런.데. 생각보다 오래 걸렸다 🥹 디자이너님도 많이 괴롭혔다 🥹 (죄송하고 감사해요...) 웹 브라우저에서 보는 것과 pdf로 뽑은 결과물이 많이 달랐기 때문이다!! 그래도 이번 시간을 통해서 인쇄용일 때는 html, css을 어떻게 작성해야 할지, 무엇을 고려해야 할지 알게 됐다. 엄청 고생하면서 알게 된 것들이라서ㅠㅠ 블로그에 남기려고 한다 ㅎㅎ (pdf로 뽑는 것은 인쇄용과 동일했기 때문에, 인..

요즘 엄청나게 귀찮은 ..; 작업을 하고 있다. 페이지나 컴포넌트, 에러 처리 등에서 직접 문구를 쓰던 것을 i18n을 사용해서 정리하고 있는 것이다. 맨 처음에는 i18n을 적용했었다. 그런데 현재 한 언어만 지원하고(추후 다른 언어도 지원 계획은 있음) 있어서 그냥 직접 작성하기로 한 것이었다. 그랬더니 문구 수정, 번역이 될 때마다 기획/번역하시는 분이 엑셀에 정리하고 이걸 프론트개발자가 또 파일에서 수정해야 하는 번거로움이 있었다. 그래서 다시 i18n으로 정리하기로 했다. 하나 하나 하다보니 무척 번거롭다. 그래도 한번 하면 편리하게 코딩할 수 있겠지~

https://html-css-js.com/css/generator/box-shadow/ Box Shadow CSS Generator Set the properties of your box shadow to get the CSS style. Use the sliders and the color picker to set the values and watch the live preview html-css-js.com https://cssgenerator.org/box-shadow-css-generator.html Box Shadow CSS Generator A box-shadow CSS Generator tool to quickly generate box-shadow CSS declarations. cssg..

상황 🌈 개발을 하다가 span에 click event를 추가해야 하는 상황이 있었다. /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */ ... hello 린트 에러 때문에 위에 린트 규칙을 무시한다는 문구를 써야 했다ㅠㅠ 내가 무시한 규칙들.. jsx-a11y/click-events-have-key-events : click event 를 가지면 key event가 필요하다는 규칙 : 마우스 없이 키보드만 사용하는 사람. 스크린 리더 사용자에게 필요함. 참고 sx-a11y/no-static-element-interactions : span은..

보호되어 있는 글입니다.

오늘 TS의 as를 사용했다가 사용하지 않는 게 좋다는 코드 리뷰를 받았다..!! as를 종종 사용했는데.. 전혀 사용하지 않으려고 하니 밑줄이 자꾸 자꾸 생겼다. TS를 공부해야겠다는 생각이 들던 중에 전에 다른 분의 회고 글에서 봤던 https://github.com/type-challenges/type-challenges 가 떠올렸다. 도전~ 위 깃허브에 들어가면 아래와 같이 문제들이 나온다. 문제 태그를 클릭하면 문제 설명이 나온다. Take the Challenge를 클릭하면 문제를 바로 풀어볼 수 있게 playground로 이동한다. your code here 부분의 코드를 수정해서 아래 test case 코드의 에러를 없애면 된다! 다른 사람들의 풀이를 볼 수 있고, 본인의 풀이도 공유할 수..

올해 첫 업무 분담을 했는데 일부 컴포넌트에 컴파운드 패턴 적용하는 걸 하기로 했다! 리액트도 두 달 정도 만에 사용하고, 컴파운드 패턴을 적용해본 적은 없어서 리액트 컴파운드 패턴을 알아봤다. 그리고 끄적끄적.. 메모를 남긴다. '요구되는 기능을 수행하기 위해 두 개 이상의 컴포넌트가 협력하는 형태' (https://so-so.dev/react/design-system-decision-record/ 중 ) 만약 같은 기능을 하나의 컴포넌트로 해결한다면? 그 한 컴포넌트에 prop을 모두 넘겨야 하고, 복잡해질 수 있다. 이 패턴을 사용하면? 실제 prop이 사용되는 컴포넌트에 전달해서 동작을 예측하기 쉽고, 코드도 이해하기 쉽다. select 안에 option을 사용하는 예시를 생각하면 된다. UI 프..

며칠 전, 마우스 클릭과 드래그를 구분해야 했다. 리스트가 있는데, 클릭했을 때는 상세 정보로 이동하고 드래그해서 텍스트를 복사하고 싶은 상황이었다. 기존에는 click event가 있으면 상세 페이지로 이동하게 해서, 드래그를 하고 싶어서 상세 페이지로 이동했다. 마우스 이벤트를 찾아보니 click 이벤트만 있는 게 아니라 다른 것도 있었다. 그것들을 활용하니 클릭과 드래그를 구분할 수 있었다. (아래 링크들은 MDN 사이트) mousedown event : 요소 안에서 포인터가 눌렸을(press) 때 발생 mousemove event : 요소 안에서 포인터가 움직일 때 발생 mouseup event : 요소 안에서 포인터가 release 될 때 발생 click event와 차이점 : 클릭 이벤트는 f..

오랜만에 개인 프로젝트를 만들어보고 싶어졌다! 사실 항상 하고 싶기는 했지만 시간과 힘이 없었다ㅠ 지금도 많지는 않지만, 계속 미루면 절대 못할 것 같아서 시작해보려고 한다~ 요즘 크리스마스 어드벤트 캘린더에 관심이 많다. 12월 1일~24일까지 하루 하루 크리스마스를 기다리면서 간식을 하나씩 꺼내먹는 것이다. 너무 몽글몽글하고 좋다 ㅠㅠ 사이트로도 비슷한 느낌을 낼 수 있을 거라는 생각이 들어서 만들고 싶어졌다. 크리스마스 분위기의 예쁜 디자인..! 백엔드는 지금은 없으니 더미 데이터로라도 초콜릿스러운 것을 넣어두고, 예쁜 상자 안에서 하루 하루를 클릭하면 상자가 열리고 뭔가 나온다든지..!! 아직 구체적인 생각은 없지만..ㅎㅎ 블로그에라도 써두면 열심히 하지 않을까...ㅎㅎ 어제 한 일 : 일단 gi..

백엔드 분들께 프론트엔드 질문 받으면서 나도 다시 한번 본 부분들이다 ㅎㅎ 질문 받으면서 나도 확실히 정리할 수 있어 좋다 :) Q. javascipt에서 0, '' 은 true로 취급하고 null, undefine만 false로 하고 싶은데 좋은 방법 있나요? https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator Nullish coalescing operator - JavaScript | MDN 널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. develope..