UI/UX 공부기록

01/14 일일 목표📝 최종 프로젝트UX 집중반   📖 오늘 배운 내용 최종프로젝트 진행하느라 바빠서 어제는 TIL 쓰는걸 깜빡..했다 😣 오늘 한거는 도메인 선정, 데스크 리서치, 설문조사 질문지 작성!도메인은.. 잘 정한거같은데 ㅠ 튜터님은 요즘 트렌드가 문제해결을 발견해서 해결해주는게 트랜드라고 하시는데.. 우리꺼는 아이디어성에 가까운 서비스라서 진입장벽을 낮춰준다는 게 어떤 진입장벽을 낮출수있다는건지 모르겠고, 꼭 우리 어플만의 차별성이 아니라고하셨다..ㅎ그래서 그 지점이 우려스럽고 이렇게 진행하려면 컨셉이나 디자인이 잘나와야하는데.. 재미적인 요소를 주려면 게임요소를 넣어야 하고 컨셉이 진짜 중요한데 그걸 잘 풀어내면 나쁘지 않을 것 같다고..하셨다 ㅎ이거 맞아? 위기에 봉착.. 그래서 설..

01/09 일일 목표📝 리액트 숙련 강의 듣기디자인 집중반   📖 오늘 배운 내용 styled-components 란?리액트에서 css-in-js 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지css를 별도의 파일에 분리하지 않고. javascript 코드 안에 작성이 가능스타일과 로직이 같은 파일에 있어 유지보수가 용이하다   조건부 스타일링이란?특정 조건에 따라 컴포넌트의 스타일을 동적으로 변경하는 방식props와 state를 활용해 조건에 따라 스타일 변경이 가능 리팩토링은기존 코드의 동작을 유지하면서 구조를 개선하여 가독성, 유지보수성, 재사용성을 높이는 작업중복 스타일을 줄이고 코드의 효율성을 높이기 위해서 리팩토링이 가능   함수형 업데이트?react의 usestate에서 현재 상태값에 ..

01/07 일일 목표📝 리액트 입문 강의 듣기디자인 집중반   📖 오늘 배운 내용   useState를 importuseState는 초기값을 넣고, 배열 형태로 상태 변수와 그 상태를 업데이트하는 함수 두 가지를 반환const [count, setCount] = useState(0);에서 count는 현재 상태값을 저장하고, setCount는 그 값을 업데이트하는 함수임useState(0)에서 0은 초기값버튼을 클릭하면 setCount를 호출해서 상태를 변경가능  map 메서드 : 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환하는 함수원본 배열은 변경하지 않고, 새로운 배열을 반환하므로 매우 유용하게 사용

01/06 일일 목표📝 리액트 입문 강의 듣기디자인 집중반   📖 오늘 배운 내용 props에서 children 이란?특별한 props로, 컴포넌트의 태그 사이에 넣은 내용을 말함.부모 컴포넌트가 자식 컴포넌트에 전달하는 "내용물"사용하면 컴포넌트 안에 재사용 가능한 틀을 만들고, 필요한 내용을 유동적으로 넣을 수 있어서 유용 children의 용도1. 레이아웃 컴포넌트공통된 레이아웃 구조를 정의하면서 안에 들어가는 내용을 유동적으로 바꾸고 싶을 때 사용   구조분해할당과 props 구조분해할당을 이용하여 무조건 props.title 을 이용하는게 아니라 props 객체에서 title만 분해해서 바로 사용할수 있음.코드가 간단해지고 props.를 반복적으로 쓰지 않아도 된다.   state란?Stat..

01/02 일일 목표📝 리액트 입문 강의 듣기디자인 집중반   📖 오늘 배운 내용 SPA : 한 페이지에서 동적으로 화면을 바꿔주는 웹 애플리케이션. 처음에 한 번 페이지를 불러오고, 이후엔 필요한 데이터만 서버에서 받아옴.새로고침 없이 화면이 전환됨. MPA : 여러 페이지로 구성된 전통적인 웹 애플리케이션. 페이지를 이동할 때마다 서버에서 새로운 HTML 파일을 받아옴.각 페이지가 독립적으로 동작.  SSR : 서버에서 HTML을 만들어서 클라이언트로 보내는 방식.사용자가 웹사이트를 요청하면, 서버에서 HTML을 미리 렌더링해 보냄.  SPA: 부드럽고 빠른 사용자 경험 (하지만 초기 로딩 느림).MPA: 전통적인 방식, SEO와 초기 로딩에 유리.SSR: 서버에서 화면을 만들어 보내는 방식, S..

12/31 일일 목표📝 리액트 입문 강의 듣기디자인 집중반   📖 오늘 배운 내용map const numbers = [1, 2, 3, 4, 5];const squared = numbers.map(주어진 함수); 화살표 함수const add = (a, b) => {   return a + b;}위의것을 줄이면const add = (a, b) => a + b;console.log(add(1, 3)); 조건 연산자(삼항연산자)조건에 따라서 형태를 간단하게 하는const score = 85;let grade = ""; if (score >= 80) {   grade = "A"}  else {   grade = "B";}const score = 85;const grade = score >= 80 ? "A" :..

12/30 일일 목표📝 리액트 입문 강의 듣기디자인 집중반   📖 오늘 배운 내용1. 객체key - value로 이루어진 값JSON(JavaScript Object Notation) const user = {         name: "르탄이",        age: 30,        isAdmin: true        printHello: () => console.log("hello"),};  점표기법(.)console.log(user.name);console.log(user.age); 괄호 표기법console.attribute = "name";console.log(user[attribute]); user.email = "e@email.com"; // 추가user.age = 31; // 수정de..

12/27 일일 목표📝 자바스크립트 강의디자인 집중반  📝10주 차를 돌아보는 WIL 1. 배열 1-1. push배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이(length)를 반환하는 역할 1-2. pop배열의 마지막 요소를 제거하고, 제거된 요소를 반환하는 역할 1-3. shift배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환하는 역할 1-4. unshift배열의 앞에 하나 이상의 요소를 추가하고, 배열의 새로운 길이(length)를 반환하는 역할 1-5. splice배열에서 요소를 추가, 제거, 또는 교체하는 강력한 기능을 제공합니다. start: 0-based index로 시작 위치를 지정.deleteCount: 제거할 요소의 개수를 지정 1-6. slice배열(Array)..