개발/JavaScript 10

[JS] 날짜 데이터 필터링해서 조회하기

코드짜면서 은근 생각 안나서 메모,,  1. 한 날짜에 대해 사잇값 찾기예)const companyList = [ { companyName: "Tech Innovators", foundingDate: "2010-09-15", employeeCount: 250 }, { companyName: "Creative Solutions", foundingDate: "2015-06-22", employeeCount: 150 }, { companyName: "NextGen Labs", foundingDate: "2018-11-30", employeeCount: 100 }]; 위와 같은 회사들에 대한 데이터가 있을때창립기념일이 2010-01-01 ~ 2016-0..

개발/JavaScript 2024.09.10

.map() 및 JavaScript 배열 메소드 (1)

.map() 과 .every() 는 모두 배열을 다룰때 사용된다는 점과, 사용방법이 같다는 공통점을 가지고 있지만 사용 목적에 대한 차이점이 있다. .map() 은 배열의 각 요소에 식을 적용하고, 적용된 요소들로 새로운 배열을 생성한다. .every() 는 배열의 각 요소들이 조건에 맞는지 검사하고, true와 false를 반환한다. const numbers = [1, 2, 3, 4, 5]; const squaredNumbers = numbers.map((num) => num * num); // squaredNumbers: [1, 4, 9, 16, 25] .map()은 for문 처럼 배열의 각 요소들을 하나씩 꺼내 식에 대입해 결과값을 얻고, 얻은 결과값들을 모아 새 배열을 생성한다. (기존 배열과 길..

개발/JavaScript 2023.08.10

소셜로그인 구현 시 작동 순서 및 과정

1. 유저가 소셜로그인 버튼을 누르고 ID, PW 입력 2. 해당 소셜에서, 유저가 입력한 ID와 PW가 올바른지 확인 3. 올바른 로그인 정보일시 소셜에서 브라우저로 시크릿 코드를 전송 4. 브라우저는 소셜에게 받은 시크릿 코드를 백엔드로 전달 5. 백엔드는 브라우저에게 받은 시크릿 코드를 소셜로 다시 전송 (로그인 요청한 유저와 동일한지 확인 과정) 6. 소셜에서 백엔드에게 받은 시크릿 코드와 브라우저에게 전송했던 시크릿 코드가 일치하는지 확인 7. 일치 시 소셜에서 백엔드로 해당 유저의 AccessToken과 프로필을 전송 8. 백엔드는 소셜에서 받은 유저의 프로필이 db에 없으면 회원가입을 진행하고, 있으면 로그인 처리

개발/JavaScript 2023.06.07

스프레드 연산자와 나머지 연산자

둘 다 '...'을 사용해 비슷하게 생겼다. - 스프레드 연산자: 배열이나 객체를 펼쳐서 전개함 객체를 복사하거나 새로운 배열 및 객체 생성 시 유용하게 사용됨 const arr1 = [1, 2, 3]; //얘네 const arr2 = [4, 5, 6]; //둘을... const mergedArr = [...arr1, ...arr2]; //개별로 분리한 후 하나의 배열로 합치기~! console.log(mergedArr); // 출력: [1, 2, 3, 4, 5, 6] - 나머지 연산자: 나머지 값들을 모아서 배열로 만듦 함수에 파라미터에서 사용되며 함수에 전달된 인자들 중에서 명시된 파라미터로 할당하지 않은 나머지 인자들을 배열 형태로 받아옴 function foo(a, b, ...rest) { //a..

개발/JavaScript 2023.04.14

'초기화' 란?

일상생활에서 초기화 하다 라는 말은 아예 싹 없애버린다(?)라는 뜻으로 썼던 것 같은데 코딩을 배우면서 초기화라는 단어의 뜻이 내가 알던 뜻과 살짝 다르게 사용되고 있는 것 같아서 공부 겸... 헷갈림 방지를 위해 글을 작성하기로 했다. 초기화란? 일반적으로는 변수나 객체의 초기 상태를 지정해주는 것 이라는 뜻으로 쓰인다. 물론 상황마다 다른 뜻으로 쓰일 때도 있겠지만...! 변수나 객체가 초기화 되면 초기화 된(지정해준) 그 값부터 새롭게 시작하는거다. 이전에 어떤 값이 들어갔던지 상관 없이!

개발/JavaScript 2023.04.11

async/await 란?

함수앞에 async라고 작성하면 그 함수는 자동으로 Promise를 반환하게 됨 async로 선언한 함수 내에서 await이라는 단어 뒤에 오는 작업(Promise객체)을 끝날때까지 멈췄다가 다음 작업을 실행함 비동기적인 상황에서 작업의 순서를 정해야할때 사용함 (이벤트 루프를 직접 사용하진 않지만 이벤트루프를 사용하는 promise를 사용하므로~! 이벤트루프를 간접적으로 사용함.... 설명이 뭔가 내가 그린 기린 그림 같다.)

개발/JavaScript 2023.03.25

Promise 란?

비동기적인 상황에서 작업의 순서를 정해야할때 사용함 이벤트루프를 기반으로 함 js의 비동기 처리를 위한 것 pending, fulfilled, rejected의 세가지 상태중 하나를 가짐!! pending 에서 비동기처리 작업이 완료되면~ 1) fulfilled 로 전환돼서 결과값을 반환하거나 2) 오류 발생시 rejected 상태로 전환돼서 오류정보를 반환함 성공시(fulfilled 상태) then()을 실행하고 실패시(rejected 상태) catch()를 실행함. 또한 then()을 여러개 가질 수 있는데 위에서부터 순서대로 각 then()이 완료되면 그 다음 then()이 실행됨. 작업 순서의 가독성이 좋아짐!!~~ *promise.all()을 쓰면 promise.all()안에 있는 then()이..

개발/JavaScript 2023.03.25