본문 바로가기
728x90
반응형

Language19

[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.
[TS] TypeScript에서 Enum을 쓰면 안된다! (이유, 방안) 우리 회사는 코드리뷰를 하지 않지만 동기가 내 코드를 보고 피드백을 줘서 코드를 고치다가 다시 원점을 돌아간 나의 이야기를 담았다. 사건의 전말 moogose에서 사용하는 Model과 type 체크를 위한 Interface에서 공통으로 사용되는 Object들이 있었다. // Model - mogoose에서 사용하는 파일 interface OS { IOS: 'IOS'; Anderoid: 'Anderoid'; } // Interface - type 체크를 위해 사용되는 파일 const OS = { IOS: 'IOS', Anderoid: 'Anderoid', }; export type OS = typeof OS[keyof typeof OS]; 위 코드와 같이 확실히 중복되어서 사용하고 있었다. 한 쪽에만 ex.. 2022. 10. 13.
[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.
TypeScript + NodeJS(express) + MongoDB 조합으로 API 서버 만들때 주의할 점 들어서며 NodeJS를 쓰는 개발자들은 처음엔 유연한 JavaScript로 시작했다가 어느순간 TypeScript으로 넘어가게 되고 고마움을 느낍니다. 저도 개발을 하면 할수록 TypeScript의 필요성을 느끼고 있고 잘 이용할려고 합니다. 하지만 TypeScript로 API 서버를 만들면서 의아했던 부분들이 있었습니다. 의문 1. 상황 req.body로 클라이언트로부터 서버로 데이터를 전달 받았을 때 type 오류가 발생하지 않습니다. 제가 생각했을 때 아래 두가지 상황에서 분명 오류가 발생하고 데이터가 저장되지 않아야 하는데 그렇지 않았습니다. 2-1. Interface에 정의한 요소가 아님에도 오류가 발생하지 않는다. // interface.ts export interface UserInterfa.. 2022. 9. 28.
TypeScript에서 <T>란 무엇일까? - Generic Type 들어서며 TypeScript는 단순하게 JavaScript에서 Type을 추가해준 언어이다. 하지만 TypeScript를 쓰면서 라는 새로운 아이를 만나게 된다. 처음에는 를 만나거나 쓸 일이 없어 단순하게 넘겼지만 TypeScript로 개발을 하면서 자연스럽게 를 만나게 되었다. 그럼 가 무엇이고 왜 TypeScript에서는 이걸 쓰는지에 대해서 이야기해보도록 하자. 쓰는 이유 JavaScript는 다른 언어들과 달리 type을 입력하지 않기 때문에 자유롭다. 그만큼 위험부담이 높기 때문에 JavaScript 개발자들은 필수적으로 TypeScript를 이용해서 type에 따른 위험 요소를 줄이고자 한다. TypeScript는 함수나 클라스를 사용하기 위해서는 미리 Type을 지정해줘야 한다. 그렇지만 .. 2022. 9. 26.
728x90
반응형

티스토리툴바