본문 바로가기

JS127

[ 엘리스 SW 엔지니어 트랙 ] 23일차 📍 23일 차 11.25. 목(실시간 강의) 오늘은 interface, generic 문법에 대해서 배웠다. ❏ Interface 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용 가능 직접 인스턴스를 생성할 수 없음. 모든 메서드는 추상 메서드다. (이때 abstract 키워드를 사용하지 않는다) 선언만 존재한다. (JS로 변환되면 인터페이서는 사라진다.) interface 간에 extends 를 사용하여 다중 상속 가능(class와 비슷) 추상 클래스와 다른 점: 추상 class는 전체적인 구조, interface는 프로그래머 간의 협업 개발을 할 때 사용 함수의 매개변수(파라미터로)로 사용 API 응답에서 데이터의 구조를 결정할 때 사용 // 키 값을 다음처럼 정해주면 키 값은 제한이 없다. .. 2021. 11. 25.
[ 엘리스 SW 엔지니어 트랙 ] 18일차 📍 18일 차 11.18. 목.(실시간 강의) 오늘은 실시간 강의로 Ajax, promise, async / await, SPA 에 대해 배웠다. ❏ SPA 만들기 SPA로 구현하려면 경로로 접속할 때 같은 파일을 내려줘야 한다. html 파일은 웹 서버에서 보관하고 html 해석은 웹 브라우저에서 한다. html 파일을 가공해서 고객들에게 보여주는 행위를 client side tech, 혹은 front end 라고 한다. header: 서버에서 클라이언트에게 전달하는 정보 fetch를 사용하면 JSON 형태의 내용이 온다. JS에서 객체를 표현하는 방법을 참고해서 만든 data spec JSON.parse: JSON으로 넘어온 데이터를 JS 객체 형태로 바꾼다. Ajax: JS를 사용하여 브라우저가 서.. 2021. 11. 18.
[ 자바스크립트(JavaScript) ] JSON 객체 깔끔하게 정리하기(depth 줄이기) 📍 JSON 객체 깔끔하게 정리하기(depth 줄이기) fetch나 axios를 이용해서 json형태의 데이터를 받아 올 때 다음과 같이 데이터가 너저분(?)할 때가 있다. let users = [ // 첫번째 객체 { gender: "female", name: { title: "Mrs", first: "Emília", last: "Vieira", }, location: { street: { number: 3944, name: "Rua Santa Luzia ", }, city: "Indaiatuba", state: "Acre", country: "Brazil", postcode: 26038, coordinates: { latitude: "23.2809", longitude: "-115.5400", }, .. 2021. 11. 18.
[ 엘리스 SW 엔지니어 트랙 ] 16일차(4주차: 자바스크립트 III - Promise, async / await, API 통신) 📍 16일 차 11.16. 화.(실시간 강의) 어느덧 엘리스를 시작한지 4주 차가 되는 날이다. 4개월의 전체 과정 중 1/4인 약 25%를 달려온 셈인데, 생각보다 시간이 빨리 가서 놀랐다. 남은 3개월도 꾸준하게 배운 내용을 기록하여 미래의 기본이 탄탄한 프런트엔드가 될 나의 밑바탕이 되어보자. 오늘은 동기 / 비동기, 콜백 함수, promise에 대해서 배웠다. 항상 콜백함수를 배울 때는 JS 엔진의 동작방식이랑 같이 배우게 되는데, 잘 알아둬야 하는 이유는 기술 면접에서 물어보기 때문이다. 실제로 면접을 볼 때마다 call back과 promise 함수의 차이점에 대한 질문을 받았다. 그때는 뭉뚱그려 대답했는데, 이번 기회를 통해 차이점을 확실하게 알아야겠다. ❏ 동기 / 비동기 동기(synchr.. 2021. 11. 16.
[ 자바스크립트(JavaScript) ] 부드럽게 scroll 하는 방법 알아보기 📍 부드럽게 scroll 하는 방법 알아보기 medium을 보다가 Div의 맨 아래로 scroll 하는 몇 가지 방법(scrollTop, clientHeight, scrollIntoView)을 작성한 글을 보던 중 scrollIntoView 메서드가 간편해 보여서 해당 메소드로 직접 기능을 직접 구현하면서 배운 점을 남긴다. scrollIntoView 메서드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤하는 메소드인데, caniuse 사이트에서 보면 거의 대부분의 브라우저에서 지원하므로 크로스 브라우징을 고려할 때 사용해도 괜찮은 메소드인것을 확인할 수 있다. MDN을 참고하면 알 수 있지만 scrollIntoView 메서드의 인자는 총 2개를 받는.. 2021. 11. 16.