매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Vue.js에서 사용할 수 있는 편리한 기능 중 하나로 "watch" 오브젝트가 있다. watch가 지정한 프로퍼티의 값을 감시하여 변경이 있으면, 지정한 처리를 자동적으로 실행해주는 것이다. watch에는 handler이나 deep, immediate이라는 키워드가 기재가 되어 있는 경우와 없는 경우가 있다. hanlder는? deep, immediate는? 그리고 있는 경우랑 없는 경우, watch 처리가 어떻게 바뀌는거지? 의문을 가지는 사람들이 있을 것이다. 여기에서는 watch의 handler나 depp, immediate 처리에 대해서 실례에 대해 살펴보고 해설하고자..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 환경 이번 포스트에서는 Vue CLI를 사용한다. 프로젝트를 생성하면 다음과 같은 디렉토리로 파일이 구성될 것이다. 기본적으로는 편집하는 것은 App.vue와 components 폴더이다. 그 외에는 디폴트 상태로 수정하지 않아도 된다. 터미널에서 다음의 커맨드를 실행하면 개발서버가 실행된다. $ npm run serve 이 상태에서 localhost URL(http://localhost:8080/)에 액세스하면 다음과 같은 화면이 표시된다. vue 파일을 변경하면 그 변경 내용이 이 페이지에 바로 반영된다. 테스트로 App.vue의 내용을 모두 삭제하면 아무것도 표시되지 않게..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 직역. 의역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. v-model이란 공식 사이트를 인용하면 다음과 같다. form의 input 요소나 textarea요소, select 요소에 쌍방향(two-way) 데이터 바인딩을 만들고 싶을 때, v-model 디렉티브를 사용할 수 있다. 너무 짧아서 알기 어렵다. v-model의 역할은 "변경과 데이터를 엮어주는 것"이라고 할 수 있다. 즉, (1) 표시할 데이터 (2) 변경이 있다면 데이터에 반영 이 두 가지를 세트로 한 것이 쌍방향(two-way) 데이터 바인딩이며, 이것을 v-model이 해준다는 것이다. 사용하자면 다음과 같이 쓸 수 있다. username: {{ username }..

deep selector이란? 간단하게 말하자면, Vue.js에서 scoped가 있는 style을 작성하고 있을 때에 그 컴포넌트의 자식 컴포넌트에도 style을 추가하고 싶을 때 사용하는 css의 셀렉터의 작성법을 일컫는다. Vue.js의 scoped CSS의 원리에 대해서 짤막하게 설명하면, scoped CSS를 이용하면 컴포넌트마다 data-v-[hash]가 할당되어 있고 그 속성과 세트가 되는 스타일이 적용되게 된다. 이로 인해 그 속성은 컴포넌트마다 다른 것이 적용되므로, 컴포넌트 단위로 스타일을 할당할 수 있다는 것이다. 그러나 추가로 부모 컴포넌트에서 자식 컴포넌트에 다른 style을 추가 혹은 적용하고 싶을 때 사용할 수 있는 것이 deep selector이다. deep selector의 ..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 컴포넌트 설계와 Atomic Design의 관계 Atomic Design은 원래 UI 설계를 위해 만들어진 것이다. 거대한 어플리케이션도 효율 좋게 부품으로 재이용하고, 더욱이 상세한 조절도 가능하도록 고려한 것이다. Atomic Design에서는 "컴포넌트"이라는 단어가 사용되고, 한 번보면 vue등 어플리케이션에도 그대로 설계로써 사용할 수 있다고 생각될 수 있다. 그러나 UI 설계의 방법, 사상을 그대로 어플리케이션의 컴포넌트 설계에 적용하면 일부분 되지 않는 곳이 있다. 어플리케이션 개발에서는, 동일한 레이어 아웃에서도 데이터의 갱신의 타이밍이 다른 경우가 있다. 이 데..

시간이 참 빠르다. 벌써 일본에서 생활한지 4년차에 접어 들었고, 동시에 직장인으로서도 4년째가 된다. 또한 아직 한국에 만 나이를 도입하기 전이라 한국 나이 기준으로는 앞자리가 3으로 바뀌는 내 인생에서 자그마한 이벤트가 발생했다. 다양한 위치에서 요구되는 책임감이 무거워짐을 느끼는 동시에 다음 이벤트를 마주하기 전에 얼마나 다른 모습의 나를 마주하게 될지 기대가 된다. 각설하고 올해도 어김없이 2022년을 회고해보고 앞으로 걸어나갈 2023년에 대해서 생각을 정리할 포스팅을 작성하고자 한다. 나의 2022년 1. 지난 2022년 목표 달성여부 확인 2022년 돌이켜보면 초반은 꽤 순탄했던 것 같았는데, 중~후반부에서는 몰아치는 한국 방문, 이직 활동 일정에 정신이 없었다. 그러나 웬만한 목표는 달성했..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Python 에서는 int()이나 float()를 이용하여 숫자의 문자열을 숫자 데이터(int형이나 float형)으로 변환할 수 있다. float()는 실수를 대상하고 있지만, int()은 정수에 한정되어 있으므로, 생각지도 못하게 에러를 마주하게 되는 경우가 있다. 이번 포스팅에서는 이러한 int()을 이용할 때 에러가 되는 경우에 대해서 설명하고자 한다. int() 함수의 기본 int()은 Python의 내장함수로, 아래와 같인 "정수의 문자열"을 인수로 지정하여 int형의 데이터로 변환시켜준다. >>> int("123") 123 >>> type(int("123")) 참고로..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 직역, 의역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이번 포스트에서는 python의 migration 패키지인 alembic의 간단한 사용법에 대해서 설명하고자 한다. Alembic이란? 공식 사이트에도 설명되어 있지만, Python으로 SQLAlchemy를 사용하고 있을 때 DB의 관리해주는 migration 툴이다. 개발 환경 간단하게 구축하고 싶으므로 Docker을 사용할 생각이다. 1. Docker로 환경 구축 폴더 구성은 다음과 같다. . ├── README.md ├── docker-compose.yml └── src └── model.py docker-compose.yml 파일은 다음과 같이 작성했다. version:..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 직역, 의역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. SQLAlchemy는 Python에서 자주 사용되는 OR Mapper이다. 이번 포스팅에서 SQLAlchemy를 이용하여 DB의 CRUD를 조작하는 방법에 대해서 설명하도록 하겠다. 개발환경 참고로 db_session이라는 명명은 딱히 별 다른 의미가 없으므로 포스트나 작성법에 따라 명명이 다르다. Windows10 Python 3.8 SQLite SQLAlchemy 2.0 또한, Flask에서 SQLAlchemy을사용한 경우 Django와는 조금 사용법이 달라지지만 기본적인 작성법은 동일하므로, 프레임워크에 따라 적당히 변경하길 바란다. # 이번 포스팅에서의 SQLAlchem..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 기초 : JavaScript의 특징 먼저 JavaScript와 다른 프로그래밍 언어의 차이에 대해서 알아 둘 필요가 있으므로 해설하도록 하겠다. JavaScript는 Chrome이나 Firefox와 같은 "브라우저" 위에서 동작하는 프로그래밍 언어이다. 그에 반해 Python이나 Ruby와 같은 일반적인 프로그래밍 언어는 보통 "컴퓨터" 위에서 움직인다. 이러한 차이가 발생하는 이유는 OS의 기능에 액세스할 수 있는가 없는가이다. 여기서 "OS의 기능"이란 예를 들어 파일의 읽고 쓰기나, 네트워크 통신 등의 기능을 의미한다. 컴퓨터 위에서 동작하는 어플리케이션(Python이나 ..