전체 글250

• 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.

• 

  Apache, NginX, Tomcat의 개념(+ 웹서버, WAS, 로드밸런싱, 프록시) 웹 서버 Apache, NginX, IIS가 대표적인 제품 웹사이트를 위한 서버를 만들어 주는 소프트웨어 웹에 필요한 자원들을 특정 폴더들에 저장하여 서버에 지정된 웹사이트 주소로 접속하면 이것들을 받아갈 수 있도록 하는 역할 Tomcat, Node.js, Django 내장 서버 등과 클라이언트 사이에서 매니징을 담당하기도 한다. 왜냐하면 웹 서버 만으로도 PHP 동적 웹 정도는 처리할 수 있지만, 더 전문적으로 동적 웹을 처리하기 위해서다. reverse proxy 제공: 서버의 정보를 감추어 준다. 보안 측면에서 웹 서버를 앞에 내세우는 것이 크다. 캐시 제공: 클라이언트들이 자주 쓸 법한 자원들을 저장해준다. 로드밸런싱: 이용자가 몰릴 때 여러 개의 Tomcat에 고루 배정해준다. WAS에 대한 헬.. Programming/ETC 2023. 6. 25.

• 

  [개발자 미국 기업 원격근무] 딜(Deel)을 통한 근로 계약서 쓰기 오퍼 레터를 받고, 노트북을 수령한 후 마지막으로 딜코리아(Deel)를 통해서 근로 계약서를 작성했다. 이전 글에서(https://drspace.tistory.com/244) 적었듯이 이 회사는 한국에 법인이 없기 때문에 HR Saas 회사인 Deel을 통해 근로 계약을 대신한다고 안내를 받았었다. Deel은 근로 계약이나 임금 지불 뿐만이 아니라 HR 관련된 모든 것을 자동화해주는 서비스를 표방하고 있다. 그래서 로그인을 하면 내 계정에서 근로 계약, 휴가 사용, 재직증명서, 근로소득 관련 서류, 월급(+ 상여금) 내역 및 계좌 관리, 조직도 보기, 비품 등 HR과 관련된 거의 모든 것들을 처리할 수 있도록 되어 있다. 이번에 근로 계약서를 쓰면서도 주민등록증 + 운전면허증(optional) + 주민등.. My/Careerlog 2023. 6. 23.

• 

  MacBook Pro 맥북프로 14 M2 스페이스 그레이 리뷰 회사에서 업무용 노트북으로 2023년에 M2 프로세서를 탑재해 출시된 새 맥북프로 14인치(!!!)를 사용하게 되어 리뷰해본다(전지적 컴알못 & FE 개발자 입장) Spec(공식 홈페이지 참조) 가격: 3,490,000원 12코어 CPU 19코어 GPU(8K 해상도의 외장 디스플레이를 2대까지 지원한다고 한다. 또 HDMI가 2.1로 업그레이드 되면서 디스플레이 지원이 크게 좋아졌다.) 16GB 통합 메모리 1TB SSD 16코어 Neural Engine(애플 실리콘 칩에 있는 특수 연산 코어 모음으로 구성된다. 칩에서 작업이 이뤄지기 때문에, 기계/인공지능 기능을 빠르고 효율적으로 실행하도록 설계됐다.) 35.9cm Liquid Retina XDR 디스플레이 Thunderbolt 4 포트 3개, HDM.. Reviewlog/Reviews 2023. 6. 18.

• [회고] 2023.05.12 - 06.13 | 마지막 사내 스터디 발표, Girls in Tech 멘토링 신청, 남해 여행, 퇴사, 휴식, GA4 스터디 5월 말쯤 퇴사를 앞두고 자료 정리와 마지막 사내 스터디 발표 준비로 5월을 보냈다. 발표 주제는 Three.js. 스스로에게 앞으로 더 열심히 해보자는 메시지를 전하는 의미도 있었고, 정말 흥미로운 라이브러리였기에 주제로 선정한 것도 있었다. 동료들과 퇴근 후에 저녁을 먹고 인사를 나누기도 했다. 앞으로 이렇게 출근하고 퇴근하는 일상은 당분간 없을 거라는 생각에 집을 나서는 기분이 색달랐다 ㅎㅎ. 이렇게나 빨리 퇴사를 하게 될 줄은 몰랐는데, 인생에 있어서는 방향성이 중요한 것이지 단기적인 계획은 위인들도 지키기 어렵다는 말이 실감나기도 했다. 한 회사에서 적어도 1년, 이상적으로는 2년은 경험을 쌓는 것이 좋다고 생각하는 편이라, 이번에는 지켜지면 좋겠다. 그렇다면 내가 다니는 회사가 여러 모로 좋은.. My/Riverlog 2023. 6. 13.

• 

  SI 개발자, 미국 핀테크 회사로 이직한 후기(feat. 원격근무) 정말 우연한 기회로 미국 핀테크 회사(구체적으로는 학자금 대출 관련)의 플랫폼 자회사(몇 년 전까지는 스타트업이었지만 인수됐다)로 이직을 한 이야기를 정리해본다. full-remote로 외국 회사에서 일하는 기회를 찾고 있거나, 입사 전형 중에 있는 분들에게도 도움이 되었으면 좋겠다. 아직 입사 전이라서 전형 과정을 중심으로 정리해 보았다. 1. 링크드인 메시지를 받다 CTO로부터 온 메시지 글을 쓰기 시작한 지금(4월 말)으로부터 두 달 전 쯤 CTO로부터 링크드인 메시지가 왔다. 내 링띤 프로필을 봤고, 원격으로 실리콘밸리 기업에서 일할 수 있는 어메이징한(!?) 기회에 대해 30분 정도 챗을 나눌 수 있냐고 했다. 사실 처음에는 그냥 무차별적으로 메시지를 뿌리는 것 아닐까 생각했는데, 따로 한국 시.. My/Careerlog 2023. 5. 31.

• [Vue2] mapGetters로 가져온 값을 watch하는 법 isLogin(newVal, oldVal) { ... } Programming/Vue 2023. 5. 16.

• [회고] 2023.04.30 - 05.11 | 가정의 달, 커피챗, 맛집들, GA4 스터디 신청, 온라인 석사 결심, 우아한 스터디 신청 어쩐지 시간적 여유는 많았지만 그만큼 열심히 놀아서 바쁜 것처럼 느껴졌던 5월 첫 주! 5월 초이다 보니 어버이날 이야기가 빠지면 섭섭하다. 가족들 선물을 주로 아이디어스에서 사고 있는데 올해는 꽃까지 비누꽃으로 준비해봤다. 생화만큼의 신선함은 없지만, 비누로 쓰실 수 있으니까 오히려 버리는 슬픔이 없어서 좋은 것 같기도 하다. 사실 드린 것보다 어린이날이라고 선물을 많이 주셔서 넘 민망했다..ㅋㅋㅋ 또다른 WWCS 리더분과 커피챗도 했는데, 문래에 '냐옹지마'라는 캐주얼한 오마카세를 소개해주셔서 내가 예약 티켓팅에 성공해 운좋게 가보게 됐다. 일반적인 오마카세와는 다르게 좋은 가격에 우리가 고른 다양한 메뉴들을 차례차례 내주셔서 정말 좋았다. 왜 그렇게 예약이 어려운지도 알 것 같았다. 해산물을 싫어하.. My/Riverlog 2023. 5. 12.

• 

  개발자의 성장 언어/자료구조 -> framework -> 알고리즘 -> CS core -> Data ---> 천재적 감각 과제 -> 재미 -> 연습 -> 학습 -> (도메인의 고객에 대한) 경험 특정 도메인에서의 깊은 경험은 다른 도메인에 가서도 도움이 되고는 한다. https://www.youtube.com/watch?v=3jkDAeahXes My/Careerlog 2023. 5. 10.

• 

  [리팩토링 개정판] 01. 리팩터링: 첫 번째 예시 프로그램이 새로운 기능을 추가하기에 편한 구조가 아니라면, 먼저 기능을 추가하기쉬운 형태로 리팩터링하고 나서 원하는 기능을 추가한다. -p.27 리팩터링하기 전에 제대로 된 테스트부터 마련한다. 테스트는 반드시 자가진단하도록 만든다. -p.28 아무리 간단한 수정이라도 리팩터링 후에는 항상 테스트하는 습관을 들이는 것이 바람직하다. -p.32 나는 함수의 반환 값에는 항상 result라는 이름을 쓴다. 그러면 그 변수의 역할을 쉽게 알 수 있다. -p.34 자바스크립트와 같은 동적 타입 언어를 사용할 때는 타입이 드러나게 작성하면 도움된다. 그래서 나는 매개변수 이름에 접두어로 타입 이름을 적는데, 지금처럼 매개변수의 역할이 뚜렷하지 않을 때는 부정 관사(a/an)를 붙인다. 변수 인라인(외부에 두지 않.. Programming/Computer Science 2023. 5. 9.

• 

  [Nuxt.js] Vuex state가 변경되어도 자동으로 update되지 않는 layout 컴포넌트 업데이트시키기 Nuxt.js의 경우 layout 폴더에 따로 분류된 컴포넌트들은 Vuex state가 변경되어도 자동으로 업데이트되고 캐싱된 값을 사용한다. 그래서 일종의 강제 리렌더링이 필요하다.이 때, Nuxt의 $store.subscribe() 함수를 사용해 mutation이 일어날 때마다 말 그대로 그 변화를 '구독'할 수 있다.그러나, 이 방법은 코드를 더 복잡하게 만드는 방법이므로 computed를 사용할 것을 권장하고 있다. 빠른 시간 내에 업무를 처리하려다보니 이런 코드를 사용하게 됐는데, 간편하고 보기도 좋으며 Nuxt(Vue)의 Lifecycle을 자연스럽게 따라가는 computed를 대신 사용하자!예시 코드created() { ... if (this.isLogin) { this... Programming/Vue 2023. 4. 25.

• 

  2023년 4월 1일 ~ 2023년 4월 30일 회고 꽃샘추위, 생일 주간, 블렌더 마지막 수업, WWC 국제 협업 참여, 맥북 구매 결심, 가족들과 보내는 시간, 배산임수, 헬스장 등록, 기초의 중요성, 할머니 병문안 가기, 안경 맞추기, 남쪽으로의 여행 준비, WWCS 갑자기 추워진 날씨에 좋기도 하고 싫기도 했던 한 주. 산불을 꺼 준 고마운 비가 꼬박 하루를 내리고 나니 기온이 많이 떨어졌었다. 추위를 너무 많이 타는 나는 괜히 주변 사람들한테 역정을 내게 된 ㅎㅎㅎㅎ; 하지만 막상 비가 갠 다음 날에는 점심 산책 중 마시는 공기가 너무나도 상쾌해 기분이 좋았다. 그리고 4월 3일은 나의 생일! 고마운 가족들과 맛있는 밥도 먹고, 나이에 맞지 않는 용돈도 많이 받았다 ㅋㅋㅋ 소중한 친구들에게 축하도 많이 받고. 대학을 졸업하고 나서는 인간관계가 조용.. My/Riverlog 2023. 4. 9.

• [CSS] transform 속성 사용자에게 특정 팝업(div로 만드는 간단한 팝업)을 보여주려고 하는데, 우선 중앙정렬 하도록 하기 위해서 최상단 div 태그에 top: 50%;, left: 50%; 로 지정해주었다. 그런데 몇 십 픽셀 정도 묘하게 어긋나서 이유를 알아보니 div의 왼쪽 상단 모서리를 기준으로 위치가 산정되기 때문이었다. 이 때 사용하면 좋은 것이 transform 속성이다. transform은 요소에 이동(transform), 회전(rotate), 확대/축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 애니메이션이 필요하다면 트랜지션이나 애니메이션과 함께 사용하고, 아무것도 사용하지 않으면 바로 해당 속성이 적용되어 렌더링 될 것이다. transform 함수들 transform functi.. Programming/HTML, CSS 2023. 3. 31.