aotoyae

🫠 리액트에서 데이터를 받아오다가.. 첫 글자만 대문자로 출력할 일이 생겼다. 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..

내배캠 리액트 입문 수업 중.. 내용 정리! 리스트를 추가 하고 삭제해보자 ~ 👩‍💻 전체 코드 📁 App.jsx import React, { useState } from "react"; import "App.css"; import AddButton from "components/AddButton"; import User from "components/User"; function App() { const [users, setUsers] = useState([ {/*기존 리스트*/} { id: 1, age: 11, name: "요리" }, { id: 2, age: 12, name: "미나토" }, { id: 3, age: 34, name: "호리" }, { id: 4, age: 40, name: "사오리"..

🤤 리액트로 리스트를 만들어보자~ html 작성법과 같이 ul 과 li 로 작성! class 는 className 으로 쓴다. import React from "react"; import "App.css"; function App() { return ( 감자 고구마 당근 가지 애호박 ); } export default App; .ul-style { margin: 0; padding: 20px; list-style: none; display: flex; justify-content: space-between; } .li-style { width: 100px; height: 100px; border: 1px solid red; border-radius: 10px; display: flex; justify-c..

💡 다른 파일을 import 해서 가져올 때 경로를 ../ 이런 식(상대 경로)으로 들어가지 않고 그 파일의 이름으로 바로 불러올 수 있도록 절대 경로를 설정할 수 있다! 이렇게 ~ 방법은 1. 먼저, 최상위 폴더(root 경로)에 jsconfig.json 파일을 만들어준다. 2. 그리고 파일 안에 아래와 같이 작성 src 폴더 내 파일들은 절대 경로로 작성할 수 있게 된다! 3. 수정할 파일로 들어가 절대 경로로 파일명 수정! 4. 그럼 에러가 발생하는데 다시 npm start 를 해주면 정상적으로 작동된다. ✳️ 이런 식으로 파일을 불러오는게 필수적인 건 아니니 때에 취사선택해 사용하자.

💡 배열의 요소를 정렬하는데 사용하는 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..