sungwook

이전편에서 JSX를 이용해서 함수형 컴포넌트를 만들어보았다.이번에는 css 전처리기 모듈인 scss를 적용해보려고 한다. css 전처리기란 무엇일까?vanilla css를 사용할 수도 있지만 프로젝트를 할 때 css 전처리기 또는 CSS-In-JS를 많이 사용한다.css 전처리기는 mixins라는 것을 통해 재사용 가능한 CSS 규칙을 만들 수 있고 기존 스타일을 확장하거나상속받아 새로운 스타일을 정의할 수 있다. 이렇게 작성된 코드는 일반 CSS로 컴파일되어 사용된다. 이와 달리 CSS-In-JS는 동적으로 스타일을 생성하여 런타임에 스타일을 생성한다.JSX로 합쳐진 HTML, Javascript 파일에 CSS까지 추가할 수 있게 되는 것이다.동적인 스타일링을 할 때 유리하지만 런타임에 스타일이 적용되..

내가 이 프로젝트를 시작하면서 가장 먼저 하고 싶었던게 바로 이 JSX를 사용하는 것이다.물론 react를 사용하지 않으면서 말이다. 그렇다면 JSX는 뭘까?JSX는 Javascript XML의 줄임말이다. XML의 예시는 다음과 같다. Harry Potter and the Philosopher's Stone J.K. Rowling 1997 24.99 A Brief History of Time Stephen Hawking 1988 19.99  많이 낯이 익지 않은가?HTML 태그랑 비슷한 것 같기도 하고 React를 써봤다면 return문에 들어가는 형식과 똑같다는 것을 알 수 있다. HTML과 XML은 모두 마크업 언어인 SGML(Standard ..

프론트엔드 개발자로 살아남기 위해 필요한 역량이 무엇일까 생각을 많이 해봤다.javascript, html, css 를 기본으로 typescript도 알아야하고 React, Next.js, react-query, redux, webpack, babel 등등나열해보면 공부하고 알아야할게 끝이 없다. 그래서 이 모든걸 다 준비하고 다시 취업시장에 뛰어들기 보다는 초심으로 돌아가 기초를 다잡기로 마음먹었다.바로 vanilla javascript로 리액트라는 프레임워크를 구현하는 것이다. 단, 한가지 조건이 있다. 함수형 컴포넌트 제작으로 리액트를 쓸 때와 거의 동일하게 만드는 것이다. 이런 결정을 하게 된 이유는 다음과 같다.1. 자바스크립트와 리액트에 대한 이해도를 높이고 싶다.2. 리액트를 바닐라 자바스크..