sohyeon kim

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

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

💡 그리드 속성 몇 개 더 알아보자. 기본 세팅! .container { display: grid; height: 500px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } ✳️ align-items : 플렉스박스 방식에서와 유사한 역할을 한다. 그리드 컨테이너 행 트랙의 높이, 수직축(열)을 기준으로 그리드 아이템의 배치를 결정한다. ✳️ align-self : 각각의 그리드 아이템이 어떤 식으로 배치될 것인지를 스스로 결정 속성값 의미 stretch 기본값! 그리드 아이템들이 트랙 높이만큼 확장된다. start 트랙 상단으로부터 하단을 향해 배치 end 트랙 하단으로부터 상단을 향해 배치 center 할당된..