UI/UX 공부기록

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)..

12/26 일일 목표📝 자바스크립트 강의 듣기디자인 집중반   📖 오늘 배운 내용 1. 함수기능의 단위로 묶어서 저장한 다음 재활용이 가능인풋과 아웃풋을 가지고있는 기능의 단위function 함수이름 (매개변수input) {        //함수 내부에서 실행할 로직}  1-1. 함수 선언문 주로 기본적인 함수 정의에 사용function 키워드로 이름을 붙여서 함수를 만들고 나중에 불러서 사용 가능두개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 기능을 하는 함수function add (x, y) {      return x + y;} 2-2. 함수 표현식선언한 뒤에만 호출이 가능함수를 변수에 넣거나, 동적으로 사용할때 사용함두개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 기능을 하는 함수let a..