프로덕트디자이너 Hailey 일기장📝

[오늘 하루 계획]오전09:10 ~ 09:30 : 계획서 작성09:30 ~ 13:00 : UX집중반 프로젝트 진행집중 디자인14:00 ~ 18:00 : 강의 수강14:00 ~ 18:00 : 프로젝트 진행 수강[O] 리액트입문 2주차 강의 완강하기[O] 리액트 입문 2주차 복습하기18:00 ~ 19:00 : 저녁 식사 시간 저녁19:00 ~ 22:50 : UX집중반(쏘카 UX프로젝트) 22:00 ~ 22:29 : 저녁 스크럼, TIL 제출, 각자 댓글 달기   [14:00 ~ 17:00 /  리액트입문 2주차 진행]  클릭하세요 "> 클릭하세요 컴포넌트에 CSS를 적용하기.yarn create vite 프로젝트이름 --template react우선 터미널에 위 명령어 복붙해서 새 프로젝트 생성...

TIL [2024.12.30(화)] 리액트 프로젝트 생성 방법리액트 프로젝트를 생성하는 3가지 방법에 대해 소개합니다. 왜 Vite를 사용해야 하는지 알아보았습니다. 1.CRA(Create React App)한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법CRA로 리액트 프로젝트 셋업하기터미널에서yarn create react-app [원하는 프로젝트 이름]위 명령어 입력. npx create-react-app first-react-app원하는 프로젝트 이름 작성시 띄어쓰기 하면 오류난다 참고. 프로젝트 이름에 공백을 포함하지 마세요.소문자와 숫자, 하이픈(-)만 사용하세요. proceed?(y) 글짜를 보면 y글 치고 엔터 치면 설치 진행됨. 맥북 업데이트 후 드디어..

Date: 2024-12-27Topic: JavaScript 변수 선언 키워드(var, let)와 스코프 복습, 리액트 강의 수강Today I Learnedvar와 let의 스코프 차이var: 함수 스코프를 가지며, 블록({ })을 벗어나도 접근이 가능합니다.장점: 초기 JavaScript 환경에서 널리 사용되던 방식으로 호이스팅(hoisting)에 따라 코드 상단으로 끌어올려져 선언된 것처럼 동작.단점: 블록 스코프를 무시하기 때문에 의도치 않은 참조나 값 변경을 초래할 가능성이 큼.let: 블록 스코프를 가지며, 선언된 블록 내에서만 유효합니다.장점: 블록을 벗어나면 변수에 접근할 수 없어, 더 안전한 코딩이 가능합니다.단점: 블록 외부 접근이 필요한 경우 적합하지 않을 수 있음.코드 분석과 결과va..

하루계획표오전09:10 ~ 09:30 : 계획서 작성09:30 ~ 13:00 : 자바스크립트 강의 수강집중 디자인14:00 ~ 17:00 : 강의 수강14:00 ~ 17:00 : 프로젝트 진행 수강[O] 팀원들과 어려운 내용 공유 및 해결책 찾기[O] 1주차 강의 듣기[O] 1주차 과제 하기[O] 튜터님께 질문저녁19:00 ~ 20:50 : UX집중20:50 ~ 21:30 : 저녁 스크럼, TIL 제출, 각자 댓글 달기    오늘 자바 스크립트 문법 강의를 듣는 주기가 되었습니다.  기초 문법 연습등을 학습했습니다.function solution(s){ var result = true; s = s.toUpperCase(); var num = 0; for(var i = 0; i   유튜브 강의로 자..

💡Keep(현재 만족하고 있는 부분)웹 페이지 기본 구조를 분석할 수 있게 된 점어렵게만 느껴졌던 개발자 도구 화면에서의 구조와 요소를 파악할 수 있게 되었고 개인 작업물에 활용할 수 있게 되어 만족스럽게 생각합니다.팀원간의 일정 공유자칫 깜빡하고 넘어갈 수 있는 개인적인 일정도 팀원끼리 서로 공유하고 배려하여 편안한 학습 분위기를 형성할 수 있어 만족스럽게 생각합니다.새로운 툴을 배우게 된 점처음 접하는 노코드툴인 웹플로우를 활용한 개인 과제 제작에 몰입함으로써 디자인에 활용할 수 있는 툴의 범위가 넓어졌다고 생각합니다.백엔드를 따로 배우지 않아도 제작 가능한 노코드 툴백엔드 개발 지식 없이도 데이터베이스와 서버 설정을 자동으로 처리해주는 노코드 환경 덕분에, 초보자도 쉽게 웹사이트와 기능을 제작할 ..

📅 TIL - 2024.12.19주제: 자유주제(토스) - Webflow 애니메이션 및 텍스트 크기 조정 학습1. 오늘 학습한 내용Webflow에서 텍스트 크기 조정 방법Webflow에서 텍스트 크기를 줄이거나 키우는 방법을 배우며, Scroll Actions와 Interactions 기능을 활용하는 법을 익혔습니다.무료 계정에서는 Size와 Scale을 활용해 간접적으로 텍스트 크기를 조정하는 것이 유효하다는 점을 확인했습니다.Keyframe 설정의 중요성Webflow의 애니메이션은 두 개 이상의 Keyframe(시작과 끝)을 설정해야 올바르게 작동한다는 것을 배웠습니다.Keyframe 간의 간격과 값을 적절히 설정하여 부드러운 애니메이션 효과를 구현했습니다.텍스트 크기와 위치 조정텍스트 크기를 줄이..

TIL (Today I Learned)1. 진행 상황핸드폰 UI와 타블렛 UI 제작 완료 후, 인터랙션을 추가하기 위해 제작 중이다.모션을 자연스럽게 주는 방법을 배우기 위해 튜토리얼을 참고하며 계속 진행 중이다.Box에 그라데이션 효과를 적용하는 방법을 새로 알게 되어 성공적으로 반영했다.가로 스크롤 기능도 제작 완료! 현재 핸드폰 UI와 타블렛UI 제작 완료후 인터렉션을 주기 위해 추가 제작 중이다.이부분에서 어떻게 모션을 자연스럽게 줄수 있을지 튜토리얼을 계속 보며 진행중 Box에 그라데이션 효과를 적용하는 방법을 새로 알게 되어 성공적으로 반영 했다. (현재 계속 진행중!)   가로 스크롤도 제작 완료 하였다. 개발자 도구 안에 있는 그라데이션 컬러 참고 후텍스트 그라데이션 제작 방법을 몰라 조금..

오전09:00 ~ 10:10 : 디자인 카타 진행10:10 ~ 10:30 : 오전 스크럼, 계획서 작성집중 디자인10:30 ~ 16:00 : 웹플로우 강의 듣기[O] 노코드 웹플로우 3주차 강의 듣기저녁20:30 ~ 20:50 : TIL작성 [O] 웹플로우 개인과제 발제 및 개인과제 계획 구상하기20:30 ~ 20:50 : TIL작성20:50 ~ 21:00 : 저녁 스크럼, TIL 제출, 회고17:00 ~ 20:00 : 강의 수강 및 과제 제출오늘 한 일Airtable 폼 설정비밀자료 신청 폼을 Airtable에서 생성하고 테스트.폼 제출 시 자동으로 단계를 "비밀자료 신청"으로 업데이트하는 자동화 설정 진행.웹플로우 버튼과 폼 연동Airtable에서 생성된 폼 링크를 웹플로우 내 버튼에 첨부해 사용자..