본문 바로가기

react 40

[인터뷰] 프론트 앤드 인터뷰 질문 ( Feat.VoyagerX ) 내가 가고 싶은 기업 중 하나인 VoyagerX의 인터뷰 질문에 관한 글이다. 학부 3학년 말에 Vrew의 초기 모습을 보고 감명을 받았다. 유저가 불편해하는 부분을 컴퓨터로, 그중에서도 머신러닝을 이용해 해결했다는 점이 참 멋지다고 느꼈다. 그때 나는 친구들과 창업을 했었다. 그래서 여기저기 많은 곳을 쏘아 다녔고 가끔씩 VoyagerX 대표 남세동님이 발표하는 세션을 몇 번 봤었다. 그때 뭔가 알 수 없는 선망을 했었다. 그래서 창업을 했는데도 그냥 면접을 보고 싶다고 메일을 보냈고 실제로 면접을 봤었다. ( 만약 붙었으면 어찌했을까 라는 다소 책임감 없는 상상도 해봤었다 ) 결과부터 말하자면 떨어졌다. 아직 졸업시기도 아닌 나에게 각 파트의 리더님, 그리고 남세동님께서 한 시간 넘게 1대 4로 면접.. 2021. 2. 20.
[리액트] 두번 렌더링 되는 이슈에 대하여(Feat.StrictMode) 들어가며 요새 교학성장이라는 말을 실천해보기로 했습니다. 교학상장(敎學相長) [가르칠 교, 배울 학, 서로 상, 길 장] ‘가르치고 배우면서 서로 성장한다’는 뜻. 스승은 제자를 가르치는 과정에서 아직도 막히는 부분이 있음을 느껴 더욱 정진케 되고, 제자는 배울수록 자신의 부족함을 알게 돼 학업에 힘쓰니 가르침과 배움이 서로를 성장케 한다는 뜻이다. 속담에 ‘세살먹은 아이한테도 배운다’고 했다. 배움의 길에 모든걸 가르쳐주는 절대스승은 없다. 가르치고 배우며 부족함을 채울 뿐이다. 하지만 가르칠 곳이 마땅치 않는 저에겐 그나마 오픈채팅방에서 답변해주는 게 그나마 지식을 나누는 방식이라 생각해서 알만한 질문이 나오면 최대한 답변을 하려고 노력하고 있습니다. 이번 글 또한 비슷한 맥락에서 작성하는 글이기도 .. 2021. 2. 2.
[리액트] typescript, mobx 에서 private state를 처리하는 방법에 대하여 mobx 상에 store를 만들어 사용할 때 일반적으로 observable를 통해 만들게 됩니다. 간단한 예를 들어 설명하겠습니다. 일반적으로 클래스형 store에서는 간단하게 makeObservable()를 통해 간단히 만들곤 합니다. import { action, makeObservable, observable } from 'mobx' class Count { number: number = 0 constructor() { makeObservable(this, { number: observable, increase: action, decrease: action, }) } increase = () => { this.number++; } decrease = () => { this.number--; } } .. 2021. 1. 19.
[리액트] 브라우저 notification 구현해보기 이번 포스트에서는 브라우저에서 notification를 push 하는 간단한 방법에 대해 알아보려고 합니다. 완성된 모습은 아래와 같습니다. 코드는 크게 App 부분과 notification 부분으로 나뉘게 되고 함수로는 useNotification이 권한을 요청하는 기능, notificiation를 만들어서 push 주는 기능을 제공합니다. import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const useNotification = (title, options) => { if (!("Notification" in window)) { return; } const fireNotif = () => { /* 권.. 2021. 1. 5.