본문 바로가기

FE54

import & export import는 다른 곳에서 내보낸 바인딩을 가져올 때, export는 자바스크립트 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다. 각각 사용하지만 export한 게 없면 import할 수 없고, import 하지 않으면 export한 의미가 없기에 보이지 않는 영혼의 한 쌍이다. import import defaultExport from "module-name"; import는 from과 함께 사용한다. from 이후 값은 어디서 가져오는 지 주소라 생각하면 된다(라이브러리의 이름이 들어가기도. 결국 주소를 뜻하기 때문에 주소와 같은 말.). 위처럼 쓰면 "module-name"에서 defaultExport를 가져온다는 의미다. 가져온 모듈은 "use strict"의 존재 유무와 상관없이 무조건 .. 2022. 9. 6.
try & catch try & catch는 서버 통신 시 실패 이유를 쉽게 파악할 수 있는 메서드다. 더불어 finally까지 사용한다면 성공 여부에 상관 없이 통신 완료 시 원하는 이벤트를 설정할 수도 있다. 사용 방법 try { console.log("통신 성공1"); console.log("통신 성공2"); console.log("통신 성공3"); } catch (error) { console.error(error); } 사용방법은 간단하다. 실패 여부를 알아아하는 코드를 try {}에 넣고, 바로 catch{}를 사용한다. 이때 catch는 try 실행에 대한 성공 여부를 확인하고 성공 시 패스하고, 실패 시 실패에 대한 이유를 error 매개변수에 담아온다. 위 코드대로면 별다른 통신 없이 콘솔로 찍었기 때문에 정.. 2022. 9. 6.
async & await 자바스크립트에서 서버와의 통신은 비동기로 작동한다. 비동기로 시간을 절약할 수 있지만, 원하지 않게 데이터 없는 화면이띄워질 수 있다. 이때 데이터를 받아오고 화면을 띄울 수 있게 만드는 즉, 비동기를 동기로 만드는 async와 await가 필요하다. 비동기 실행 async function  async() { const data = axios.get('https://koreanjson.com/posts/1') console.log(data) // Promise } axois로 비동기 통신을 사용했다. 자바스크립트는 상단에서부터 내려오면서 위 코드를 실행한다. 실행 시 서버측에 데이터를 요청하고 응답을 보여주는데, 이때 async를 이용한 통신은 데이터 보다 promise 객체를 먼저 반환한다(asy.. 2022. 9. 5.
REST-API vs GraphQL-API API(Application programing interface)는 애플리케이션이나 디바이스 간 통신(연결) 방법을 정의하는 규칙(언어 혹은 메세지)이다. API는 프론트엔드든 백엔드든 빼놓을 수 없는 웹개발의 핵심이라 감히 불러본다. API가 없다면 프론트엔드는 껍데기뿐이고, 백엔드는 바퀴없는 자동차다. 서버 데이터베이스에서 값을 가져와 화면에 뿌리고, 화면에 있는 입력값을 다시 데이터베이스에 저장하는 사이에 API가 있기 때문이다. API 중에서는 REST-API가 오랜 기간, 많은 사람들이 사용해왔고, GraphQL-API는 비교적 최근에 등장했다. REST-API REST-API는 REST(REpresentational State Transfer) 아키텍처 스타일의 디자인 원칙을 준수하는 API.. 2022. 9. 2.
Template literals 프로그래밍 언어가 영어로 작성되어 있다보니 단어를 아느냐 모르느냐에 따라 이해 난이도가 달라진다. 템플릿 리터럴은 단어를 알면서도 순간 "뭔 말이야"하고 멈칫하게 한다. 영어권 사람도 아니고 영어를 잘하는 사람도 아니라서 그런 듯하다. 형판 문자열. 직역한 단어 자체로는 뭔가 싶지만, 사용법을 알면 "아하~ 그래서 템플릿이구나"한다. 자바스크립트를 처음부터 시작하다보면 변수와 상수가 손에 익고, 값을 할당하는 것은 익숙하다 못해 감각도 없어진다. function yourself (name, age, school){ console.log("너의 이름은 " + name + "이고, 나이는 " + age + "살, 학교는 " + school + "가 맞니?") } yourself("코난","8","테이탄초등학.. 2022. 8. 31.

티스토리툴바