DAN'S 기술블로그

보호되어 있는 글입니다.

키보드 엑스포를 다녀오면서 부터 앨리스 배열 키보드를 향한 열망이 커져... 결국 하나 장만하게 되었습니다. 👍 완벽히 마음에 드는 키보드가 없어서 약간의 커스텀을 했는데요. 일단 결과물은 아래와 같습니다. ✨ 허접스러운 부분도 있지만 개인적으로는 만족합니다. 저는 키보드를 살 때 이전 키보드를 사용할 때 느꼈던 단점을 보완하고 가지고 있는 장점을 잃지 않는 방향으로 골랐습니다. 그래서 앨리스 배열 키보드 사용 후기 엄격한(?) 기준으로 키보드를 고르고 -> 입맛에 맞게 커스텀한 결과.. 좋았습니다. 확실히 손목이 덜 아파요. 대신 팜레스트는 꼭 해야합니다. 전용 팜레스트도 파는데 써보진 않았지만 평범한 일자형 팜레스트도 충분히 편합니다. 그리고 익숙해지는데도 오래 걸리지 않았어요. 대신 처음 사용해보는..

열흘정도 지났지만 후기를 남겨봅니다. 행사 소개 우선 서울 기계식 키보드 엑스포는 커스텀 키보드 오타쿠들을 위한 키보드 전시회입니다. 유명한 커스텀 키보드 업체가 참여한다고 하는데… 사실 입문자(?)인 저의 시선으로 봤을때 대부분 모르는 이름들이었어요. 티켓은 총 3종류 판매하는데 종류는 다음과 같고, 저는 Yellow 티켓을 구매해서 들어갔습니다. 저는 유유자적 키보드와 키캡을 구경하다가 마음에 드는게 있으면 구매하고, 추첨까지 확인하고 집에 가는 그림을 그리고 있었습니다. 상당히 잘못된 그림이었습니다. 행사장 견?학? 행사는 오전 10시부터 오후 6시까지였습니다. 저는 오전 11시 20분쯤 도착하여 입장했습니다. 입장줄은 매우 짧아서 바로 행사장으로 들어갈 수 있었습니다. 그런데 들어가고나니 사람이 ..

한번이라도 써볼껄... 하는 후회에서의 시작 최근 사이드 프로젝트를 진행하며 프론트엔드 개발자 4인이 협업을 하게 되었다. 그때 나온 질문이 공통으로 사용하는 UI 컴포넌트의 관리 방법이었다. 그러고보니 프론트엔드 개발자로 일하면서 대부분의 프로젝트를 1인으로 개발해왔기에 스타일 가이드의 문서화에 신경쓴 적이 없었다. 무슨 컴포넌트가 있는지, 어떻게 사용하는지 기억하고 있었으니까... 그나마 웹 퍼블리셔로 일할 때 스타일 가이드 페이지를 제작해서 퍼블리셔 여럿이 함께 작업을 하긴 했는데, 스타일 가이드용 페이지를 따로 파는 것 보다 스토리북으로 컴포넌트를 관리하고 문서화하면 좋을 것 같다는 생각이 들었다. 그래서 스토리북을 써보자고 제안해봤는데, 문제는 내가 스토리북을 써본 적이 없어 스토리북으로 컴포넌..

✨ 타입스크립트 소개 타입스크립트는 자바스크립트에 타입을 추가한 상위 호환 언어다. 자바스크립트에서는 string, number, object, undefined 같은 원시 타입을 가지고 있지만 약한 타입 언어이기 때문에, 타입으로 인한 에러를 사전에 알기 어렵다. 하지만 타입스크립트로 작성한다면 컴파일 시점에서 타입 에러를 잡아낼 수 있다. 또한 타입스크립트를 사용하면 IDE의 도움을 받을 수 있다. (예를 들어 인자에 무엇을 넣어야 하는지 미리보기가 가능하다) 👩‍🔧 타입 시스템 💡 타입 추론 (Types by Inference) let helloWorld = "Hello World"; 위처럼 변수를 생성하며 값을 할당하는 경우, 타입스크립트는 자바스크립트를 이해하기 때문에 타입을 명시하지 않아도 h..

