본문 바로가기

전체 글177

개발 중 이슈 보고서 [4월 01일 ~ 5월 13일] 원래는 주마다 이슈를 정리하여 올리려 했으나 프로젝트 개발에 힘쓰느라 몰아 올리게됨 노력할예정 삽질 리스트 1. 웹팩 오류 상황 설명 : 어쩌다 그랬는지 심신미약 상태로 개발하던 중이라 정확히 기억나지는 않지만 이런 오류를 만났다. ERROR in ./node_modules/jws/lib/verify-stream.js 8:13-30 Module not found: Error: Can&#39;t resolve &#39;stream&#39; in &#39;D:\react_file\Project\temp_porject\node_modules\jws\lib&#39; > BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules .. 2022. 5. 13.
웹팩과 번들러 웹팩의 이해 웹팩(webpack)이란? 웹팩 공식 Github 에서는 웹팩을 모듈(module)을 위한 번들러(bundler) 라고 소개한다. 모듈(module) : 재사용 가능한 코드조각 번들러(bundler): JS, CSS, 이미지 등의 파일을 묶어주는 작업을 번들링(Bundling)이라고 하고, 작업의 결과물은 번들(Bundle)이라고 한다. 마찬가지로 묶어주는 역할을 하는 웹팩(webpack) 같은 친구들을 번들러(bundler) 라고 한다, 웹팩을 사용하는 이유 웹팩을 사용하는이유 근본적으로 번들러(bundler)사용하게 된 이유는 번들러(bundler) 존재하기 전에 웹에서 는 두 가지 방법으로 브라우저에서 JavaScript를 실행했다. 각 기능에 대한 스크립트를 포함해서 사용 모든 프로젝.. 2022. 4. 12.
promise 와 async & await callback 함수를 정리 할 때 비동기 처리에 관한 내용도 알아보았고 더 나아가 비동기 작업을 조금 더 깔끔하게 처리하는 promise 대해 알아보려한다. promise 는 자바스크립트 비동기 처리에 사용되는 객체로 주로 서버에서 받아온 데이터를 표시하려고 할 때 사용한다. promise 는 3가지 상태 중 하나를 가지고 있다. 대기(pending): 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. promise 를 생성하고 연산이 성공적으로 완료하면(fulfilled) then 안에 있는 callback 함수 실행되고 연산이 실패하면(rejected) catch 안에 있는 callback 함수가 실행된다. 또한 .. 2022. 3. 2.
callback 함수 어떤 개념을 배울 때 이 개념이 무엇인지 왜 필요한지 어떻게 사용하는지 정리되지 않는다면 제대로 이해하기는 힘들다. 나에게는 callback 함수가 그러했다. callback 함수가 무엇인지는 대충은 알았고 어떻게 사용하는지 또한 알고 있었지만 정확히 무엇인지 왜 필요한지는 알지 못 했다. 이번 기회에 pormise 를 공부하기 이전에 callback 함수도 확실히 정리하고 가려한다. 콜백함수 다른 함수에 인자로 전달되는 함수를 콜백 (callback) 함수 라고 한다. 좀 더 자세히 보면 다른 코드 (함수 또는 메서드) 에게 인자로 넘겨주면서 제어권도 함께 위임하고, callback 함수를 위임받은 코드는 내부 로직에 의해 callback 함수를 적절한 시점에 실행한다. JS 에서 함수는 1급 객체 이.. 2022. 2. 24.
Hooks Hook 을 제대로 알지 못하고 리액트 개발을 시작하는 것은 니퍼를 들고 나사못을 빼는 헛짓거리 일거 같아 확실히 정리하기 위해 적어두려함 Hook 이 무엇이냐? 기존 React 의 class 바탕의 복잡한 코드를 작성할 필요 없이 여러 React 기능을 functional component 에서 쉽게 사용 할 수 있게 해주는 것이 Hook 인 것이다. 중요한 부분은 functional component 에서 state 를 가질 수 있게 된 것과 기존의 React 에서는 class component, render(복잡한 라이프 사이클과 그에 대응하는 메서드들 ..) 이런 귀찮은 짓을 안하고 하나의 function 에서 모든 것을 할 수 있게 된 점 정도로 정리할 수 있을 것 같다. 중요 Hook 비구조화.. 2022. 2. 22.
ref 를 알아보자 (ref DOM) ref 란? HTML id 를 사용하는것처럼 DOM 에 이름을 다는것처럼 프로젝트 내부에서 DOM 에 이름을 다는 방법이 ref (reference) 개념이다 DOM 을 꼭 직접적을 건드려야 하는 특수한 경우에 사용하는 것을 권장 특정 input d에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등 개인적으로 jQuery 한창 쓸 때도 기본 js 방식으로 코드를 많이 짜서 id 를 쓰는 것이 익숙했는데 React 와서는 코드를 짜는 방법이 조금 달라 감이 잘 잡히지 않았던 경험이 있다. + DOM 에 관련있기도하고 React 를 이해하는데 클래스형 컴포넌트가 도움 될 것 같아 일단 클래스형 컴포넌트에서도 사용하는 방법을 적어둠 콜백 함수 를 통한 ref 설정방법 클래스 형 impor.. 2022. 2. 21.
[ dotenv ] 환경 변수 사용 패키지 dotenv 는 환경 변수를 node.js 에서 편하게 다루기 위한 패키지이다. 환경 변수 : dotenv 는 환경변수를 .env파일에 저장하고 process.env 로 로드하는 의존성 모듈이다. 설치 : npm install dotenv 코드 [ env 파일 ] DB_NAME=&#39;myDB&#39; DB_USERNAME=&#39;root&#39; DB_PASSWORD=&#39;&#39; [ js 파일 ] // 세팅 //import dotenv from "dotenv"; require(&#39;dotenv&#39;).config(&#39;env 파일경로&#39;); // 경로를 적지 않으면 현재디렉토리의.env파일을 자동으로 인식하여 환경변수를 세팅한다. // 값 불러오기 console.log(pro.. 2022. 2. 14.
환경변수 지금까지 듣기만 하고 제대로 알아보지 않았던 환경 변수에 대해 알아보려한다. 환경 변수(environment variable)는 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는, 동적인 값들의 모임이다. -위키백과- 환경변수는 OS 아래에서 돌아가는 프로그램들이 필요한 데이터(PATH 가 대표적 ) 정도로 보면 편할 것 같다. *PATH 변수는 운영체제가 어떤 프로세스를 실행시킬 때, 그 경로를 찾는데 이용된다 .env 파일 환경변수를 관리할 수 있는 파일을 일반적으로 env 파일로 다루는 듯 하다. (찾아보니 json, object 관련 내용도 있는데 아무튼 복잡하고 그냥 .env 쓰라는 듯 함) 개발 중 포트번호, DB 관련 정보등 전역으로 필요한 변수(정보)들이 오픈소스(깃허브)에 공개됐을 경우.. 2022. 2. 13.
전개연산자 (Spread Opertor) 리액트 공부중 코드중에 처음 보는 녀석을 발견했다. function reducer(state, action) { return { ...state, [action.name]:action.value } } ...state 이렇게 생긴 이 녀석의 이름은 전개 연산자 스프레드 연산자로도 불리는 듯하다. 그나마도 쉽게 이해되는 설명은 이것이었다 &#39;스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다.&#39; 쉽게 말하면 spread 의 뜻처럼 배열, 문자열, 객체 등을 펼쳐서 쓴다는 의미다. 그러나 완벽히 이해가 되지 않고 왜 쓰는지, 어떻게 활용이 되는지는 찾아볼 필요가 있었다. 왜 사용하는가? 일단 불변성의 중요성을 알.. 2022. 2. 13.

티스토리툴바