쇼핑몰에 카드를 두고와서 집에 가는길에 카드를 찾기 위해 경유지로 쇼핑몰을 등록했다.
그랩의 기본 정책은 경유지에서 5분까지 기다려주는 것인데, 좀 더 걸릴수 있을 것 같았다.
베트남 친구가 그랩 기사님께 보낼 문구를 작성해줬다.
그 문구를 보고 기사님은 흔쾌히 ok 라고 하셨고, 오토바이에서 내리자마자 뛰는 나를 위해 ‘Please calm down’ 이라고 말해주셨다.

이 나라의 느긋함과 느슨함이 편안함으로 다가왔던 일화!

Plus,
Happy women’s day. 🤓🥂

2024-09-30 파견근무 시작, 현재 4개월차 근무중.
 
1. 문화상의 차이점

• 언어
  • 언어 기본적으로 베트남어를 사용한다. 한국 법인과는 IT comtor(IT전문 통역사)를 통해 소통한다. 
  • 영어 소통관련해서는 영어를 잘하거나(10%) 시도하는 사람(30%) or 영어를 하지 않는 사람(50%)으로 갈리는 것 같다.
    • 즉, 우리회사 기준 약 40% 의 사람들은 영어로 소통이 된다. (comtor 미포함, 컴터는 다 잘함)
• 호칭
  • 안 Anh , 찌 Chị 직역하면 오빠, 언니라고 부르는 언어의 특징이 있다.
  • 나이보다는 직급이 중요하긴 하지만, 그래도 나이가 중요시 여겨지는 문화가 있다. 
• 시차
  • 한국과는 2시간의 시차가 있고, 한국이 2시간 빠르다.
  • 따라서 점심시간, 출근시간의 Gap을 생각하면 협업 근로시간이 많지는 않다. (시차를 기회로 활용하는 방법을 고민해보자)
• 날짜 표기법
  • 베트남의 날짜 표기법 DD-MM-YYYY
  • 한국이 날짜를 년-월-일 의 방식으로 표기하는 것과는 차이가 있다.
  • 배포하는 날짜, 회의록 작성 날짜 등 모두 한국 기준으로 작성된 부분이 있어서, 베트남 직원분들이 어렵겠다 라고 생각이 든다. 그렇지만 일관성있게 작성할 수 있도록 기준을 갖는 것은 중요하다.

 
 
 
2. 업무 태도

• "함께하는 것"에 자연스럽다. 

내 팀원인지 여부에 관계 없이 문제를 공유하고, 이렇게 자연스러운 분위기 속에서 해결방법에 대한 토론까지도 이어진다. 한국에서는 각 팀에서 리소스 등을 원인으로 문제를 숨겨서 일을 두번씩 했던 경험이 있는데, 이와같은 분위기를 잘 활용한다면 그러한 문제점은 적을 것으로 보인다. 
 
 

• 업무 효율에 대해서 생각하는 태도는 적다. 

'어떻게 하면 효율적으로 일할 수 있을까?' 에 대한 고민은 적다. 따라서, 내가 당연히 알고있을 것이라고 생각하는 것에 대해서도 기본적인 Align이 되어있지 않는 경우가 있다. 예를 들면, 소통을 할때는 단체채널을 사용해야한다던지,..., hotfix나 sign-off 에 대응하는 자세라던지... 사실, 한국에서도 비슷한 경험이 있다. 시니어분들과 소통할 때, 그들이 말하는 불문율의 룰들이 내가 생각하던 부분과 다른 부분이 있어서 이를 그라운드룰화 했던 경험이 있다. 당연히 알고있다고 생각해서 간과했던 부분이 비슷해서 이 부분도 함께 지킬수 있는 규칙으로 그라운드룰 화를 진행하고있다.
 
 
 
 
3. 업무 외 시간

• 운동