1. 타입스크립트와 객체지향 타입스크립트는 자바스크립트에 타입이 더해진 언어로, 자바스크립트의 superset이다. 타입스크립트는 자바스크립트로 컴파일된다. 객체지향이란, 객체 위주로 설계하고 프로그래밍하는 패러다임이다. 객체지향에서의 객체는 현실에 있는 것을 추상화한 것이라고 볼 수 있다. (추상이란? 사물이 지니고 있는 여러 측면 중 특정한 부분만 보는 것을 말한다. 지구본이나 지도는 실제의 지구를 추상화한 결과물이다.) 객체지향에서 각각의 객체는 서로 의사소통할 수 있다. 1-1. 절차지향과의 차이점 🧶 절차지향 데이터와 함수 위주로 구성되어있다. 그러나 그러한 함수와 데이터가 엉켜있어 사이드 이펙트 발생확률이 높아진다. 즉, 유지와 확장이 어렵다. 🎁 객체지향 프로그램을 객체로 정의하여 객체들끼리..

❓ 리덕스는 무엇인가 리덕스는 상태관리 라이브러리다. 상태관리 로직을 분리시켜서 효율적으로 관리할 수도 있고, 전역 값 관리도 손쉽게 할 수 있다. 하지만 모든 경우에 리덕스를 사용할 필요는 없다. 관리해야 할 전역 값이 별로 없다면 (state가 많이 변경되지 않는다면) ContextAPI를 써도 좋다. (https://actually-i-am.tistory.com/56) 프로젝트의 규모가 크거나 (관리해야 할 전역값이 자주 변경되거나), 비동기 작업이 자주 필요하다면 리덕스 사용을 고려해보자. 👍 리액트에서 리덕스로 상태관리 하는 장점 미들웨어 비동기 작업을 더욱 체계적으로 관리 가능 유용한 함수와, Hooks를 지원받을 수 있다. ContextAPI는 직접 만들어서 썼다 리덕스 툴킷같은거 ex. c..

🙄 왜 사용하나요? props drilling을 방지하기 위함이다. Props drilling이란? 부모로 해당 props를 사용할 자식 컴포넌트로 전달하면서, 그 중간에서 props를 사용하지 않음에도 불구하고 props를 전달하는 것을 말한다. 그림으로 그리면 위와 같다. 중간 컴포넌트는 props를 사용하지 않으면서도 props를 전달하기 위해서 props가 거쳐가야 한다는 문제점이 있다. props가 무엇이냐면 : https://actually-i-am.tistory.com/47 리액트의 기초 - props 이전 포스트 : https://actually-i-am.tistory.com/46 리액트의 기초 - 컴포넌트와 JSX 리액트를 간단하게 설명하자면 컴포넌트들이라고 할 수 있다. 컴포넌트는 무엇..

우선 나는 2020년에 전직 웹퍼블리셔 회고록을 쓰며 프론트엔드 개발자가 되기로 결심했다. 하지만 그 선언이 무색하게도 현재 직장에서 프론트엔드 개발자로서 기여하지 못하고 있다. 😥 왜 그렇게 생각하냐면 워드프레스의 html, css (가끔 javascript)를 사용해 사이트에 스타일을 적용하는 업무가 대부분이기 때문이다. 빠른 시간에 MVP를 가장 효율적으로 만들기 위해서 워드프레스를 사용한다는 설명에는 동의를 한다. 그러나 성장하고 싶은 주니어에게, 워드프레스는 좋은 환경은 아닌 것 같다. 나름대로 주어진 환경 안에서 가능한만큼 일을 했지만 지난 약 1년동안 내가 프론트엔드 개발자가 맞는지 직업 정체성에 대한 혼란을 겪었다. 워드프레스를 그대로 사용하면서도 사이트의 UX를 개선할 수 있도록 워드프레..

useReducer란? useReducer는 상태관리를 도와주는 리액트 훅이다. useState와 다른 점 기능이 더 많고 복잡한 상태일 때 유용하다. state의 조각들이 여러개 함께 사용될 때 적합하다. 위와 같은 장점이 있지만 기능이 강력하다고 항상 좋지는 않다. 왜냐하면 useState에 비해 코드가 무거워지기 때문이다. 사용법 const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn) state : 현재 상태의 스냅샷 dispatchFn : 상태를 업데이트 해주는 함수 상태값을 설정하는 대신, 하나의 액션을 dispatch하게 된다. ** (dispatch - 보내다) 그리고 보내진 것은 reducerFn에서 사용된다 redu..