웹팩으로 Vanila JS 프로젝트 번들링하기/이미지 번들링 with. file-loader

학습 목적웹팩에서 이미지 파일사용을 하기 위해과제를 성공적으로 끝마치기 위해놀랍게도 웹팩에서 이미지를 사용하려면 이미지 번들러를 따로 추가해줘야 한다..이를 몰랐기 때문에 이미지를 적용하는데 시행착오가 좀 많았지만 해결했으니 이 과정을 글로 남겨본다.웹팩에서 이미지가 정상적으로 사용될 때파일 상단에 사진을 import 해준 뒤 태그의 src에 "사진 이름.확장자"를 입력해주면 된다.import "..사진 경로/사진.jpg";... 하지만 아직 이미지 번들러를 사용하지 않았다면 이미지의 경로를 찾을 수 없다는 에러메시지와 함께 적용이 되지 않을것이다.이는 우리가 웹팩에서 dist 폴더에 bundle된 파일들을 위치시켜놨었는데 이 폴더에서 이미지를 찾을 수 없기 때문이다.아래에 어떻게 하면 되는지 방법을 ..

• format_list_bulleted 개발 공부/Webpack
• · 2024. 8. 7.
• textsms

웹팩으로 Vanila JS 프로젝트 번들링하기/SASS(SCSS)

학습 목적웹페이지 클론 코딩 과제를 하던 중 SCSS 컴파일을 위한 Webpack이나 Parcel 같은 번들러를 활용하는 선택 요구사항을 충족시키기 위해번들러를 사용하는 목적이 알고 싶어서웹팩이 궁금해서 & VanilaJS 프로젝트를 위해 빌드해보고 싶었다.웹팩이란?프론트엔드 프레임워크에서 많이 사용되는 모듈 번들러모듈 번들러:웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, image, font 등)을 모듈로 보고 이들을 단일 Javascript 파일로 묶는데 사용되는 도구모듈: 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위모듈 번들링이란?웹 애플리케이션을 구성하는 수많은 자원들을 하나의 파일로 병합 해주는 동작을 말한다.빌드, 번들링, 변환은 전부 같은 의미웹팩은 왜 사..

• format_list_bulleted 개발 공부/Webpack
• · 2024. 8. 7.
• textsms

이벤트를 간편하게 걸고 싶은 당신을 위한 ”이벤트 버블링,캡처링, 위임”

여러분은 여러개의 버튼을 반복문을 통해 만들었고, 각 버튼에 이벤트를 추가해야한다면 어떤 방식을 사용하시나요?일일히 쿼리를 querySelector로 가져와 이벤트를 추가하시는 분이 있으시다면 이 글을 본 뒤 한번 적용해 보시면 좋을것 같습니다.이벤트를 등록하는 법이벤트에 반응하기 위해선 이벤트가 발생했을 때 실행되는 함수 핸들러(handler)를 할당해야 합니다.my buttonvar button = document.querySelector('button');button.addEventListener('click', (event) => { console.log(event);});우리는 위의 예시와 같은 코드를 통해 버튼을 만들고, 그 버튼을 클릭했을때 어떤 동작을 할 지 정할 수 있습니다. 이때 브라우..

• format_list_bulleted 개발 공부/HTML
• · 2024. 8. 7.
• textsms

GraphQL 쿼리는 어떻게 사용할까??

이 글은 GraphQL API를 이미 도입한 상태에서 사용하는 방법을 설명하는 글 입니다.만약 GraphQL에 대한 정보가 더 궁금하시거나 도입에 관한 고민을 하고 계시다면 이곳을 봐주세요.GraphQL의 쿼리우리는 지정한 모양의 특정 필드를 반환하는 API를 요청할 수 있습니다.쿼리문은 직관적으로 구성되어있는데, me 스키마 중{ me { name }}요청을 받은 GraphQL API는 다음과 같은 결과를 JSON 형식으로 반환합니다.{ "me": { "name": "Hyesu" }}쿼리 결과가 정확히 동일한 형태임을 알 수 있는데, 이것이 GraphQL의 핵심입니다.쿼리 용어Fields이곳에서 field는 person.{ person { #field name }}{ "da..

• format_list_bulleted 개발 공부/기타 (개발 공부)
• · 2024. 8. 7.
• textsms

자료 구조 진짜 진짜 진짜 정리

지난주와 지지난주 자료 구조 공부를 했었고 복습겸 정리해보려 한다.사실 할게 많아 계속 미뤘는데 이런 상태가 계속 반복되고 있어 드디어 정리 해보려 글을 쓴다.굉장히 긴 글이 될것 같은데 함께 힘내보도록하자.그래서 먼저 자료구조는 왜 공부해야하는지 알고 시작을 해야하는데..사실 처음에 배웠을 때 알았는데 지금은 까먹었기 때문에 다시 알아봤다.💡 메모리를 효율적으로 사용해 데이터를 빠르고 안전하게 처리하자!이게 자료구조의 궁극적인 목표다.즉, 우리는 특정 상황(문제)에서 가장 짧은 시간에 효율적인 메모리 사용을 할 수 있는 자료구조를 잘 선택할 수 있도록 잘 배워놔야한다.그러려면 우리는 가장 먼저 시간복잡도를 알아야한다.시간복잡도란 무엇이고 왜 알아야할까?시간 복잡도는 우리가 위에서 말한 짧은 시간을 판..

• format_list_bulleted 코테 준비/알고리즘
• · 2024. 8. 7.
• textsms

GraphQL을 도입하기 전 생각 해 볼 만한 것들

모던 브라우저의 경우 성능이 많이 좋아져서 유저가 불편할 정도의 지연은 자주 발생하지 않지만, API 통신은 네트워크 환경의 영향을 많이 받고, 데이터 크기에 따라 속도 차이가 발생할 수 있습니다. 그렇기 때문에 API통신의 로직을 설계할 때는 유저에게 보여줄 데이터를 캐싱하고, 새로 받아오는 시기를 잘 결정해야 합니다.GraphQL 이란?앞의 상황에서 유용하게 사용할 수 있는 GraphQL은 애플리케이션 프로그래밍 인터페이스(API)를 위한 쿼리 언어이자 서버측 런타임으로, 클라이언트에게 요청한 만큼의 데이터를 제공하는 데 우선 순위를 둡니다. REST를 대체할 수 있으며 개발자가 단일 API 호출로 다양한 데이터 소스에서 데이터를 끌어오는 요청을 구성할 수 있도록 지원합니다.Rest API에서의 문제..

• format_list_bulleted 개발 공부/기타 (개발 공부)
• · 2024. 8. 7.
• textsms