분류 전체보기 139

템플릿 리터럴 (template literals) 와 destructuring

템플릿 리터럴변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해줌백틱(`) 사용문자열을 여러 줄로 작성하는 목적으로도 사용됨 destructing객체에서는 키가 중요함배열에서는 인덱스가 중요함배열에서는 위치만 맞으면 구조분해할당이 됨파일을 기능별로 분류하는 것과변수명을 나눠서 분류하는 것은 그저 선호도 차이임const customer = {   name: "은진", };const item = {  name: "아메리카노",  price: 4000,};const name = item.name;const price = item.price;// 얘네가 몇 백개, 몇 천개 있으면// 일일이 써줘야 하는데// 이 일을 한 번에 해줄 수 있다.// 구조를 객체 형태로 가지고 있는데// name과 price를 각각..

환경 변수

노트북에 로컬 계정 로그인하고,사용자 폴더 이름 바꾼다고 이것저것 만졌더니노트북이 이상해졌다..기존에 쓰던 데이터가 폭삭 날아가버려서VSCode를 다시 설치하게 되는 일이 발생했다. yarn을 설치했는데 컴퓨터가 yarn의 위치를읽지 못한다는 에러가 자꾸 떴고,해결 방법으로는환경변수에서 경로를 변경해줘야 하는 것이었다. 전에 JAVA배울 때 eclipse 설치하면서환경변수 잘못 만지면 큰일 난다고 들어서불안했지만 다행이 그런 일 없이 잘 연결됐다. 내가 환경변수를 설정했어야 했던 이유는노트북이 내가 설치했던 yarn의 경로를 몰라서그랬던 것이다. 그래서 도대체 환경 변수가 뭔가 하고 알아봤다.  환경 변수:운영체제가 참조하는 변수 윈도우는 파일을 현재 디렉토리에서 찾고,현재 디렉토리에서 아무 파일을 열고..

다시 공부 2024.09.20

배열

push( )배열.push( )배열에 요소 추가 pop( )배열.pop( )배열의 마지막 요소 출력 map( )배열.map(콜백함수( ))원본 배열에서 각 요소를 가공한새로운 배열을 리턴하는 함수1) 배열 내의 모든 요소 각각에 대해2) 주어진 함수를 호출한 결과를 모아3) 새로운 배열을 반환 filter( )배열.filter(콜백함수( ))변수를 선언해서 사용해야 함 reducereduce(콜백함수(누적된 값, 일반 값))배열의 각 요소에 대한 함수를 실행하고결과를 누적해서 반환함숫자던, 배열이던, 객체던하나의 값으로 줄여 리턴하는 함수// 숫자들의 합을 구하기// 가장 큰 숫자 찾기(누적기)numbers.reduce(function (누적값, 일반값) {  console.log("------");  ..

(git) master에 있는 파일과 main에 있는 파일을 합치는 방법

어제와 새벽에 각각 파일을 한 개씩 올렸다.새벽에 새벽에 아무리 푸시를 해도파일이 보이지 않았는데레포지토리명 하단에 main이랑 master를선택할 수 있는 버튼이 있길래 master를 클릭했더니방금 넣었던 파일들이 들어있었다..main으로 넣어야했던 파일들을 실수로 master에넣었던 것이었다.. git main이랑 master는 같은게 아닌가??왜 2개로 나눠지지?? 싶어서 찾아봤는데별거 없었다. 둘 다 똑같다고 한다. 바로 다음, main과 master를 합쳤다.git pull origin 브랜치명 --allow-unrelated-histories→  add . → commit -m " " (합치는 것에 대한 메시지) → git push

object 형식의 데이터를 value로 확인하고 싶을 때

내 콘솔 창에는 [object, object]라고 뜨는데강의에서는 제대로 된 값이 떴다.전에 상관 없다고 들었는데이왕이면 제대로 된 값을 보고싶어서알아보니까 stringify를 사용하면 된다고 해서알아보았다. JSON:JavaScript Object Notation의 약자브라우저와 서버사이에서 오고가는 데이터의 형식 JSON.stringify(value, replacer, space)value:필수로 입력하는 값JSON 문자열로 변환할 값이다.배열, 객체, 또는 숫자, 문자 등이 될 수 있음replacer(선택):선택해서 입력하는 값함수 또는 배열이 될 수 있음이 값이 null 이거나 제공되지 않으면,객체의 모든 속성들이 JSON 문자열 결과에 포함됨

Js & React 공부 2024.09.13

변수와 객체

객체key - valueJSON (JavaScript Object Notation)const 객체 = {   속성 : "값"   속성 : "값"   속성 : "값" } 객체 접근 방법1. 점 표기 법(.)속성. 객체명 2. 괄호 표기법속성[속성명을 담은 변수] 객체 추가속성. 추가할 객체명 = "값" 객체 수정속성. 수정할 객체명 = "값" 속성 삭제delete 객체명.속성; (1) Object.keys( )객체의 key를 추출하는 메서드 (2) Object.values( )객체의 값을 추출하는 메서드 (3) entries객체의 key와 값을 쌍으로 반환하는 메서드 (4) assign원본 객체에 속성을 복사하는 메서드  배열순차 데이터를 저장할 때 쓰임숫자의 배열, 문자의 배열대괄호를 사용함

sort와 localeCompare

공통점: 정렬 메소드차이점: 문자열은 locareCompare을 사용 const myNums = [1998, 2, 19, 148, 55, 220];이런 배열이 있다고 치자. myNumbs.sort( ); 를 하면 문자열을 (오름차순으로) 정렬한 것 처럼[148, 19, 1998, 2, 220, 55] 찍힌다. 하지만,문자열 말고 숫자로 정렬하고싶다면이렇게 해주면 된다.오름차순: 숫자배열.sort((a, b) => a - b);내림차순: 숫자배열.sort((a, b => b - a); 오름차순 변수 up을 줘서 출력을 한다면const up = myNumbs.sort((a, b) => a - b);console.log("오름차순 > ", up);// 오름차순 > [2, 19, 55, 148, 220, 199..

Js & React 공부 2024.09.11

let, const, var

var 키워드는 사용을 지양함 사용 이유데이터 저장관리의 필요성사용자로부터 받은 입력을 처리계산 결과를 재사용해야 할 때프로그램의 복잡성 관리// 변수가 없다면 모든 값을 기입해야 한다.그러면,코드가 복잡해지고, 오류가능성이 높아지며,프로그램의 확장성과 유지보수성이 떨어진다.하지만 변수를 사용하면코드의 가독성이 높아지고,수정이 필요할 때 적은 변경으로원하는 결과를 얻을 수 있다. var, let재할당 가능 const재할당 불가능상수를 선언할 때 사용값이 변경되지 않는 변수를 명확히 표현값 변경으로 인한 버그를 예방 가능 변수 선택 시,let과 const를 고를 때에 먼저 const를 선택재할당이 필요할 경우에 let을 선택 var 키워드 사용을 지양하는 이유범위 관리의 어려움예상치 못한 범위에서 사용될 ..

localeCompare

sort( )는 숫자만 된다.숫자만이라기 보다는 숫자 위주로 된다.저번에 숫자 위주인줄 모르고문자를 했는데 튜터님이 숫자 위주라고localeCompare를 알려주셔서 알았다.그렇게 문자를 하니까 잘 정렬이 됐었다.  localeCompare은 문자열 비교 메서드다.얘는 리턴 값이 -1, 0, +1만 리턴한다고 한다. -1을 리턴하는 경우:  좌측 문자열이 우측보다 알파벳 순서가 빠름 +1을리턴하는 경우: 우측 문자열이 좌측보다 알파벳 순서가 빠름 0을 리턴하는 경우: 2개의 문자열이 똑같다는 뜻  즉, 0이냐 아니냐에 따라 문자열을 비교하면 됨

Js & React 공부 2024.09.07

5차 수업 + a

promise랑 await의 추가 내용 async function Test( ) {// 데이터를 받아오기 전까지 기다린다.// fetch 함수는 promise// (pending, successed, rejected)// 를 return 하니까// 그 결과를 기다리지 않으면// pending이 무조건// console.log( )로 찍힐테니// pending이 안 찍히도록// fulfilled가 될 때까지// 기다리는게 await의 fetch // 즉, fetch 함수는 promise를 return 하는데,// 결과를 기다리지 않으면 pending이 // console.log( )에 찍힌다.// 그러지 않기 위해서// await를 사용하는 것이다.  try {        const result = aw..