Jieunny의 블로그

➰ 63일차 오늘 피그마만 4시간했다... 그래도 좋은 페어분 만나서 재밌게 활동했고 하는 동안 많이 웃은 것 같다. 비록 결과물 디자인은 엉망이지만ㅋㅋㅋㅋ... 내일은 페어분이 안계셔서 혼자 해야하지만..벌써 힘들다. 피그마가 이렇게 어려운 툴인지 몰랐는데 그래도 오늘 배운 게 많은 것 같다. 오후 시간을 다 페어 활동하느라 타입스크립트 공부는 못했다.. 내일 피그마 클론 과제 호다닥 끝내고 하러가야지~...... 파이팅...

📣 피그마로 자주 쓰는 UI 컴포넌트 구현하기 ✔️ 메뉴마다 페이지를 만들어줘서 GNB 각 메뉴를 누르면 그 페이지로 가게끔 Prototype의 interection을 넣어준다. ➰ Change to는 컴포넌트의 상태를 바꾸는 이벤트이고, Navigate to는 페이지를 이동하는 이벤트이다. 1️⃣ GNB ➰ 메뉴 버튼을 컴포넌트로 구현하고, 텍스트만 바꿔준다. ➰ active 상태에서는 밑줄이 있어야 하기 때문에 컴포넌트 상태를 2개로 둔다. 2️⃣ Modal ➰ 모달 버튼을 클릭하면 옆에 컴포넌트로 만든 오버레이가 나타난다. ➰ 오버레이 이벤트를 사용해서 구현한다. 3️⃣ Toggle ➰ 컴포넌트의 상태를 이용한다. ➰ 토글 버튼을 누르면 컴포넌트의 상태를 active로 바꿔준다. 4️⃣ Tap ➰ ..

➰ 62일차 오늘 공부 진짜 열심히 했다... 예습하고, 타입스크립트 강의 듣고, 피그마 해보고.. 내일 모레 과제가 피그마 클론코딩인데 시간이 모자를 것 같아서 오늘부터 해보려고 했는데 어렵다ㅠㅠㅠ 피그마 생전 처음 듣는 툴인데다가 다루기가 쉽지 않아서..내일 열심히 해봐야지. 진빠진다🥹

📣 강의 내용 정리 𝟭. 시계 모드 사용하기 tsc app.ts --watch tsc app.ts --w ➰ 변경 사항이 생길 때마다 파일이 저장되고 자동으로 컴파일 된다. ➰ 규모가 큰 프로젝트에서는 사용하지 않는다. 𝟮. 전체 프로젝트 컴파일 / 다수의 파일 tsc --init ➰ 커맨드가 실행되는 폴더의 모든 항목을 알려주는 역할을 한다. ➰ 실행 후 tsconfig.json 파일이 생성되는데, 타입스크립트가 관리해야 하는 파일이 포함된 프로젝트와 모든 하위 폴더를 참고하기 위한 파일이다. tsc // 모든 .ts 파일을 컴파일 한다. tsc --w // 모든 .ts 파일에 watch 모드를 제공한다. 𝟯. 파일 포함 및 제외하기 //tsconfig.json "exclude" : [ "제외할 파일 ..

📣 UI/UX 개념 ✔️ UI(User Interface) : 사람들이 컴퓨터와 상호 작용하는 시스템 ➰ 화면상의 그래픽, 키보드, 마우스 등 ✔️ GUI(Graphical User Interface) : 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 ➰ 운영체제의 화면, 애플리케이션 화면, 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미 ✔️ UX(User Experience) : 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험 ➰ 제품, 서비스 그 자체에 대한 경험 + 홍보, 접근성, 사후처리 등 관련된 모든 경험을 말한다. 📣 UI와 UX 의 관계 ✔️ UX는 UI를 포함한다. ➰ 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은..

📣 강의 내용 정리 𝟭. Using Type ➰ number : 정수, 실수 상관없이 사용하는 숫자 ➰ string : '', "", ``으로 사용하는 문자열 ➰ boolean : truthy, falsy 값 🚨 타입스크립트의 주요 원시 타입은 모두 소문자이다! ✔️ 타입 배정 ➰ 타입을 추가하고자하는 변수에 ':' 을 추가하고 뒤에 타입 이름을 적어준다. function add(n1: number, n2: number) { return n1 + n2; } const number1 = '5'; const number2 = 2.8; const result = add(number1, number2); // 에러 (number1의 타입이 number가 아니기 때문) ➰ 타입스크립트는 컴파일을 차단하지 않고 실..