UI/UX 공부기록

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

🎅 12/24 일일 목표🎄 자바스크립트 강의 듣기디자인 집중반   📖 오늘 배운 내용  Object 객체란?자바스크립트에서 관련된 데이터나 기능을 묶어서 저장하는 특별한 데이터key-value pair 키와 값을 한쌍으로 묶어서 저장하는 자료구조let person = {        name: "John", // 'name'은 키, 'John'은 값        age: 5, // 'age'는 키, 5는 값 }; array 배열이란?여러개의 데이터를 순서대로 저장하는 데이터 타입대괄호는 배열을 만들때 꼭사용 let number = [1,2,3]각각의 값은 인덱스라고 불리는 번호로 접근가능, 배열에서 첫번째 값은 0번으로 시작함!let fruits = ["apple", "banana", "cherry..

12/23 일일 목표📝 자바스크립트 강의 듣기디자인 집중반   📖 오늘 배운 내용 console.log 프로그래머의 디지털 메모장 같은 도구코드의 실행 결과를 확인하거나 디버깅(debugging)할 때 가장 많이 사용하는 JavaScript 콘솔 출력 함수 console.log는 특정 값을 브라우저 콘솔이나 Node.js 터미널에 출력변수에 저장된 값이 제대로 들어갔는지 확인할 수 있고,함수가 올바르게 동작하는지 디버깅할 수 있음주로 테스트용도에 사용 typeof자바스크립트에서 데이터의 타입을 확인할 때 사용하는 연산자이걸 이용하면 특정 값이 숫자인지, 문자열인지, 객체인지 등등을 알 수 있음디버깅하거나 코드를 유연하게 작성할 때 유용   var, let, const의 공통점모두 변수를 만드는 데 사..

12/20 일일 목표📝 디자인 카타개인과제  📝9주 차를 돌아보는 WIL 9주차는 개인과제의 향현.. 오늘한것만 TIL에 개인과제는 열심히 적었으니까 오늘 배운것만 적어봐야겠다.개인과제 오전에 끝내고 클론작업 계속했었는데 .. 클론작업에서  선에 따라 나누어지는 거 어떻게 하나 생각했는데, 일러스트에서는 나누면 조각조각 나누어져서 색상을 따로 지정할 수 있었는데 피그마에서도 할수있는지 궁금해서 튜터님을 찾아갔었다. 그렇게 조각조각 나누어지는건 못하고, 마스크로 해결이가능했다. 위에 선을 마스크따로하고 아래선 마스크따로해서 색상 따로 지정해주는게 가능했다.. 피그마로 진짜 다양한게 가능하구나 역시 많이 클론해보고 직면하는게 도움이 많이 될 것 같다..!!  오늘 내가 한 부분은 항공권예약.. 근데 이 ..

12/19 일일 목표📝디자인 카타웹플로우 개인과제    📖 오늘 배운 내용 노션에 대해 조사하고 발표완료!줌이랑 슬랙도 듣게되었는데 그중에서 슬랙에 대해서 많은걸 알게된듯하다... 슬랙이랑 노션 진짜 캠프하면서 처음써봤는데 SaaS의 대표적인 툴이라는게 협업이나 프로젝트에 참 도움이 많이 될것같다는 생각을 했다. 오른쪽은 카타시간에 알려주신 슬랙 꿀팁모음 ㅋㅋㅋ하나씩 써봐야지  오늘은 웹플로우 마무리를 하려고 인터렉션을 추가해보려고 했다. 위에 상단바를 스크롤하면 그림자가 생기게하려고 열심히 노력을 했는데......유튜브 따라했는데 진짜 안되가지고 열받았는데 댓글보니까 옛날방식이여서 지금은 안된다는 충격적인 소식.... 때려침..   그냥 그림자밖에 할 수 없던 나... ........ 그래도 노력한..