매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주세요. 이 포스트에서는 자신의 프로젝트에 맞게 mixin을 만들 수 있는 최소한의 지식에 대해 설명하고자한다. mixin이란? 속성이나 값을 세팅하여 정리할 수 있는 기능이다. @mixin mixin명 { 속성: 값; } @mixin mixin명으로 {}내에 정리하고 싶은 속성과 값을 기재한다. 이것으로 아이템화된다. 정리된 mixin은 @include mixin명으로 기재하면 호출할 수 있다. @mixin p-center { position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); } div { @include p-ce..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며, 틀린 내용은 지적해주시면 감사하겠습니다. Vue에서 대표적인 밸리데이션 워크 프레임으로 말하자면 VeeValidate가 있다. VeeValidate는 기능이 많고 사용하기 쉬운 프레임워크이지만, Vue2계에 대응하는 v3와 Vue3계에 대응하는 v4는 완전 다른 것이라고 이야기될 정도로 사용방법이 많이 바꼈다. 이번에는 이러한 VeeValidate v4의 사용 방법에 대해서 정리하고자한다. VeeValidate의 사용 스타일 VeeValidate(v4)의 사용을 하기 위해는 아래의 두 개의 구현 스타일이 존재한다. Composition API Higher-order components(HOC) 첫 번째의 Compo..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Suspense이란? 비동기 처리가 해결되기까지 폴 백 컨텐츠 (예를 들어 Loading중 아이콘)을 표시해주는 특별한 컴포넌트이다. 지금까지는 v-if = "loading === true" 등의 상태 변수를 사용하여 제어한 것을 상태 변수를 사용하지 않고 간략하게 쓸 수 있게 해준다. Suspense의 작성법 아래와 같이 컴포넌트로 감싸서 내부의 내에 비동기 컴포넌트를 내에, 그 비동기 컴포넌트가 해결 될 때까지에 나타낼 것 (폴 백 컨텐츠)을 기재한다. 이러한 작성으로, 간략하게 비동기 컴포넌트의 처리가 해결 될 때 까지의 폴 백 컨텐츠를 구현할 수 있다. 이 코드는 의 비..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 예외의 사고방식 근원 예외또란 무엇인가? 보통 이것을 에러이며 무언가 제대로 되지 않았을 때에 알려주는 것(에러가 아닌 예외도 있지만, 현 시점에서는 이 부분은 신경쓰지 않도록 하자) 역할을 한다. 일부의 프로그래밍 언어는 에러를 반환값으로 반환하는 것을 장려하고 있으며, 당신은 반환 값을 확인한다. Python 경우 예외의 사용을 장려하고 있는 언어이며, 이러한 처리에 대해 고려할 필요가 있다. 예외는 반드시 프로그램의 충돌을 일으키는 것은 아니다. 예외는 처리할 수 있다. 예외의 원인인이 완전히 코드 버그(존재하지 않는 변수에 접근하는 등)일 수도 있지만 예외의 발생을 예..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 본격적으로 들어가기에 앞서 Atomic Design에 대해서는 이전에 포스팅을 한 적이 있기 때문에 상세한 내용을 알고 싶은 사람은 이 포스트를 참고해주길 바란다. 왜 Atomic Design을 그만뒀는가? Atomic Deisgn 원리에서는 인터페이스를 기능이나 보여지는 부분의 정밀도를 바탕으로 다섯 개의 레벨으로 분류하는 것을 제안하고 있지만, 데이터의 획득을 어느 레벨에서 실행하는가등 로직을 어떻게 다룰까에 대해서 별다른 언급을 하고 있지 않다. 또한, 독자 룰을 규정하는 것으로 Atoms/Molecules/Organisms/Template/Pages의 분류를 어떻게 할지..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Java의 정규표현 Java에는 정규표현에 관련된 기능을 구현하기 위한 패키지 java.util.regex가 있으며, 그 안에 Pattern 클래스와 Matcher 클래스가 있다. Pattern 클래스는 정규표현의 "패턴"을 나타내고, Mather 클래스는 검색하고 싶은 문자열과 정규표현과의 "매칭"을 실행한다. Pattern 클래스 Pattern 클래스는 정규표현의 "패턴"을 나타내는 클래스이다. Java에서 정규표현을 사용할 때는 java.util.regex.Pattern클래스의 compile메소드를 호출하여, 정규표현을 컴파일한다. 정규표현의 구문 규칙에 따르지 않은 경우..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Blob이란? Blob이란 Binary Large Object의 약어로, 단순히 이진 데이터 덩어리를 표현한 것이다. Blob(데이터의 배열, 파일의 종류（MIME타입）) 데이터의 배열 (첫 번째 인수) 첫 번째인수에는 Blob으로 변환할 데이터의 배열을 전달한다. 파일의 종류 (MIME 타입, 두 번째 인수) 두 번째인수에는 데이터의 종류를 문자열의 MIME 타입으로 지정한다. MIME 타입에 대해는 이 사이트에 가장 잘 나와있으므로 참고하길 바란다. 예를 들면, 다음과 같은 것을 지정한다. text/plain application/json 텍스트 파일을 Blob으로 다운로드..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이 포스트에서는 Vue2와 Vue3의 차이점을 몇 가지 픽업해서 간단하게 소개하고자한다. Composition API Vue2와의 가장 큰 변경점이라고 한다면 Composition API가 도입된 것이다. 이로 인해 Vue의 그러나 Composition API를 사용하면 아래와 같이 바뀐다. 상세한 내용에 대해서 설명하자면 길어지므로 다음에 기회가 된다면 구체적으로 설명하도록 하겠다. Fragments vue2에서는 컴포넌트의 루트 요소가 1개일 필요가 있었다. ... ... ... ({ ... }) }).mount('#app') 라이프 사이클 Vue3에서는 라이프 사이클의 일..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 테스트 대상 코드 테스트 대상 클래스 import org.springframework.stereotype.Service; @Service public class SampleService { public String sampleMethod() { // static메소드를 호출 return SampleStatic.staticMethod(); } } static 메소드를 가진 클래스 public class SampleStatic { public static String staticMethod() { return "real method"; } } 테스트 코드 build.gradle에 ..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이 포스트는 Ugonna Thelam 저자가 작성한 "The S.O.L.I.D Principles in Pictures"을 번역한 것입니다. 시작하기에 앞서 오브젝트 지향 프로그래밍에 정통한 사람이라면 SOLID 원칙에 대해서 들어본 적이 있을 것이다. 이 다섯 가지의 소프트웨어 개발 원칙은 소프트웨어 구축시에 따라야 할 가이드 라인으로 소프트웨어의 확장성이나 보수성을 높이기 위한 것으로, 소프트웨어 엔지니어인 Robert C.Martin이 제안한 것이다. SOLID에 관한 멋진 설명은 인터넷 상에 굉장히 많지만, 일러스트가 있는 것은 거의 보지 못했다. 따라서 나와 비슷한 시..