나의 개발일지

자바스크립트가 끝나고 오늘 첫 리액트 수업이었다! CRA를 통해 기초 파일들이 자동으로 세팅되는 게 너무 신기해서 저절로 박수가 나왔다. 튜터님도 첫 세팅을 축하한다고 말씀하셨다ㅋㅋㅋ 우선 오늘 TIL의 내용은 리액트를 다루면서 주의해야 할 점들과 개념들 위주로 작성할 예정이다 1. React에서 자주 사용되는 ES6 필수 문법 (1)Object 선언, 단축 속성, 객체 복사 - 가장 중요한 것은 object는 key-value pair !!! // 객체 선언 방법 const person = { name: "희원", age: 26, MBTI: "isfj", // dosomething: () => {} // 함수도 value값이 될 수 있다 }; // 생략해서 표현하는 방법 const name = "희원"..

개인과제는 물론 팀과제 때에도 fetch라는 함수를 그냥 썼지, 분석하고 공부하고 쓴 것이 아니라서 오늘 전반적인 내용을 이해하고 과제에는 쓰지 않았던 await을 공부하며 TIL을 작성할 계획이다. 우선 비동기 처리라는 의미를 알아보자 비동기 처리는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 만약 무수히 많은 데이터를 요청했을 때, 그 서버에서 언제 응답을 줄지도 모르는데 마냥 기다리기만 한다면 실행하고 기다리고, 실행하고 기다리는 것이 반복되고 이것은 시간이 오래 걸릴 수 밖에 없는 비효율적인 구조가 된다. 그래서 비동기 처리가 필요하다! 자바스크립트에서 fetch는 리소스를 비동기 요청을 할 수 있다. 주로 API를 호출하고..

집중이 되지 않는 날엔 일기쓰기! 무기력하면 회피하는 나.. 고쳐야 하는데 잘 고쳐지지 않는다 ㅋㅋㅋ 배도 아프고 집중도 되지 않으니까 일단 공부 중단하고 책을 읽어봐야겠다 너무나도 유명한 '모순' !! 사놓고 아껴두느라 못 읽었었다 나 따라서 산 친구가 먼저 읽었는데 재밌다고 해서 기대 중 ㅎㅎ 내일은 팀과제 마지막 날이다 다 같이 힘을 합쳐 마지막까지 잘 마무리 했으면 좋겠다 그리고 이제 다음 주부터 리액트 수업 들어가는데 얼마나 어려울까?ㅎㅎ 벌써부터 기대된다 그렇지만 심적으로 도움을 주는 친구들과 친절하신 튜터님들이 계시니까 무너질 수 없다아~ 파이팅하자!! 우리 아픈 블랙이 얼른 수술해서 건강하게 살았으면 좋겠다 눈물이 앞을 가리니까 이제 그만 쓰고 책 읽으러 가야지

map() 함수 배열을 순회하면 지정된 콜백 함수를 적용하여 각 요소를 변환하고, 그 변환된 값을 모아서 새로운 배열로 반환하는 역할을 수행한다. // 각 숫자를 2배로 만들어 새로운 배열 생성 const numbers = [1, 2, 3, 4, 5]; const doubleNumbers = numbers.map(function (num) { return num * 2; }); console.log(doubleNumbers); // 각 숫자의 제곱 값을 가지는 새로운 배열 생성 const numbers1 = [1, 2, 3, 4, 5]; const squaredNumbers = numbers1.map(function (number) { return number * number; }); console.lo..

팀프로젝트 진행 중, 메인페이지에서 상세페이지로 넘어갈 때 객체를 불러오는 것까지는 구현했다(물론 튜터님의 도움을 받아서 ^^) 하지만 화면에 정보가 뜨지 않고 콘솔창에 오류가 발생했다고 떠서 역시나 도움을 청했다 작성된 코드 ▼ const selectedMoive = results.filter((item) => { if (item.id == clickId) { return true; } else { return false; } console.log(item.id); }); console.log(selectedMoive); const card = document.createElement("div"); card.classList.add("movieBox"); card.innerHTML = ` ${title..

과제하느냐고 예제를 많이 풀지 못했다 그래서 그냥 오늘의 일기를 쓰는 중 팀 프로젝트 너무 어렵다 0.5인분이라도 해보고 싶은데 잘 되지 않는다ㅠㅠ 혼자할 수 있는 게 아무것도 없다^^ 오늘도 튜터님들과 에이스 팀원분의 도움을 받아버렸다~ 서치를 해도 응용할 수 없는 게 나의 한계다.... 즉, 베이직반 신청을 해야한다는 뜻^^ 베이직반 가즈아

// 1. 다음 배열에서 5보다 큰 숫자만 출력하세요. const arr = [1, 4, 2, 3, 10, 15, 0]; const result1 = arr.filter(function(val){ return val > 5; }) console.log(result1) // 2. 다음 배열의 모든 값을 출력하세요 const arr01 = [1, 2, 3, 4, 5]; for(let a = 0; a < arr.length; a++) { console.log(arr01[a]); } //foreach문을 쓴 버전!! const arr1 = [1, 2, 3, 4, 5]; arr1.forEach(function(val){ console.log(val); }) // 3-1. 값과 인덱스값 출력하기 const arr0..

// [요구사항] // 아래 함수 multiply는 두 인자를 받아 곱한 값을 반환합니다. 해당 함수를 완성하십시오. // [코드] function multiply(a, b) { return a * b; } console.log(multiply(2, 3)); // [테스트] // multiply(2, 3)은 6을 반환해야 합니다. // ----------------------------------------------------- // [요구사항] // 주어진 숫자 배열의 모든 요소를 더하는 함수 sumArray를 작성하세요. // [코드] const numbers = [1, 2, 3, 4, 5]; function sumArray(total, number) { return total + number; }..

입력 요소 값 읽기 , 처럼 사용자로부터 입력을 받는데 사용되는 요소들이 있는데 여기서 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성에 접근한다. 차이점 * 요소의 텍스트에 접근하고 싶다면 --> textContent 또는 innerText * 사용자가 요소에 입력한 값에 접근하고 싶다면 --> value 입력 요소의 value에 접근하여 할 수 있는 것은 크게 두 가지이다 // 읽기 // 대상 요소의 사용자 입력값을 읽어 콘솔에 출력 console.log(target.value) // 쓰기 // 대상 요소의 사용자 입력값을 "변경값"으로 바꾸기 targer.value = "변경값" 클릭이벤트 발생 시 입력값 출력 const textInput = document.getElementById("..

addEventListener onclick, onkeydown 과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는것보다 현대적인 방법은 addEventListener 메소드를 이용하는 것!! 예시) //원래 사용하던 방식 Target.onclick = function() {} // addEventListener의 방식 Target.addEventListener('click', function(){}) 이벤트 객체 추가적인 기능과 정보의 제공을 위해 이벤트핸들러에 자동으로 전달된다. 이벤트핸들러 함수에매개변수를 추가하여이벤트 발생 시마다 전달받을 수 있도록 해야한다. //click 이벤트가 발생하면 함수를 호출 Target.addEventListener('click', function(){}) //cl..