🔗 쿠키가 생기게 된 배경웹 초기의 가장 큰 문제중 하나는 서버로 오는 두 개의 요청이 동일한 브라우저에서 온 것인지 확인하는 것임위와 같은 문제를 해결하기 위해 요청마다 고유한 토큰을 포함시켜 동일한 브라우저에서 오는 것을 확인시켜줬음토큰은 밖으로 유출되면 안되기 때문에 숨겨진 필드가 있는 양식을 사용하거나 URL 쿼리 문자열로 넣어줬어야 했는데, 두 방법 모두 번거롭고 오류가 발생하기 쉬웠음이러한 문제점들을 해결하기 위해 나온 개념이 쿠키 🔗 그래서 쿠키가 뭔데?쿠키는 브라우저에 의해 사용자 컴퓨터에 저장되는 작은 텍스트 파일임서버는 브라우저에 쿠키로 민감한 정보들을 저장하게 하고, 브라우저에서 서버로 요청을 보낼때 필요시 같이 보내도록 함로그인 필요한 대부분의 브라우저에서는 로그인이 성공하면 서..

🔗 문제 발생 배경1. 기존에 스웨거에서 임시로 발급받은 토큰으로 작업을 하다가 로그인을 연동하게 되었고, 로그인을 하면 토큰이 쿠키에 저장되는 방식이었음2. 분명, 로그인 API 연동도 잘 되었고, 스웨거에서 API도 멀쩡하게 잘 동작했음3. 그런데 로컬에서 로그인을 하면 401(unAuthorized) 로그가 찍힘🔗 문제 발견로컬에서 프로토콜로 http를 사용중이었고, 로그인 시 발급되는 accessToken과 refreshToken이 쿠키에 저장됨스웨거에서 동작을 잘하는걸 보면 서버쪽에 문제가 있는 것은 아니라고 생각함반면에, 401이 찍히는걸 보면 토큰 발급이 제대로 되고 있지 않다고 봤음그래서 쿠키로 토큰을 관리하는 것에 대해 찾아보던 중 헤더를 통해 쿠키를 전달할 때 Secure 설정이 되..

🔗 map 함수배열(리스트)을 전체 순환하면서 주어진 콜백함수를 통해 새로운 배열을 생성하는 함수let arr = [10, 20, 30, 40, 50];// map 함수의 콜백함수의 인자는 value, index, array 순서로 들어옴// 각 값의 이름은 정해져있지 않으므로 임의로 설정 가능arr.map((v) => {}); // value값만 가져옴arr.map((v, idx) => {}); // value, index 값만 가져옴arr.map((v, idx, array) => {}); // value, index, array 모두 가져옴const arr = [1, 2, 3, 4, 5];// 함수 내용이 한줄이면 중괄호와 return 생략 가능const arr2 = arr.map((item) =>..

🔗 템플릿 리터럴let str = "자바스크립트";console.log("이것은", str, "입니다.");// ES6에서는 ``안에 아래와 같이 작성하여 위와 동일한 결과를 얻을 수 있음console.log(`이것은 ${str} 입니다.`); 🔗 기본 매개 변수파라미터 값이 없는 경우 사용할 default 값 설정const myFunc = (name, age = 24) => {return `내 이름은 ${name}, 나이는 ${age}살이야.`; };console.log(myFunc1('철수')); // 내 이름은 철수, 나이는 24살이야. 🔗 화살표 함수let sum = function (a, b) { return a + b;};// 아래와 같이 화살표 함수로 표현하여 위와 동일한 결과를 ..

🔗 배열(Array)연속된 공간에 동일한 타입의 데이터를 순차적으로 나열한 자료구조인덱스(순번)는 0부터 시작Java & C#과 같은 언어와는 다르게 배열과 리스트가 구분되어있지 않음리스트(List) : 배열에 기능이 추가된 버전으로 대량의 데이터를 처리할 때 반복문과 함께 사용배열의 선언객체를 이용한 방법 🧩 배열의 선언대괄호를 이용한 방법let ArrayName = []; // 빈배열let ArrayName = [Val1, Val2, Val3, ...]; // 이때, 모든 값들은 동일한 Type임객체를 이용한 방법// 객체 앞에 new(객체 생성 예약어)를 붙여줘야함let arr1 = new Array(10, 20, 30); // [10, 20, 30]// 길이가 3인 빈배열 생성let arr2 ..

🔗 논리연산자📍 AND(&&) ~이고, ~이면서하나라도 거짓이면 거짓📍 OR(||)~이거나, 또는, ~일수도, ~중의 하나이면하나라도 참이면 참📍 NOT(!)~가 아닌참이면 거짓, 거짓이면 참document.write(!(10 > 20) || 10 = 20 && !(10  🔗 조건문주어진 조건식이 참이면 작업을 수행🧩 if 문🫧 단일 if문if (조건1) { document.write("if");} 🫧 if-else문// if문이 참이면 if문 수행, 거짓이라면 else 수행if (조건1) { document.write("if");}else { document.write("else");} 🫧 if-else if문// if-> else if -> else 순서로 조건식을 확..

🔗 Javascript(JS)란?공식명칭은 ECMA Script만든 사람 : 넷스케이프의 브랜든 아이크썬마이크로 시스템즈와 협력해서 만든 언어Java와 JavaScript와는 전혀 다른 언어ES6(ECMA Script 6)에서 언어적으로 완성됨.웹브라우저에서 지원하는 유일한 언어 : 과거 Basic언어구글에서 JS V8 엔진을 향상시키고, 오픈 소스로 배포🫧 Javascript 구동시키는 2가지방법프론트엔드(사용자PC) : 웹브라우저 JS 해석, 템플릿엔진(리액트,Vue,앵귤러)백엔드(서버PC) : Node.js 웹서버 프로그램 🫧 HTML에서 Javasciprt 선언하는 3가지 방법1. script 태그 - head,body태그 2. html 태그 속성 - onclick,href버튼클릭3. ..

🔗 Emmet 문법Emmet 문법은 HTML, CSS 등의 코드를 더 빠르게 작성할 수 있도록 돕는 기능Emmet은 축약된 문법을 통해 코드를 생성하며, VSCode를 비롯한 일부 IDE에서는 기본적으로 활성화되어 있음 🫧 기본 요소 생성div:p:🫧 형제 요소(+)div+p+span:🫧 상위 요소로 이동(^)div>p>span^h1: 🫧 한번에 여러개의 요소 생성(*)ul>li*3: 🫧 id와 class가 추가된 요소 생성(#,.)div#header:div.container:div#id.class1.class2:🫧 속성 추가([속성:"값"])a[href='#']:img[src='img.jpg'][alt='image']:🫧 넘버링($)u..

Tailwind란?HTML을 떠나지 않고 빠르게 빌드하는 CSS 템플릿 Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.tailwindcss.com 🧰 Raw html에서 tailwind 사용법head 태그 안에 아래 코드를 넣어주면됨 🚀 다른 곳에서 tailwind 사용하는 방법 Installation - Tailwind CSSThe simplest and fastest way to get up and runni..

🔗 수평 / 수직 정렬(align)text-align : 2행 이상부터 사용 가능vertical-align : inline, inline-block, table 요소에서만 사용 가능margin/padding : 편한 방법이지만 정확하게 맞추기 힘듬line-height : 부모와 자신의 높이 조절position : margin/padding과 동일하게 정확하게 맞추기 힘듬griboxflexbox의 정렬 속성(justify-content, align-items, etc...) : 가장 사용하기 좋음📘 가운데 정렬 예시 1.box1 { border: 2px solid tomato; height: 100px;}.box2 { border: 2px solid teal; text-align:..