좋은 git Commit Message 작성 가이드라인 평소 커밋 메세지를 어떻게 작성해야하나 항상 고민이였는데 찾아보다가 깔끔한 가이드라인이 있어 공유해보고자 한다.😀 기존 커밋은 "작성파일-코드 작성내용" 으로만 작성을 해왔다. 개인 기록용이라면 이정도로도 충분하지만, 여러 사람이 협업을 하게되면 보다 명확한 가이드라인이 필요할것이다. 위 사진은 Alibaba Fusion의 Next 레포지토리와 NHN의 tui.calendar 레포지토리에서 가져온 커밋 히스토리인데 두 커밋 히스토리가 유사한 형태를 띄고 있는 것을 보실 수 있다. 가장 많이들 사용하는 좋은 커밋 메세지를 작성하기 위한 방법을 알아보자면, 아래와 같이 작성을 한다. 기본 규칙 명확하고 간결한 제목 작성: 커밋 메시지의 첫 줄에는 명확하..

먼저 Styled Components를 어떻게 쓰는지 이해가 잘 안되서 생활코딩을 통해 알아보고 시작! 유투브 생활코딩 style-component Styled-Component 란? Styled Components는 React 애플리케이션에서 컴포넌트 기반 CSS 스타일링을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리는 2016년에 Max Stoiber와 Glen Maddern에 의해 개발되었습니다. Styled Components는 CSS-in-JS 스타일링 라이브러리 중 하나로 분류됩니다. 이것은 JavaScript 코드 내에서 CSS 스타일링을 작성할 수 있게 해주는 방식입니다. 이는 React 애플리케이션에서 컴포넌트 기반 스타일링을 수월하게 할 수 있으며, 여러 장점을 제공..

bubbleSort 문제 정수를 요소로 갖는 배열을 입력받아 오름차순으로 정렬하여 리턴해야 합니다. 버블 정렬(bubble sort)은 여러 정렬 알고리즘(삽입 정렬, 퀵 정렬, 병합 정렬, 기수 정렬 등) 중 가장 기본적인 알고리즘입니다. 버블 정렬 알고리즘은 아래와 같습니다. 첫 번째 요소가 두 번째 요소보다 크면, 두 요소의 위치를 바꿉니다. (swap) 두 번째 요소와 세 번째 요소보다 크면, 두 요소의 위치를 바꿉니다. (swap) 1, 2를 마지막까지 반복합니다. (마지막에서 두 번째 요소와 마지막 요소를 비교) 1~3의 과정을 한 번 거치게 되면, 가장 큰 요소가 배열의 마지막으로 밀려납니다. 1~3의 과정을 첫 요소부터 다시 반복합니다. 5를 통해 두 번째로 큰 요소가 배열의 마지막 바로 ..

CSS란? 먼저 CSS가 무엇인지 알아보자면 CSS란 Cascading Style Sheets의 약자로, HTML이나 XML 같은 마크업 언어로 작성된 문서의 시각적인 스타일과 레이아웃을 정의하는 스타일 시트 언어입니다. CSS는 웹 페이지나 앱에 디자인을 적용해서 예쁘게 보이고 화면을 직관적으로 만들어주는 역할을 합니다. CSS의 발전 스토리 CSS는 1996년 W3C(World Wide Web Consortium)에서 처음 소개되었다고 합니다. 초기에는 HTML과 CSS를 함께 작성하고, 스타일 규칙을 적용할 HTML 요소를 선택하는 방법이 간단하게 설명되어 있었는데 이는 대규모 프로젝트에서 유지보수가 어렵고, 팀원 간 작업 효율성이 떨어진다는 문제점이 발생했대요! 90년대에는 화려한 인터페이스를 만..

보호되어 있는 글입니다.

오늘은 피그마 클론을 진행해보았다. 🔥 최소한 Lo-Fi 수준의 프로토타입을 구현해야 합니다. 페이지 이동이 가능해야 합니다. 스크롤 이벤트가 있어야 합니다. 최소한 1개의 마스터 컴포넌트와 인스턴스를 만들어야 합니다. 일단 기본 요구사항을 해결해보고자 했다. 기본이라도 잘 해보자.. 🥲 클론 사이트 선정 내가 선택한건 얼마전 알게되었던 서핏 홈페이지였다. 구글 확장프로그램으로 등록되어 크롬을 키면 첫화면에 나오는걸 보다가 반복적인 요소들이 많은것 같아서 작업하기 수월할 것 같다는 생각이었다.(큰 오산이였다..) 일단 홈페이지에 들어가서 구경을 하다가 개발자도구를 열어봤다.띠용? 뭔가 신기해.. (프론트엔드 개발자 채용하는 노션페이지로 연결되고 있었다 ㅎ) 홈페이지를 캡쳐하고 피그마에서 그리드를 12컬럼..

피그마란? 피그마는 프로핑타이핑 도구이면서 그래픽 편집을 동시에 할 수 있는 프로그램이에요! 피그마의 특,장점은 아래와 같이 많아요~ 1.실시간 협업기능 피그마는 하나의 draft(피그마에서는 '파일'과 같은 개념으로 사용됩니다!)를 함께하는 동료들과 공유하여 동시에 작업할 수 있으며, 다양한 플러그인을 사용할 수 있어서 웹, 앱 디자인 분야에서 사용하기 적절해요. 만약 edit가능한 권한을 받았다면 각 요소의 css코드도 추출할 수 있어요. 물론 간격이나 여백 수치 등 디자인 파일을 자세히 뜯어볼 수 도 있죠! 2.다양한 환경지원 피그마는 웹브라우저에서 동작되는 프로그램이기 때문에 Mac이나 Window 같은 PC의 OS 관계없이 어떤 환경에서도 디자인 작업이 가능해요! 심지어 리눅스나 크롬OS에서 작..

1. 다음 중 UI와 UX에 관한 설명으로 옳지 않은 것을 고르세요. A.키보드, 마우스 같은 물리적 요소도 UI에 포함 된다. B.UX는 UI를 포함하는 개념이다. C.UX는 제품 자체에 대한 사용자의 경험만을 말한다. D.나쁜 UI는 나쁜 UX를 유발한다. 더보기 A.키보드, 마우스 같은 물리적 요소도 UI에 포함 된다. B.UX는 UI를 포함하는 개념이다. 정답 C.UX는 제품 자체에 대한 사용자의 경험만을 말한다. UX는 제품 자체에 대한 사용자의 경험만을 말한다는 설명은 옳지 않습니다. UX는 제품 또는 서비스를 사용하는 사용자가 느끼는 전반적인 경험을 의미하며, 제품 자체 뿐만 아니라 사용자가 상호 작용하는 모든 측면을 고려합니다. UX는 사용자의 니즈와 요구에 맞추어 제품을 설계하고, 사용자..