본문 바로가기
반응형
자료구조 더 알아보기 - 배열 자료구조와 알고리즘 이해하기 글에서 알아본 것처럼 자료구조란 데이터를 효과적으로 다루기 위한 방법을 뜻한다. 서비스나 어플리케이션에서 필요한 데이터를 메모리에 어떻게 구조적으로 담아두고 관리할지 생각하고, 최종적으로 가장 효율적인 자료구조를 채택하여 데이터를 빠르게 읽고(read), 검색(search)하거나, 수정(modify), 추가(add) 및 삭제(delete)를 할 수 있다. 읽기(read) 검색하기(search) 수정하기(modify) 추가하기(add) 삭제하기(delete) 서비스나 어플리케이션에서 클라이언트에 데이터를 제공 또는 사용자에게 데이터를 보여주고, 수정할 때 효율적으로 일을 처리하기 위해선 기능에 적합한, 알맞는 자료구조를 쓰는 것이 중요하다. 어떤 자료구조를 쓰냐에 따라 사용자가.. 2021. 11. 7.
자료구조와 알고리즘 이해하기 자료구조(Data Structure) 이해하기 자료(Data)가 그렇게 귀하다며..? 요즘 세상의 '자료(이하 데이터)'는 '새로운 석유(new oil)'라고 할만큼 AI, 정부, 구글 등 분야를 막론하고 많은 곳들에서 우리의 데이터를 원한다. 그래서 우리가 많은 서비스들을 무료로 사용할 수 있기도 하다. 예를 들어 데이터가 있어야 AI를 훈련시킬 수 있다. 데이터가 있어야 광고를 타겟팅 할 수 있다. 유튜브는 우리의 정보를 바탕으로 맞춤 광고를 설정하고, 영상을 보여준다. 그만큼 데이터는 중요하고 개발자라면 항상 데이터를 다루게 된다. 데이터를 효과적으로 다룰 수 없을까? 프로그래밍이 존재할 때부터 데이터는 항상 다루어왔다. 그렇게 데이터의 양이 커짐에 따라 선배 개발자들이 데이터를 효과적으로 다루기 .. 2021. 11. 6.
개발자(또는 개발자 취준생)의 마음가짐, 힘이 되는 글/영상 모음 각성이 되는 글/영상들, 열정 열정 열정! 🔥 개발의 기술적인 부분 외에도 좋은 글들이 참 많다. 그동안 수많은 개발관련 글들을 보며 정말로 나에게 힘을 주고, 자신감을 심어준 글들은 즐겨찾기를 해놨었다. 뛰어난 개발자분들의 개발 철학, 마음가짐, 성장 등 도움 되는 글/영상들을 모아봤다. 공개적으로 학습하라 비교적 최근에 읽은 글인데 두고두고 봐야할 글인 것 같다. 개발자의 성장에 대해 자세하게 조언해주고 무엇보다 이제는 스스로를 위해 글을 써야겠다는 생각을 많이하게 되었다. 결과를 '박수'나 리트윗, 스타, 좋아요와 같은 것들로 판단하지 마세요. (단순히 3개월 전의 당신을 돌아 보는 것으로 충분합니다.) 저는 거의 매일 개발 블로그를 작성하는데, 이것은 그 누구도 아닌 저 자신만을 위한 것입니다. .. 2021. 11. 3.
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.
반응형

티스토리툴바