서론 ESLint는 기본적으로 code linter이다. 코드 품질과 관련. Prettier는 기본적으로 code formatter이다. 코드를 이쁘게 정렬해준다. 문제는 linter의 기능에 formatter의 기능도 들어가기 때문에 충돌이 생긴다. 이 충돌을 막아주는 것은 eslint-config-prettier 라는 패키지다. 지난 번 Airbnb 설정을 따르려고 했지만 수많은 문제점이 생겼다. 너무 엄격하기 때문에 learning curve가 높고, 그로 인해 오히려 개발에 지장을 준다. 또한 예외 rules가 늘어나다보니 linter의 본래 역할을 못 하는 경우도 발생했다. 이번에는 간단하게 Lint의 기본 기능에도 충실하고 Prettier와도 충돌나지 않게 처음부터 다시 설정해보자. Tailw..

1995년 앞서 말했던 Netscape Communications의 두 가지 전략은 당시 Microsoft라는 공룡에 대항하기 위해 동시에 진행되었다. 1995년 4월 Netscape은 Brendan Eich를 영입하게 되었다. 5월에 Netscape 2.0 beta의 일정에 맞추기 위해 Brendan Eich는 입사하자마자 10일만에 브라우저에서 사용할 수 있는 동적 언어를 탄생시켰다. 10일만에 무에서 유를 창조할 수 없으니 Brendan Eich는 여러 언어에서 아이디어를 따왔다. 그 중 특히 4가지에서 영감을 받았는데, 1. 함수형 언어인 Lisp 계열의 Scheme이란 언어에서 영감을 받고 (first-class functions) 2. Bill Atkinson이 개발한 매킨토시의 Hyperta..

서론 Frontend framework의 진화에 대해서 이해를 하면 왜 javascript가 현재의 모습인가에 대한 약간의 통찰이 생긴다. 그러나 framework의 역사를 이해하려면 browser의 진화에 대해 같이 봐야 이해도가 더 올라간다. 그래서 browser, javascript, framework의 evolution에 대해서 간략히 정리해보려고 한다. HTML 브라우저 진화 정리하기 전에 우선 HTML은 언제부터 쓰였나가 궁금해져서 검색해보았다. 시작은 유럽의 입자물리연구소인 CERN에서 출발하였다. 세계의 여러 대학과 연구기관에서 일하는 물리학자들 상호간의 신속한 정보교환과 공동연구를 위해 고안되었다. WWW와 HTML과 현재 URL구조의 창시자로 유명한 영국의 Tim Berners-Lee(..

nextjs 공식사이트를 모니터링 하던 중 너무 잘만들어진, 학습과정이 있어 가져왔습니다. Next.js Learn Course next블로그를 읽다가 학습 과정에 대한 내용을 발견했는데요 내용은 아래의 이미지와 같습니다 Learn Next.js | Next.js by Vercel - The React Framework (nextjs.org) 다음.js 14 | 다음.js (nextjs.org) 처음 Next.js를 접했을 때는 이런 기능이 없었던 것 같은데... 이런 교육적인 요소도 제공해주는 환상적인 Next.js입니다. 그래서 해당 기능을 확인해보니, 설정된 학습 과정은 이렇게 구성되어 있습니다 또 여기서 react를 배운 적이 없다면, react 기초부터 배울 수 있도록 구성되어 있습니다 아.....

Next.js conf. 2023 또 Next.js 14 conference 얘기를 써보자면 BigCommerce 발표 때 한 얘기 중 최근 인기가 급부상하는 shadcn/ui라는 Tailwind UI library를 보고 영감을 많이 받아 composable storefront를 개발하는 중이라는 내용이었다. shadcn/ui에 대해서 간단히 알아보자. 설치 공식 홈페이지에보면 https://ui.shadcn.com/docs/components-json npx shadcn-ui@latest init CLI command 하나로 설치한다. 그 후엔 각각 필요한 컴포넌트별로 설치한다. 사용 이 library의 특징은 설치라는 개념이 원본 code를 다운로드 받는 개념이다. 예를들어 Card componen..

CSS 처리기에서 가장 인기있는 것은 CSS-in-JS 중 단연 styled-components 그리고 전처리기인 SCSS였다. 점유율을 보면 SCSS가 가장 높다. 그러나 최근에 Tailwind CSS의 인기가 급부상하고 있다. Styled-components 다음은 React에서 사용할 때의 jsx 파일이다. (Vue에서도 vue용 styled-components가 있다.) import styled from 'styled-components'; const StyledButton = styled.button` background-color: blue; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; ..