본문 바로가기
반응형
public 폴더 안 axios import 에러 Vanilla js로 SPA를 만들면서 정말 많은 에러들을 겪고 있다. 그래도 점점 직접 부딪혀보는 실력이 늘고 있다. 구현 후에 에러가 뜨면 해결하는 재미가 쏠쏠하다. 그런데 이번엔 조금 찝찝하게 마무리하게 되었다. 서버쪽에서 잘 사용하던 axios가 왜 클라이언트에선 불러오지 못하는 것일까? 일단 중요한 부분만 표현한 프로젝트의 폴더 구조는 다음과 같다. node_modules public |-- main.js // 여기서 axios를 import 해와서 쓰고 싶다 |-- index.html |-- style.css src |--api package-lock.json package.json server.js // axios 사용 main.js에서 import axios from 'axios';를 하면.. 2021. 11. 1.
new 연산자로 재사용성 높이기 new 연산자와 생성자 함수 new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다. - MDN MDN에서 설명하는 new 연산자다. 여기서 설명하는 '사용자 정의 객체'와 '객체 타입의 인스턴스 생성'에 대해 알아보자. 객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있다. 하지만 유사한 객체를 여러 개 만들 경우엔 new 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다. 예를 들어 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현할 경우에 유용하다. 생성자 함수 생성자 함수는 다음과 같은 관계를 따른다. 함수 이름의 첫 글자는 대문자로 시작한다 반드시 new 연산자를 붙여 실행한다. 예시 function User(name) { // th.. 2021. 11. 1.
Image Lazy Loading 기법으로 웹 성능 최적화하기 초기 로딩 시간을 단축해주는 Image Lazy Loading 기법 현재 화면에 보여지지 않는 이미지들은 lazy loading 처리를 통해 웹 페이지 초기의 로딩 시간을 단축하여 웹 성능을 향상 시킬 수 있다. image lazy loading 기법은 무엇인지, 그리고 해당 기법을 IntersectionObserver API를 사용한 예시를 보면서 알아보자. Image Lazy Loading이란? 페이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩을 하게 만드는 기법 웹 페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미룬다 영어 단어 중 'lazy'는 '가능한 길게 일을 미루는 행위'란 의미에 기반한다. lazy loading을 다루는 방식은 페이지 내의 거의 모든 리.. 2021. 10. 30.
Node.js에서 스크래핑을 해보자 웹 스크래핑(크롤링) 하기 원본 URL의 콘텐츠를 스크래핑(크롤링)해서 상세 페이지를 구현할 일이 생겼다. 구글링과 여러 삽질 끝에 결국 성공했다. 직접 코드를 작성 해보면서 테스트 하는 것도 빠르고 좋은 방법인 것 같다. 시작 하기전 원본 URL의 HTML을 가져올 때 사용하는 라이브러리와 그 결과로 원하는 콘텐츠를 뽑아서 사용할 라이브러리 설치가 필요하다. 나같은 경우 브라우저와 Node.js 환경에서 둘 다 사용이 가능한 axios와 비교적 예제도 많고 문법이 익숙한 cheerio를 선택했다. axios 외엔 request cheerio 외엔 puppeteer, playwright 등이 있다. 설치하기 npm i cheerio axios 가져올 콘텐츠 정하기 예시로 CSR과 SSR 이해하기 글의 콘.. 2021. 10. 29.
CSR과 SSR 이해하기 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR) 어떤 회사는 CSR을 사용하고, 어떤 회사는 SSR을 사용한다. 또 어떤 회사는 둘의 방식을 섞어서 사용하기도 한다. 각기 다른 방식을 사용하는 이유와 장단점들 그리고 어떻게 하면 더 좋게 개선할 수 있을까 등을 알아보자. 먼저 웹 트렌드와 역사(SPA 시대까지)를 살펴보면서 해당 방식이 등장하게 된 이유를 살펴보자. 웹의 역사(SPA 시대까지) 1990년대 중반 - 정적 웹 사이트들 1990년대 중반까지는 모두 정적 웹 사이트들(Static Sites)이었다. 이미 잘 만들어진 HTML 문서들이 만들어져 있고, 사용자가 브라우저에서 해당 사이트에 접속하면 서버에 이미 배포되어져 있는 HTML 문서를 받아와서 보여주는 방식이다. 예를 들어 .. 2021. 10. 15.
ZUM 기술 블로그 Fade in, Fade out 구현하기 IntersectionObserver API로 Fade in, Fade out 구현하기 ZUM 기술 블로그를 구경하다 디자인이 깔끔하고 이뻐서 클론해봤다. 정확히는 사이트의 Fade in, Fade out의 동작 방식이 궁금해서 직접 구현해봤다. 근데 이제 UI/UX를 곁들인.. 기능 구현 외에도 깔끔한 UI/UX 덕분에 가독성도 좋았다. 뭔가 집중이 된달까..그래서 전체적인 분위기나 모바일 대응도 구현했다. 동작 방식 알아보기 해당 블로그는 첫화면에 노출되는 포스트는 shown 클래스를 생성해서 바로 보여주게 된다. ➡️ 동적으로 클래스를 만듦 그 후 포스트들은 스크롤 다운 시 animate 클래스를 생성해서 보여주게 된다. ➡️ moveUp 애니메이션 작동, 포스트가 올라옴 ➡️ 각각 다른 anima.. 2021. 10. 10.
IntersectionObserver API로 무한 스크롤 만들기 무한 스크롤(Infinite scroll) IntersectionObserver API로 TOC 만들기 글에 이어서 이번엔 무한 스크롤을 만들어 봤다. 이젠 구현만이 목적이 아닌 코드 스타일이나 프로그래밍 방식에 대해서도 신경을 쓰고 있다. '그래도 성장은 하고 있구나 🌱'라고 생각한다. 개발 전용차선 강의 사이트 다음과 같은 상황이라고 생각하고 구현을 했다. 내가 훗날 남을 가르칠 정도의 실력이 된다 느껴져서 나만의 개발 강의 사이트를 만들려고 한다. 편하게 강의 목록을 볼 수 있도록 무한 스크롤을 구현한다. 서버에서 받아온 응답 결과를 노출 시키기(강의 리스트 렌더링) 로딩하는 동안 로딩 중인 것을 표시하기 스크롤 바닥을 위치하면 새로운 강의 노출 더미 데이터 만들기 나는 일단 서버를 구현할 실력이 .. 2021. 10. 8.
반응형