전체 글31 Cursor AI을 활용하기 위한 React와 Next.js 설정 요즘 AI를 활용하지 않고 코딩을 하는 것은.. 옆에 다른 사람들은 포크레인을 사용하는데 혼자 삽질하는 거랑 똑같은 거에요..!!AI를 너무 의존해서 "바이브 코딩"이 되어서도 안되지만 활용하지 않으면 업무 효율이 너무 떨어지기 때문에 이번에는 Cursor AI를 활용해서 React와 Next.js 작업하는 방법을 가져 왔습니다.Cursor AI 설정우선 비쥬얼 스튜디오에서 우측 상단의 톱니바퀴 아이콘을 눌러 Cursor 설정을 엽니다. 반드시 켜야 할 Cursor 설정Features → CursorCursor TabSuggestions in CommentsAuto import이유→ React 컴포넌트, hooks, props, import 자동완성의 핵심→ 주석만 써도 코드가 생성됨 Features .. 2025. 12. 23. [React]Tailwind CSS 적용해서 사용하기 테일윈드 란- 유틸리티 우선 CSS 프레임워크로써 미리 정의된 스타일을 사용하는 것이 아니라사용자가 원하는 대로 각 속성 값을 적용하고 사용하는 것임.(간단하게) 기존에 사용하던 scss,sass말고 요즘 많이 사용하는 테일윈드를 사용해서 새롭게 프로젝트를 진행 했었는데사용한 후기의 제일 큰 장점은 한 파일에 css코드까지 다있어서 직관적이고 한 눈에 다 보기 쉬운 것이였지만처음에는 확실히 적응하는데 시간이 걸리지만 그렇게 어렵지 않아서 적응만 하면 충분히 좋은 것 같습니다. 간단하게 사용하는 방식은Hello 이런식으로- 배경은 흰색(bg-white)- 배경은 흰색(text-xl) 대략 20px 전후- 배경은 흰색(mr-1) margin-right: 0.25rem (4px) 를 적용 이런식으로 사용 Ta.. 2025. 8. 20. css로 돌아가 업데이트(:is(),:has(),컴포넌트 반응형) css 지속적인 업데이트최근에는 Tailwind를 주로 사용하고 있지만 css기능들이 점점 업데이트 되면서 scss보다 css를 사용할지 고민이 되네요.새롭게 추 가된 기능을 소개해드릴께요. :is () 선택자 /* :is()를 사용한 예시 */:is(h1, h2, h3) { color: red;} 이렇게 하면 h1, h2, h3 태그에 모두 color: red 스타일이 적용됩니다. :is()는 선택자가 길어질 때 가독성을 높이고, 반복되는 스타일을 더 간단하게 작성할 수 있게 해줍니다. :has() 선택자:has()는 부모 요소가 특정 자식 요소를 포함할 때 스타일을 적용하는 선택자입니다. 예를 들어, 자식 요소가 있을 때 부모 요소에 스타일을 적용할 수 있습니다. 이는 "부모 요소가 자식 요소를 .. 2025. 2. 8. Volta!! node,package 버전 관리툴!!추천(nvm대체) 오늘은 nvm 대체 툴인 volta를 소개할려고 한다!!사내에서 nvm을 대체해서 좀 더 편하고 간단하게 node 버전을 관리하기 위해서 도입하게 된 툴인데 제가 꾸준히 보고 있는 IT정보 기사에서 알게 되어서 웹 개발팀에 도입하게 되었다. 간단하게 소개하면 node버전을 관리할 수 있는 툴로 Javascript Tool Manager 입니다. global package의 버전을 프로젝트에 따라 다르게 관리 할 수 있어서 좋음!! 그리고 Rust로 만들어져 굉장히 빠른데(nvm또 빨라서 속도면에서는 큰 체감이 안 느껴짐)Window,Linux,MacOS를 지원 설치https://docs.volta.sh/guide/getting-started Getting Started | VoltaGetting Sta.. 2024. 5. 30. React 상태관리 라이브러리 - Zustand 설명 및 사용법 사내에서 새롭게 시작하는 프로젝트에서 새로운 상태관리 라이브러리를 써보자고 해서 조사하다가 도입하게된 "Zustand"에 대해서 소개 하겠습니다. Zustand- Zustand는 독일어로 "상태"라는 뜻인데 "Jotai"라는 상태 라이브러리를 만든 개발자들이 만든 상태관리 라이브러리로 알려져 있습니다. Zustand의 가장 큰 장점은 매우 쉽다는 것입니다. 보일러플레이트 코드는 거의 없고 Redux Devtools를 사용할 수 있어서 Debugging도 용이하게 할 수 있다. Zustand 사용법1. Zustand 다운로드 npm i zustand # or yarn add zustand 2. store 생성 // store.js 타입스크립트이면 store.tsximport { create } from.. 2024. 5. 14. CSS button hover/active 웹 페이지 버튼 페이지 개발 할때 특정 이벤트 발생 시킬 때 많이 사용하는것이 button 이다. button의 onclick 기능으로 button을 click 했을 때 특정 작업이 일어나도록 할 수 있는데 이런 button을 조작 할 때 같이 사용 되는 것이 hover 및 active 이다. hover button을사용자가 click하는 것 처롬 보이게 하는 효과를 넣기 위해서 주로 사용 하는데 button 위에 mouse를 올려 두면 hover 효과가 나타난다 .button { background-color : white - 처음 기본 색깔이 흰색이지만 &:hover { background-color : red - 마우스를 올려두면 빨강색으로 변함 } } active button을 사용자가 눌렀을 때.. 2024. 4. 8. 이전 1 2 3 4 ··· 6 다음