회사에서 동아리로써 일주일에 2번 운동시간이 있다. 배드민턴 / 풋살을 진행한다. 구장 대여금, 유니폼은 참가자가 일정인원을 넘어가면 회사에서 지원을 해준다. 가족 및 애인을 동행하여 같이 즐기기도 한다. 함께 하는 것에 익숙한 맥락으로 다같이 하는 것에 어색함이 없다.
 

• Company trip.

일년에 한 번은 회사주도로 단체 여행을 간다. 올해의 경우 12월 초에 2박 3일 코스로 나짱(나트랑)-깜란 코스로 다녀왔다. 한국에서는 워크샵 1박 2일로 가는 것도 별로 안좋아했을텐데, 3일 동안 회사 인원들과 진짜 관광과 화합을 목적으로 여행에 다녀온다는게 신기했다. 저녁에 장기자랑도 하고, 술도 엄청 마신다. + 그리고 추가적으로 컴패니 트립을 위해 제작한 사명이 박힌 티셔츠도 평소에 넘 잘 입고 다닌다. 
 
 
 
 
4. 해외 법인 생활을 하며 배운 점

• 기준을 갖는 것

셋업 단계에서는 메인이 되는 법인이 key를 가지고 행동하는 것이 중요하다. 기본적으로 날짜 쓰는 방법도 다른 서로가 어떤 문화와 규칙을 메인으로 조직을 셋업할건지가 중요하며, 한국법인을 본사로 두고있다면 한국법인에서 이 key를 가지고 가야한다. 그렇지 않다면 조직원들은 너무나 헷갈리는 환경속에서 업무를 하게될터... 물론 이에 맞는 평가제도도 뒷받침 되어야 할 것 이다.
 

• 빠른 문제 해결과 컨텍포인트

현재 100명 규모의 조직으로 운영되면서 현 시점에서의 보고 체계나 운영방식에 대해 배운점이 많이 있다. 특히 대표님을 보고 많이 배웠는데, 리더로서 본인이 해결해야할 부분, 구성원 스스로가 해결해야할 부분에 대해 명료한 인식과 행동을 보여주실 때가 인상 깊다. 특히, 구성원들께 요청하는 부분은 컨텍포인트를 알고있는지에 대한 부분이라서 빠른 문제 해결을 위한 컨텍포인트 파악이 문제해결의 시작이라는 것을 다시 한 번 느낀다. 나도 현장에서 문제를 인식하고, 정의해서 리포트하는 역할을 잘 해야겠다.
 
 
5. 앞으로 고민이 더 필요한 지점들.

• turnkey / non-turnkey 프로젝트들 잘~ 시작하고, 잘~ 운영하기 전략들
• 문제를 정의하는 능력이 중요하다. 앞으로도 잘하기. 내 능력화!!
• 시차를 기회로 활용하는 방법을 고민

 
사실 공통점도 많이 있는데, 적다보니 차이점만 적은 것 같기도하다.
다음은 어떤 문제들이 있었고, 어떤 방식으로 문제를 정의했으며, 어떻게 해결해나가고 있는지를 정리하겠다.
 
최고의 조직 이라는 책을 읽고있는데, 남은 기간도 숲의 관점에서 회사를 바라볼 수 있기를!!
2025년도 화이팅..!

개인 공부를 위한 번역으로 참고사항으로만 여겨주시길 부탁드립니다.

오번역 및 잘못이해한 부분이 있다면 커멘트 부탁드립니다(_ _)

Introduction

Start Date: January 23, 2023

Link: https://vuejs.org/guide/quick-start.html

시작하기

• 사전 조건: Node.js 최신 버전 설치

> npm init vue@latest

• 공식적인 Vue 프로젝트 스캐폴딩 툴인 create-vue를 설치하고 실행할 것임.
  • 타입스크립트 사용, 테스트 툴 지원과 같은 몇 가지 선택적 기능에 대한 프롬프터가 등장할 것임.
  • ✔ Project name: … <your-project-name> ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes Scaffolding project in ./<your-project-name>... Done.
  • 아직 선택적 기능에 대한 확신이 들지 않는다면 일단은 NO 옵션으로 진행하기.
    
    
