study/JavaScript🌟

개요 프로젝트를 하면, 항상 프론트만 플젝 제일 마지막 순간까지 개발을 하고 있다.. 기획, 디자인이 완료되면 백엔드가 먼저 개발을 시작하고, API 개발이 끝난 뒤 프론트엔드 개발이 들어가면 좋겠지만, 현실은 백엔드와 프론트엔드가 동시에 시작하는 게 대부분이다. 그래서 프론트에서는 백엔드가 준 API 명세서를 보고 Mock Data를 만들어서 데이터를 띄울 준비를 해놓는다. 하지만 이런 식으로 하면, API 개발이 끝난 뒤, 또 마지막까지 외롭게 개발을 해야한다..ㅠㅠ 이번에 방학 UMC 프로젝트를 시작하면서 프론트엔드에서 MSW를 사용해보자는 얘기가 나왔다. MSW만 제대로 구축해놓으면, API 연결을 미리 해놓는 것과 똑같아서 나중에 또 개발을 하지 않아도 된다고 한다. 이번 플젝에서는 백엔드보다 ..

UMC 2주차 웹 스터디를 하면서 익명함수가 함수 표현식이고 기명함수가 함수 선언식인 걸 처음 알게 되었다!! 그 전까지는 그냥 함수 이름을 지정하지만 않으면 익명함수인 줄 알았는데 익명함수도 함수 이름이 있을 수 있다는 것도 알게 되었다. 함수 이름이 있는 익명함수 때문에 익명함수 기명함수 개념이 좀 더 헷갈렸던 것 같다. 익명함수와 기명함수 차이 함수 선언문은 무조건 함수명 정의되어야 하고, 함수 표현식은 없어도 된다. 함수 선언문은 함수 전체가 호이스팅 되고, 호출 함수 표현식은 변수의 선언문만 호이스팅된다 => 함수 선언식은 함수 선언 코드 위에서 호출 O, 함수 표현식은 X 함수 표현식은 함수를 변수에 할당하는 개념이다. 따라서 변수 스코프 규칙을 따른다.(변수가 선언된 스코프에서만 사용 가능)..

자바스크립트에서 변수를 선언할 때 var, let, const를 사용할 수 있다. 이 세 개는 약간씩 다른 기능을 하므로 셋의 차이점을 알아두고 제대로 사용해야 한다! var - ES6 나오기 이전에 자주 썼던 가장 오래된 방식이다. - 중복 선언과 재할당이 모두 가능하다. var letter = 'first'; console.log(letter); // first var letter = 'second'; console.log(letter); //second letter = 'third'; console.log(letter);//third 코드를 보면, 중복 선언이 가능하고, 가장 마지막으로 할당된 값이 최종 변수에 저장되는 것을 볼 수 있다. - 함수에서 선언된 변수는 함수 내에서만 유효한 함수 스코프..

개요 프론트엔드가 백엔드와 협업할 때, 자바스크립트 fetch함수를 쓰거나 axios를 사용하여 api를 호출할 수 있다. 설명 기본 구조는 다음과 같다. 1. api 주소를 써준다. 2. HTTP METHOD를 써준다. 이때, GET은 method를 따로 써주지 않아도 된다. 3. header, body가 있으면 써준다. 4. .then()으로 다음 로직을 써준다. fetch("api주소", { method: "POST", // HTTP Method(post, put, delete, get) headers: { "Content-Type": "application/json" }, body: JSON.stringify({name : cowboysj}) }) .then((response) => respons..

개요 프로젝트에서 숫자를 입력해야 하는 페이지가 있었다. 커서를 대면 자동으로 키패드가 뜨게 하려고 inputtype을 "number"로 설정했는데 안드로이드에서는 잘 적용이 되지만 IOS에서는 키패드가 아닌 일반 자판이 뜬다고 한다.. 해결법 inputtype 이외에 별도로 inputmode="numeric" 을 해주면 된다..! 만약, 키패드에 숫자와 함께 .(온점) 을 넣고 싶다면 numeric 대신 decimal을 넣어주면 된다.

개요 input 태그에 type을 숫자로 설정하고, maxLength = {1}로 했는데 숫자를 계속 입력할 수가 있었다... 알고보니, maxLength는 최대 "문자" 길이이기 때문에 input type = "number"일 때는 적용되지 않는다...! 해결법 input 태그 안에 아래 코드를 넣어주면 해결된다..! onInput={(e) => { if (e.target.value.length > e.target.maxLength) e.target.value = e.target.value.slice(0, e.target.maxLength); }} maxLength보다 value가 크면 더 큰 부분을 잘라내는 코드다. 전체 input 태그를 보면 아래와 같다. { if (e.target.value.le..