본문 바로가기

이슈와 회고

(9)

처음으로 돌아가기 | 번들 파일의 종착지, Output 관리하기 https://webpack.kr/guides/output-management/ 해당 문서를 참고하여 작성됩니다. 제가 이해 한대로 작성하는 부분이 많기 때문에, 정석대로 가실거라면 공식문서를 참고해보세요. 이전 포스트 | 애샛 설정, Data 다루기 처음으로 돌아가기 | 애샛 설정을 통한 웹팩 번들링, 그 두 번째 json/xml/csv참고한 자료는 webpack 공식 문서를 사용하였습니다. 애샛 설정 두 번째, 데이터프로젝트 환경에서 NodeJS 의 경우에는 JSON 지원을 기본적으로 해줍니다. 따라서 import data from './data.json' 형태로 불러duklook.tistory.com 들어가는 말이번시간에는 Output 경로에 대해서 다룰 겁니다. 번들링된 결과가 dist/ 경로에..

처음으로 돌아가기 | 애샛 설정을 통한 웹팩 번들링, 그 두 번째 '데이터'(애샛 파트 마지막) 참고한 자료는 webpack 공식 문서를 사용하였습니다. 애샛 설정 두 번째, 데이터프로젝트 환경에서 NodeJS 의 경우에는 JSON 지원을 기본적으로 해줍니다. 따라서 import data from './data.json' 형태로 불러와도 정상적으로 import 되어 사용할 수 있습니다. 하지만, xml 이나 csv 파일 의 경우에는 지원해주지 않기 때문에, json 과 동일한 방식으로 import 하려고 하면 문제가 발생합니다. 따라서 웹팩에서는 이 문제를 해결할 수 있는 로더를 제공해주는데 그것이 csv-loader 와 xml-loder 입니다. 이번 포스트는 해당 로더를 설정해서 번들링하는 방법을 언급하고 그 결과를 살펴보는 과정을 서술합니다. loader 설치 및 구성 설정 후 번들링 순..

처음으로 돌아가기 | 애셋을 적용한 웹팩 번들링, 우리가 import './style.css ' 등이 가능했던 이유(애샛 파트 ① CSS, Image, Font) 이전 포스트 | 처음으로 돌아가기, 웹팩을 사용한 기초 번들링 처음으로 돌아가기, 웹팩을 사용한 기초 번들링처음으로 돌아가기, 첫 번째 프로젝트 환경 설정현재에는 프론트엔드 개발을 하기 위한 환경을 구축하는 것이 매우 쉽습니다. Vite 를 이용하면 손쉽게 개발 환경이 구축되고, 리액트,뷰, 앵글러duklook.tistory.com 들어가는 말, 이 포스트에서 해볼 것이번 시간에는 CSS, 이미지, 폰트애셋을 통합하여 웹팩 번들링 시 포함시켜주는 설정에 대해서 정리해보는 시간을 가져볼 겁니다. 이 때 까지 편하게 사용했던 import 방식이 왜 쉽게 가능했는가에 대한 부분이 되겠습니다. 원래 라면 outside 등의 문제가 발생해서 모듈을 인식하지 못하는 문제가 일반적인데, 웹팩은 이 문제를 쉽게 처리..

처음으로 돌아가기| 웹팩을 사용한 기초 번들링 처음으로 돌아가기, 첫 번째 프로젝트 환경 설정현재에는 프론트엔드 개발을 하기 위한 환경을 구축하는 것이 매우 쉽습니다. Vite 를 이용하면 손쉽게 개발 환경이 구축되고, 리액트,뷰, 앵글러와 같은 라이브러리/프레임워크를 사용하면 더 쉽게 개발을 이어갈 수 있습니다. 그리고 앞으로의 인공지능 시대에는 모든게 말 하나로 복잡한 환경 셋팅도 자동화될지도 모릅니다. 하지만, 이렇게 편안한 도구들이 등장하고, 개발자가 손쉽게 다룰 수 있는 추상화의 단계가 가속화될 때, 간과하지 말아야 하는 부분이 우리가 쓰는 도구가 어떤 원리에 의해서 동작하는가에 대해 알고 있는가에 대한 부분입니다. 자동화된 도구라도 완벽할 순 없으니, 제반이 되는 원리를 이해하고 있다면 보다 쉽게 문제를 찾아서 해결할 수 있을 지도 모를..

