JavaScript (26) 썸네일형 리스트형 [JavaScript] api 요청 시 필요 없는 params 값 안 보내는 방법 api 요청 시 필수 값이 아닌 값이 있을 수 있습니다.데이터 조회로 예를 들면 page, pageSize, searchKeyword 등 페이지네이션과 검색 시 검색어가 있을 수 있습니다.여기서 검색어가 없다면 전체 값이 조회되기 때문에 필수 값이 아닙니다.searchKeyword에 빈 값을 보내주어도 api는 잘 동작하지만 url에는 필요 없는 searchKeyword가 들어가게 됩니다.http://localhost:3333/api/getData?page=1&pageSize=10&searchkeyword= 이 것을 방지하기 위해서 아래와 같은 방법을 사용할 수 있습니다.const pageOption = { page: 1, pageSize: 10,}const searchKeyword = ''cons.. [JavaScript] 파일 업로드 input으로 받은 정보와 파일을 Api에 같이 보내야 하는데 보내야할 Content-Type이 다른 경우header의 Content-Type을 multipart/form-data 설정하고input의 정보는 blob 객체로 변환하여 formData에 담아 파일과 함께 보냅니다.const inputData = {} // input으로 받을 데이터const fileData = {} // input Fileconst formData = new FormData()const json = JSON.stringify(inputData)const blob = new Blob([json], { type: 'application/json' })formData.append('api에 보낼 이름', blob)formData... [JavaScript] 파일 다운로드 Blob(Binary Large Object)responseType의 기본 값은 json입니다. blob으로 설정해야하는 이유는 blob은 브라우저 전용 데이터 유형입니다. 파일 다운로드 시 바이너리 데이터가 필요하기 때문입니다. export const downloadFile = (url: string, fileName: string) => { axios.get(url, { responseType: 'blob' }).then((res) => { const blobURL = window.URL.createObjectURL(res.data); const link = document.createElement('a'); link.href = blobURL; link.download = .. [JavaScript] import/export export utils.jsexport const a = 'A' main.jsimport { a } from './utils.js'console.log(a) // 'A' export default이름 없는 값을 export 할 수 있습니다. utils.jsexport default 'A' main.jsimport a from './utils.js'console.log(a) // 'A' 그 외 사용 방법utils.jsexport default 'A'export const b = 'B'export const c = 'C' main.jsimport * as utils from './utils.js'console.log(utils.default) // 'A'console.log(utils.b) // 'B'c.. [JavaScript] try catch 개발자가 모든 에러를 예측하여 처리하기가 어렵고 거의 불가능합니다. try catch를 사용할 때에는 함수 단위로 사용하는 것이 좋습니다. try에서 나오는 실수 1. 중요하지 않다고 생각하는 코드는 try catch 밖에 작성하는 경우 const example = (input) => { // 중요하지 않다고 생각하는 코드 try { // ...some } catch (error) { } } 2. try 안에 try catch를 또 사용하는 경우 const example = (input) => { try { try { } catch (error) { } } catch (error) { } } catch 1. 개발자를 위한 예외처리 const example = (input) => { try { } catc.. [JavaScript] 숫자 추상화 추상화는 숫자를 하드코딩 하지 않고 어떤 의미를 가지고 있는지 네이밍에서 알려주는 역할을 합니다. 시간을 DELAY_MS라는 이름으로 추상화한 예시입니다. const DELAY_MS = 3 * 60 * 1000 setTimeout(() => { // some... }, DELAY_MS) 가격의 최소/최대 값을 추상화한 예시입니다. const PRICE = { // Numeric Operation (_) MIN: 1_000_000, MAX: 100_000_000, } console.log(PRICE) // { MIN: 1000000, MAX: 100000000 } getRandomPrice(PRICE.MIN, PRICE.MAX) 하드 코딩보다 어떤 의미의 값이 들어가는지 명확하게 알 수 있습니다. 추상화한.. [JavaScript] 순수 함수 순수하지 않은 함수 let num1 = 10 let num2 = 20 const impureFunc = () => { return num1 + num2 } impureFunc() // 30 num1 = 30 impureFunc() // 50 함수는 호출할 때마다 같은 값을 반환해야합니다. 하지만 외부에서 값을 조작할 수 있기 때문에 함수에 고유한 일관성이나 값을 갖고있지 않습니다. 비순수 함수는 호출할 때 값을 예측할 수 없습니다. 순수 함수 부작용(Side Effect)을 일으키지 않는 함수 const pureFunc = (num1 + num2) => { return num1 + num2 } pureFunc(10, 20) // 30 함수에 필요한 것을 모두 매개변수로 받게되면 함수를 호출할 때마다 값을.. [JavaScript] 화살표 함수 주의사항 화살표 함수 사용 시 주의사항 1. 객체의 메서드에서 사용하면 this는 전역을 가르킵니다.. 2. call, apply, bind 등 많은 것을 사용할 수 없습니다. 3. arguments를 사용할 수 없습니다. (rest parameter로 대체 가능합니다.) 4. 화살표 함수로 생성자 함수를 만들 수 없습니다. 5. 부모 class에서 화살표 함수로 만든 메서드는 자식 class에서 사용할 수 없습니다. 6. override 할 수 없습니다. 이전 1 2 3 4 다음