혼자 적어보는 노트

Vanilla JS로 작업한 프로젝트를 netlify에 배포를 하려던 중 API의 env설정을 위해 webpack을 사용하여 처리를 해보기로 했지만 꽤나 오랜 시간 삽질을 해서 기록을 하기로 했다. 1. Build setting 그냥 Javascript 파일을 등록할 땐 build setting 부분을 빈 값으로 해도 되지만 build를 진행할 것이기 때문에 build setting을 해주어야 했다. 배포 폴더는 public으로 지정했다. 2. failed된 결과는 배포되지 않음 처음 배포를 했을 때는 build과정 없이 진행했고 정상적으로 나타났었고 webpack 및 package.json 설정을 하고 push를 했는데 제대로 나타나길래 나는 정상적으로 잘 한줄 알았다..ㅎ 하지만 deploys에서 로..

Create React App의 경우 root의 .env파일에서 환경변수를 쉽게 설정할 수 있었지만 Vanilla JS로 만든 프로젝트에 환경 변수를 설정하려니 다른 절차가 필요했다. 아무 절차 없이 그냥 .env 파일을 만들고 process.env.SOMETING_KEY와 같은 형태로 불러오면 당연하게도 ReferenceError가 발생한다. 1. dotenv 설치 npm i dotenv 2. webpack.config.js에 플러그인 추가 // webpack.config.js const webpack = require('webpack'); const dotenv = require('dotenv').config(); module.exports = (_, argv) => { return { //.. 일부..

🔗 고양이 사진첩 애플리케이션 고양이 사진첩은 이전에 데브코스 강의에서 한번 다룬 적이 있었어서 한번 로딩된 데이터를 메모리에 캐시하는 부분 빼고는 전부 구현했다. 한번 해봤기 때문에 4개의 연습 과제중 가장 수월하게 구현하긴 했지만, 기억을 더듬으며 했던 것 같다 ㅎㅎ 💡 알게된 점 Cache Storage LocalStorage나 SessionStorage에서 메모리를 캐시하면 되겠다 라고 생각했는데 cache API가 있다는 것을 알게 되었다. Cache API를 활용하면 웹 캐시에 복사된 데이터를 제어할 수 있다. 저장된 캐시를 확인하려면 개발자도구-애플리케이션-cacheStorage에서 확인할 수 있다. 몇 가지 테스트 해보며 사용해보니 local, session Storage랑 비슷하게 사용 ..

🔗 고양이 사진 검색 사이트 이번 문제는 처음부터 구현하는 것이 아니라 구현이 일부 되어있는 것을 수정하고 기능을 추가하는 문제였다. class 문법이 나와서 조금 당황했다..ㅎ 게다가 무려 4시간!! 수정하는 것이다 보니 따로 local vscode에서 하지 않고 온라인 vscode에서 진행하려고 했는데 이번엔 온라인 vscode에서 cors가 떴다... 보통 제공해 주는 테스트 환경에서는 cors가 안뜰 것이라고 예상했는데 이미 테스트 시작은 누른 상태라 포트를 잘못 타고 들어갔나.. 이것저것 시도해 보다가 안되길래 코드를 전부 vscode로 옮기고 어제 설치한 Allow CORS 확장 프로그램을 실행시키니 로컬에서나마 작동을 시킬 수 있었다... 초반에 시간을 좀 썼지만 부랴부랴 과제를 마치고 팀원..

🔗 쇼핑몰 SPA 로컬 VSCode에서 작성하고 붙여넣기를 하려고 했는데 로컬에서 테스트를 하니 CORS가 떠서 진행할 수가 없었다. 테스트환경인 온라인 vscode에서 API호출을 하니 정상적으로 작동이 되길래 시간을 더 지체할 수 없어서 테스트 환경에서 문제를 풀었다.ㅠ_ㅠ 초반부 세팅 때문에 시간을 좀 날리기도 했고 테스트 환경이 조금 불편하기도 했고,, 무엇보다 어제 했던 프로그래밍 언어 보다 난이도가 있었다. 쨌든 결국 다 못풀었다 3페이지를 구현해야하는데 마지막 페이지는 아예 손도 못댔고 2페이지의 3분의 2정도만 풀었다.... ㅠ_ㅠ 이후 팀원들과 이야기해보니 나와 비슷한 상황이었고 결과도 비슷했다... 💡 그래도 알게된 점! 1. 확장프로그램을 통해 Allow CORS 처리 팀원 중 한분이..

🔗 프로그래밍 언어 검색 요즘 계속 react만 하다가 vanilla js로 구현하는 데브매칭 연습문제를 처음 풀어봤다. 오랜만에 하다보니 이거 어떻게 했더라..? 했던 부분들이 조금 있었다,,ㅎ 3시간이 참 짧게 느껴졌다 ㅠ_ㅠ 기본 구현사항은 이해가 잘 안돼서 구현을 못했던 한 부분 빼고는 다 했고 보너스 구현사항 부분은 3개를 구현하지 못했다.😅 해보고 나니 이거 보너스 구현사항까지 전부 풀려면 고민없이 술술 풀어야 할 듯..? 💡 깨달은 점 ⦁ 요구사항에는 alert처리를 하라고 했지만 구현 예시 끝부분 gif에는 alert이 나타나지 않아서 마지막 쯤 alert부분을 주석처리 했는데 생각해보니 요구사항대로 alert를 하는게 맞는 듯 하다. ⦁ 주어진 html 파일을 아예 건들면 안되는 줄 알고..

redux saga를 학습하기전에 예시 코드를 만들어가며 제너레이터에 대해 이해를 해보려고 한다. 제너레이터 함수 일반 함수는 값이나 함수를 반환하지만 제너레이터는 필요에 따라 여러개의 값을 하나씩 반환할 수 있다. 제너레이터 함수는 function*을 사용하여 생성한다. 📗 예시 const gen = function* () { yield 1; yield 2; return 3; }; const generator = gen(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); 📑 결과 제너레이터는 특별한 객체를 반환하며 next()와 ..

어렴풋이 알고 있던 내용인데 되새기기 위해 정리해보았다. state를 업데이트 할 때 {...state}나 [...state]로 사용 하는 경우를 많이 봐왔는데, 왜 일까? 배열이나 객체를 개별적인 요소로 열거하는것 외에 spread 연산자를 사용함으로써의 이점은 또 무엇이 있을까? {} === {} // false 일단 객체는 동일한 값이여도 다른 객체로 인식을 한다. 기존의 객체에 spread연산자를 사용하여 값을 비교해보자. const prev = {a: “A”} const next = {…prev} prev === next // false // * 겉의 껍데기 {} 를 바꾸어 주었기 때문에 false로 표현된다. prev.a === next.a // true // * 겉의 껍데기는 다르지만 내부는..