구어체로 설명하는 다이어리

양방향 제어 슬라이드란?  Swiper의 공식 문서에 따르면 두 스와이퍼가 서로를 제어하는 경우when both Swipers control each other 라고 말하고 있습니다. 즉 첫 번째 배너에서 유저가 슬라이드를 넘기면, 두 번째 배너에서도 슬라이드가 넘어가고, 반대로 두 번째 배너에서 슬라이드를 넘기면 첫 번째 배너도 슬라이드가 넘어가는 경우라고 볼 수 있겠습니다.제 경우에는 이미지 배너가 두 개인 것은 아니었지만 배너가 넘어갈 때 텍스트도 함께 넘겨주고 싶었고 Swiper에서 슬라이드 할 때 fade 효과를 넣을 수 있다는 것을 알고 있었기 때문에, 편의상 좌측 배너 / 우측 텍스트 영역, 이렇게 두 가지를 배너로 만들기로 마음먹었습니다.  그럼 일단 프로젝트에서 Swiper를 다운로드 받..

객체 지향 설계 원칙(SOLID)에 대해서 들어는 봤지만, 각각의 내용을 잘 파악하지 못하고 있던 것 같아 정리해보았습니다. SOLID는 다음의 5가지 원칙의 앞글자를 따서 지칭한 것입니다.  SOLID란...  단일 책임 원칙 (Single Responsibility Principle)개방-폐쇄 원칙 (Open/Closed Principle)리스코프 치환 원칙 (Liskov Substitution Principle)인터페이스 분리 원칙 (Interface Segregation Principle)의존 관계 역전 원칙 (Dependency Inversion Principle) 이렇게 5가지 원칙을 말합니다. 그럼 하나하나 알아봅시다.   단일 책임 원칙  단일 책임 원칙은 하나의 클래스는 하나의 책임을 져..

이슈 파악 과정  서버 측에서 렌더링한 데이터와 클라이언트 측에서 렌더링하는 데이터가 다르면 다음과 같은 hydration error를 볼 수 있는데요.제 경우에는 로컬에서 개발을 마친 후 테스트 서버, 실서버에 배포하면서 이 에러가 시작되었습니다.  처음에는 제 코드에 이상이 있는 줄 알고 코드를 이리저리 수정해 보았습니다만, 잘 생각해보니 로컬 환경에서는 멀쩡히 동작하는데 배포 환경에서만 이슈가 생기는 것이 이상했습니다.또 코드를 만져보며 Day.js를 사용하지 않을 경우 에러가 나지 않는다는 것을 확인했기 때문에 저와 같은 현상을 겪은 사람은 없는지 검색해보았습니다.다행히 금방 찾을 수 있었습니다. 고마워요 구글!  【Next.js】ブラウザのタイムゾーンを変えたら Hydration Error が起きた..

shadcn calendar를 사용할 일이 있었는데 github bugfix가 19시간 전이라 신기해서 찍어두었습니다.기술이 바뀌고 마이그레이션하는 건 늘 있는 일이지만 작업 중 겪고 있는 이슈가 현재진행형으로 해결된 건 처음입니다.    어떤 이슈인가요?  shadcn에서 calendar를 사용하면 빌드할 때 사용하지 않는 props로 인해 lint 에러가 발생합니다.하단은 calendar의 기본 코드입니다. ...components={{ IconLeft: ({ ...props }) => , IconRight: ({ ...props }) => ,}}...  이전 프로젝트를 했을 때는 { ...props } 를 아예 지워 버려 해결했던 기억이 있는데요.같은 이슈로 불편함을 겪은 사람들이 shadcn ..

단계 쪼개기  const orderData = orderString.split(/\s+/);const productPrice = priceList[orderData[0].split('-')[1]];const orderPrice = parseInt(orderData[1]) * productPrice; ▼ const orderRecord = parseOrder(order);const orderPrice = price(orderRecord, priceList);function parseOrder(aString) { const values = aString.split(/\s+/); return { productID: values[0].split("-")[1], quantity: parseInt(v..

여러 함수를 변환 함수로 묶기    function base(aReading) { ...}function taxableCharge(aReading) { ...} ▼ function enrichReading(argReading) { const aReading = _.clonedeep(argReading); aReading.baseCharge = base(aReading); aReading.taxableCharge = taxableCharge(aReading); return aReading;}  배경소프트웨어는 데이터를 입력받아서 여러 가지 정보를 도출하곤 한다. 이렇게 도출된 정보는 여러 곳에서 사용될 수 있는데, 그러다 보면 이 정보가 사용되는 곳마다 같은 도출 로직이 반복되기도 한다. 나는 ..

여러 함수를 클래스로 묶기    function base(aReading) { ...}function taxableCharge(aReading) { ...}function calculateBaseCharge(aReading) { ...} ▼ class Reading { base() { ... } taxableCharge() { ... } calculateBaseCharge() { ... }}  배경클래스는 대다수의 최신 프로그래밍 언어가 제공하는 기본적인 빌딩 블록이다. 클래스는 데이터와 함수를 하나의 공유 환경으로 묶은 후, 다른 프로그램 요소와 어우러질 수 있도록 그중 일부를 외부에 제공한다. 클래스는 객체 지향 언어의 기본인 동시에 다른 패러다임 언어에도 유용하다. ..

매개변수 객체 만들기    function amountInvoiced(startDate, endDate) {...}function amountReceived(startDate, endDate) {...}function amountOverdue(startDate, endDate) {...} ▼ function amountInvoiced(aDateRange) {...}function amountReceived(aDateRange) {...}function amountOverdue(aDateRange) {...}  배경데이터 항목 여러 개가 이 함수에서 저 함수로 함께 몰려다니는 경우를 자주 본다. 나는 이런 데이터 무리를 발견하면 데이터 구조 하나로 모아주곤 한다. 데이터 뭉치를 데이터 구조로 묶으면 데이터..

블로그에는 가급적 공부 관련된 것만 올리고 싶었는데 오늘은 사무실에 흡연자 분들이 꽤 많이 남아 계셔서 버틸 수 없어 퇴근했습니다. 집에 가서 새로운 주제로 공부를 해야 마땅합니다만 폭설 이슈로 쉬어 가고 싶어졌기 때문에 봐주셨으면 하네요…티스토리 오블완 하느라 책 필사 하던 걸 멈추고 오리지널 포스팅을 많이 올려 보고자 했는데 어떠신가요? 괜찮았나요? 내일부터는 오블완도 끝나니 미뤄뒀던 리팩터링 책을 다시 읽어 보려 합니다. 다들 건강하세요. 감기 조심하시구요.

UML이란  UML은 시스템 분석, 설계, 구현 등 시스템 개발 과정에서 시스템 개발자와 고객 또는 개발자 상호 간의 의사소통이 원활하게 이루어지도록 표준화한 대표적인 객체지향 모델링 언어입니다. UML의 구성 요소에는 다음과 같은 3가지가 있습니다. UML의 구성요소사물 (Things)관계 (Relationships)다이어그램 (Diagram)  사물 (Things)  사물은 다이어그램 안에서 관계가 형성될 수 있는 대상들을 말합니다. 사물내용구조 사물 (Structural Things)- 시스템의 개념적 물리적 요소를 표현- 클래스 (Class), 유스케이스 (Use Case), 컴포넌트 (Components), 노드 (Node) 등행동 사물 (Behavioral Things)- 시간과 공간에 따른 ..