전체보기257

• 

  [JavaScript] new 연산자 예전에 정리해봐야지~ 했던 new 연산자. 왜 정리하고 싶었는지는 잊어버렸지만, 종종 만나게 되기에 정리해보자. 정의 new 연산자는 '생성자 함수' 앞에 붙여 객체를 만들어주는 연산자라고 할 수 있다. new라는 이름이 암시하듯이 새로운 객체입니다~! 라는 의미로 받아들였다. JavaScript에서 생성자 함수는 객체를 만드는 함수다. 아래에서 Person함수는 생성자 함수이며, 일반 함수와 구분하기 위해 대문자로 시작한다. function Person(name){ this.name = name; this.introduce = function(){ return 'My name is '+this.name; } } var p1 = new Person('river'); document.write(p1.int.. Programming/Javascript, Typescript 2023. 7. 13.

• 

  [React] 'as' props React 컴포넌트 라이브러리 중 'as'라는 이름의 프로퍼티를 사용하는 경우가 있는 것 같다. (아마 material UI로 추측한다.) as의 역할은 해당 컴포넌트 외부(다른 파일)로부터 HTML을 가져와서 대체할 수 있도록 해주는 것이다. 기본 JSX/HTML 문법은 아니고, 일부 라이브러리에서 사용하는 것으로 보인다. 예시 코드 // class형 컴포넌트 ... return ( ... ) 'studentInputText' 컴포넌트에서는 태그에 전달된 prop들을 그대로 사용할 수 있다. 사용 이유? 정확히 알기 힘들지만(한글 자료 너무 없음!) 코드를 직접 만져 본 입장에서는 유지보수의 의미가 큰 것 같다. 해당 컴포넌트에 조건이 너무 많이 걸려 있거나 내부 작업이 많이 필요하다면 메인 컴포넌트(.. Programming/React 2023. 7. 13.

• 

  Flyway에 대해 알아보자: 오픈소스 DB migration 툴 DB migration 툴 Flyway에 대해 알아보자. DB migration이라고 하면 싸피에서 처음으로 Django를 배웠을 때 model의 내용을 연결한 DB(당시에는 sqlite)에 적용시켰던 게 기억난다. Flyway도 그러한 DB migration을 해주는 도구다. 하지만 어떤 특정 프레임워크에 의존적이지 않은 '오픈 소스' 툴이다. Flyway를 사용하는 이유 이미 배포된 서비스의 DB가 있다. 스키마도 복잡하고 사용자 데이터도 많이 쌓인 상태다. 이 상태에서 model(entity)에 변화가 생긴다면 어떻게 적용해야 할까? DB에 직접 접속해서 매뉴얼하게 명령어를 칠 수도 있지만, Flyway를 적용하면 로컬에서 변경 사항을 적용하면 알아서 관리해준다. 휴먼 에러를 방지하기 위한 목적이 .. Programming/Database 2023. 7. 11.

• 

  2주간의 재택 온보딩 회고 지난 금요일부로 2주간의 재택 온보딩이 끝났다. 어느 집단에서든 온보딩은 흡사 새로운 행성에 발을 딛는 우주비행사와 같은 기분으로 시작한다. 조직마다 그들만의 문법, 일의 양식, 규칙을 가지고 있기 때문이다. 그리고 그 사회의 일원이 되기 위해서는 이전에 내가 몸 담고 있던 것들에서 한 발 벗어나 새로운 것을 적극적으로 맞이하는 자세가 필요하다. 나 또한 이 사회의 목표와 규칙을 잘 이해하고 있고 뜻을 같이 함을 보여주기 위해서다. 그래서 한 회사에 입사한다는 것은 단지 노동력을 제공하는 것에 국한되지 않고 이런 내용을 적극적으로 받아들이는 것 또한 포함한다. 완전 재택으로 일하는 상황에서 이런 과정에 가장 중요한 것은 조직에 관해 잘 정리된 글을 읽는 것과 구성원들과의 원격 소통인 것 같다. 이 과정을.. My/Careerlog 2023. 7. 8.

• react-redux 기본 개념 정리 react-redux를 연결해 주는 도구 사용 방법: Provider, useSelector, useDispatch 사용법 Provider 필요한 컴포넌트만 Provider 태그로 감싸준다. useSelector 사용하고자 하는 state를 가져온다(함수를 인자로 받는다.) 예시 // App.js ... import { createStore } from 'redux'; import { Provider, useSelector, useDispatch, connect } from 'react-reducx'; function reducer(currentState, action) { if (currentState === undefined) { return { number: 1, }; } const newState.. Programming/React 2023. 7. 7.

• 

  [Redux] Redux 기본 개념 Redux: 상태관리 라이브러리 Redux를 쓰는 이유 props 문법 귀찮을 때 state 변경을 관리 Redux 설치 후 store.js 파일에 state들을 보관함으로써 props가 필요 없게 된다. 사용 예제 1. state 보관하기 // index.js import { Provider } from 'react-redux'; import { createStore } from 'redux'; const 체중 = 100; function reducer(state = 체중, action) { return state } let store = createStore(reducer) ReactDOM.render( document.getElementById('root') ) 2. state 가져와서 사용하기 /.. Programming/React 2023. 7. 7.

• [비즈니스] OKR이란? https://shiftee.io/ko/blog/article/okrManagement HR 인사담당자가 주목하고 있는 성과관리 방법 'OKR' 이란? | 시프티 조직의 성과와 목표 관리를 위한 지표, ‘OKR(Object Key Result)’이란 무엇인지에 대해 알아보도록 하겠습니다. shiftee.io My/Careerlog 2023. 6. 28.