분류 전체보기35 2022년 생각들 정리 겸 기록 글을 쓰는 일은 형태를 막론하고 많은 시간이 드는구나 누군가 정리해놓은 지식이나, 질문에 대한 답변... 많은 사람들이 자신의 시간을 투자해서 아름다운 일을 하고 있구나 그 생태계의 일원이라는 점이 뿌듯함 글 쓰는거 재미붙임 특히 지식 공유의 즐거움을 알게되어 행복하다 글로 정리하는 행위가 스스로도 많은 동기부여가 되는 것 같다 잘 쓰고, 많이 읽히는 글을 쓰고 싶다 한국어로 아직 잘 정리되지 않은 지식들을 쓰는게 제일 효용이 큰 것 같다 프론트엔드? 스스로의 정체성을 프론트엔드 개발자로 두고 있지만 경계를 FE로만 규정하는지는 않고 싶다 프론트엔드 서버 관리는 누가? 결국 프론트엔드 개발자가 해야하지 않을까 서버, 인프라 쪽도 중장기적으로는 공부해야겠다 싶은 생각 결국 SW 개발자 중 가장 유저와 가까.. 2022. 6. 16. React의 new JSX Transform, emotion의 css prop 설정법 emotion에서는 css라는 이름의 prop을 통해 스타일을 할 수 있는데, 당연히 이런 이름의 prop이 모든 html 요소에 존재하지 않으므로 추가적인 설정이 필요하다. 공식 문서에서 여러 방법을 안내하고 있는데, 상당히 파편화되어 있어서 조금은 불친절한 문서화라고 느꼈다. 오늘은 이 설정을 하면서 알게 된 react의 new JSX Transform에 대해서 적어보려고 한다. 어느새부터 React를 사용할 때 import React from ‘react’를 사용하지 않아도 된다고만 기억하고 있었는데, 그 정확한 이유는 React 17부터는 JSX를 transform 하는 새로운 방법이 도입되었기 때문이다. import React from 'react'; function App() { return .. 2022. 6. 13. 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. 이전 1 2 3 4 5 6 다음
