본문 바로가기

Frontend is 실전

 (9)
[Tailwind] @Tailwind 삼형제가 동작하지 않는다면!?!?!?! 근래 Next.js로 개발을 하다 보니 tailwind를 주력으로 사용하고 있다. 그러던 중, 오랜만에 새로운 프로젝트를 만들어 tailwind를 적용하려고 하니어라라? 스타일이 전혀 적용되지 않으면서 에러가 나는 것이었다 Error Lens가 아주 친절하게 에러를 읊어줘서 에러를 파악해 보았다.'@tailwind base' is no longer available in v4. Use '@import "tailwindcss/preflight"' instead. "@tailwind base는 v4 버전에서 사용되지 않으므로, 대신 @import "tailwindcss/preflight를 사용하세요!" 라는 말. 실제로 v4 버전에서는 @import "tailwindcss"만 사용해도 된다고 나와 있다. 반..
[React] react-moveable로 인터랙션 추가하기 React 컴포넌트의 위치나 크기, 회전 등은 고정되어있는 경우가 많지만 때로는 이런 요소들을 조작해야 하는 경우가 있다.특히, Figma, Framer 등 개체를 그려야 하는 웹 페이지에서는 이런 기능이 필수적이다. 이런 기능을 제공하는 다양한 라이브러리들이 있지만, 그중에서도 하나의 라이브러리로 많은 요소를 컨트롤 할 수 있는 react-moveable 라이브러리를 소개하고자 한다1. react-moveable이란?React Moveable은 드래그, 크기 조정, 회전 등 다양한 인터랙션을 쉽게 구현할 수 있는 강력한 라이브러리로, CSS 스타일과 함께 동작해서 다양한 UI 인터랙션을 쉽게 추가할 수 있는 장점이 있다 주요 기능드래그 : 요소를 자유롭게 이동 가능리사이즈 : 크기 조절회전 : 원하는 ..
[Next] API Routes를 이용해 사이드 서버 구축 해보기 with Typescript 최근 이곳저곳 면접을 다니면서 포트폴리오를 조금 손봐야겠다는 생각이 문득 들었다.가장 큰 이유는 역시 종료된 프로젝트 관리 미흡. 나는 프론트엔드 개발자이기 때문에 프론트엔드 쪽에서 문제가 발생하면 바로 고칠 수 있지만,백엔드 쪽에서 발생한 문제는 거의 손대기가 불가능 했기에 백엔드 API가 사라졌다거나, 서버가 닫혀버리는 경우에는 꼼짝없이 프로젝트 하나를 버리게 되는 것이었다.하지만 공들여 진행한 프로젝트를 '없던 일'로 쳐버리는건 너무 아쉽기 때문에, 스스로 백엔드 서버를 만들어 프로젝트를 살려보기로 했다.1. Next.js API Routes와 서버 생성Next.js 설치 및 적용은 나보다 더 상세하게 작성 해 주신 분들이 많기에 생략한다.Next.js를 설치 후 프로젝트를 만들면 src 폴더 내의..
[React] React-Query로 데이터 통신 해보기 최근 면접을 준비하며, React-Query에 대한 질문을 많이 받았었다. 그런데 마침 다음주에 면접 보는 기업에서 React-Query를 사용한다기에면접 준비도 할 겸, 공부도 할 겸, 과거 진행했던 프로젝트를 리팩토링 할 겸 사용해 보니 생각보다 아주 편리해서 한번 소개해 보고자 한다. 사실 그동안 React-Query가 서버 통신 라이브러리인 줄로만 알았는데, 공부해 보니 HTTP 통신을 담당하는 라이브러리가 아니라, HTTP 통신을 통해 받아온 데이터를 캐싱하고 관리해 주는 라이브러리였다! 과거 진행했던 전기차 지도(CPM) 프로젝트를 기반으로 설명하도록 하겠다.아주아주 기본적인 기능만 사용했기 때문에, 좀 더 자세한 탐구는 공부를 더 하고 써보도록 하도록,.,.,.,.어쩌구,.,.1. 설치$ n..
[Next] Next.js의 layout 적극 활용해 보기 next.js를 사용하다 보면, 가끔씩 모든 페이지에서 보이는 컴포넌트가 필요할 때가 있다.예를들면 헤더라던가...내비게이션바라던가...또는 앱 라우팅을 사용할 때, 특정 라우터를 가지는 모든 컴포넌트들이 공통된 스타일을 가진다던가...보통 React였다면 전체적인 틀을 가지는 공용 컴포넌트를 설정해 놓고, 라우팅 경로에 따라 각각 다른 데이터를 넣어주는 방식을 사용할테지만, Next.js에는 'Layout'이라는 아주 좋은 기능을 제공하고 있다.그런 의미에서, layout을 어떻게 사용하고 또 적용하는지에 대해 실제 페이지 제작을 통해 알아보도록 하자.1. layout의 적용 범위 우선 레이아웃은 'Root layout'과 'Local layout'으로 나뉜다.루트 레이아웃은 말 그대로 '앱 내 모든 ..
[Git] Git rebase와 cherry-pick Git Rebaserebase는 Local 작업물과 Base 브랜치(보통 main 또는 master)를 비교해서 변경된 부분을 자동 병합 또는 수동 병합 할 수 있게 해주는 기능(이해하기 쉽게 master로 설명)merge와의 차이점merge : 두 브랜치를 병합하여 하나의 브랜치로 만드는 과정rebase : 현재 브랜치의 변경 사항을 다른 베이스(commit history)로 이동시키는 것rebase 과정rebase는 말 그대로 베이스를 옮기는 행위쉽게 말해, 내 커밋 히스토리를 master 브랜치의 최신 커밋 뒤에 붙이는 것  1.Master 브랜치에는 여러 커밋 내역이 저장되어 있는 상태. 가장 최근의 커밋(base)을 바탕으로 새 브랜치를 하나 만든다  2.Master 브랜치에도 작업 내역이 쌓이..
[CSS] styled-components의 전역 스타일링 프로젝트를 진행하면서, styled-components에 "전역 스타일링"이라는 기능이 있다는 것을 알게 되었다. 사실 개념만 모르고 있었던 것일 뿐, 그동안 알게 모르게(?) 전역 스타일링을 사용하고 있었는데 이제서야 정식으로 통성명을 하게 된 기념으로 글을 적어보도록 하자. 1. 전역 스타일링이란? 군인이 의무병역을 마치고 전역할 때 멋지게 꾸미고 나오는 것을 말한다 말 그대로 전역(Global) 스타일을 지정하는 것을 말한다. 기존의 styled-components(기니까 sc로 줄여 말하겠다)는 한 페이지에서 작성한 뒤, 해당 페이지에서만 사용했었다. App.js에 정의한 컴포넌트는 상위 컴포넌트에서든, 하위 컴포넌트에서든 사용할 수 없고, 오직 App.js 안에서만 사용 가능했다는 말이었다. 하..
[API] 네이버 검색 API 사용하기 프로젝트 진행 중 뉴스 검색 파트를 맡게 되어 네이버 API를 사용해 보았다. 국내 최고의 IT 기업답게 API 설명서가 매우 잘 작성되어 있었고, APP 등록이나 키 발급도 별도의 복잡한 과정 없이 마칠 수 있었다. 1. API 이용 신청 어플리케이션 등록을 마쳤다면, 어플리케이션 정보에서 ID와 비밀키를 발급받은 것을 확인 할 수 있다. AW와 다르게 네이버는 키를 상시로 확인 가능하니 다른 곳에 무조건 적어둘 필요는 없다. 어플리케이션 등록을 마쳤다면, 어플리케이션 정보에서 ID와 비밀키를 발급받은 것을 확인 할 수 있다. AW와 다르게 네이버는 키를 상시로 확인 가능하니 다른 곳에 무조건 적어둘 필요는 없다. 다만, React에서 사용할 때는 보안 이슈 방지를 위해 .env 파일에 저장해 두자. ..

티스토리툴바