매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용이 있다면 지적해주시면 감사하겠습니다. 꽤 이전에 Vue2와 Vue3의 차이점에 대해서 다룬적이 있는데, 조금 더 상세하게 다룬 글을 발견하여 공유하고자 한다. 대상 독자 Vue2를 Vue3로 버전업을 하는 중 혹은 버전업을 검토하고 있는 사람 Vue를 다루지만, 교양으로 Vue3를 캐치업하고 싶은 사람 Vue2의 기능, 주의점을 보통 프론트엔드를 만지지 않는 멤버에게 설명하고 싶은 사람 새롭게 서포트된 API와 구문 CSS v-bind CSS의 속성에 대해서 리액티브한 값의 바인딩이 가능하게 됐다. 내부적으로는 CSS 변수의 값을 리액티브 변경하는 것으로 값을 바꿔준다. 참고로 Vue2.7버전에서도 이용할 ..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Composition API이란? Composition API는 2020년 9월 18일에 정식으로 릴리즈된 Vue3에 추가된 핵심기능이다. Composition API는 컴포넌트를 구축하기 위한 새로운 방법이며, Vue가 다음의 문제를 해결하기 위해 제안한 것이다. TypeScript의 서포트 로직 재이용이 어려운 문제 어플리케이션이 커지면 코드의 파악이 어려워지는 문제 컴포넌트의 예 먼저는 Composition API로 작성된 컴포넌트 전체 코드를 살펴보자. // MyTodo.vue // TodoList.vue {{ todo.title }} {{ date }} 削除 // ad..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으면 틀린 내용은 지적해주세요. Vue.js에서는 CSS를 이용할 때에 Scoped CSS나 CSS Modules, CSS-in-JS등의 방법을 사용할 수 있니다. 어쨌든 Scoped CSS는 가볍게 이용할 수 있으므로, 이용할 기회가 많이 생길거라고 생각한다. Scoped CSS가 있다면 CSS설계를 사용하지 않아도 된다는 의견도 있지만, 실제로 그럴까? 이 포스트를 통해서 우리가 생각한 방법에 대해서 소개하도록 하겠다. 참고로, 여기 나와있는 예시들은 Vue.js의 SFC(싱글 파일 컴포넌트)로 Scoped CSS를 이용하고 있는 것을 상정하고 쓰여졌다. CSS 설계란? 기본적으로 CSS는 항상 모든 페이지에서 읽어들여..

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

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이번 포스트에서는 Spring 프레임워크에서 이용되는 @Autowired의 인젝션 종류에 대해서 살펴보자. Spring을 거의 만져 본 경험이 없는 사람들을 위한 내용이 될 것이다. @Autowired이란? 간단히 말하자면, 사용하고자하는 클래스의 인스턴스화해주는 어노테이션이다. 기재하는 것으로 클래스 내 New연산자없이 인스턴스화를 한 번에 할 수 있다는 장점이 있다. public class HogeClass{ @Autowired private HugaService hugaService; ... } 예로 설명하자면 어노테이션을 사용하는 것으로 클래스 내의 HogeService..

※ 일본의 블로그 글을 번역한 포스트입니다. 오역 및 직역, 의역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 지난 클린 아키텍처1에 이어서 두 번째 그림에 대해 해설하기 위한 포스팅이다. 클린 아키텍처1에서 만든 코드를 위와 같은 그림으로 표현하자면 다음과 같다. 박스 위에 글자가 있는 것이 있는데 는 Interface고, 는 Data Structure(데이터구조체)이다. 대체로 그림대로 재현하고 있지만 유일하게 외부쪽 환경에서 UserCreateViewModel에 의존하는 View가 재현되지 못 했다. 이번 스크립트는 Presenter가 ViewModel를 다뤄, Consol 표현을 하고 있으므로 원래 View의 역할을 Presenter가 하고 있는 형상이 됐다. 이 부분을 어떻게 하면..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주면 감사하겠습니다. 클린 아키텍처의 가장 추정적인 것이라고 한다면 바로 이 그림일 것이다. 따라서 이번 포스팅에서는 샘플코드와 함께 이 그림에 대해 해설해보고자 한다. 샘플 코드 https://github.com/nrslib/CleanArchitecture 언어는 C#이다. 프로젝트 구성등 실제의 제품과 동일한 형식으로 기재되어 있기 때문에 괜찮다면 참고하길 바란다. 원 그림의 해설 원 그림은 레이어를 의미한다. 레이어의 이름은 이 위치에 기재되어 있다. 그럼 하나 하나 설명하도록 하겠다. Enterprise Business Rules 노란색 레이어인 Enterprise Business Rules는..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Repository 패턴이란? Repository패턴이란 영속화를 은폐하기 위한 디자인 패턴으로, DAO(DataAccessObject)패턴과 비슷하지만, 보다 높은 추상도로 엔티티의 조작에서 영속화 스토리지를 완전히 은폐한다. 예를 들어 DB커넥션이나 스토리지의 패스등은 Repository의 인터페이스에서 은폐되어 Repository의 유저는 영속화 스토리지가 무엇인가(예를 들어 MySQL이나 Redis등)를 의식하지 않고 데이터 저장이나 검색의 조작을 할 수 있게 된다. 이로 인해 Repository를 이용한 로직은 업무적 조작에 집중할 수 있고, 데이터 베이스의 이동 등의..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 몇 직역, 의역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 개요 SPA, SSR, SSG이라는 기술 용어를 작업 중이나 블로 그 글에서 본 적이 있지만, 지금까지 구체적으로 알아보지 않고 지냈다. 일단 Gatsby.js이나 Next.js를 다루고 있으므로, 이러한 개념을 제대로 이해해두면 안 될 것 같다는 생각이 들어 이번 기회에 정리해봤다. SPA SPA의 요지를 간단하게 말하자면, 하나의 페이지에 먼저 호스팅 서버에서 얻은 그 페이지를 기축으로, 표시하고 싶은 것이 있다면 그에 대한 데이터를 매번 API에서 취득하는 아키텍처이다. 이것은 Single Page Application의 약칭으로, 하나의 페이지를 바탕으로 이것 저것 동작..

MVC모델이란? MVC는 Web 프레임워크에서 일반적으로 다뤄지지고 있는 어플리케이션 설정을 정리하기 위한 개념의 하나로 Model, View, Controller로 역할을 분리하여 코딩하는 모델을 일컫는다. 각각의 역할은 다음과 같다. Model : 시스템에서 비즈니스 모델을 담당한다. View : 표시나 입출력을 처리한다. Controller : 유저의 입력을 바탕으로 Model과 View를 제약한다. 그림으로 표시하면 다음과 같다. Model은 본래 한 묶음의 데이터를 처리하는 부품으로, 그 성질 때문에 내부가 복잡한 기능이 포함된 구현, 여러 메소드나 속성에 접근할 수 있게 되어 있으며, 하나가 아닌 여러 개의 View 클래스의 필요한 데이터에 대응하는 것이 일반적이다. 따라서 View가 직접 M..