TEL - 15 : o not access Object.prototype method 'hasOwnProperty' from target object

Mon, 24 Apr 2023 00:00:00 +0900

Javascript

SITUATION :
- 객체에 해당 프로퍼티가 존재하는지 확인 하는 메소드를 작성 하려고 hasOwnProperty를 사용
o not access Object.prototype method 'hasOwnProperty' from target object.
라는 메세지가 출력 되고 실행 되지 않음
REASON :
- eslint의 no-prototype-builtins 라는 규칙에 의해 에러를 발생
  Object.prototype의 builtin으로 제공 되는 메서드는 객체에서 직접 호출하지 않도록 하는 규칙이 있다.
SOLUTION :
- Object.prototype.hasOwnProperty.call(foo, ‘bar’) 처럼 사용해야 한다.

TEL - 14 : Computed property '...' was assigned to but it has no setter.

Mon, 05 Dec 2022 00:00:00 +0900

Vue

SITUATION :
- Vue.js 로 개발하던중 여느때와 같이 Computed 속성을 쓰는 도중
Computed property '...' was assigned to but it has no setter.
REASON :
- getter/setter를 가지고 있는 computed는 기본적으로 get을 리턴 하고 set을
  명시해주지 않아도 되는데 v-model을 통해 바인딩이 되어있다면 setter가 필요 없더라도, 기본적인 함수는 선언해줘야 한다고 한다.
SOLUTION :
- Computed 작성시 get(), set()으로 선언하고 set()을 비워두면 해결!

TIL - 43 : Vue $set, $delete & EventBus

Wed, 14 Sep 2022 00:00:00 +0900

Vue $set, $delete & EventBus

Vue에서 배열 자료를 수정하거나 삭제 할 일이 있을때 $set과 $delete로 편하게 했으나
아무때나 쓰면 안되는 사실을 발견
- 공식문서에 따르면 vue는 양방향 바인딩이 특징인 대신에 객체 데이터나 배열에
  새로운 속성 및 데이터가 추가되거나 삭제되는 것을 감지하지 못하는 경우가 자주 생긴다고한다.
- 그래서 값이 갱신되었다! 라고 요청하는 메서드가 $set과 $delete 이다
- 즉시 delete에서 splice로 변경ㅠㅠ
컴포넌트끼리 props를 넘기지 못하는 상황에서 단순 하나의 데이터 이동을 위해
vuex를 써야하나 말아야 하나 고민을 하던 도중 EventBus라는 것을 알게 되었다.
- 규모가 작으면서 관련성이 없는 독립적인 컴포넌트 끼리 통신을 해야 할 경우에는
  EventBus를 사용한다.

TIL - 42 : NPM 패키지

Thu, 25 Aug 2022 00:00:00 +0900

NPM

npm 버전관리 시 Major, Minor, patch 순번 의미
패키지 버전 표기
- 1.0 : 1.0 버전에서 어떤 패치 버전이든 상관없음
- 1.0.x, 1.0. : 1.0 버전에서 어떤 패치 버전이어도 상관없음
- ~1.0.4 : 1.0.4 버전 이상으로 어떤 패치 버전이라도 상관없음
- 1 : 1버전 이상의 어떤 마이너 패치라도 상관 없음
- 1.x : 1버전 이상의 어떤 마이너 패치라도 상관 없음
- ^1.0.4 : 1.0.4 버전으로 어떤 마이너 버전이라도 상관업음
- * : 어떤 버전이어도 상관 없음
- x : 어떤 버전이아도 상관 없음
npm view 패키지명 : 업데이트 할 버전이 있는지 확인
npm outdated : 모든 패키지 업데이트 확인
- Current: 현재 패키지 버전
- Wanted: 명시한 조건중 사용가능한 최신버전
- Latest: 해당 패키지의 배포되는 최신 버전
npm update : 업데이트가 필요한 패키지 업데이트
npm update 패키지명 : 해당 패키지의 업데이트

TEL - 13 : xcrun: error: invalid active developer path

Fri, 19 Aug 2022 00:00:00 +0900

Xcode

SITUATION :
- 회사에서 새 맥북을 받고나서 기존의 맥북에서 마이그레이션을 진행했음
- 마이그레이션을 진행 한 새 맥북에서 모든 깃 명령어가 작동을 안하고 다음과 같은 에러가 뜸
Can't update: not a git repository.
xcrun: error: invalid active developer path
REASON :
- 새 맥북으로 옮기면서 git에 관련된 권한 문제 혹은 맥 OS 버전에 따라 버그가 있다고 한다.
SOLUTION :
- 터미널에서 xcode-select --install 을 하여 xcode를 새로 설치해 준다.
- 다시 git --version 등 깃 명령어를 입력하면 다시 잘 된다.

[회고] 현업 개발자라는 타이틀을 단지 일주일

Sun, 14 Aug 2022 00:00:00 +0900

현업 개발자 커리어의 시작

취업을 위해 이력서 제출 무한 루프에 빠진 것이 엊그제 같은데,
벌써 취업에 성공하고 입사한 지 1주일이 지났다.

