프론트에서의 SOLID를 이해해보자

카카오 FE 기술 블로그의 SOLID 관련 글을 읽다가 이해가 잘 안 되어서 직접 구현해보면서 이해한 바를 토대로 글을 써보고자 합니다. 아무래도 구체적인 코드보다 큰 그림에서의 코드를 통해 설명을 해주셨기 때문에, 아직 초보인 저로써는 직접 구현하며 더 이해하고자 하였습니다. (그리고 예시 코드보다 허접하며, 빠르게 구현 원리를 확인만 하려고 했기 때문에 최대한 단순화했습니다) 먼저, SOLID의 "I"와 "D"는 각각 "Interface Segregation Principle"와 "Dependency Inversion Principle"의 앞글자를 딴 것입니다. 한국어로 번역하면 인터페이스 분리 원칙과 의존성 역전 원칙이죠. 저도 많이 들어봤고, 예시도 몇 차례 보면서 눈과 머릿 속에서는 이해가 된 ..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 3. 28.
• textsms

항해 플러스 WIL - 2주차

항해 플러스 2주차를 끝내면서 생각해 뒀던 점들을 기록해보고자 합니다. 일단 3주차 수업을 들으러 가진 못했기 때문에 아쉬움이 남습니다. GPT에게 주간회고록을 어떻게 쓸까 물어봤는데, 주요 성과, 감사할 점, 자기 발전(도전과 극복), 피드백, 차기 목표 순으로 추천을 해줘서 이를 활용해보고자 합니다. 주요 성과 목표는 과제를 모두 완수하는 것이었는데, 월요일 오전에 모두 완성을 시켰습니다. (뭔가가 남아있는 기분이 싫어서 빠르게 하는 편인 것 같습니다..!) 감사할 점 항해 매니저님께서 발표 기회를 제안해주셨는데 아쉽게도 이번 발표 때는 참석하지 못하게 되어 발표를 할 수 없었습니다. 또한, 코치님께도 코칭을 받게 되었습니다. 이 때, 제가 평소에 궁금한 점들을 여쭤봤었고, 이로 인해 방향성을 잡을 ..

• format_list_bulleted Life/회고
• · 2024. 3. 25.
• textsms

유틸리티 타입을 공부해보자!

타입스크립트의 유틸리티 타입이라는 것을 들어보고, 공부하기도 했었지만 결국 이를 프로젝트에서 사용하지 않아 익숙해지지 않았고 다시 까먹게 되어 자주 쓰시는 것 같은 유틸리티 타입을 분석해보고자 합니다. 이를 분석하면 결국 맵드 타입, 인덱스 시그니처, 타입 추론 등과 같은 고급 스킬들을 더 잘 이해할 수 있을거라 생각하였습니다! "12 Must-Have TypeScript Utility Types with Uses and Example" 글을 읽고 제 분석을 추가한 글입니다. 목차는 다음과 같습니다. 1. Object Manipulation Types `Partial` `Required` `Readonly` `Pick` `Record` `Omit` `Mutable` 2. Union Manipulation..

• format_list_bulleted 프로그래밍 언어/Typescript
• · 2024. 3. 21.
• textsms

항해 플러스 WIL - 1주차

항해 플러스에 몰입한 한주를 돌이키며 문제 Q. 이번 주차를 지나며 겪었던 문제가 무엇이었나요? 과제를 하면서 겪었던 문제는 내용 자체에 대한 문제는 없었던 걸로 기억합니다. 다만 제 스스로의 코딩 습관을 돌이켜보는 계기가 되었습니다. 시도 Q. 문제를 해결하기 위해 어떤 시도를 하셨나요? 설계를 하지 않고 코드부터 짜는 습관을 고치기 위해서 이번 주차에서의 문제 해결을 하기 위해 우선적으로 코드부터 짜는 것이 아닌 문제 자체에 대한 이해를 먼저 하고나서 하려고 합니다. 해결 Q. 문제를 어떻게 해결하셨나요? 일단 발제자료를 통해 문제의 실마리를 찾으려 노력했고 부족한 부분은 기술블로그들을 보며 해결해나갔습니다. 알게된 것 Q. 문제를 해결하기 위해 시도하며 새롭게 알게된 것은 무엇인가요? 실제 마이크..

• format_list_bulleted Life/회고
• · 2024. 3. 18.
• textsms

졸업작품 진행상황 - 2. 약 22.222% 정도 구현한 것 같은 느낌...?

지금까지 뭘 했는가 지난 토요일에는 현업에 계신 개발자분들과 함께 특정 주제에 대한 문제를 풀게 되는 항해 플러스가 시작되었습니다. 갔다오고 난 그날에 허리에 통증이 엄청나게 생겼었습니다. 걷기도 힘들 정도의 통증이 느껴지게 되었습니다. 너무 아파 공강 시간에 근처의 정형외과를 다녀오게 되었고 의사선생님께서는 척추측만증이라고 하셨습니다. 골반 모양에 의해 선천적으로 허리가 약할 수 밖에 없고, 등에서 허리로 이어지는 척추가 휘어서 그렇다고 이야기해주셨습니다. 원인을 알게 되었고 꾸준히 도수치료를 받아 절반 수준인 7~8도까지 줄여보도록 노력하자는 이야기를 듣게 되었습니다. 아무튼 통증으로 인해 졸업작품 진행이 조금 더뎌지게 되었습니다. 지금까지 진행 상황은 다음과 같습니다. 1. next-auth의 `C..

• format_list_bulleted 프로젝트들/졸업작품
• · 2024. 3. 14.
• textsms

Test Code를 연습해보자 (with TDD Kata, Yatzy)

항해 플러스 사전 스터디를 진행했었을 때, Test Code를 작성하는 것은 낯설기만 한 저를 비롯한 팀원분들께 매니저님께서 "TDD Kata"라는 것을 공부해보면 좋다고 이야기해주셨었습니다. 그래서 TDD Kata가 뭐지 하면서 여러가지 자료들과 "https://kata-log.rocks/tdd" 이 사이트를 봤었습니다. 일단 제가 생각하기에 TDD Kata는 Test Code 및 TDD라는 방법론에 익숙해지기 위해 연습을 도와주는 문제들 같은 느낌이었습니다. 가장 쉽다고 알려진 Fizzbuzz는 이전에 혼자서 했었습니다. 이번에는 조금 더 난이도가 올라간 Yatzy를 통해 테스트 코드를 작성해봤는데, TDD가 아닌 일단 선 코드 후 테스트 방식으로 코드를 짰었습니다! 먼저 제 깃허브 링크는 다음과 같..

• format_list_bulleted 프로그래밍 방법론/테스트코드
• · 2024. 3. 11.
• textsms