[스나이퍼팩토리] 한컴AI아카데미 4주차

 

과제 최종본

월요일에 완성된 내 Todo List 페이지 !

넘모 귀엽죠?

지독한 고양이 컨셉의 내 투두리스트 웹 사이트를 소개해보겠음.

 

1. 항목이 없으면 emptymessage(아직 할 일이 없어요) 출력

js

html

 

 

2. 완료했냥? 툴팁

우선 저 완료 버튼 위에 hover 하면 저렇게 tooltip이 뜨게 설정해놓음

 

 

 

3. 완료시 랜덤메시지 출력 

완료버튼을 클릭하면 

이렇게 랜덤메시지가 뜬다.

 

 

 

4. 항목별 카테고리(드롭다운) 설정

 

※ problem

카테고리 버튼 누르면 저렇게 드롭다운으로 카테고리 리스트가 뜨는데, 그 항목이 있는 카테고리 색깔은 검정으로 뜨게 하는 기능을 수정하느라 애 좀 먹었다. 

이유는 일단 todo를 입력하면, 카테고리가 기본으로 '전체'로 설정되는데, 그 경우엔 '전체' 항목의 색이 검정으로 바로 변하지 않았음 ㅠ_ㅠ 일단 초기 상태에서 뭐라도 카테고리 항목을 선택해줘야 그제서야 색이 바뀜 

 

그래서 어디가 문제인지 찾다가 내가 innerText만 '전체'로 해주고 기본 value 값은 all로 해주지 않았다는 걸 발견하고 코드를 추가했다.

셀프해결 뿌-듯

 

근데 저 setAttribute 기능이 잘 와닿지 않아서... 내가 지피티한테 물어본 거 다시 읽어봐야할듯.. 

 

 

5. 카테고리별 필터 기능 추가

카테고리별로 항목이 구분된다냐옹 ㅎㅎ

 

카테고리 기능은 라디오로 화면에 보이게 함

 

 

6. 진행률 출력

화면 아래에 완료/미완료된 게 몇 개인지 출력되게 해놨다.

근데 이건 내가 투두앱 쓸 때 별로 관심있게 보는 부분이 아니라 .. 기능을 구현하는데에 큰 관심이 없어서 지피티가 거의 다 해줬다 ㅎ

 

 

+) 인상적이었던 점

 

드롭다운 함수를 만들기만 하고 끝!이 아니라 드롭다운이 닫히는 거까지 생각해줘야해서(당연하긴 한데 난 기능 구현했으니 끝~ 이렇게 생각했음) 컴터는 너무 귀찮은 넘이라는 생각이 들었음. 어쨌든 바닐라 JS로 앱 만들기 성공하다 ^_^ (다시는 하고 싶지 않음) 

 

 

 

---

이번 주 배운 내용

 

자바스크립트 끝~!!났으니까 이제 타입스크립트 한번 빠르게 훑고 (자바스크립트가 확장된 거라서 몇몇부분 빼면 큰 차이는 없음) 이제 리액트 시작~!

React Hook 덕분에 JS로만 코드로 작성할 때 일일이 해줘야하는 부분 매우 손쉬워질듯? 아직 완벽히 숙지하진 않았지만 .. 수업 듣는 것만으론 부족해서 이번 주에는 교재도 많이 들여다보았다. 이렇게 FM으로 필기하면서 공부하는 게 좋더라...

 

기억 남는 부분은 리액트가 아직도 발전 중이라서 우리가 알아야하는 게 많다고 한 거. 그러니까 어떤 작업을 할 때 뭐가 제일 나은 방법인지가 확정되지 않은 상태라서 우리가 배워야하고 알아야하는게 많다고 말씀하셨다... 이래서 얼리버드를 해야 저렴한거구나 ..ㅋㅋ ...

 

Learn Git Branching

이번 주 실습시간에 보조강사님이 git 강의를 살짝 해주셔서 그거 들었고, 이건 git 연습 페이지 nara가 알려줌 ㅎㅎ 아주 유용 근데 git은 여전히 어렵;;

---

Atomic Design Pattern

- UI를 계층적으로 구성하는 방법론, 작은 단위부터 큰 단위로 구조화

 

1. 구성 요소

1) 원자 (Atoms)

- 가장 기본적인 UI요소
- 독립적으로 존재 가능, 재사용성 높음

- 예: 버튼, 입력 필드, 레이블

2) 분자 (Molecules)

- 여러 원자를 조합한 단위
- 단일 기능에 집중, 재사용 가능한 컴포넌트

- 예: 검색 바(입력 필드+버튼)

3) 유기체 (Organisms)

- 분자와 원자의 복합체

- 특정 컨텍스트나 도메인에 종속적

- 페이지의 주요 섹션 구성

- 예: 헤더(로고 + 네비게이션 + 검색 바), 상품 목록(여러 상품 카드의 집합)

4) 템플릿 (Templates)

- 페이지의 구조를 정의

- 실제 컨텐츠 대신 플레이스 홀더(place holder) 사용

플레이스 홀더(placeholder)는 실제 콘텐츠가 채워지기 전에 공간을 차지하는 임시 내용이나 구획을 말합니다. 주로 페이지나 템플릿을 설계할 때, 실제 데이터나 요소를 넣기 전에 그 자리에 무엇이 들어갈지 시각적으로 나타내기 위해 사용됩니다.

예를 들어, 템플릿에서 "여기에 제목이 들어갑니다"라는 텍스트나 "이미지가 이 위치에 표시됩니다"와 같은 텍스트로 대체될 수 있는 빈 공간을 보여주는 것이라고 할 수 있습니다. 이렇게 플레이스 홀더를 사용하면 최종 페이지 디자인을 예상할 수 있고, 콘텐츠가 완성되었을 때 실제 내용이 들어갈 위치를 쉽게 확인할 수 있습니다.

5) 페이지 (Pages)

- 실제 컨텐츠가 채워진 최종 결과물

- 템플릿의 구체화된 인스턴스

- 사용자가 실제로 보는 화면

 

2. 이점

- 일관된 디자인 시스템 구축

- 컴포넌트의 재사용성과 확장성 향상

- 디자이너와 개발자 간 협업 효율 증가

- 유지보수와 업데이트 용이성

 

3. 적용

지난 주 과제 화면(냥 투두)을 바탕으로 이번 주 실습 과제 컴포넌트 기반 폴더 구조 설계함

· 원자 - 텍스트, 입력 필드, 버튼, 카테고리 라디오, 제목 헤더

· 분자 - 할일추가 필드, 카테고리 필드, 할 일 아이템(카테고리 텍스트, 내용 텍스트, 완료버튼, 삭제 버튼)

· 유기체 - 헤더('냥 투두' 제목, 할 일 추가 필드 , 카테고리 필드), 본문(할 일 리스트), foot(할일 카운트, 고양이 이미지)

 

 

 

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.