첫 출근의 설렘을 뒤로하고 온 보딩을 한 첫날부터 그동안 배웠던 것은
정말 우물 안 개구리 그 자체였다는 것을 한 번 더 느꼈다.

기본적으로 쓰는 Tool 조차도 그동안 써보지 못한 게 많았고, 첫날에 주어진
개발 업무에 대한 코드 리뷰도 현업분들과의 생각 차이가 많이 났다.

회의 및 미니 세미나 같은 것도 활발하게 이루어졌는데, 참석을 해보니 확실히 기업이
추구하는 방향과 사업성을 제대로 알아야 일을 할 수 있고 여기서 머무는 게 아니라
개인적으로 계속 발전을 해야 함을 알았다.

정신없이 흘러간 일주일, 취업을 준비할 때는 그래도 자신 만만했었는데
진짜로 자신 만만하려면 엄청난 노력을 해야 할 것 같다.

그래도 개발자라는 일을 할 수 있는 것은 그동안의 힘듦을 보상이라도 받은 듯
너무 행복하고 즐겁기만 하다.

현실에 안주하지 않고 계속 발전하고 그만큼 성과를 내야 하는 것 이것이 앞으로의 숙제다.
이제부터가 진짜 현업 개발자로의 시작이니까 언제나 그랬던 것처럼 즐기자!!

TEL - 12 : Vue - TypeScript intellisense is disabled on template

Wed, 03 Aug 2022 00:00:00 +0900

TypeScript

SITUATION :
- VSCode 상에서 Vue 작업을 할때 template 태그에서 다음과 같은 에러 메시지가 출력
REASON :
- 템플릿의 TypeScript intellisense 를 활성화 시켜줘야한다고 한다.
SOLUTION :
- jsconfig.json 에서 다음과 같은 구문을 추가한다. "jsx": "preserve"

// file: "jsconfig.json"
  "compilerOptions": {
    "jsx": "preserve",
  }

[회고] 중간 구직 결과 그리고, 아쉬운 코딩 테스트 결과

Sat, 16 Jul 2022 00:00:00 +0900

중간 구직 결과

개발자로 커리어 전환을 하고 밥 먹는 시간 빼고 매일 공부를 하며 이력서를 넣기
시작한 지도 한 달여 정도가 되었다.

이 글을 쓰는 현재 약 35군데의 이력서를 넣었고
2곳을 제외하고 모두 서류에서 탈락하였으며
그 2곳에서는 과제 전형을 하였다.

과제는 나름 잘했다고 했지만 면접까지는 가지 못하고 떨어졌다

가고 싶었던 곳이 많았지만 경력이 없는 신입이어서 당연한 결과라고 생각했고,
아직은 많이 부족해서 기회가 주어지지 않은 것이라고 생각했다.

무엇이 부족했는지 복기도 하고 수십 번의 이력서 수정도 이루어졌다.

정말 아쉬웠던 코딩테스트 결과

그런데 이번에 아쉬움이 쉽게 가시지 않는 상황이 이번에 일어났다.

이런 회사에서 일하면 정말 열심히 할 것 같고 들어가면 좋겠다 했던 곳이 있었다.
마침 거기에 지인이 취업하였고, 그 지인의 덕분에 이력서를 낼 기회가 생겼다.

그 이후 채용 프로세스가 진행되어 코딩 테스트의 기회가 주어졌다.
일정 커트라인을 넘기면 면접의 기회가 주어지는 그런 프로세스였다.

너무 가고 싶었던 곳이었으니 이 좋은 기회를 놓치고 싶지 않았고 그래서였을까
많이 설레고 그만큼 긴장도 많이 되었다.

지인분이 마음을 가라앉히고 천천히 시간을 두고 테스트를 보라 하였지만,
그렇지 않아서였을까 테스트 버튼을 누름과 동시에 손이 떨리고 땀이 났다.

첫 문제를 보자마자 머릿속이 하얗게 되었다. 배열에서 숫자만 출력하는 자바스크립트
알고리즘, 평소 잘 알고 있고 자주 사용했던 문법을 쓰는 쉬운 문제였다.

무엇을 실수했는지 한번 에러가 나오면서 답이 나오질 않았다. 시간제한에 촉박해서
당황하고 허둥대다 결국엔 잘 사용하지 않는 문법까지 써봤지만, 결과는 오답.

모든 문제가 영어로 이루어져 있고 그 뒤로 멘탈이 무너져 간단한 수학 문제도 맞추지 못하고
연달아 실수하고 제대로 된 답을 쓰지 못했다.

문제를 다 풀고 나서 결과가 나왔고 점수는? 역시 커트라인 이하였다. 2점이 모자란 점수여서
어떻게든 면접 기회를 주려 해도 너무 기본적인 문제에서 답을 틀리는 바람에 잘 안될 것 같았다.

테스트를 다 마치고 복기를 하니 왜 갑자기 머리가 잘 돌아가는 것인지..

첫 알고리즘 문제에서 잘 안됐던 이유는 typeof !== 'number' 에서
number를 감싸고있는 따옴표를 빠뜨리는 실수로 오류 계속 난것이었다.