• Dev 서버 실행하기
  • > cd <your-project-name> > npm install > npm run dev // app을 production으로 보낼 준비가 되었다면 > npm run build // ./dist 폴더에 빌드파일이 생성됨.

CDN을 통해 Vue 이용하기

*CDN 링크 방식**: 라이브러리등의 외부 모듈에 대한 js 파일을 직접 가지고있지 않아도 외부 서버 주소를 링크하여 사용하는 것 → HTML에 url경로를 포함시켜, CDN으로부터 Vue 라이브러리를 불러오는 방식임.

(vs Webpack 방식: npm 으로 뷰 모듈을 불러오는 것)

• 글로벌 빌드
  • <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
• ES 모듈 빌드
  • <script type="module"> import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'; </script>
• Import maps
  • // dependency entry를 import maps 을 통해 등록할 수 있음. <script type="importmap"> { "imports": { "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" } } </script> ... <script type="module"> import { createApp } from 'vue' </script>
• 모듈쪼개기
  • 관리를 쉽도록하기위해 코드를 별도의 Javascript 파일로 분할해야할 수 있음.

    // my-component.js
    export default {
    data() {
      return { count: 0 }
    },
    template: `<div>count is {{ count }}</div>`
    }

  • <!-- index.html --> <script type="module"> import { createApp } from 'vue' import MyComponent from './my-component.js' createApp(MyComponent).mount('#app') </script>
  • index.html을 브라우저에서 직접 연다고 생각해보자. 이때, ES 모듈이 file:// 프로토콜을 통해 작동할 수 없기 때문에 오류가 발생한다는 것을 알 수 있다. 이를 작동하게 하기 위해서 http://프로토콜을 통해 index.html 을 제공할 필요가 있다.
  • 로컬에서 HTTP 서버를 시작하려면 먼저 Node.js를 설치한 다음 HTML 파일이 있는 동일한 디렉터리에서 npx serve를 실행한다. 또한, 올바른 MIME 타입을 가진 정적파일을 제공할 수 있는 다른 HTTP서버를 사용할 수도 있다.
    • *MIME 타입**: 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘, 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 대게 MIME 타입을 사용https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types
• 빌드 단계 없이 Composition API 사용하기
  • setup() option에 대해 알아보자: https://vuejs.org/api/composition-api-setup.html

개인 공부를 위한 번역으로 참고사항으로만 여겨주시길 부탁드립니다.

오번역 및 잘못이해한 부분이 있다면 커멘트 부탁드립니다(_ _)

개인 공부를 위한 번역으로 참고사항으로만 여겨주시길 부탁드립니다.

오번역 및 잘못이해한 부분이 있다면 커멘트 부탁드립니다(_ _)

Introduction

Start Date: January 19, 2023

Link: https://vuejs.org/guide/introduction.html

VUE란 무엇일까?

컴포넌트 베이스의 UI 구축을 위한 JS프레임워크

VUE의 2가지 코어 개념

1. 선언적 렌더링(Declarative Rendering)
   1. Javascript의 상태에 기반으로 HTML에 바로 결과값을 표현할 수 있음. 템플릿을 통해 확장된 HTML 사용 가능
2. Reactivity
   1. 뷰는 자동적으로 자바스크립트 상태변화를 감지하며, 변경사항이 발생할때마다 효율적으로 DOM을 업데이트합니다.

프로그래시브 프레임워크

1. 빌드 단계 없이 정적 HTML을 향상(enhance)
   1. 독립실행형 스크립트 파일로 사용 가능함.(실행을 위한 빌드가 필요하지 않음)
   2. petite-vue: 이미 짜여진 HTML을 사용하기 위한 최적화된 형태의 Vue
