Janu is Developing

JWT 로그인 구현중 클라이언트로부터 서버로 request를 보낼 때 앞으로 무조건 header에 발급된 토큰값을 집어넣으라는데... const response = await fetch('http://localhost:3001/login', { method : 'POST', headers : { 'Content-Type' : 'application/json', 'Authorization' : 토큰어쩌구저쩌구 }, body : JSON.stringify(user) })매번 이렇게 작성할 수 없는 노릇이라 찾아보니 Axios를 사용하라고 하신다.Axios는 회사에서도 사용해봤는데 솔직히 무슨 뜻인진 잘 모르고 다른분들 다 쓰길래 나도 따라쓴 격이라 나도 이번에 제대로 공부해볼겸...

생각보다 sort()를 사용할 일이 많은데 사용할때마다 헷갈려서 다시 정리한다. 딱 대1. sort()는 2가지 모드로 움직인다첫번째는 기본 정렬 모드두번째는 비교함수(콜백) 정렬 모드내가 많이 사용한건 비교함수 정렬이었는데 일단 둘 다 알아보자! 1️⃣ 기본 정렬 - 아무것도 넘기지 않을 때기본적으로 이렇게 생겼다.arr.sort();sort()에 아무 비교 함수(Comparison Function)를 전달하지 않으면 배열의 요소들은 문자열로 변환된 뒤 유니코드 값에 따라 정렬된다.이러한 경우 문자열 배열에선 예상대로 작동할 순 있지만 숫자 배열은 이상하게 배열할 수 있다. (1) 문자열 배열각 문자열을 유니코드 값에 따라 비교하므로 일반적인 사전 순 정렬과 동일하게 작동한다.const fruits =..

어떤건 () => {} 이렇게 쓰고 어떤건 () => ({}) 이렇게 쓰고 어떤건 ({}) 이렇게 쓰니 뭐를 어떤 상황에서 써야 하는지 헷갈려서 정리한다. 1. (입력) => {명령문} — 블록형 화살표 함수화살표 함수는 익명 함수의 형태 중 하나로, 익명함수에 대해서도 알아야 한다. 익명 함수에 대한 설명은 여기를 참고할 것. 기본적으로 화살표 함수는 다음과 같이 생겼다.(매개변수(= 입력)) => {실행문, 명령문}소괄호()에는 전달되는 매개변수를 입력하고, 중괄호{}에는 실행할 여러줄의 코드를 작성할 수 있다. 1️⃣ 중괄호{} 안의 내용이 1줄로 끝난다면 중괄호를 생략할 수 있다.const addOne = x => x + 1⚠️ 주의! 중괄호를 쓴다면 반드시 return을 작성해야 한다. 2️⃣ ..

click 이벤트들에게 다양한 형태가 있는데 헷갈려서 정리하는 포스트당.... 1. onclick = "handleClick" (괄호 x) 👉 "함수 그 자체(참조)를 전달function handleClick() { console.log('click!')}버튼"클릭되면 handleClick()을 실행해라"= 렌더링시 실행 x, 클릭할 때 실행됨 ✅HTML, Vanilla JS클릭 이벤트가 발생 할 때 실행할 코드로 저장 태그를 통해 전역으로 정의되어 있을 때 '클릭 시 실행'. 반드시 전역으로 선언되어야 함 = Window 객체에서 접근 가능해야 함!window 객체 : 자바스크립트의 내부 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소들의 최상위 객체..

