부자아빠 부자아빠

전체 글

• 디자인 시스템/디자인 토큰(Style Dictionary)

  웹개발 2024. 2. 4. 01:06

  디자인 시스템은 조직이나 프로젝트에서 일관된 디자인과 사용자 경험을 유지하기 위해 만들어진 일련의 지침, 규칙, 구성 요소, 디자인 패턴 및 리소스의 집합입니다. 이는 디자인 프로세스를 효율적으로 관리하고 디자인 일관성을 유지하며, 디자이너들이 효율적으로 협업할 수 있도록 돕기 위한 도구입니다. 디자인 시스템은 다양한 디자인 요소를 포함할 수 있으며, 이는 로고, 색상 팔레트, 글꼴, 아이콘, 버튼, 입력 양식 등과 같은 시각적인 구성 요소 뿐만 아니라 디자인 원칙, 가이드라인, 사용자 경험 (UX) 패턴, 애니메이션 규칙 등을 포함할 수 있습니다. 디자인 토큰(Design Token)은 디자인 시스템에서 사용되는 기본적인 디자인 요소를 나타내는 추상화된 개념입니다. 이는 색상, 글꼴, 간격, 그림자 등..

  Read More
• 2024 갑진년 용띠 자기계발을 위한 계획 그리고 실행!

  라이프 2023. 12. 16. 11:49

  불혹(不惑)의 나이가 어느덧 코앞에 다가오고 있습니다. 학창 시절 오지 않을 것 같았던 순간순간이 제 인생에 찾아오는 것을 보고 세상은 죽음 앞에서 공평하다는 뜻이 뭔지는 조금을 알게 되는 것 같습니다. 그리고, 조급함까지 동시에 느껴지는 나이가 되는 것 같습니다. 지금은 100세 시대라고 해서 더 이상 평생직장은 없다는 것을 이미 어른들을 보면서 배우는 것 같습니다. 그렇기 때문에 배움을 게을리하면 안 되고 끊임없이 배우는 자세로 인생을 살아가야 하는 것이 하나의 덕목이 아닌 필수가 되는 것 같습니다. 2024 갑진년 용띠 자기 계발을 위한 저의 소소한 계획을 정리하려고 합니다. 자격증 요즘 새삼스럽게 느끼는 것이 나이가 들수록 학벌은 점점 그 효과와 기대치가 미미해지는 것 같습니다. 젊은 날 아무리 ..

  Read More
• 프론트엔드 스터디_블로그 앱 프로젝트

  웹개발 2023. 12. 12. 02:13

  UI개발자가 미래에도 살아남는 방법은 FE(프론트엔드)영역까지 알고 있어야 한다고 생각합니다. 최근에 인공지능 기술의 발달로 간단한 화면과 로직까지 생성해이 가능하기 때문입니다. 물론, 엄청 고도화되고 복잡한 UI는 사람의 손이 현재까지는 필요하지만, 미래에는 어떻게 될지 아무도 모릅니다. 특히, 기술의 발전은 상상을 초월합니다. 그래서, 패스트캠퍼스에서 프론트엔드 초격차 패키지 온라인 강의를 신청하였습니다. 총 16만 원 결제하였으며, 12개월 무이자로 한 달에 약 1만 3천 원을 자기 계발 비용으로 사용하기로 결정하였습니다. 각각의 프로젝트에서 실제적으로 배울 수 있는 분야를 정리하려고 합니다. 코드야 어차피 많이 타이핑해 보고, 깃에도 올라와 있기 때문에 따로 정리하지는 않을 예정입니다. https..

  Read More
• 프론트엔드 UI개발 06_IntersectionObserver

  웹개발 2023. 11. 15. 16:57

  IntersectionObserver를 사용해서 viewport 진입시 동영상이 재생되는 UI를 제작하려고 합니다. 요즘 짧은 동영상을 노출 시키는 UI가 인기를 끌면서 영상 재생을 위한 UI디자인이 다양하게 나오고 있습니다. 특히, 사용자 화면에 해당 콘텐츠가 들어왔을 때 미리보기 재생이 되는 스펙이 정말 많은데요, 이러한 기능을 구현하기 위해서, IntersectionObserver를 사용할 수 있습니다. 이전에는 getBoundingClientRect()함수를 통해서 여러 조건식을 사용해 구현이 가능했다면, 지금은 간단하게 제작이 가능해서 코드를 살펴 보도록 하겠습니다. // 방법 1 class IntersectionObserver { constructor(videos) { this.videos =..

  Read More
• 프론트엔드 UI개발 05_Pagination

  웹개발 2023. 9. 12. 01:05

  class Pagination { constructor(commentContainerEl, paginationContainerEl, initialItems = []) { this.currentPageIndex = 0; this.maxPageItemCount = 5; this.commentItems = initialItems; this.commentContainerEl = commentContainerEl; this.paginationContainerEl = paginationContainerEl; this.render(); const onClickButtons = (event) => { /** * 버튼 컨테이너에서 이벤트를 위임받아 처리 */ const { target } = event; if (targ..

  Read More
• 프론트엔드 UI개발 04_Instant Search

  웹개발 2023. 8. 18. 01:35

  프론트엔드 UI개발 중에서 사용자가 원하는 단어를 빠르게 검색하기 위해서 Instant Search를 사용합니다. class InstantSearch { constructor(selectorEl) { this.DEFAULT_DELAY_TIME = 500; this.delayTime = this.DEFAULT_DELAY_TIME; this.textinputElement = selectorEl; this.initialize(); this.eventBinding(); this.getData(); } initialize() { const textinput = document.createElement('input'); textinput.setAttribute('type', 'text'); textinput.set..

  Read More
• 평범한 30대 직장인 알뜰살뜰 노후준비

  재테크 2023. 8. 7. 00:18

  대한민국의 평범한 30대 직장인의 삶은 누구나 아는 듯이 그렇게 특별하지 않습니다. 월요일부터 금요일까지 회사를 다니며, 퇴근 후에는 가족과 함께 보내며 주말에는 집에서 쉬거나 가족과 함께 여행을 가거나 아니면 오랜만에 친구들을 만납니다. 이러한 평범한 삶은 큰 성공을 하지 않아도 마음을 채우는 행복함이 있습니다. 저 또한 30대 직장인이며, 지금처럼 가족과 행복하게 오랫동안 지내고 싶은 것이 제 삶에서 가장 큰 행복이라고 생각합니다. 그럼 객관적으로 생각해서, 현재 이러한 평범한 행복이 과연 무엇 때문에 가능할까요? 바로, 가정과 나의 삶을 유지하는 "적절한 소득" 때문입니다. 저는 대학 졸업 후에도 약 반년 동안 취업 준비를 하였습니다. 생각보다 어려운 취업으로 인해서 정말 힘든 나날들을 보냈던 것이..

  Read More
• 프론트엔드 UI개발 03_Dropdown Menu

  웹개발 2023. 8. 3. 00:45

  드랍다운 메뉴는 사용자인터페이스에서 가장 기본 적인 UI입니다. 메뉴 버튼을 누르면 선택 옵션들이 노출되며 사용자는 본인이 원하는 것을 선택합니다. 우선, 드랍다운 메뉴에 노출되는 데이터를 정의하도록 하겠습니다. const userDataItems = [ { id: "01", userName: "Kenneth", favorites: "0001" }, { id: "02", userName: "John", favorites: "0001" }, { id: "03", userName: "Daniel", favorites: "0002" }, { id: "04", userName: "Peter", favorites: "0004" }, { id: "05", userName: "Brian", favorites: "00..

  Read More