티스토리

기록

검색하기

블로그 홈

기록

yjh5166.tistory.com/m

정구 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

재귀와 스택 재귀(recursion)는 큰 목표 작업 하나를 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 유용한 프로그래밍 패턴이다. 목표 작업을 간단한 동작 하나와 목표 작업을 변형한 작업으로 단순화시킬 수 있을 때도 재귀를 사용할 수 있다. 특정 자료구조를 다뤄야 할 때도 재귀가 사용된다. 두 가지 사고방식 x를 n 제곱해 주는 함수 pow(x, n)를 만들어보자. 아래와 같은 결과를 만족해야한다. pow(2, 2) = 4 pow(2, 3) = 8 pow(2, 4) = 16 1. 반복적인 사고를 통한 방법: for 루프 function pow(x, n) { let result = 1; // 반복문을 돌면서 x를 n번 곱함 for (let i = 0; i < n; i++) { result *= x; } re.. 공감수 0 댓글수 0 2022. 3. 7.
코딩 스타일 개발자는 가능한 간결하고 읽기 쉽게 코드를 작성해야한다. 복잡한 문제를 간결하고 사람이 읽기 쉬운 코드로 작성해 해결하는 것이야말로 진정한 프로그래밍 기술이다. 좋은 코드 스타일은 이런 기술을 연마하는데 큰 도움을 준다. 문법 중괄호 대부분의 자바스크립트 프로젝트에서 여는 중괄호는 '이집션(Egyptian)' 스타일을 따라 새로운 줄이 아닌 상응하는 키워드와 같은 줄에 작성한다. 여기에 더해서 여는 중괄호 앞엔 공백이 하나 있어야한다. if (condition) { // 코드 1 // 코드 2 // ...코드 n... } if (condition) doSomething() 과 같은 단 한줄자리 구문은 중요하게 다뤄야 할 에지 케이스이다. 이런 예외상황에도 중괄호를 써야할까? 어떻게 코드를 작성해야 가독성.. 공감수 0 댓글수 0 2022. 3. 4.
프로퍼티 getter와 setter 객체의 프로퍼티는 두 종류로 나뉜다. 첫 번째 종류는 데이터 프로퍼티(data property)이며, 지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티이다. 두 번째 종류는 접근자 프로퍼티(accessor property)라 불리는 새로운 종류의 프로퍼티이다. 접근자 프로퍼티의 본질은 함수인데, 이 함수의 값을 획득(get)하고 설정(set)하는 역할을 담당한다. 그런데 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보인다. getter와 setter 접근자 프로퍼티는 'getter(획득자)'와 'setter(설정자)' 메서드로 표현된다. 객체 리터랄 안에서 getter와 setter 메서드는 get과 set으로 나타낼 수 있다. let obj = { get propName() { // getter, .. 공감수 0 댓글수 0 2022. 3. 2.
동적으로 모듈 가져오기 이전까지 다뤘던 export/import문은 '정적인'방식이다. 문법이 단순하고 제약사항이 있다. 첫 번째 제약은 import문에 동적 매개변수를 사용할 수 없다는 것이다. 모듈 경로엔 원시 문자열만 들어갈 수 있기 때문에 함수 호출 결괏값을 경로로 쓰는 것이 불가능했다. import ... from getModuleName(); // 모듈 경로는 문자열만 허용되기 때문에 에러 발생 두 번째 제약은 런타임이나 조건부로 모듈을 불러올 수 없다는 점이다. if(...) { import ...; // 모듈을 조건부로 불러올 수 없으므로 에러 발생 } { import ...; // import 문은 블록 안에 올 수 없으므로 에러 발생 } 이런 제약사항이 만들어진 이유는 import/export는 코드 구조의 .. 공감수 0 댓글수 0 2022. 2. 28.
모듈 내보내고 가져오기 export와 import 지시자는 다양한 방식으로 활용된다. 전에 export와 import의 기본적인 사용법을 알아보았는데, 이번 좀 더 다양한 사용법을 알아보자. 선언부 앞에 export 붙이기 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다. // 배열 내보내기 export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // 상수 내보내기 export const MODULES_BECAME_STANDARD_YEAR = 2015; // 클래스 내보내기 export class User { constructor(name) { this.name = name; } } 🚨 클래스나 함.. 공감수 0 댓글수 0 2022. 2. 28.
모듈(module) 이란? 프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 그 과정에서 코드의 재활용성을 높히고, 유지보수를 쉽게 하기 위해 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 온다. 이 때 분리된 파일을 각각 '모듈(module)' 이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다. 대부분의 주요 브라우저와 Node.js가 모듈 시스템을 지원하고 있다. 모듈이란? 모듈은 단지 하나의 파일에 불과하다. 스크립트 하나는 모듈 하나이다. 다음과 같은 특징을 가진다. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선.. 공감수 0 댓글수 0 2022. 2. 25.
라우팅을 막는 법 '네비게이션 가드' (beforeEnter) 프로젝트의 로그인 기능을 구현하다가 알게 된 사실이다. 라우터에 접근 제한을 걸 수 있었다(!!!) 어찌 보면 필수적인데 왜 생각을 안하고 있었을까... 만약 내가 로그인이 되어있지 않다면 유저 정보창을 볼 수 없고, 로그인이 되어있다면 다시 로그인 창으로 들어갈 수 없는 게 맞을 것이다. 즉, 내가 로그인되어있는 상태인지를 판단하는 특정 flag변수를 가지고 라우터를 제한하면 되는 것이다. 그 제한을 거는 위치는 라우터에서 componenet을 받아오기 전으로 해준다. 지금 작성된 코드에서는 아직 서버를 달지 않고 store에 있는 데이터를 기반으로 로그인을 판가름하고 있다. import Vue from "vue"; import VueRouter from "vue-router"; import store.. 공감수 0 댓글수 0 2022. 2. 23.
function props에 대해서 Vue에서는 기본적으로 상위 컴포넌트에서 하위 컴포넌트를 업데이트하기 위해 props로 데이터를 보내고 하위 컴포넌트에서는 event emit을 사용해 상위 컴포넌트에서 핸들러를 통해 메서드를 호출하게 된다. {{ count }} 누르면 증가 상위 컴포넌트에서 하위 컴포넌트로 count 데이터를 props로 보내고, 하위 컴포넌트에서는 $emit을 통해 상위 컴포넌트의 count 데이터의 값을 변경하는 간단한 앱이다. 일반적으로 props에는 정적 / 동적 데이터를 전달하게 되는데 위와 같은 상황에서는 count와 더불어 count를 컨트롤 할 수 있는 메서드를 함께 props로 내리면 편하지 않을까? 함수를 props로 보내는 것은 '가능'하다. {{ count }} 누르면 증가 위의 코드는 event.. 공감수 0 댓글수 0 2022. 2. 23.
Vue Filter 뷰의 필터는 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능이다. 가장 간단하게는 단어의 대문자화부터 다국어, 국제 통화 표시 등 다양하게 사양할 수 있다. 필터의 사용법은 다음과 같다. {{ message | capitalize }} new Vue({ el: '#app', data: { message: 'hello' }, filters: { capitalize: function(value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) 위의 코드를 실행하면 'Hello' 텍스트가 화면에 출력된다. 필터를 쓰지 않았다면 'hello'가 출력되었을 것이.. 공감수 0 댓글수 0 2022. 2. 23.
watch 속성 watch 속성은 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성이다. watch 속성의 구현 코드 형식은 다음과 같다. new Vue({ data() { return { message: 'Hello' } }, watch: { message: function(value, oldValue) { console.log(value); } } }) 위 코드는 message라는 데이터의 watch 속성을 지정한 코드이다. message의 데이터가 변할 때마다 watch 속성에 정의한 message 함수가 실행되면서 콘솔에 변한 데이터를 출력한다. - watch 속성에 메서드 함수를 연결 watch 대상 속성에 함수를 연결하는 대신 메서드 함수를 연결할 수 있다. new Vue({ data() {.. 공감수 0 댓글수 0 2022. 2. 23.
computed 속성 computed는 Template Syntax로 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성이다. computed 속성의 장점 컴퓨티드 속성은 단순히 뷰 템플릿 코드의 가독성만 높여줄 뿐만 아니라 컴퓨티트 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해주는 장점이 있다. computed 속성 주의사항 컴퓨티드 속성을 사용할 때 주의할 사항은 다음 2가지이다. 컴퓨티드 속성은 인자를 받지 않는다. HTTP 통신과 같이 컴퓨팅 리소스가 많이 필요한 로직을 정의하지 않는다. 1. 인자를 받지 않는 computed {{ Message(false) }} computed: { reverseMessage(isReversed) { return isReversed ? .. 공감수 0 댓글수 0 2022. 2. 23.
라우터 옵션과 기법 동적 라우트 매칭 동적 라우트 매칭(Dynamic Route Matching)은 특정 패턴을 가진 경로들을 동일한 컴포넌트에 매핑애햐 할 경우 사용한다. new VueRouter({ routes: [ { path: '/user/:id', component: ResumeComponent } ] }) 위와 같이 라우터를 정의하면 path에서 콜론으로 시작하는 부분(동적 세그먼트)이 다르더라도 같은 경로에 매핑된다. /user/1과 /user/22 같은 URL이 모두 위에 정의된 ResumeComponent 컴포넌트로 이동하게 된다. 또한 :id에 대항하는 값은 해당 컴포넌트에서 this.$route.params를 통해 가져와서 사용할 수 있다. {{ $route.params.id }} 컴포넌트에서 props.. 공감수 0 댓글수 0 2022. 2. 23.
구조 분해 문법(destructuring) / ES6 뷰에서 data, methods 등에 접근할 때 this를 사용한다. 이를 구조 분해 문법으로 작성하게 되면 아래와 같은 코드가 될 것이다. 위와 같이 작성하게 되면 this를 매번 입력하지 않아도 되는 이점이 있다, 다만, 해당 데이터와 메서드가 해당 컴포넌트의 것인지, 외부에서 가져오는지 구분이 어려워지므로 사용에 유의해야한다. v-for 디렉티브에서도 구조 분해 문법을 사용할 수 있다. {{ post.title }} - {{ post.author }} 수정 후 {{ title }} - {{ author }} 공감수 0 댓글수 0 2022. 2. 23.
향상된 객체 리터럴(Enhanced Object Literal) / ES6 향상된 객체 리터럴이란 기존 자바스크립트에서 사용하던 객체 정의 방식을 개선한 문법이다. 자주 사용하던 문법들을 좀 더 간결하게 사용할 수 있도록 객체 정의 형식을 바꾸었다. 기존 객체 정의 방식 var josh = { // 속성: 값 language: 'javascript', coding: function() { console.log('Hello World'); } }; 축약 문법 1 - 속성과 값이 같으면 1개만 기입 객체를 정의할 때 속성(property)와 값(value)이 같으면 다음과 같이 축약이 가능하다. var language = 'javascript'; var josh = { // language: language, language }; console.log(josh); // {langu.. 공감수 0 댓글수 0 2022. 2. 23.
Axios 기초 배우기 #6 (새로고침 시 로그인 해제 방지) 새로고침을 하게 되면 vue 애플리케이션이 새로 시작되면서 state의 값이 base state로 전부 바뀌어 버린다. 이를 방지하기 위하여 기존에 가지고 있던 유저 정보를 로컬 스토리지에 남기는 방법도 있겠지만, 보안상 이메일과 패스워드를 남겨놓는 것은 위험한 행동이다. 우리는 로그인 시 토큰을 받아오고 있다. 아이디와 비밀번호가 없더라도 토큰만 로컬 스토리지에 저장하여 이를 가지고 멤버 정보를 요청할 수 있다는 얘기이다. src/store/index.js import Vue from "vue"; import Vuex from "vuex"; import router from "../router"; import axios from "axios"; Vue.use(Vuex); export default ne.. 공감수 0 댓글수 0 2022. 2. 23.
Axios 기초 배우기 #5 (헤더에 토큰 담아 보내기) 실제 로그인을 하기 위해 actions에 로그인 로직을 작성하여 준다. src/views/Login.vue 아이디와 비밀번호를 확인하세요 로그인 성공 로그인 로그인 \ 테스트를 위한 버튼을 지워주고 axios통신은 로그인 버튼이 눌러졌을 때 처리할 것이기에 store 쪽에 붙여준다. src/store/index.js import Vue from "vue"; import Vuex from "vuex"; import router from "../router"; import axios from "axios"; Vue.use(Vuex); export default new Vuex.Store({ state: { userInfo: null, allUsers: [ { id: 1, name: "hoza", email:.. 공감수 0 댓글수 0 2022. 2. 23.
Axios 기초 배우기 #4 (토큰을 활용한 로그인 프로세스) 우리는 이메일과 패스워드를 통해 서버와 통신을 하게 되는데 성공했다면 토큰을, 실패했다면 에러 메시지를 받을 것이다. 이메일과 비밀번호를 입력하여 로그인되면 로그인 상태가 계속 유지되어야 하는데 그 정보를 계속 가지고 있는 것은 보안상 위험하다. 이를 해결하기 위해 토큰 방식을 사용할 것이다. 토큰에 만료 시기를 부여하면 토큰이 탈취되더라도 일정 시간이 지나면 무용지물이 되어 보안을 지킬 수 있다. 공감수 0 댓글수 0 2022. 2. 23.
Axios 기초 배우기 #3 (POST 방식으로 통신하기) 저번 예제와 마찬가지로 axios의 github페이지에 있는 예제로 POST 방식으로 통신해보겠다. src/views/Login.vue 아이디와 비밀번호를 확인하세요 로그인 성공 로그인 로그인 테스트 POST 테스트 \ POST 테스트 버튼을 만들어 주고 reqres.in에 서버통신을 요청할 것이다. POST 방식으로 통신할 때는 body에 값을 담아주어야 한다. GET 방식과 POST 방식의 차이점은 다른 블로그에 자세히 설명을 적힌 것이 있어서 링크를 가져왔다. [네트워크] get 과 post 의 차이 GET 과 POST 는 HTTP 메서드로 클라이언트에서 서버로 무언가를 요청할 때 사용한다. 2019/06/01 - [IT 정보 로그캣/CS] - [네트워크] http 란 [네트워크] http 란 기본.. 공감수 0 댓글수 0 2022. 2. 23.
Axios 기초 배우기 #2 (GET 방식으로 통신하기) 실제로 axios를 사용하여 이메일과 패스워드를 입력하고 서버와 통신해보겠다. GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js github.com axios의 github페이지에 사용 예제들이 있다. src/views/Login.vue 아이디와 비밀번호를 확인하세요 로그인 성공 로그인 로그인 테스트 \ 로그인 버튼 밑에 test 버튼을 하나 만들어준다. axios예제를 그대로 가져왔을 .. 공감수 0 댓글수 0 2022. 2. 23.
Axios 기초 배우기 #1 (페이크 API서버와 Postman) 먼저 vue에서 서버와 통신을 주고받기 위해 axios를 설치한다. npm install axios 테스트 서버는 reqres.in을 사용한다. 별도의 서버를 만들거나 샘플 데이터를 생성하지 않고도 빠르고 편리하게 Restful API 환경을 마련할 수 있는 일종의 페이크 API 서버이다. Reqres - A hosted REST-API ready to respond to your AJAX requests Native JavaScript If you've already got your own application entities, ie. "products", you can send them in the endpoint URL, like so: var xhr = new XMLHttpRequest(); xh.. 공감수 0 댓글수 0 2022. 2. 23.
Axios 기초 배우기 #0 (기본세팅) Vuetify를 활용하여 템플릿을 꾸미고 서버와의 통신 없이 회원 DB 같은 정보를 만들어 단순한 로그인 기능을 구현하였다. 간단한 라우팅을 지원한다. 앞으로 이 예제를 서버 통신을 통한 로그인 기능으로 개선한다. src/App.vue mdi-home Home mdi-email 로그인 mdi-dog mypage Application mdi-dots-vertical 마이페이지 로그아웃 로그인 © {{ new Date().getFullYear() }} src/main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import vuetify from './pl.. 공감수 0 댓글수 0 2022. 2. 23.
Vuex 기초배우기 #6 (actions) mutations의 값을 변경할 때 actions state의 값을 변경할 수 있는 mutations에는 한 가지 걸리는 점이 있다. 바로 모든 기능이 동기 처리된다는 것이다. 여려개의 컴포넌트가 같은 동작을 수행할 때 코드의 재사용성을 높이고 편리하게 사용할 수 있지만, 같은 값에 대해서 여러 컴포넌트가 변경을 요청하게 된다면 처리 순서를 알기가 힘들어진다. 그런 mutations에 비동기 처리를 요청하는 것이 actions이다. 극단적으로 말하자면 state의 값을 변경할 때 mutations으로 처리하고 mutations의 값을 변경할 때 actions로 처리한다. mutations에 접근하기 위해 commit을 사용했던 것 처럼, actions에 접근하기 위해 dispatch를 사용한다. src/.. 공감수 0 댓글수 0 2022. 2. 23.
Vuex 기초배우기 #5 (mutations) state 값을 변환시킬 때는 mutation (동기) 컴포넌트 내에서도 state의 값을 변화시킬 수 있는데 왜 mutation이 필요할까? 여러 개의 컴포넌트에서 같은 state 값을 동시에 제어하게 되면, state 값이 어느 컴포넌트에서 호출되어 변경되었는지 추적이 어렵게 된다. setter와 비슷한 역할이라고 생각하면 된다. src/store.js mutations: { addUsers: (state, payload) => { state.allUsers.push(payload); }, }, state의 값을 변경하기 때문에 state를 인자로 받아온다. payload에는 변경하기 위한 내용을 인자로 받아온다. src/components/Users/SignUp.vue EventBus의 역할을 mu.. 공감수 0 댓글수 0 2022. 2. 22.
Vuex 기초배우기 #4 (mapState, mapGetters) mapState와 mapGetters는 state, getters를 보다 쉽게 사용할 수 있게 도와준다 앞의 코드에서 좀 더 복잡한 계산을 getters에 작성해보겠다. 전체 유저에서 서울에 살고 있는 사람의 수와 그 퍼센트를 계산해준다. src/store.js getters: { allUsersCount: (state) => { return state.allUsers.length; }, countOfSeoul: (state) => { let count = 0; state.allUsers.forEach((user) => { if (user.address === "Seoul") count++; }); return count; }, percentOfSeoul: (state, getters) => { retu.. 공감수 0 댓글수 0 2022. 2. 22.
Vuex 기초배우기 #3 (getters) getters는 computed Vuex와 같은 중앙통제 저장소를 사용하면 발생하는 흔한 문제점 중 하나는 컴포넌트에서 vuex로 데이터를 접근할 때 중복된 코드를 반복 사용하게 된다는 것이다 가령 예를들어 각 컴포넌트마다 유저의 수를 표시하고 싶다면 {{ $store.state.allUsers.length }} 이런 식으로 접근하면 된다. 문제는 컴포넌트를 생성할 때마다 같은 코드를 계속 적어주어야 한다는 것이다. 지금의 예제는 굉장히 단순한 계산식을 적어놨지만 코드가 복잡해질수록 곤란하게 여겨질 것이다. vue에서는 반복된 코드를 줄여주고 캐싱해주는 computed가 있지만 이것은 각각의 컴포넌트에서 적용이 된다. store에서 computed의 역할을 해주는 것이 getters이다. src/stor.. 공감수 0 댓글수 0 2022. 2. 22.
Vuex 기초배우기 #2 (state) state는 data vuex의 store는 자주 사용할 데이터들을 관리하는 상태 관리 라이브러리이다. (게임에서 창고 같은 거, 어디서나 필요한 것들을 꺼내쓸 수 있다) 먼저 AllUsers.vue에 있는 allUsers 배열은 사용자들의 정보를 담고 있었다. store로 보내기 딱 좋다. Allusers.vue의 data()에서 allUsers 배열을 store로 옮긴다. src/store.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { allUsers: [ { userId: "hoza123", password: "123", name: "Hoza", addre.. 공감수 0 댓글수 0 2022. 2. 22.
Vuex 기초배우기 #1 유튜브 강의 중 Vuex에 관해 괜찮은 것이 있길래 정리해보았다. 사용자 정보를 입력하고 전체 사용자에 관한 목록을 출력하는 단순한 코드이다. /src/App.vue //네비게이션바 home Home person Users Application //라우팅할 페이지 //푸터 © 2021 /router.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "a.. 공감수 0 댓글수 0 2022. 2. 22.
실무에서 바로 쓰는 Frontend Clean Code 리뷰 토스 공식 유튜브에 기재된 개발자 컨퍼런스를 참고하여 작성함 클린코드라 하면 '명확한 이름', '중복 줄이기'를 먼저 말한다. 실무에선 이 외에도 조금 더 섬세하게 코드를 정리하는 스킬이 필요하다. 리액트를 기반으로 코드를 리뷰하며 자바스크립트를 이해하고 있다면 충분히 볼 수 있는 간단한 코드로 진행된다. 1. 실무에서 클린 코드의 의의 단순한 자기 만족 이상으로 실무에서 클린 코드가 의미 있는 이유는 무엇일까? '그 코드는 안건드리는게 좋다' 라는 얘기를 종종 듣게된다. 흐름 파악이 어렵고, 도메인 맥락 표현이 안 되어 동료에게 물어봐야 알 수 있는 코드로 이해할 수 있다. 이런 코드는 개발할 때 병목이되고 유지보수가 어려우며 심하면 기능 추가 등의 확장이 불가능한 상태로 빠지게된다. 또 성능이 안 좋.. 공감수 0 댓글수 0 2022. 2. 22.
Map과 Set(JavaScript) Map 객체는 키와 값을 한 쌍으로 이루어진 컬렉션이다. Map 객체는 Map 생성자 함수로 생성한다. const map = new Map(); Map 객체는 데이터를 추가할 때 Map.prototype.set 메서드를 사용한다. // map 선언 const map = new Map(); // map 값 추가 #1 map.set('key1', 'value1'); map.set('key2', 'value2'); // map 값 추가 #2 map .set('key1', 'value1') .set('key2', 'value2'); console.log(map); // Map(2) { 'key' => 'value', 'key2' => 'value' } 또한, 중복된 키가 있을 때는 Map 객체에 새로운 키가 저.. 공감수 0 댓글수 0 2022. 2. 21.
반복문(Loop / JavaScript) forEach() forEach 반복문은 배열에 사용하기 좋다. var arr = [10, 20, 30]; arr.forEach(function(value, index) { console.log('array index: ' + index + ' value : ' + value); }); 위 코드의 결과는 다음과 같다. array index: 0 value : 10 array index: 1 value : 20 array index: 2 value : 30 for in for in 반복문은 배열과 객체에 모두 사용할 수 있다. Vue.js의 v-for 디렉티브의 모티브가 되는 문법이기도하다. var arr = [10, 20, 30]; var obj = { num: 10, str: 'hi', arr: [],.. 공감수 0 댓글수 0 2022. 2. 21.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.