네이밍 센스 황당하다... 거 안헷갈리게 지아줘야 하는게 예의 아닌지;이름들이 거기서 거기라 헷갈려서 정리한다Node.js: JavaScript 런타임 환경V8엔진을 기반으로 만들어진 JavaScript 런타임 환경으로, ⭐웹 브라우저 밖에서도 JavaScript 코드를 실행할 수 있도록 해준다. (V8이란 구글이 개발한 JavaScript 엔진으로 C++로 작성되었다고 한다.)Node.js가 개발된 덕에 개발자들은 JavaScript를 통해서 백엔드 개발이 가능해진 것이다. JavaScript로 서버를 구축하거나, 데스크톱 애플리케이션이나, 모바일 앱도 개발할 수 있게된 것이다.또한 Node.js는 다른 언어(C, Java)처럼 컴퓨터에서 직접 코드를 실행할 수 있는 런타임 환경을 제공한다. npm(N..

갠프하면서 Array.from()을 쓸일이 꽤 많이 생겼는데, 이거 설명을 듣자니 진짜 무슨소린지 모르겠어서 정리한다. 1. 정의Array.from()은 '이터러블 객체나 유사 배열 객체를 새로운 배열로 변환하여 반환하는 함수'라고 하는데, 그럼 여기서 이터러블 객체와 유사 배열 객체가 무엇인지 알아야 한다. (1) 이터러블 객체'차례대로 하나씩 꺼낼 수 있는 것'을 이터러블 객체라고 한다.🍬 지피티의 예시 👽네가 사탕이 5개 들어 있는 봉지를 들고 있어.봉지를 뜯어서 하나씩 꺼낼 수 있지?이 봉지 = 이터러블 객체사탕 하나씩 꺼내는 과정 = 반복(iteration)즉, 이터러블 객체는 ‘반복할 수 있는 자료’ 라는 뜻이야.그러므로 자바스크립트에서 이터러블 객체라 하면문자열(String) : "hel..

콜백함수를 검색해서 찾아보면 "다른 함수의 인수로 전달되어 해당 함수의 내부에서 호출되는 함수"라고 하는데... 이렇게 설명하면 솔직히 알아듣나?그래서 Claude씨에게 물어봤는데,"나중에 실행해 달라고 맡겨놓은 함수"라고 간단히 이해하면 된다고 하더라. button.onclick = function(){ alert("버튼이 클릭됨!")}여기서 alert("버튼이 클릭됨")을 포함한 function이 바로 콜백 함수라고....콜백함수를 많이 볼 수 있는 것 중 하나는, 바로 전형적인 비동기 함수 중 하나인 setTimeout이다.setTimeout(function(){ console.log("3초 지났어")}, 3000)내가 헷갈릴까봐 설명하는건데,,,, setTimeout은setTimeout(()=..

오늘도 실무에서 디지게 많이 쓰는 세 메소드를 살펴볼 것이다.셋 다 배열과 관련된 JavaScript, TypeScript메소드이므로 찬찬히 살펴보도록 한다!주의(?)사항 : 배열 내 문자열에 원래 ''를 씌우는게 정석이지만,,, 귀찮아서 걍 생략했다ㅋ1. map() 메소드기능 : 배열의 각 요소를 변환하여 새로운 배열로 반환하여 만든다.각각의 요소에 대해 한번씩 순회하며 콜백 함수를 적용 → 새로운 배열로 반환한다.map메소드를 통해 배열을 새로이 구성해서 똑같은 길이로 반환할 수 있다.[어떠한 배열] + 내가 설정한 콜백 함수 () = [내가 새로 만든 배열]정확하지 않지만 이러한 뉘앙스의 새로운 배열을 뱉어낸다고 생각하면 된다.Vue3.0 js에선 새로운 배열을 뱉어내기 때문에 얕은 복사가 된다 ➡..

자바스크립트와 타입스크립트 둘 다 사용되는 옵셔널 체이닝...개발을 하면서 엄청 많이 쓰게 되서 알기 싫어도 알 수밖에 없는 지경에 이르렀다... 옵셔널 체이닝만약 값이 없으면(= null 혹은 undefined라면) 그냥 undefined를 반환하라는 안전장치이다. Exception이나 에러가 나타나지 않도록 도와 오류 없이 프로그램을 실행할 수 있다.속성에 접근할 때 오류가 나는 것을 방지하고, 특히 중첩된 객체의 속성에 접근할 때 유용하게 쓰인다.가장 큰 이점은 (1) 코드의 안정성을 높임 (2) 불필요한 조건문을 줄임 이라고 볼 수 있겠다. 참고로 필자는 인텔리제이에서 빨간줄 생겨서 필요없어도 그냥 쓴다(정상적으로 잘 작동되는데 왜 빨간줄이 나는진 나도 모르겠음¯\_(ツ)_/¯) 예시나루토쿤은 영..