개발32 Stack Overflow와 지식 공유의 즐거움에 대한 이야기 때는 2020년 1월이었고 나는 대학교 2학년 겨울 방학을 보내고 있었다. 왜인지는 모르겠지만 react native를 가지고 뭔가 만들고 있었던 것 같다. 사실 지금도 그렇지만 react native에 대해서 제대로 공부하고 사용해본 적은 없다. 앱을 만들어야만 하는 상황에 최대한 빠르게 만들기 위한 선택지였다. 그런데 뭔가 마음대로 안된 모양이다. 나는 수 시간의 구글링으로도 도저히 해결하지 못하고 끙끙대다 stackoverflow에 역사적인 첫 질문 글을 올리게 됐다. 결과는 down vote만 5개 쌓인 나쁜 질문글을 남기고 말았다. 이해하기 어렵고 재현할 수 없으며 의도가 불분명한 글을 남긴 대가였다. 당시에는 실시간으로 쌓이는 마이너스가 큰 충격이었고 감수성 풍부한 대학교 2학년생은 마음의 상.. 2022. 5. 25. '멘탈 모델'에 대한 짧은 생각 (이 글은 '멘탈 모델'의 사전적으로 정확한 의미에 대해서 다루는 글이 아닙니다. 해당 단어에 대한 부정확한 설명이 포함되어 있을 수 있습니다.) 리액트 개발자 Dan Abramov의 글을 읽다가 지속적으로 쓰이는 한 단어가 눈에 띄었다. 이 mental model 이라는 단어이다. 멘탈 모델이란 간단하게 이야기하면 뇌 - 행동 사이의 편리한 인터페이스라고 할 수 있겠다. 즉, 자주 사용하게 되는 사고의 흐름이다. 개발을 예로 들면, 프레임워크 따위의 도구들은 시간이 지남에 따라 자연스럽게 익숙해지기 마련이다. 이것은 해당 프레임워크가 제공하고자 하는 멘탈 모델에 익숙해지고 있다고 할 수 있겠다. 그러나 이해는 '익숙함'과는 별개의 이야기이다. Dan Abramov는 '올바른 멘탈모델'을 정립하는 것을 .. 2022. 4. 21. Next.js의 Link와 Client/Server-side-rendering Next.js에서는 태그가 아닌 컴포넌트를 통해서 Client-side-rendering을 구현하도록 하는데요. 이번 포스팅에서는 이 동작과 Next.js에서의 Client-side 및 Server-side 렌더링에 대해서 알아보겠습니다. 먼저 production 환경에서의 실제 동작을 확인하기 위해 build를 해 보겠습니다. static하게 여러 페이지가 만들어진 모습입니다. 이 페이지로 링크하는 태그를 를 통해 생성하고 실제 HTML 태그를 확인해 보면 다음과 같습니다. 방금 static하게 생성했던 페이지로 href가 설정된 모습입니다. 크롬 개발자 도구로 어떤 요청이 이루어지는지 확인해보겠습니다. index 주소인 /로 접근하자, HTML페이지를 받아오고, 그 이후에 JS를 받아와 hydrati.. 2022. 1. 20. [Typescript] array, object 를 literal 타입으로 변환하기 타입스크립트를 사용하다보면 literal 타입이 유용한 경우가 많습니다. 이번 포스팅에서는 제가 타입스크립트 개발을 하면서 필요성을 느꼈던 리터럴 타입 변환에 대해서 다루어 보겠습니다. 명확하지 않은 배열의 타입 제가 좋아하는 야구를 예로 들어보겠습니다. 야구의 외야에는 세 개의 포지션이 있고, 위치에 따라서 좌익수, 중견수, 우익수라고 합니다. const outfielders = ['left', 'center', 'right']; // 타입 추론 결과: const outfielders: string[] 모든 외야수 문자열을 포함하는 outfielders 배열 하나를 선언했습니다. 이렇게 작성하면 이 배열의 타입은 string[]으로 추론됩니다. 우리의 목적은 외야수 배열을 표현하고 싶었는데, 이렇게 추.. 2021. 9. 25. React Component npm에 publish 하기 ~ 꺽쇠, +, - 등의 아이콘 컴포넌트 +나 x 등의 아이콘을 적당히 만들어서 빠르게 프로토타이핑을 하고 싶을 때 사용할 심산으로 컴포넌트화 시켜봤습니다. 이번 프로젝트의 주요 목적이기도 했던 npm에 publish 또한 완료했습니다. 코드는 아래 저장소에서 보실 수 있습니다. https://github.com/JeonJaewon/react-symbols GitHub - JeonJaewon/react-symbols: Handy React.js components for various symbols Handy React.js components for various symbols. Contribute to JeonJaewon/react-symbols development by creating an account on GitHub. github... 2021. 8. 25. 새로고침 시에도 redux store 유지하기 브라우저가 새로고침 될 시, 런타임중에 변경된 redux store는 초기화되어 버립니다. 이를 해결하기 위해서 만들어진 유명한 패키지는 redux-persist가 있습니다. 다만 저는 타입스크립트 리액트 앱에서 적용시켰을 때 오류를 겪어서 저장소를 살펴보았더니 해당 저장소는 2019년 이후로는 관리가 되지 않고 있었습니다. 저를 포함한 대부분의 경우 크고 거창한 기능이 필요하기보다는 단순한 데이터 유지 기능만이 필요하므로, 직접 구현하는 것도 좋은 해결책이라고 생각이 들어서 직접 구현해보고자 합니다. 새로고침 시에도 데이터를 잃어버리지 않기 위해서는 저장소를 사용할 필요가 있는데, localStorage나 sessionStorage를 사용할 수 있습니다. 이번에는 sessionStorage를 활용해 보.. 2021. 8. 25. 이전 1 2 3 4 5 6 다음
