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

객체 지향 설계 원칙(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)- 시간과 공간에 따른 ..

요구사항 분석이란  요구사항 분석이란 소프트웨어의 실제적인 첫 단계로, 개발 대상에 대한 사용자의 요구사항을 이해하고 문서화하는 활동을 의미합니다. 중요한 것은 클라이언트의 요구사항을 분석하여 문서화(명세화) 하는 행위입니다. 이단계에서는 고객이 원하는 요구사항을 정확하게 파악하고, 타당성을 검토하며 비용와 일정을 산정합니다.   구조적 분석 기법  상대방이 말하고자 하는 것, 구현하고자 하는 일은 의외로 어려운 일이라서 요구사항을 명확하게 파악하기 위해서는 문서화가 정말 중요합니다. 자칫 추상적이거나 체계적이지 않은 분석이 이루어질 수 있기 때문이죠. 체계적인 방법론으로 구조적 분석 기법을 들 수 있는데요. 주로 자료의 처리나 흐름을 시각적으로 표현하여 이해하기 쉽게 만들고, 시스템의 기능을 계층적으로..