본문 바로가기
728x90
반응형

Language/JavaScript8

[JS] FormData를 이용한 Local 이미지(+ file) Axios로 전송하기 MSA 아키텍처를 이용하여 서버를 구성하고 있기 때문에 여러 서비스 간 통신은 필수다. 그러던 중 A 서비스에서 B 서비스로 Axios를 통해 통신하는데 테스트를 위해 Local 이미지를 보내줘야 하는 상황이었다. 프론트단에서 Axios를 사용하여 전달해주는 것과 달라 공유하고자 한다. FormData가 무엇인고? FormData 형식은 postman 등 다양한 API 테스트 툴을 사용했다면 익숙할 단어다. 간단하게 말하면 file을 보내는 형식이라고 할 수 있다. key-value을 한 쌍으로 key에는 name을 value엔 file을 업로드한다. 프론트에서는? const uploadFile = e.target.files[0] const formData = new FormData() formData... 2022. 11. 22.
[JS] console.log [Object] 출력하기 + JSON.stringity() console로 데이터들이 잘 나오는지 확인할려고 할 때 type 필드만 [Object]로 데이터를 알 수 없었다. 이유를 찾아보니 console.log나 alert의 경우 이중, 삼중 객체로 데이터를 출력할 경우 [Object]만 나온다고 한다. 데이터를 알기 위해 이중 삼중 객체를 풀어 console.log로 찍기엔 불편하기 때문에 데이터를 볼 수 있는 방법을 찾아보도록 하자. console.log(JSON.string(data, null, 2)); JSON.stringity() 메소드를 사용하면 겹겹히 쌓인 객체도 깨끗하게 출력될 수 있다. JSON.stringity() 메소드는 JavaScript 값이나 객체를 JSON 문자열로 변환할 수 있다. JSON.stringify(value[, repla.. 2022. 11. 16.
[JS] 배열에 사용할 수 있는 메소드 모음 - forEach, every, some 1. forEach() const array1 = ['a', 'b', 'c']; array1.forEach(element => console.log(element)); // expected output: "a" // expected output: "b" // expected output: "c" for문과 비슷하게 유명한 배열 메서드이다. 단, 배열 전체 값을 순회하지만 콜백 함수의 반환 값은 무시한다. 2. every() const isBelowThreshold = (currentValue) => currentValue < 40; const array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every(isBelowThreshold)); // expected .. 2022. 10. 10.
[JS] == vs. === JavaScript 개발자라면 알아야 하는 개념 궁금증 지금가지 ==만 사용해 봤는데 Array equal에 대해서 어제 포스팅을 위해 자료 검색을 하다가 신기한 코드를 발견했다. https://bcoding-lab.tistory.com/345 [JS] 자네, 두 Array를 비교하고 싶지 않은가? feat.객체 비교하는 법 문제 Type 검증과 관련해서 A라는 객체와 B라는 객체가 같은가를 비교하고 싶었다. 정말 평소처럼 아래와 같은 코드를 작성했다. if (i.name === { test: 'test', tset: 'tset' }) { console.log('yes!'); } i.nam.. bcoding-lab.tistory.com '' == false // true '' === false // false 아니.. 둘 다 '같다'를 의미하는 연산자.. 2022. 10. 7.
[JS] 자네, 두 Array를 비교하고 싶지 않은가? feat.객체 비교하는 법 문제 Type 검증과 관련해서 A라는 객체와 B라는 객체가 같은가를 비교하고 싶었다. 정말 평소처럼 아래와 같은 코드를 작성했다. if (i.name === { test: 'test', tset: 'tset' }) { console.log('yes!'); } i.name도 { test: 'test', tset: 'tset'} 여서 콘솔에 yes!라는 메시지가 찍혀야 한다! 하지만.. 콘솔에 그 어느것도 나오지 않았다. 도대체 왜 그럴까? 원인 그 이유는 두 변수를 비교할 때 연산자 === (or ==)를 사용하기만 해도 괜찮다. 하지만 그 두 변수가 객체라면 말이 달라진다. 객체 비교는 여러 값을 포함하고 그 안에 객체를 포함할 수 있기 때문에 쉽지 않다. 방법 그렇다면 어떻게 두 객체를 비교할 수 있을.. 2022. 10. 6.
[JS] forEach에서 비동기 함수 사용 금지! 상황 forEach 함수를 이용하여 배열 안에 있는 id로 axios를 사용할 생각이었습니다. 하지만 아무리 해도 원하는 상태값이 되지 않는 것이었습니다. 위와 같이 postmam으로 실행했을 때 해당 API 결과 값으로 빈 배열이 나옵니다. 원래였다면 아래에 있는 1, 2라는 숫자를 담아져 있는 [1, 2]가 나와야 했습니다. 원인 이유는 바로 forEach 함수는 콜백 함수로 비동기 함수를 받더라도 실행을 기다려주지 않는다고 합니다! Javascript 공식문서에 적혀있는데 역시 공식문서로 정보를 확인해야 합니다. 공식문서 바로가기 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEac.. 2022. 9. 29.
[JS/문법] 비구조화 할당(구조분해) const object = { a: 1, b: 2 }; const { a, b } = object; 리액트를 배우면서 가장 신기했던 문법이 비구조화 할당 문법이었습니다. 비구조화 할당 문법을 사용하면 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해줄 수 있습니다 ❗️ const object = { a: 1, b: 2 }; function print(props) { console.log(props.a); // 1 console.log(props['b']); // 2 } 본래 비구조화 할당 문법을 몰랐을때는 위 코드처럼 파라미터를 사용했습니다. 인제 객체에 접근해서 값을 가져올때 . 혹은 [ ] 대신 비구조화 할당으로 바로 가져올 수 있습니다. const object = { a: 1, b: 2 .. 2022. 8. 1.
[ES6] var, let, const 차이점 var var name = 'nime'; console.log(name); 자바스크립트에서 변수를 선언할 때 사용하는 방법 중 하나이다. var를 사용했을 때 발생하는 문제점 var num = 10; if (num == 10) { var num = 20; console.log("num in if : ", num); // num in if : 20 } console.log(num); // 20 하지만 var를 사용하여 변수를 선언해주면 위 코드처럼 if문 안에서 변경이 된 게 밖에서도 영향을 미친다. ES6부터는 구분하기 위해 scope라는 개념이 추가된 let이 등장하게 된다. 📌 scope(유효범위)란? 변수에 접근할 수 있는 범위이다. 전역 스코프는 전역에 선역되어있는 어느 곳이든 해당 변수에 접근 .. 2022. 1. 31.
728x90
반응형

티스토리툴바