JS & TS
-
iframe communication quick startJS & TS 2023. 2. 24. 23:44
목차 아이프레임이란 무엇인가요? 아이프레임으로 무엇을 할 수 있을까요? TODO 전략 실전 결과 보기 아이프레임이란 무엇인가요? An iframe (short for "inline frame") is an HTML element that allows you to embed another HTML document or webpage within your current webpage. It creates a frame or window within your webpage that can display content from a different source, such as a different website, another webpage on your own site, or even a separate pa..
-
REST API 바로 알기JS & TS 2022. 10. 23. 20:46
REST API 배워야 하는 이유를 찾자면? '저는 REST API를 바탕으로 백엔드 서버와 ... 어쩌구' 위와 같은 말들을 나의 자기소개서에 많이 적어냈다. 대충 무슨 느낌인지는 알 것 같았다. HTTP 요청을 보낼 때, 백엔드와 합의하에 HTTP 요청을 맞춰 HTTP REQUEST를 보내는 느낌으로 얼추 이해하고 있었다. 이번 장을 통해 REST API가 뭔지, RESTful 한 API는 뭔지에 대해 정확히 알고 갈 수 있을 것이다. REST란? REST(REpressentational State Transfer)는 HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩의 2000년 논문에서 처음 소개되었다. 발표 당시의 웹이 HTTP를 제대로 사용..
-
프로미스(Promise) 바로 알기JS & TS 2022. 10. 22. 22:35
프로미스 왜 배워야 할까? new Promise ? *new는 뭐고 Promise는 뭐야 ... return은 또 왜 붙여... * ... async/await(?) 이거 쉽네..! 이걸로 그냥 써야지 필자는 이런식으로 비동기 프로그래밍에 대한 이해를 덜 된 상태에서 ES6의 프로미스 문법을 사용하는 것이 아닌, ES8 의 async await로 바로 넘어가 작업을 시작했었다. async await를 기반으로 axios를 사용했을 때 너무 찰떡이라 오히려 필요성을 못느꼈을 지도 모른다... 하지만 콘솔창에서 [[object Object]], Promise 등의 로그가 찍힌 것을 보고 해석을 할 수 없어 그냥 구글링으로 때려 맞추는 식의 코딩을 진행하였다. 프로미스에 대한 이해가 없거나, 부족하다면 ful..
-
이벤트 루프 동작 원리JS & TS 2022. 10. 20. 20:57
다음 코드를 보고 바로 답을 할 수 있다면, 이 글을 읽지 않으셔도 좋습니다. console.log('A'); setTimeout(() => console.log('B'), 2000); setTimeout(() => console.log('C'), 3000); setTimeout(() => console.log('D')); setTimeout(() => console.log('E'), 0); Promise.resolve().then(() => console.log('F')); console.log('G'); 다음 코드를 실행시킨다면 어떤 순서로 로그를 찍는지와 이유에 대해 서술하시오 A G F D E B C 동기, 비동기 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식 을 동..
-
리팩터링 - Guard Clause를 사용하여 코드 가독성 높히기JS & TS 2022. 9. 13. 22:52
리팩터링이란 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법이다 - 리팩터링 2판, 마틴 파울러 수많은 리팩터링 방법 중 하나인 Guard Clause에 대해 소개합니다. Guard Clause는 무엇일까요? A guard clause is simply a check that immediately exits the function, either with a return statement or an exception. Guard Clause 는 반환 문이나 예외를 포함하여 함수를 즉시 종료하는 단순한 검사와 같은 문법입니다. 아래의 코드를 보겠습니다. export function payAmount(employee) { let result; if (e..
-
모바일 기기를 체크하여 크로스 브라우징 지원하기 (navigator.userAgent 사용하기)JS & TS 2022. 8. 25. 21:52
들어가며 실무를 하면서 느끼는 취준생 때와의 가장 큰 차이점은, 실제 서비스를 제공하는 입장에서 다양한 환경과 브라우저, 기기에 대응하는 크로스 브라우징이 필요하다는 것이다. 이전에 개인 프로젝트, 팀 프로젝트를 진행할 때는 사실 비용(시간과 노력)이 너무 많이 들기 때문에 모바일 화면처럼 만들어 놓은 웹앱 형식의 프로젝트를 많이 구성하였다. 이전 프로젝트 예시 1) 스터디 모집을 위한 팀 프로젝트 2) 우리 동네 가게는 코카콜라, 펩시 중 무엇을 주는지 제공하는 서비스 물론 현재도 웹 보다 모바일이 주력 서비스라면 이런 형식을 가지는 서비스도 많이 있지만, 우리 서비스는 데스크 탑 웹을 기반으로 서비스를 제공하기 때문에 다양한 브라우저와 기기에 맞게 화면을 보여줘야 한다. 이렇게 실무에 와서 써보게 된..