2. 모든 페이지에 웹 컴포넌트로 임베딩
   1. 렌더링 방법에 관계없이 모든 HTML페이지에 포함할 수 있는 표준 컴포넌트를 빌드할 수 있음.
   2. 그 결과, 웹 컴포넌트는 레거시 어플리케이선, 정적인 HTML, 다른 프레임워크로 작성된 어플리케이션에 임베딩될 수 있음.
3. SPA
   1. 고도화된 어플리케이션(많은 상호작용, deep session, 복잡한 상태저장 등)을 구현하기위한 가장 좋은 방법 => Vue가 전체 페이지를 제어할 뿐만 아니라 페이지를 다시 로드하지 않고 데이터 업데이트 및 탐색을 처리하는 아키텍처를 사용하도록 하는 것 ( == SPA )
4. SSR / Fullstack
   1. SPA의 단점
      1. SEO, 콘텐츠 제공시간에 민감한 경우 문제가됨 => 맨처음에 비어있는 HTML을 수신하기 때문에, 무엇이든 렌더링 하기 전에 기다려야함.
   2. Vue는 Vue앱을 서버의 HTML문자열로 “렌더링”하기 위한 일급클래스 API를 제공함. 이를 통해 서버는 이미 렌더링된 HTML을 다시 보낼 수 있으므로 자바스크립트가 다운로드 되는 동안에 사용자가 즉시 콘텐츠를 볼 수 있음.
   3. 그 다음 Vue는 클라이언트 측에서 애플리케이션을 hydrate하여 인터렉티브하게 만듦.
   4. 이것이 Server Side Rendering
   5. 결과적으로 이는 웹바이탈의 LCP(Largest Contentful Paint)지표를 크게 향상시킬 수 있음.
   6. NextJS
5. SSG
   1. 필요한 데이터가 정적이면 서버측 렌더리을 미리 수행할 수 있음
   2. 즉, 전체 어플리케이션을 HTML로 사전 렌더링하고 정적파일ㄹ로 제공할 수 있음
   3. 결과적으로 사이트 성능이 향상되고 더이상 각 요청마다 페이지를 동적으로 렌더링할 필요할 필요가 없어지므로 훨씬 간단해짐
   4. SSG의 2가지 유형(공통점: 사이트를 정적 HTML로 미리 렌더링)
      1. 단일페이지
         1. 초기페이지 로드 후, 페이지를 hydrate함. 이렇게하면 많은 초기 JS페이로드 비용이 필요하지만, 전체 페이지를 다시 로드하는 대신 페이지 콘텐츠를 부분적으로만 업데이트하면되므로 후속 탐색이 빨라짐
      2. 다중페이지
         1. 탐색할 때마다 새 페이지를 로드함, 장점은 최소한의 JS를 제공하거나 페이지에 상호작용이 필요하지 않은 경우 JS를 전혀 사용하지 않음,
6. desktop, mobile, WebGl 그리고 터미널까지 구현 가능(../?)

API 스타일

options API

1. data, methods, mounted 와 같은 options의 객체를 사용하여 컴포넌트 로직을 정의할 수 있음.
   1. data: this로 노출되어, reactivity를 가짐
   2. methods: state를 수정하거나 업데이트를 할 때 사용 | template에서 이벤트 리스너와 결합되어 사용 가능.
   3. mounted: 컴포넌트가 마운트될때 실행되는함수
2. options 로 정의된 요소들은 컴포넌트 인스턴스를 가리키는 this 내부 함수에 노출됨
3. 예제

Composition API

1. import 로 가져온 API함수를 사용해서 컴포넌트 로직을 정의할 수 있음.
2. <script setup> 을 활용
   1. setup속성은 Vue가 간편하게 composition API를 사용할 수 있도록하는 컴파일타임 변환을 수행한다.
   2. <script setup> 내에서 템플릿에서 바로 사용가능한 imports, 변수선언, 함수 정의를 할 수 있다.
