오늘은 코드 리뷰 보조 AI 도입 과정에 대해서 작성해보려고 한다!🤔 도입 계기개발을 하다보면 "더 좋은 방법이 없을까"에 대한 고민을 많이 한다. 프로젝트 팀장을 맡는 경우가 많아지면서 사람들의 코드를 리뷰해주는 경우는 많았지만,정작 내 코드에 대한 리뷰를 세세하게 받을 수 있는 기회가 적어졌다. 이번에는 Next.js로 처음 프로젝트를 하다보니, 이러한 고민이 더 깊어졌다.그래서 요즘 코드 리뷰도 AI가 자동으로 해준다는 글을 좀 봤어서 도입해 보기로 했다!⎝⍢⎠ 📌 기존 세팅 상태웹 프론트를 진행할 때는 전에 작성했던 코드 품질 도구를 써왔다. [Web] 코드 품질 도구를 왜 함께 사용하는가?프로젝트를 진행하면서 코드 품질 도구를 함께 사용하게 되는데,각각의 도구를 왜 사용하는지를 정리해보았다 ..

🌱 기존에 사용하던 방식보통 웹에서 사용되는 아이콘 이미지들은 SVG 파일이다.전에 React로 개발할 때는 SVG 파일을 사용할 때면 아래처럼 Icon 컴포넌트를 만들어서 사용했다.import { css } from "@/styled-system/css";// Icon Props 타입 정의interface IconProps { name: string; size?: number; className?: string;}// Icon 컴포넌트export default function Icon({ name, size = 14, className }: IconProps) { return ( );}// user.svg 불러오기 이런 방식은 편하긴 하지만 다음과 같은 문제들이 발생할 수 있다. 🫨..

🤔 디자인시스템 변경 이유이번에 next.js + panda css로 프로젝트를 진행 중인데,클라이언트의 요청에 따라 디자인시스템을 변경하게 되었다. 기존의 초록 계열 디자인을 주황 계열로 바꾸는 간단한 작업이었다. 🫨 문제 발생디자인시스템이 변경됨에 따라 panda.config.ts에 작성해둔 커스텀 색상을 변경해야 했다. 기존의 Tailwind CSS의 경우, config 파일을 수정하면 바로 적용이 됐지만, panda css는 세팅할 때부터 config 파일에 작성된 CSS를 적용 시키기 위해선 다음 명령어 실행이 필수적이었다.npx panda codegen 🌱 문제 해결 과정오류 메세지Error evaluating Node.js code./src/app/globals.cssError eval..

드디어 CSS 마지막 글을 적어보려고 한다.background, transform, transition, animation! 이전 글에서 정리했던 것보단 사용량은 적긴 하지만,언젠가 꼭 사용하는 경우가 생긴다. 모든 케이스를 정리할 수는 없지만간단하게 정리해보면 나중에 도움이 꼭 되는 내용들이다!🎨 background요소의 배경 색상이나 이미지를 설정하는 속성이다. 색상 (color)이미지 (image)위치 (position)크기 (size)반복 (repeat)이렇게 5가지를 핵심 속성으로 가져갈 수 있다.크게 어려울 건 없으니까간단하게 체크하고 넘어가자. background-color배경 색상을 지정할 수 있다.background-color: red;background-color: #ff0000;ba..

CSS 꽃 중 하나인 position과 정렬! ૮꒰૮⸝⸝´ `⸝⸝꒱੭퍼블리싱을 하면 무조건 마주하게 되는 스타일이다.가장 먼저 만나게 될 내용은 position에 관련된 내용이다.🎨 relative와 absoluterelativedocument flow에 따라 원래 있어야 할 위치를 기준으로, top, bottom, left, right 속성을 사용해 요소의 위치를 이동시키는 속성이다. 이때 요소가 이동하더라도 원래 위치는 그대로 유지되어 다른 요소의 레이아웃에는 영향을 주지 않는다. 여기서 중요한 포인트는 "이동해도 위치는 남아있다"이다. 아래와 같은 코드가 존재한다고 할 때,위에서 아래로 50px만큼 이동해 보자.See the Pen Untitled by Kim_Minji (@min-minnn)..

이전 글에서 html을 정리하면서 시맨틱 태그의 사용 이유와 html 구조 등에 대해 복습했다. [HTML] HTML을 깊게 이해해 보자(html, 구성 요소, 시맨틱 태그, 다양한 태그들)HTML을 처음 알게 된지 벌써 7년....?상당히 오래 됐다. 생각보다 더 오래 돼서 놀랐다. (　°-°) 그때는 그냥 존재만 알았긴 했지만.. 시간이 정말 빠르다는 걸 또 한 번 느낀다. HTML로 처음 사용해보alswlfjddl.tistory.com 이번엔 html를 경험 후에 당연히 거치게 되는 CSS다 ₍ᐢ･֊･ᐢ₎ html이 사람의 뼈라고 한다면, CSS는 옷이나 가죽 등이라고 할 수 있다.꾸미기 위한! 얕게 공부하면 그렇게 어렵진 않다.하지만 디자인이 복잡해질수록 어려워질 수 있는 게 CSS라고 생각한다...

HTML을 처음 알게 된지 벌써 7년....?상당히 오래 됐다. 생각보다 더 오래 돼서 놀랐다. (　°-°) 그때는 그냥 존재만 알았긴 했지만.. 시간이 정말 빠르다는 걸 또 한 번 느낀다. HTML로 처음 사용해보면서 받았던 충격은 아직도 잊혀지지 않는다.콘솔에 무언가를 그려내고 만드는 건 많이 해봤지만웹 페이지의 구조를 직접 짜본 건 처음이었으니! 하지만 요즘엔 html + css + js만을 가지고 개발을 하기보단 React, vue, next.js 같은 프레임워크와 라이브러리를 많이 사용하기에이론적인 지식은 많이 잊은 거 같다. 그런 김에 다시 천천히 공부해보려고 한다. ५✍(｡_｡*)🧠 HTML(Hyper Text Markup Language)갑자기 웃긴 게 생각났는데나도 처음 html 태그 ..

최근에 포트폴리오 정리를 하면서 가장 도움이 됐던 부분 중 하나가 Organization README이다.📝 Organization README 추가추가하는 방법은 크게 두 가지인데 각자 편한 방법을 선택하면 된다.1. Organization Orverview에서 바로 추가하기Organization을 들어가면 사진과 같이 'create a README'가 보일 거다. 이걸 클릭하면 레포를 만들라는 모달이 뜬다. Create repository를 누른다. 그럼 이제 자동으로 레포 설정이 끝난다. 이때 public으로 되어 있어야 한다.이러고 생성하면 레포 설정은 끝! 2. 직접 세팅하기오른쪽 상단에 보면 + 버튼이 있는데, 이걸 눌러서 New repository를 클릭한다. 그럼 처음에는 Owner 설정..