안녕하세요 😉 유유자적한 개발자 유로띠 입니다 😀 👏👏👏👏 🎉 GRID GARDEN 📢 css grid garden game grid를 쉽고 재미있게 배우기 위해 css-grid-garden 게임을 해보았습니다. Grid Garden A game for learning CSS grid layout cssgridgarden.com 각 문항에 대한 정답은 유로띠 github에 있습니다. 그럼 grid 문제를 풀어볼까요? 👀 🙆‍♂️ grid-column-start / grid column-end 배워보기 ✅ 1번 .water { grid-column-start: 3; } ✅ 2번 .water { grid-column-start: 5; } ✅ 3번 .water { grid-column-start: 1; gr..

클린 코드 형식 맞추기 🙌 형식을 맞추는 목적 다음의 테스트 코드를 살펴보자. 👀 describe('promise', () => { const until = 3; const range = [...Array(until).keys()]; const t = 300; const delay = (t) => new Promise((resolve) => setTimeout(resolve, t)); it('test for promise', async () => { for await (const rangeItem of range) { await delay(t); console.log('a'); await delay(t); console.log('b'); await delay(t); console.log('c'); } c..

안녕하세요 😀 유익한 일상 정보를 전달하는 유로띠 입니다 😉 오늘은 KTX로 즐거운 여행을 준비하는 청춘들에게 최대 40%의 할인을 받을 수 있는 코레일 힘내라 청춘 상품을 알려드리겠습니다. KTX 힘내라 청춘 이란? 👀 만 25세부터 만 33세 이하의 회원이 이용할 수 있는 상품입니다. 청춘은.. 만 33 세이하까지 인가 봐요.. 🥲 저도 청춘이 얼마 안남았네요 예약은 열차 출발 1일 전까지만 가능하며 레츠코레일, 코레일톡으로 할인 대상 열차 구매 시 가능합니다. 자세한 내용을 살펴볼까요? 👀 🟢 코레일톡, 홈페이지(홈티켓)에서 예약 즉시 발권하는 경우에만 할인이 적용됩니다. 🟢 이 상품은 회원 1인당 1회에 1매, 1일 2회, 1개월 8회까지 구입할 수 있습니다. 🟢 구입한 회원 본인에 한하여 사용이..

클린 코드 주석 🙌 주석을 최대한 쓰지 말자 ⚠️ 주석은 나쁜 코드를 보완하지 못한다. ⚠️ 또한 주석은 방치된다. 😵 // 중복된 상품 선택을 막기 위해 진행중인 A 타입의 상품이 존재하는지 확인한다. if (product && product.state === 'ONGOING' && product.type === 'A') { } 요구 사항이 변경되어 타입과 상관없이 중복 상품 선택을 할 수 없게 한다면?.. 🤔 // 중복된 상품 선택을 막기 위해 진행중인 A 타입의 상품이 존재하는지 확인한다. if (product && product.state === 'ONGOING') { } 주석은 그대로 방치된다면 나중에 해당 코드를 보고 product 자체가 A 타입이구나.. 라는 오해를 만들 수 있고 이는 오류..

클린 코드 함수 🙌 간결한 함수로 작성하자 해당 함수는 다음과 같은 기능을 가지고 있다. 페이지가 테스트 페이지인지 확인한 후 테스트 페이지라면 설정 페이지와 해제 페이지를 넣는다. 테스트 페이지든 아니든 페이지를 HTML로 렌더링하여 리턴한다. 하지만 함수가 길다. 😵 const renderPageWithSetupAndTeardowns = ({ pageData, isSuite }) => { const isTestPage = pageData.hasAttribute('Test'); if (isTestPage) { const testPage = pageData.getWikiPage(); const newPageContent = []; includeSetupPages(testPage, newPageConten..

안녕하세요 😉 유유자적한 개발자 유로띠 입니다 😀 👏👏👏👏 이번 포스팅에서는 JdbcSQLSyntaxErrorException: Syntax error in SQL statement ... expected "identifier" 에 대해 삽질기와 해결 방법에 대해 알아보겠습니다. 🎉 spring boot + jpa + h2 사용시 에러 발생 test code를 작업하기 위해 h2의 in-memory db를 이용하기로 하고 작업을 진행하였습니다. 그러던 중 jpa와 H2 DB를 사용하다 아래와 같은 JdbcSQLSyntaxErrorException: Syntax error in SQL statement ... expected "identifier" 에러가 발생하였습니다. 🥲 이 error는 저를 2일동안 ..

안녕하세요 😉 유유자적한 개발자 유로띠 입니다 😀 이번 포스팅에서는 ✅ cherry-pick 이란? ✅ cherry-pick 사용법 에 대해서 알아보겠습니다 cherry-pick 이란? 🧐 ✅ cherry-pick의 사전적 의미 A metaphor, from the idea of picking through a bowl of cherries and seeking the best for oneself, or the idea of picking off the cherries for oneself from a cake or dessert. '케이크 위에 얹어져 있는 체리만 집어먹는 행위'라는 뜻에서 비유한 것으로 인기 있는 특정 요소만 고른다는 뜻입니다. 👀 체리픽은 언제 사용할까요? 🟡 BE/FE 에서 기능..

클린 코드 독서 1일차 🧹 깨끗한 코드 나쁜 코드는 무엇일까? 👎 성능이 나쁜 코드 불필요한 연산이 있어서 개선이 필요한 코드 👎 의미가 모호한 코드 이해하기 어려운 코드 네이밍과 그 내용이 다른 코드 const c = await this.validateCourse(); 함수를 보면 강의에 대해 유효성을 검사하는 것 같다. 어떤 유효성을 검사한 것일까? 🧐 정상적인 강의인지? 수강생이 해당 강의를 봐도 되는지? 수강이 가능한 강의인지? 필수로 봐야 하는 강의 인지? 함수를 봐서는 알 수가 없다. (함수 리팩토링은 다음 장에..) 또한, 이름 c는 아무런 의미도 드러나지 않는다. 의도가 드러나는 이름을 사용하면 코드의 이해와 변경이 쉬워진다. const requiredCourse; //필수강의구나! con..

안녕하세요 😉 유유자적한 개발자 유로띠 입니다 😀 오늘은 삭막한 github를 꾸며보도록 하겠습니다 👏👏👏 꾸며도 삭막한건..비밀.. 이번 포스팅에서는 ✅ 개인 repository 만들기 ✅ 배지 만들기 ✅ readme stats 적용하기 ✅ hits 적용하기 에 대해서 알아보겠습니다 🎉 special github README repository 만들기 github 계정과 동일한 이름으로 repo를 생성합니다. 생성할 때 꼭 README.md 선택해 주세요 끝 😏 첫 번째 repository 생성은 끝났습니다. 이제 본격적으로 꾸미기 위해 READMD.md 파일을 수정해 봅시다 배지 사용하기 배지를 만들기 위한 사이트입니다. https://shields.io/ 단순히 개발 스택을 텍스트로 보여주는 건 너..

안녕하세요 😉 유유자적한 개발자 유로띠 입니다 😀 회사에서 프로젝트를 통해 배우고 성장하며 이것을 토대로 그로스 해커(Growth Hacker)가 되기 위한 포스팅입니다. 오늘의 이야기는 일괄로 생성하는 작업 중 고민했던 내용입니다 😏 외부 연동을 통해 강의 상품을 제공 온라인 강의를 제공하는 서비스 회사에서 이번에 맡은 프로젝트는 외부 업체를 통해 수강생과 수강생이 신청한 강의 정보를 받아 수강생을 등록하고 신청한 강의 상품을 일괄로 구성하는 기능 개발을 진행하였습니다. 일단 외부 api를 통해 정보를 가져오고 등록만 하면 되는 작업이기 때문에 별로 어렵지 않다고 생각하였습니다. 👍 👀 요구사항을 간단히 살펴보겠습니다. ✅ 외부업체의 api를 이용하여 정보를 조회하여 수강생과 강의 정보를 가져옵니다. ..

안녕하세요 😉 유유자적한 개발자 유로띠 입니다 😀 👏👏👏👏 TypeScript에 대해서 알아보겠습니다. 이번 포스팅은 타입스크립트 공식 핸드북의 원본과 해석본을 읽고 정리하는 글입니다. TypeScript Handbook TypeScript Handbook 정리 - The Basics TypeScript - Everyday Types TypeScript - Narrowing TypeScript - More on Functions TypeScript - Object Types TypeScript - Type Manipulation TypeScript - Classes TypeScript - Modules TypeScript - tsConfig ✅ Everyday Types 에 대해서 알아보겠습니다 🎉 Ty..

안녕하세요 😉 유유자적한 개발자 유로띠 입니다 😀 👏👏👏👏 TypeScript에 대해서 알아보겠습니다. 이번 포스팅은 타입스크립트 공식 핸드북의 원본과 해석본을 읽고 정리하는 글입니다. 이번 포스팅에서는 TypeScript Handbook TypeScript - The Basics TypeScript - Everyday Types TypeScript - Narrowing TypeScript - More on Functions TypeScript - Object Types TypeScript - Type Manipulation TypeScript - Classes TypeScript - Modules TypeScript - tsConfig 중에서 ✅ The Basics 에 대해서 알아보겠습니다 🎉 Type..