3. 예제 
   
   1. 동일 템플릿, 대신 `<script setup>` 사용

Options API vs Composition API 정리

링크: https://vuejs.org/guide/introduction.html

링크: https://vuejs.org/guide/introduction.html

Introduction | Vue.js vuejs.org

번역 참 어렵다. Abstract away.. ?

  > reactivity를 abstraction시켜서 무조건 사용할수있게 함, reactivity에 대한 control 이 불가능 

이라고 이해를 해서 정리했는데,  잘못된 정보를 재생산하는 것이 아닌지 무섭다.

개인 공부를 위한 번역으로 참고사항으로만 여겨주시길 부탁드립니다.

오번역 및 잘못이해한 부분이 있다면 커멘트 부탁드립니다(_ _)

지난주에 사전예약을 진행하고, 오늘바로 제품을 수령해왔다.

파스쿠찌는 시즌 MD를 사전예약 방식으로 자주 판매하는 듯 보이는데, 물량때문에 그런 것은 이해하지만,

후기없이 물건을 구매하는 것을 결정해야하기때문에 의사결정이 어렵고(제품 소개도 그렇게 자세한 편이 아님),

또한 추후에 구매하려고 했을때는 이미 기간이 지난후라 물건을 구할 수 없다는 아쉬운 점도 있다.

그럼에도 불구하고 사전예약으로 구매한 다이어리 UNBOXING!

LET's START!

# 수령했을때 포장되어있는 모습

- 내가 선택한 구성품: 그립톡, 다이어리 세트(스티커, 쿠폰), 캘린더 

- 사전예약혜택으로 아메리카노까지 포함해서 22000원 언저리였음.

- 12월부턴가 매장에서 판매한다고 했는데, 음료가격 할인 받은거 제외하면 가격은 비슷할 것으로 예상됨.

- 일단 포장지가 넘 귀여워서 보자마자 기분이 좋아졌다..!

# 포장을 뜯고, 다이어리와 캘린더를 꺼낸 모습

- 다이어리 맨 뒤에 스티커같은 자잘한 물건 보관할 수 있는 공간이 있는 점이 좋았음.

- 다이어리 속지는 월요일부터 시작해서 약간 ...ㅎ..ㅎ 좀 구매를 고민했던 적이 있지만... 귀여우니까....

- 자세한 다이어리 속지는 파스쿠찌 공식인스타그램 참고: https://www.instagram.com/p/CVzYupNP471/

# 캘린더

- 완전 딸기우유색 핑크,,! 각 월별로 테마에 맞추어 일러스트가 들어가있음.

- 다이어리와 다르게 이 캘린더는 일요일부터 시작함.

# 다이어리 스티커

- 스티커는 진짜 너무 귀엽다!!!!!!!!

- 개인적으로 선이 두껍고, 원색의 캐릭터를 좋아하는데 무직타이거가 진짜 딱 그거다!

- 쟤네 둘이 안고있는거 넘 귀여워,,,,

- 동그라미, 하트 스티커는 왜 있는지는 의문!

# 쿠폰 4종

- 쿠폰이 4장 들어있다는 문구를 본 것 같은데, 조건부 쿠폰이라 크게 기대하진 않았다.

- 역시, 특정 제품 구매시 음료 증정 쿠폰이 들어있었고, 기간도 분기별로 나누어져있어서, 사용도가 크게 높진 않을 것 같은 느낌이 든다. 카페를 혼자다니다 보니까 저런 조건부 쿠폰에 맞추기가 힘듦.

- 귀여우니까 그냥 간직해야지...

# 마지막으로 그립톡

- 해피오더 전용 패키지로만 구매할 수 있었던 그립톡!

- 원래 그립톡을 사용하지 않았어서 엄청 고민하다가 사게됐는데, 밑에 자석과 공존할 수 있도록 좀 위에 붙인감이 없지않아 있지만, 핸드폰을 가로로 세울수 있다는 점에서 좋다. 

