물흐르듯코딩

개발을 하다보면 Invalid CORS request와 같은 에러가 반환되는 경우가 있다.이러한 경우 백엔드 로그에도 별다른 오류 로그가 없다. 즉, 브라우저에서 뱉어낸 오류인 것이다.CORS란 무엇인지, CORS 에러는 왜 발생되는지 차근차근 알아보자. SOP와 CORS 웹에서 출처의 동일 여부를 따져 리소스 요청을 제한하는 것과 관련된 정책은 SOP, CORS가 있다. 1) SOP(Same-Origin Policy)“같은 출처에서만 리소스를 공유할 수 있다”라는 규칙을 가진 정책이다. 브라우저는 기본적으로 보안을 위해 SOP 정책을 따르고 있으나 개발을 하다 보면 다른 출처와의 상호작용이 많이 필요한 케이스가 많다. 2) CORS(Cross-Origin Resource Sharing)“SOP 정책에 ..

Math.random()은 0 이상 1 미만 범위에서 랜덤한 부동소수점 값을 반환하는 함수이다.이 함수는 암호학적으로 안전한 난수를 제공하지 않기 때문에 보안에 민감한 Math.random 대신 다른 함수를 사용해야 한다.  해결방법 Math.random()을 대신하여 expo-crypto 라이브러리를 설치하여 crypto 함수로 난수를 생성한다. crypto.getRandomValues()를 이용하여 랜덤 숫자가 들어간 배열을 구할 수 있다.const generateRandom = () => { let array = new Uint32Array(1); return crypto.getRandomValues(array)[0] / (0xffffffff + 1);}; let array = new U..

trim() 메서드는 문자열 양 끝의 공백을 제거한다. 원본 문자열을 수정하지 않고 새로운 문자열을 반환한다. 공백에는 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)가 포함된다. 📝 기본구조 문자열(str)의 양 끝 공백을 제거하는 메서드이다. 문자열이 아닌 다른 데이터 타입에 사용되면 오류가 발생한다. str.trim() 📌 예시 trim() 메서드는 문자열의 앞뒤 공백은 제거하되 문자열 중간의 공백은 유지된다. var str = ' Aqua coder ' str.trim(); // ‘Aqua coder’

Object.assign을 통해 객체를 복제하여 값을 변경하거나 기존 객체에 새로운 객체의 값을 병합시키는 것이 가능하다. 다양한 예시를 통해 Object.assign 활용법을 알아보자. 📝 기본 문법 : 첫 번째 인자엔 최종적으로 값이 반영되어 반환될 목표 객체가 들어가고, 두 번째 인자부턴 첫 번째 인자 객체에 추가하거나 값을 수정할 객체를 나열해 준다. Object.assign(target, ...sources) target: 두 번째 인자부터 들어오는 값들을 복사해 반영한 후 반환할 객체 sources: 첫 번째 인자로 설정된 객체에 반영하고자 하는 속성을 가진 객체 1. 객체(object) 병합 const source1 = { a: 1, b: 2} const source2 = { c: 2, d:..

javascript에서 배열 요소를 삭제하거나 추가, 기존값을 대체할 때 활용할 수 있는 slice() 함수와 spliece() 함수에 대해 알아보자 🤓 slice() 함수 인자로 받은 인덱스에 따라 배열의 특정 범위를 복사하여 반환하는 함수이다. 첫 번째 인자엔 시작 인덱스, 두 번째 인자엔 종료 인덱스가 들어간다. slice() 함수는 값을 복사하여 반환하기 때문에 원본 배열은 그대로 유지된다. 시작 인덱스부터 (종료인덱스-1)까지 잘라서 반환한다. 종료인덱스는 포함하지 않는다는 것을 유념! 두 번째 인자가 없을 경우엔 시작 인덱스부터 끝까지 값을 모두 복사하여 반환한다. 모든 인자가 없다면 배열의 처음부터 끝까지 모든 값을 복사하여 반환한다. const data=[0,1,2,3,4,5,6,7] da..

✍ 정규식을 통해 비밀번호를 설정할 때, 특수문자, 대문자/소문자, 숫자 조합을 체크할 수 있다. 조건이 아래와 같을 때 정규식 표현법과 각 의미를 알아보자. 📍 조건 길이가 9에서 20 사이여야 합니다. 적어도 하나의 숫자를 포함해야 합니다. 적어도 하나의 영문 알파벳을 포함해야 합니다. 적어도 하나의 대문자 알파벳을 포함해야 합니다. 적어도 하나의 특수 문자를 포함해야 합니다. 📍 정규식 /^.(?=^.{9,20}$)(?=.\d)(?=.[a-zA-Z])(?=.[A-Z])(?=.[!@#$%^&+=]).$/ ^: 문자열의 시작을 나타낸다. .*: 0개 이상의 모든 문자를 나타낸다. (?=^.{9,20}$): 문자열의 길이가 9에서 20 사이인지 확인한다. **^.{9,20}$**는 문자열의 시작과 끝을 ..

# Math.random() Math.random()은 0 이상 1 미만 범위에서 랜덤값을 반환한다. 암호학적으로 안전한 난수를 제공하지 않기 때문에 보안과 관련된 것에 이 함수를 사용하면 안된다. 0 이상 1 미만의 난수 생성 Math.random(); // 0.5758765329168916 두 값 사이의 난수 생성 function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; } getRandomArbitrary(3,20); // 12.391005753571687 값이 소수점일 때 내림, 올림, 반올림 함수도 알아보자. # Math.floor() 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환한다. 쉽게 말..

💡TypeScript는 JavaScript의 상위 호환 언어로 변수를 선언할 때 Type을 지정합니다. 아래 예시를 통해 각 언어의 특징을 살펴볼게요:) //TypeScript function typeScript(num1: number, num2: number) { return num1 + num2; } typeScript(2, 19); //JavaScript function javaScript(num1, num2){ return num1 + num2; } javaScript(2, 19); TypeScript 타입스크립트는 정적 타입 언어입니다. 함수/객체/변수 선언 시 타입을 미리 지정해서 사용하기 때문에 컴파일 에러를 예방할 수 있고 디버깅이 쉽습니다. 또한 변수의 이름 뿐 아니라 데이터의 자료형까지..