sohyeon kim

💡 객체를 활용해 새 객체를 만들어낼 때 원본 객체에 영향이 없도록 해보자! 객체의 프로퍼티(속성)에 접근해 영향을 줌 : 가변let user = { name: 'aoto', gender: 'female',};const changeName = function (user, newName) { let newUser = user; newUser.name = newName; return newUser;};let user2 = changeName(user, 'yae');console.log(user.name, user2.name) // yae yae  객체의 프로퍼티에 접근하는 것이 아니라 새로운 객체를 반환 : 불변let user = { name: 'aoto', gender: 'female',};..

💡 forEach 와 map 의 차이점은? return 의 유무! forEach()값을 리턴하진 않고 그냥 함수를 실행만 했다.let numbers = [1, 2, 3, 4, 5]numbers.forEach(function (item) { console.log("item => " + item);});// item => 1// item => 2// item => 3// item => 4// item => 5 map()반드시 리턴값을 가져야 한다.배열을 받아 새로운 배열을 반환하는게 map 의 역할!** 항상 원본 배열의 길이만큼 return 된다.let newNumbers = numbers.map(function (item) { return item * 2;})console.log(newNumbers..

💡 input 에 한글이나 숫자를 입력할 때 maxlength 가 부자연스러운 동작을 하는데, 원하는 글자수로 딱 제한할 수 있도록 해결해보자! setNickName(e.target.value)} placeholder="최대 20자" maxLength={20} /> maxLength 로 제한을 두니 한글을 입력했을 때나, 숫자 + 한글을 입력했을 때 21 자가 입력이 되버린다. ⬇️ const handleOnInput = (e, maxlength) => { const { target: { value }, } = e; if (value.length > maxlength) e.target.value = value.substr(0, maxlength); }; // ... handleOnInput(e, 20)}..

💡 함수 선언문과 화살표 함수의 호출 위치에 대해 더 알아보자 코딩 테스트를 풀다가 화살표 함수를 선언 전에 호출했는데 실행이 되는 코드가 있어서 대체 왜 되는거지??!?! 하며.. 알아본 호출 위치의 비밀.. function solution(nums) { let answer = 0; for (let i = 0; i < nums.length - 2; i++) { for (let j = i + 1; j < nums.length - 1; j++) { for (let k = j + 1; k < nums.length; k++) { if (isPrime(nums[i] + nums[j] + nums[k])) { // 화살표 함수 호출 answer++; } } } } console.log(answer); // 1 }..

🫠 리액트에서 데이터를 받아오다가.. 첫 글자만 대문자로 출력할 일이 생겼다. const str = "hello"; console.log(str.charAt(0).toUpperCase()); // "H" console.log(str.slice(1)); // "ello"; console.log(str.charAt(0).toUpperCase() + str.slice(1)); // "Hello"; charAt 을 이용해 0번 인덱스의 문자를 가져오고 대문자로 바꿔준다. slice로 1번부터 마지막까지의 값을 가져온다. 합쳐주면 끝! 🔗 https://codingbroker.tistory.com/32 🔗 https://codechacha.com/ko/javascript-to-uppercase-for-first-..

💡 MPA : 멀티 페이지 애플리케이션 - 2개 이상의 페이지(html)로 구성된 App 클릭을 하면 서버에서 새로운 전체 페이지를 다시 보내줌 💡 SPA : 싱글 페이지 애플리케이션 - 1개 페이지로 구성된 App 클릭을 하면 서버에서 필요한(바뀌는) 부분반 보내줌 장점 1. 자연스러운 사용자 경험 가능 : 깜빡임 X 2. 웹 성능 향상 : 필요한 리소스반 받아 부분적 렌더링, 서버 부담 줄어듬 3. 개발 생산성 향상 : 컴포넌트별 개발 용이(협업 엄무 분담, 유지 보수) 단점 1. 첫 랜딩 속도가 느림 2. 검색엔진최적화(SEO)에 취약, SEO :검색 엔진에서 상위에 노출되도록 최적화하는 과정 (html 파일을 읽어 검사하는데 비어있으니 불리함) 💡 Hashed Routing: hash 값이 변경됨..

💡 데이터의 불변성에 대해 알아보자 원시 데이터 : 숫자, 문자, 불리언.. 원시 데이터들은 같은 값을 저장하면 그 값의 같은 주소를 적어둔다. number1 = @111 ➡️ @111 = 1 number2 = @111 ➡️ @111 = 1 참조형 데이터 : 배열, 객체, 함수.. 참조형 데이터들은 같은 값을 저장해도 각각의 다른 주소를 적어둔다. 그리고 그 주소들은 같은 값을 바라보는 같은 주소에 다시 연결된다. obj1 = @222 ➡️ @222 = @333 ➡️ @333 = name: 1 obj2 = @777 ➡️ @777 = @333 ➡️ @333 = name: 1 💡 데이터를 수정해보자 원시 데이터는 값이 바뀌면 바로 연결된 주소를 바꾼다. number1 = @444 ➡️ @444 = 2 num..

💡 배열의 요소를 정렬하는데 사용하는 sort! 정렬된 이후의 배열을 반환한다. ❗️ 주의) 원본 배열에 변경 사항이 반영된다. const arr = [1, 3, 4, 10, 8]; const arr2 = arr.sort(); console.log(arr); // [1, 10, 3, 4, 8] console.log(arr2); // [1, 10, 3, 4, 8] // 아래도 같은 결과 const arr = [1, 3, 4, 10, 8]; const arr2 = arr; arr2.sort(); 💡 해결법 : 원본 복사를 하고 정렬을 해야 한다! slice() or 전개 연산자 활용 const arr = [1, 3, 4, 10, 8]; const arr2 = arr.slice().sort(); console..

🥹 연습으로.. 간단하게 몇개 적어두겠다! function createItem(name, price) { return { name, price, }; } const items = [ createItem("computer", 2100), createItem("tv", 1800), createItem("book", 15), createItem("phone", 1600), createItem("coffee", 5), createItem("keyboard", 200), createItem("mouse", 140), ]; 💡 filter() : 가격이 300 이하인 아이템 배열 구하기 const result = items.filter((item) => item.price { return acc + cur.pric..

💡 ES11(ECMAScript2020)에서 도입된 null 병합 연산자 : 좌항의 피연산자가 null 또는 undefined 인 경우 우항의 피연산자를 반환, 좌항이 null 또는 undefined 가 아니라면 좌항의 피연산자를 반환 let left = null; let right = "default string"; let result = left ?? right; console.log(result); // "default string" null 병합 연산자는 변수에 기본값을 설정할 때 유용! '??' 가 도입되기 전엔 논리 연산자 '||' 를 사용한 단축 평가를 통해 변수에 기본값을 설정했다. or 연산자를 사용한 단축 평가의 경우 좌항의 피연산자가 false 로 평가되는 Falsy 값 - false..