간단한 확률 계산을 하는 수학 문제도 끝나고 나니 왜 공식이 생각나는 것인지..

너무 긴장하고 실수를 하였어도 결국은 내 부족함이 이유라 나 자신에게 너무 아쉽고,
무엇보다 신경을 많이 써주고 부족한 나 때문에 입장이 난처해졌을 지인분께 너무 죄송하다.

너무 큰, 다시는 오지 않올 기회였지만, 이제는 과거이고 소중한 경험이 되었기에
더 열심히 해야겠다는 생각이 들었다.

앞으로의 구직은?

물론 구직은 멈출 생각이 없다. 사실 프로젝트보다는 취업 쪽에 초점을 맞추어
공부를 하고 준비를 하였지만 같이 준비를 하는 게 더 좋았을까라는 생각을 하였다.

앞으로 지금처럼 계속 이력서를 내고 관련 CS나 언어 지식을 익히면서 준비할 것이고,
추가로 간단한 토이 프로젝트라도 하면서 구직을 준비하려 한다.

다 내 지식이 되고 노력하는 자에게 기회가 분명 올 것이라고 생각한다.

모든 개발자 취준생 분들 파이팅!!

TIL - 42 : Vue Lifecycle

Mon, 11 Jul 2022 00:00:00 +0900

Vue Lifecycle

Vue의 라이프사이클은 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계
Vue의 라이프사이클은 각 단계에서 실행되는 함수들이 있으며 라이프사이클 훅이라고 한다.
- Creation : 컴포넌트가 실행될때 가장먼저 실행 DOM에 올라가기 전이므로 this.$el 접근 불가
  - beforeCreate : 인스턴스가 초기화 된 직후에 발생
  - created : 인스턴스가 생성된 후에 발생. data, coumputed, methods, watch 접근가능
- Mounting : DOM의 삽입 단계. 컴포넌트에 액세스 할 수 있다. 서버 사이드 렌더링 중에는 실행 안됨
  - beforeMount : 초기 렌더링이 일어나기 전에 실행된다.
  - mounted : 인스턴스가 마운트 된후 실행. 가상 DOM의 내용이 실제 DOM 부착되고 난 이후에 실행
    모든요소에 접근 가능하며 제일 많이 쓰임
- Updating : 컴포넌트에서 사용하는 반응형 속성들이 변경되거나 리렌더링될 때마다 호출
  - beforeUpdate : DOM이 붙기전에, 데이터가 변경될 때 호출된다. 기존 DOM에 접근 가능
  - updated : 컴포넌트 데이터가 변경되어 DOM이 리렌더링 된 후 실행된다.
- Destruction : 해체 단계. 컴포넌트가 해체되고 DOM에서 제거 되면 실행된다.
  - beforeDestroy : Vue 인스턴스가 삭제되기 전에 호출된다. 인스턴스는 여전히 실행
  - destroyed : Vue 인스턴스가 제거된 후에 호출된다. 컴포넌트가 없어진것을 알려야 할때 유용

TIL - 41 : Vue, Vuex

Sat, 09 Jul 2022 00:00:00 +0900

Vue

데이터들 저장
- export default{ data() { return { data:data } } }
함수
- export default{ methods: { countUp() { this.data++ } } }
data의 접근은 this. 키워드를 붙임
컴포넌트 사용 단계
- 컴포넌트.vue 를 만든다.
- export default { name: 컴포넌트이름 } export 한다.
- 받는 곳에서 import를 한다.
- 받는곳에서 export default { components: { 작명 : 컴포넌트이름} } 을 한다.
Props 전달 방법
- <Component :props="props" :another_props="another_props">
  이렇게 컴포넌트에 v-bind 해서 전달 해 준다.
- 받는곳에서 export default { props: { props_name : data타입 } }
자식에서 부모로 자료 전달 방법
- 자식에서 클릭 이벤트를 주어야 할때 <div @click="$emit('openModal', item.data)></div>
  - $emit() 이라는 것으로 보냄 첫번째 인자는 이벤트 이름 두번째는 전달 할 데이터(생략가능)
- 부모에는 @openModal="OpenCloseModal=true; id=$event;"
  - 앞에 전달받은 이벤트 이름과 함께 클릭 했을때 실행 할 함수나 데이터를 설정
  - 전달받은 데이터는 $event로 받음
emit은 함수로도 만들어서 쓸 수 있음

Vuex

vuex 는 vue의 전역 상태 관리
데이터의 흐름
- Backend API <-> Actions -(Commit)-> Mutations -(Mutate)-> State
- State: 공통으로 사용할 변수
- Mutation: State를 변경하는 변수, Action에서 State를 수정하려면 필수
접근방법
- State : this.$store.state.items
- Mutation : context.commit('MUTATION_NAME', data)
- Dispatch : this.$store.dispatch('MUTATION_NAME')
template에 표시
- 반복문 <div v-for="data in this.$store.state.data"></div>
- mapState로 줄여서 할 수 있음
코드의 양이 많아지면 모듈화