전체 글 84

json형태의 객체를 반복문으로 활용 (Object.keys, values, entries)

keys(), values(), entries()를 사용할 수 있는 자료구조는 Map, Set, Array Object.keys(obj) – 객체의 키만 담은 배열을 반환합니다. Object.values(obj) – 객체의 값만 담은 배열을 반환합니다. Object.entries(obj) – [키, 값] 쌍을 담은 배열을 반환합니다. Object.keys(obj) json형태의 객체를 반복문 Object를 활용한 방법 var json = {text:'abcd', number:1234, desc:'efg'}; Object.keys(json).forEach(function(k){ console.log('키값 : '+k + ', 데이터값 : ' + json[k]); }); for in 을 활용한 방법 var ..

Frontend/Javascript 2021.04.27

ESlint, Prettier 설정 방법

프로젝트 생성 시 설정 방법 Airbnb JavaScript Style Guide로 프로젝트 코드 스타일 설정 jsx, typescript 등 추가적인 설정은 구글링해서 추가한다. - 추가적인 package 찾아서 설치하고, eslint config 설정 필요 eslint, prettier package 설치 eslint : yarn add eslint --dev eslint-config-airbnb : npx install-peerdeps --dev eslint-config-airbnb eslint-config-prettier : yarn add --dev eslint-config-prettier prettier : yarn add --dev --exact prettier eslint config 생성..

HTTP 상태코드

참고 : developer.mozilla.org/ko/docs/Web/HTTP/Status 200 OK 요청이 성공적으로 되었습니다. 성공의 의미는 HTTP 메소드에 따라 달라집니다: GET: 리소스를 불러와서 메시지 바디에 전송되었습니다. HEAD: 개체 해더가 메시지 바디에 있습니다. PUT 또는 POST: 수행 결과에 대한 리소스가 메시지 바디에 전송되었습니다. TRACE: 메시지 바디는 서버에서 수신한 요청 메시지를 포함하고 있습니다. 400 Bad Request 이 응답은 잘못된 문법으로 인하여 서버가 요청을 이해할 수 없음을 의미합니다. 403 Forbidden 클라이언트는 콘텐츠에 접근할 권리를 가지고 있지 않습니다. 예를들어 그들은 미승인이어서 서버는 거절을 위한 적절한 응답을 보냅니다. ..

HTTP 2021.03.20

번들링 속도 개선하기(Feat. React, Typescript, Webpack)

www.npmjs.com/package/speed-measure-webpack-plugin speed-measure-webpack-plugin Measure + analyse the speed of your webpack loaders and plugins www.npmjs.com 일단, 체크 speed-measure-webpack-plugin 1. loader 줄이기 2. transpileOnly, experimentalWatchApi - ts-loader는 기본 옵션이 TS를 JS로 변환하는 transpile 작업과 type check 작업을 같은 스레드에서 동시에 실행. - type check는 개발자에게 편의 제공을 위한 기능이지 type이 브라우저에게 넘어갈 결과물에 까지는 영향을 주지 않기 때..

Frontend/Typescript 2021.03.08

React Native 시작하기

style html/css 사용 할 수 없다. StyleSheet.create 메소드를 이용해 스타일 object를 작성하여 컴포넌트에 style props를 전달. CSS .ico { ... } RN ico: { ... } * 각 스타일 속성의 구분은 ;가 아닌 ,로 한다. - 스타일 object 뒤에 다른 스타일 object의 구분 역시 ,를 사용 CSS .bigBlue { color: blue; font-weight: bold; font-size: 30px; } .red { color: red; } RN bigBlue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', } * 스타일 속성명의 하이픈(‘-’)이 아닌 ..

웹소켓 프로토콜 기본

HTTP는 클라이언트의 요청과 서버 응답으로 구성되는 무상태(stateless) 프로토콜이며, 그 용도가 제한적인 프로토콜이다. http 프로토콜로 통신하는 경우 특성상 연결이 유지되지 않아서 서버에서 먼저 요청을 보내는 것이 불가능해 Polling, Long Polling, Streaming 방식을 이용하여 비슷한 효과를 구현 한다. TCP/UDP 더보기 TCP(Transmission Control Protocol)소켓 : - 신뢰할 수 잇는 통신. - 인터넷을 통해 서비스되는 네트워크 연결 가운데는 그 수명이 길고 양방향 메시지 교환이 가능, 대량의 데이터 전송에 적합. - BUT, 보안 신뢰성이 낮은 클라이언트 측 자바스크립트 코드에 저수준 TCP 소켓 접근 권한을 주는 것은 바람직하지 않다. - ..

HTTP 2021.03.05

클라이언트/스토리지 종류

사용자 설정이나 특정한 상태까지도 저장 가능 클라이언트 스토리지는 웹브라우저에게 메모리를 제공한다. 출처별로 분리되어 저장되므로, 한 사이트의 페이지에서 다른 사이트의 페이지에 저장된 데이터를 읽을 수 없다. 그러나 두 페이지가 같은 사이트에 존재한다면 서로 스토리지를 공유할 수 있어 통신 메커니즘으로 활용할 수 있다. 예, 폼으로 입력 받은 데이터를 다른 페이지에 테이블로 표시할 수 있다. 웹 애플리케이션은 저장된 데이터의 생명주기를 설정할 수 있다. >> 데이터를 일시적으로만 저장하게 하여 창이 닫히거나 브라우저가 종료되기 전까지만 유효하게 하거나 or 하드 드라이브에 영구적으로 저장할 수 있다. (월단위, 연단위로 저장도 가능) 웹 스토리지 : 웹스토리지는 너무 크지 않은 데이터를 저장하기에 적합하..

HTTP 2021.03.03

[소스트리] Rebase(재배치) / Enable Force push(강제 푸쉬) 사용

master에서 branch를 생성해 작업을 하던 도중에 새로운 branch가 배포되어 반영하려고 한다. 현재 branch에서 체크아웃을 한 다음 master에서 rebase(재배치)를 선택한다. 이때 풀을 받지말고 푸시를 눌러 Enable Force push(강제 푸시)한다. [충돌없을때] 아래와 같이 마스터와 간단히 해결 [충돌있을때] 1. 스테이지에 파일을 모두 올려 재배치를 계속 진행한다. 2. 커밋 진행, 진행하고나면 브런치가 아래와 같이 바뀜. 3. 이때 pull 을 받지 말고 push를 눌러서 강제푸시를 체크한다. 최종결과 : 5635브랜치가 5767브랜치 아래로 rebase 되었음

git 2021.03.02