분류 전체보기29 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. ChatGpt(새로운 직업 프롬프트 엔지니어)에 대해!! 엄청난 빠른 속도로 사용자를 모은 chatgpt 컴퓨터로 학업 및 일을 하는 사람들은 경험을 안해 본 사람들이 거의 없을 정도로 최근 가장 핫한 AI 기술이다. 엄청난 사용자를 모은 chatgpt 프롬프트 마켓플레이스 라는 새로운 시장을 통해서 앞으로 더욱 AI에 시장을 점령할거라고 생각하는데 이에 대해서 알아보자!! 프롬프트란?? - ChatGPT라는 대화형 인공지능을 더욱 효율적으로 사용하기 위한 기술로 사용자가 원하는 결과를 만들기 위해서 더욱 정확하고 명확한 프롬프트를 제공하는 것이 중요하다!! 프롬프트의 중요성 1. 정확한 결과물 생성 2. 더 빠른 결과 도출 3. 스타일 및 톤의 조절 4. 개인화된 대화 5. 다양한 활동 가능성 이러한 프롬프트를 잘 활용하고 사용자가 원하는 내용을 얻을 수 있.. 2024. 2. 8. Git 커맨드로 간단하게 사용하기 비쥬얼 스튜디오에서 git merge 및 git 이력 보기 - 회사에서 코드 관리를 하면서 git merge 및 git 이력을 자주 확인 하는 경우가 많이 있는데 git페이지에 들어가서 확인을 해도 되지만 비쥬얼 스튜디오에서도 간단하게 할 수 있다.!! 하지만 리뷰어나 alpha나 beta 환경이 아닌 master환경에는 바로 안 하는 걸 추천!! 예를 들어 alpha에서 branch를 만든 a 라는 브런치에서 코드를 수정했으면 git add . git commit -m "수정사항" 위 두 작업을 진행하고 다시 git checkout alpha (alpha 브런치로 돌아감) 알파로 돌아가서 git merge a (alpha에 a 라는 브런치를 merge 하는 것) 이렇게 하면 수정사항이 alpha에 me.. 2024. 2. 5. 이전 1 2 3 4 5 다음