사이트맵 색인은 꾸준히 증가하는데, 색인이 실패하는 건 수도 증가? [들어가는 말] 사이트맵 색인도 증가, 실패도 증가명언 웹 사이트를 만들고, 구글 셔치 콘솔을 통해 색인 생성을 신청한지 약 3달이 되어 가는 시점입니다. 원래 이렇게 색인이 늦게 증가하는게 맞는가 싶지만, 시간이 흐를 수록 정상적인 색인 수치의 70% 이상을 육박하여 좋게 보고 있었습니다. 그러던 중, 구글 이메일로 색인이 생성되지 않은 건수가 있다는 메일 받았습니다. 왜 색인을 실패하였을까?상황 파악단 몇 건도 아니고 거의 1/6 가량의 페이지 색인이 실패했습니다. 사이트의 검색 순위를 높이기 위해서는 꼭 해결해야 하는 문제이므로 해당 문제가 발생한 원인을 찾아 보았습니다. 다행히 친절하게 어떤 이유로 색인 생성이 실패되었는지 이유가 모두 나와있었고, 그 중에서 사용자가 선택한 표준이 없는 중복..

[푸드피커] 프로젝트 발자취 - 첨부된 영상이 보이지 않는다면 새로고침 하시면 해결이 됩니다.- 기존에 잡담 항목이 있었는데, 괜히 불필요한 글이 길어지는 것 같고, 글의 일관성을 무너뜨린다고 판단하여 제외하였습니다. 들어가기전해당 프로젝트는 2023 년 7월 경 부터 약 1달 가까이 만들어 졌습니다. 그리고 2024년 5월 24일 경에 재개발에 들어 갔습니다. 이번 회고는 2024년 5월 24일 이전과 이후를 통틀어 지나온 발자취를 동라보는 시간이 될 것 같습니다. 따라서 프로젝트에 대한 간략한 소개와 어떤 페이지 혹은 기능으로 구성되어 있는지, 어떤 변화가 있었는지 어떤 어려움이 있었는지 등에 대해서 정리해보는 시간을 가져봅니다. FoodPicker 프로젝트 개요 FoodPicker 는 다양한 음식관련 정보를 조회할 수 있는..

NextJS 를 AWS EC2 에 배포하는 경우 비밀번호 찾기 기능이 안 되었던 이유와 해결 방법( with AWS SES + 샌드박스 해지 ) SMTP 의 기본 포트는 25 이다.내가 만든 프로젝트에서 비밀번호 찾기 기능을 구현하고, EC2 에 배포했을 때 비밀번호 찾기 기능이 동작하지 않았다. 그 이유로 짐작되었던 것을 오늘 확인하였다. 그건 EC2 에서 외부 네트워크 요청에 대한 인바운드 규칙을 설정해두지 않았기 때문이다. SMTP 의 경우 기본적으로 TCP 25 포트를 사용하기 때문에, EC2의 인바운드 규칙에서 해당 포트로 요청이 들어오는 것을 허용해주어야 한다. 즉, 나는 이것을 설정해두지 않아서 차단이 되었던 것이다(라고 서두에 언급하였지만, 이 방법은 실패하였다. 물론 해당 포트 문제도 있었겠지만 근본적인 부분은 지메일 SMTP 서버에서 리전이 차이가 나는 경우 보안상 이유로 차단을 박는다.). [해결방법 - 실패 사례] 그러므..

프리티어 인데 왜 cloudWatch 에서 비용이 크게 나왔냐 했더니 ;; 쓴 것도 없는 것 같은데..EC2 에 프로젝트를 배포한 뒤에 cloudWatch 에서 며칠 되지도 않았는데도 비용이 크게 나오는 일이 생겼습니다. 프리티어 한도 내에서 얼마나 많은 로그를 수집한다고 혹시 오류가 아닐까 생각을 했지만.. 그건 아니었고 무료로 사용 가능한 모니터 리소스 한도를 초과해서 생긴 비용 증가였습니다. 아래 보시면 112 개의 리소스에 대한 모니터가 이루어지고 있다고 나와있죠? 지금 이 4월 6일 인데 4월 1일 부터 약 5일 동안 발생한 비용입니다.. 이게 한 달이 되었다면, 그 비용은 생각보다 크게 다가왔겠지요. "프리티어로 무료로 제공해주는 건 맞는데, 초과분은 내야지 안 그래?"이 부분에 대해서 더 알기 위해 자세하게 찾아보니 인터넷 모니터의 경우에는 초기 100개 까지만 ..

이전 1 2 다음

티스토리툴바