웹팩은 다양한 기능을 제공한다 파일내용을 기반으로 파일 이름에 해시값 추가 사용되지않는 코드제거 자바스크립트 압축 JS에서 CSS, JSON, TXT파일 등을 일반 모듈처럼 불러오기 환경변수주입 모듈시스템(ESM / commonJS) 사용 웹팩실행법 npm ins
ES6에 도입된 모듈시스템import, export로 js파일끼리 접근A.js (최하위 코드)B.js (중간 코드)app.js 최상위 코드HTML코드
외부에서 json형태의 데이터를 불러올때 promise타입으로 불러와져서 선행이 필요해서 공부하였다.JS에서 원래 비동기 처리를 하기위해선 콜백함수를 사용했는데 콜백함수의 경우 2가지 단점이 있다.비동기 함수의 처리결과를 반환하는 경우 순서가 보장되지않으므로 후속처리를
클라이언트단에서 http통신으로 요청 및 응답을 받는 함수get호출방식을 디폴트로 가지고있다.아래와같이 사용되며 url은 데이터를 받을 주소, option은 post호출시 사용\*response는 promise타입으로 반환되며 response.json()은 데이터를 자
main : 실제 배포되는 브랜치 (version명 명시)dev : 작업 내용들이 merge되는 브랜치개인 : 협업자들이 작업단위로 작업을 하게되는 브랜치hotfix : 긴급상황시 일회성으로 생성되는 브랜치개인 브랜치에서 작업한 내용을 dev 브랜치에 pullreque
google의 firebase api를 이용해 여러가지 웹서비스를 이용 할 수 있다. 이번 포스트에서는 간략하게 web hostiong 방법을 알아본다 과정 firebase 공식 사이트에서 프로젝트 생성 vscode의 터미널에 아래의 순서대로 입력
firebase에서 제공하는 관계형 database개념.하나의 프로젝트 개념인 collection안에 객체 개념의 document가있다.document안은 key-value구조로 이루어져있다. 아래와 같은 구조로 이해하자.firestore프로젝트를 생성한다head태그에
리액트를 들어가기 앞서 vanilla JS만 사용한 TodoList를 만들어보았다화면 업데이트시 db의 값들을 화면에 뿌려준다 화면의 input에 할일을 입력(enter키 || button클릭)하면 todoList배열에 해당 내용을 push하고 db에 업로드한다. 그리
모듈단위의 js들을 모아서 하나의 app.js로 번들링해주는 기능 크로스브라우징을 위해 es6문법으로 작성된 js를 es5로 변환해주는 기능루트폴더에 npm init을 해준다.\*이때 폴더에 package.json파일이 생겨남웹팩과 바벨을 설치해준다 \*웹팩 바벨은 개
ES5에 내장된 Fetch와 같이 rest에서 데이터를 가져오고 보내기위한 라이브러리,하지만 Fetch보단 장점이 많아 많이들 사용하는 라이브러리다,브라우저 호환, 자동 json변환, 보안, 부가기능등으로 Fetch보단 Axios를 사용하는것같다.간단한 사용법만 정리해
SWR은 React-Query와 함께 데이터Fetching 라이브러리다.SWR은 매번 지속적으로 요청을 보내거나, 페이지에 포커싱을 했을시 업데이트가 되는 등 기능이 있다단, 데이터를 가져오는 get에 특화된 라이브러리다.최초에 데이터를 가져온뒤 매번 불필요한 호출로
async/await를 사용하려는데 제목과 같은 에러가 발생해서 처리방법을 메모하려한다async/await를 컴파일링 해주는 regenerator를 제공하기위해 @babel/plugin-transform-runtime 을 설치해준다.npm i -save -d @babe
퍼블리싱을 하다보면 매번 같은 태그만 반복해서 사용한다.. 따라서 더이상 배움의 필요성을 느끼지 못했는데, 세상은 빠르게 변화한다.. 겁나 좋은 태그들이 나왔다 연습해보자.여기서 아코디언, 자동검색기능을 지원하는 강력한 태그는 꼭 외워서 써먹자js없이 아코디언 기능이
Next.js를 하면서 서버사이드렌더링, 클라이언트사이드렌더링이라는 개념을 알게되었다.NEXT에서 다루는 3가지 렌더링개념을 차근차근 정리해보자MPA : 기존의 전통적인 웹방식으로 서버에 모든 정적파일이 존재하여 클라이언트 측에서 요청시, 서버에서 페이지를 내주는 방식
막연하게 get, post만 알고있던 rest에 대해서 자세히 알아보자.그런 restAPI로 괜찮은가라는 영상을 봤는데 아주 교과서적인 rest에 대해서 다루는것 같았다. rest아키텍쳐에 맞는 rest스러운 api를 다루도록 노력해보자우선 잘 정리된 글이 있어 아래
scss를 사용한 간단한 dark모드 예제이다App.js를 최상위위치에서 APP/App.js로 이동시킨다(useState를 사용하기위함)App.js에서 isDark state를 사용하여 최상위 div의 클래스에 "dark"를 추가한다app.scss를 만들어 darkCo
요즘 자주 거론되는 소프트웨어 개발론인 애자일 방법론에 대해 알아보자Agile : 민첩한, 날렵한, 기민한, 좋은것을 빠르고 낭비없게 만드는 것애자일 방법론은 기존의 폭포수형 모델을 보완한 개발모델이다.한번 떨어지면 거슬러 올라 갈 수 없는 폭포수와 같은 방법론한 단계
종종 CORS에 대한 Error를 마주치는데 그냥 지나쳤던 CORS에 대해서 알아보자 우선 Origin에 대해서 Origin이란 프로토콜+주소+포트번호의 쌍을 말한다 (http는 80, https는 443의 기본포트를 가진다) 대부분의 웹브라우저는 Same Origi
js에서 변수를 선언하는 방법들을 자세하게 정리해보자.javascript에서 변수선언시에는 선언 -> 초기화 -> 재할당순으로 진행된다.선언 : js엔진에 변수명을 알린다초기화 : 값을 저장하기위해 암묵적으로 undefined를 저장재할당 : 초기화한 값을 재할당하는것
회사에서 맥북을 제공받았다.. 멘붕;; 터미널 사용시 필수커맨드를 우선 정리해보자ls : 조회하기 (폴더와 파일이 다른 색으로 출력된다)ls ~ : 루트폴더를 조회한다cd ~ : 여기서 ~는 루트경로를 나타내므로 홈으로 이동한다.rmdir 폴더명 : 해당폴더를 제거한다
프로젝트 작업을 하는데 무수한 상대경로 작성으로 지쳐버렸다.. 디렉터리 구조를 절대경로로만 사용할수있는 방법이 없을까? CRACO를 알아보자CRA프로젝트를 사용시, 복잡한 webpack설정을 할 필요없이, craco.config.js 추가로 간편하게 설정가능하다!npm
컴포넌트를 캡쳐한 이미지를 서버로 보내는 업무를 맡았다. 이미지를 서버로..?? 바이너리 개념인 Blob과 서버에 보내는 방식중 multi-formdata에 대해서 알아보자Blob(Binary Large Object)란 바이너리 형태중에서도 큰 객체를 뜻하는데, 주로
테스트 주도 개발인 TDD에 관심이 생겼다. 기존에 typescript를 사용하였지만 함수의 검증이 필요하여 테스트를 도입하고자 공부해보자. Jest None Config로 config파일 없이 사용가능하다. unit test, intergration test, E2
여러개의 터미널화면을 분할해서 사용할수있는 "Terminal multiplexer"에 대해 공부해보자Tmux는 세션, 윈도우, 팬이라는 3가지 개념이 있다세션 : tmux에서 가장 큰 실행단위고 attach/detach로 사용된다. detach한 세션은 종료되지않고 백
특정 엘리먼트가 2줄을 넘었을때 trigger를 해야하는 상황이 있다고 생각해보자.이때, fake element를 사용하면 가능하다.아래와 같은 박스가 있을때, 해당 박스가 2줄 이하이면 button이 자세히보기, 2줄이 넘어가면 button이 닫기로 바뀐다고 가정해보
미뤄왔던 개발 환경 설정을 한꺼번에 정리해보자Eslint vs Prettiereslint : 코드의 퀄리티를 보장해주는 린터.prettier : 코드의 스타일을 깔끔하게 통일시켜주는 린터.우리는 코드의 퀄리티와 스타일을 동시에 가져가기위해 eslint + prettie
우선 Semantic Versionin(=== SemVer)에 대해서 알아보자.시맨틱 버져닝이란 소프트웨어의 버전 변경 규칙에 대한 제안이다.npm에서는 Major.Minor.Patch의 버저닝 방식을 따른다ex) 18.2.0 일때 Major은 18, Minor은 2,
반복적인 검증 작업은 컴퓨터가 짱짱이다. 고로 테스트도 사람이 아닌 컴퓨터가 해야한다.하나의 함수, 메소드, 클래스 컴포넌트 단위로 잘 동작하는지 테스트jestreact-testing-librarymocha 여러개의 컴포넌트 등이 상호작용 하면서 잘 작동하는지 테스트.
인증 : 로그인을 해서, 해당 계정을 인증하는것인가 : 인증된 계정으로 허락된 서비스를 사용할수있는것 (ex. 인증받은 토큰을 가지고 mypage내용을 볼수있는것 )서버에 로그인된 사용자들의 정보를 session에 담아두는것서버에서 통제를 할 수 있다. 즉, 하나의 디
npm은 범용적으로 많이 사용되나 비효율적인 측면이 많다.npm은 파일 시스템을 사용해 의존성을 관리하는데, 예를들어 Users/test/dev/components라는 폴더에서 require로 lodash라는 패키지를 불러오는 상황을 가정할때require.resolve