map을 사용해야만 할 때. map은 배열의 리스트를 하나하나 순회하며 함수를 호출하기 때문에, 함수의 반환값을 모아서 배열로 다시 반환해준다. 그래서 map은 배열 요소를 따로 ""반환"" 해줄 때 사용 콜백 함수의 반환값들로 구성된 ""새로운"" 배열을 반환한다는 점 forEach 내부에서 반복문을 통해 호출한 배열을 그저 순회하면서 반복호출 즉 그냥 반복문 그 이상 그 이하도 아님. 그래서 forEach 메서드의 ""반환값""은 언제나 undefined 임.
JavaScript
자바스크립트로 프로젝트를 구현하다 보면, 자바스크립트의 특성 상 코드가 위에서 아래로 실행되는 특성때문에, 원하는 결과값이 채 나오기도 전에 다음번의 다른 기능의 작업을 수행하는 경우가 있다. 이렇듯 자바스크립트의 비동기적인 현상 때문에, 동기적으로 원하는 결과값이 나올 때 까지 기다린 후, 다음 기능을 수행하겠다고 Promise약속) 해주는, promise를 반환해, 동기적으로 만들어준다. promise는 다음 중 하나의 상태를 가진다. 대기 (pending) : 이행하지도, 거부하지도 않은 초기 상태 (기다림) 이행 (fulfilled) : 성공적으로 완료된 상태 거부 (rejected) : 연산이 실패 함. 대기중인 프로미스는 값과 함께 이행할 수도, 어떤 이유(오류)로 인해 거부될 수도 있습니다...
web storage HTML5의 웹 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조이다. 키 / 값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴이다. 그리고 localstorage (영구 저장소) 와 sessionstorage (임시 저장소)를 따로 두어 데이터의 지속성을 구분할 수 있어, 응용 환경에 맞는 선택이 가능하다. localStorage 브라우저를 종료해도 유지가 된다. 만료기간이 없는 키 - 값 저장소이다. 도메인이 다른 경우에는 접근이 불가능하다. window 객체 안에 존재하며, 데이터를 저장하는데에 유효기간이 존재하지 않는다 (설정도 못함) 사용방법 https://developer.mozilla.org/en-US/docs/Web/API/Window/localS..
프로젝트에서 로그인을 구현해봤을 때, 가장 헷갈렸던 개념은 session과 cookie의 동작 반응이었다. HTTP 프로토콜의 특성이자 약점을 보완하기 위해서 session과 cookie를 사용하는데, 우선 왜 사용하는 지를 살펴보면 기본적으로 HTTP 프로토콜 환경은 클라이언트가 요청을 한 후, 응답 받으면 그 연결을 끊어버리는 특징이 있고, 통신이 끝나면 상태를 유지하지 않는 Connectionless하고 Stateless 한 특성이 있다. 그래서 서버는 클라이언트가 누구인지 매번 확인해야 하는데, 이 특성을 보완하기 위해 쿠키와 세션을 사용하는 것이다. Cookie (쿠키) 쿠키는 브라우저 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다. 시간을 설정할 수 있으며, 유효 시간이 정해지면 브..
오늘은 간단하게 글자를 작성했을 때, 버튼을 클릭했을 때 글자가 복사되는 클립보드 기능을 구현할 것이다. 생각보다 엄청 간단한데, handleClipBoard("복사할 text")} > 클릭 할 버튼 이런식으로 일단, 복사할 text를 지정해준 다음 button을 만들어준다 const handleClipBoard = (text) => { try { navigator.clipboard.writeText(text); alert("클립보드에 복사가 완료되었습니다."); } catch (error) { alert("복사를 실패하였습니다."); } }; 그 이후, 받아온 text로 navigator.clipboard.writeText(text) 를 해주면 복사가 된다.
ES6 shorthand property name https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer const ellie1 = { name: { const ellie1 = { name: 'Ellie', age: '18', }; const name = 'Ellie'; const age = '18'; // 💩 const ellie2 = { name: name, age: age, }; // ✨ const ellie3 = { name, age, }; console.log(ellie1, ellie2, ellie3); console.clear(); } 자바스크립트에서 object는 key와 value로..