- 아래 색은 검정색이고, 짱짱한 그립톡 같음.

-끝.

본 게시물은 한빛미디어의 "모던 자바스크립트 핵심 가이드"(알베르토 몬탈레시 지음)를 공부하면서 작성되었습니다.

이전 글: [JS 핵심 가이드] 06. 디스트럭처링(Destrcturing)

1. for of 루프

: 배열의 각 원소에 대해 반복하는 방법

const fruits = ['apple', 'banana', 'orange']
for(const fruit of fruits) {
	console.log(fruit);
}
//apple
//banana
//orange

2. 객체에 대한 반복

: 객체는 interable이 아님

Q. 키/값 쌍에 대한 반복은 어떻게 구현? 

A. Object.keys()를 사용하여 객체의 모든 키를 가져온 후, 키에 대해 반복을 수행하면서 값에 접근

const car = {
	maker: "BMW",
    color: "red",
    year: "2021",
};

for(const prop of Object.keys(car)) {
	const value = car[props]
    console.log(props, value)
}

// maker: BMW
// color: red
// year: 2021

=> ES6에서 Object.entries()로 객체의 key, value를 모두 가져올 수 있음. 

3. for in 루프

: 순서없이 객체의 모든 열거 가능한 속성을 반복

const car = {
	maker: "BMW",
    color: "red",
    year: "2021",
};

for(const prop in car) {
    console.log(props, car[props])
}

//maker BMW
//color red
//year 2021

4. for of와 for in의 차이

let list = [4, 5, 6]

// for...in은 키의 목록을 반환한다.
for(let i in list) {
	console.log(i); //"0", "1", "2"
}

//for ...of는 값을 반환한다.
for(let i of list) {
	console.log(i); // 4, 5, 6
}

본 게시물은 한빛미디어의 "모던 자바스크립트 핵심 가이드"(알베르토 몬탈레시 지음)를 공부하면서 작성되었습니다.

이전 글: [JS 핵심 가이드] 05. 문자열 메소드

06. 디스트럭처링(Destrcturing)

: 디스트럭처링 할당 문법배열의 값 또는 객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트 표현식이다. (by, MDN정의)

6.1 객체 디스트럭처링

: 객체에서 변수를 생성할 때 

[ ES6 이전 ]

var person = {
	first: "Yasmine",
    last: "Kim",
};
var first = person.first;
var last = person.last;

[ ES6 이후 ]

const person = {
	first: "Yasmine",
    last: "Kim",
};

const {first, last} = person;

=> 디스트럭처링을 이용하여 person이 가진 속성에 접근함과 동시에 해당 속성 이름으로 변수 선언이 가능함을 알 수 있다.

[ 중첩된 사례 ]

const person = {
	first: "Yasmine",
    last: "Kim",
    links: {
    	social: {
        	facebook: "http://www.blablabla.com"
        }
        website: "http://websites.com"
    },
};

const {facebook} = person.links.social;

// 변수를 fb로 명명하고, 기본값을 다시 설정한다.
const {facebook: fb = "http://facebook.com"} = person.links.social;

6.2 배열 디스트럭처링

: 배열 디스트럭처링 [] ( cf, 객체 디스트럭처링 {} )

const person = ["Alberto", "Montalesi", 25]
const [name, surname, age] = person;

레스트 연산자(rest operator, ...)

const person = ["yangha", "kim", "pizza", "coconut water", "coffee"];

//레스트 연산자를 이용하여 나머지 값 전체를 얻는다.
const [name, surname, ...food] = person;
console.log(food) // ["pizza", "coconut water", "coffee"]

6.3 디스트럭처링을 이용하여 변수 교체하기

: 디스트럭처링을 이용해서 swap을 쉽게 할 수 있다.

let hungry = "yes";
let full = "no";

//swap
[hungry, full] = [full, hungry];
console.log(hungry, full) // no yes

공식문서(mdn): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment