Kwangkki

tailwindcss를 처음 접하고 몇몇 페이지에 적용해서 사용해 봤다. 사용해 본 결과 그 장점과 단점에 대해 간단하게 정리해 본다 tailwindcss는? tailwindcss는 2017년에 처음 등장한 css 프레임워크로 마크업 태그에 인라인 속성으로 사용하는 것이 특징이다. 아래와 같이 태그의 class에 사용한다. 위 내용을 css로 작성한다면 아래과 같다. width: 20rem; height: 20rem; padding: 10rem; display: flex; flex-direction: row; border-radius: 4px; 보다시피 tailwindcss는 획기적으로 css 코드를 압축/단축한다. 장점 그 외에도 여러 장점이 있다. 명시도에 구애받지 않는다 CSS에서 명시도란 선택..

최근 내 개발 지식뿐만 아니라 디자인 지식까지 점프한 경험에 대해 공유하고자 한다. 웹 개발 팀 프로젝트 최근 거의 한 달 동안 진행한 웹사이트 개발 프로젝트에 참여했다. 디자이너가 없어 이제 막 개발 공부를 시작한 프론트 개발자 2명이서 머리를 싸맸다. 디자인을 어떻게 하면 좋을까 여러 가지 의견을 나누면서 우리는 얼마나 어떻게 예쁘게 만들까를 뒤로하고 한 가지 키워드에 대해 먼저 생각해 봤다. 재사용성 높은 디자인 예전에 유튜브 EO 채널에서 토스 디자인 시스템에 대한 영상을 본 적이 있는데, 비슷한 디자인과 패턴을 묶어 시스템화함으로 재사용성과 생산성을 높였다는 이야기였다. 퍽 감명적이었는지 한동안 토스 디자인 관련 블로그를 찾아 헤맸었던 기억이다. 그래서 이번 프로젝트에는 재사용성 높은 디자인을 ..

React의 큰 장점은 Hooks의 존재가 아닐까 싶다. 단순한 버튼 클릭 함수라도 두 번 이상 사용한다면 custom hook으로 만들어 재사용성을 높일 수 있다. hook? react에서 hook은 함수형 컴포넌트를 클래스 컴포넌트와 같은 기능으로 사용할 수 있도록 만들어 준다. 클래스는 하나를 만들어두면 복제해서 마구마구 쓸 수 있으니까 react에서 제공하는 hook 리액트는 자체적으로 만든 내장 hook이 존재한다. 그중 자주 사용하는 5개를 간단하게 설명하면 아래와 같다. useState 아마 리액트에서 가장 많이 사용하는 hook 일지도 모른다. 처음 배울 때 단순히 리액트에서 사용하는 변수라고 생각하니까 이해가 쉬웠다. 값을 추가하고 변경할 때 사용한다. useEffect 리액트의 생명주기..