twingkle

Redux?? Reducer + flux . ※ flux?? 스케일링 애플리케이션에서 상태 관리를 처리하는 패턴. Action, Dispatcher, Store 및 View의 네 가지 필수 구성 요소가 있다. Redux의 세가지 원칙 1.Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 와야한다. 즉, Redux에는 데이터를 저장하는 Store는 단 하나뿐인 공간이 있음! 2.State is read-only 상태는 읽기전용이라는 뜻으로, React에서 상태갱신함수로만 상태를 변경할 수 있었던 것처럼, Redux의 상태도 직접 변경할 수 없음을 의미한다.즉, Action 객체가 있어야만 상태를 변경할 수 있음. 3.Changes are made with pure funct..

설치하기 # with npm $ npm install --save styled-components # with yarn $ yarn add styled-components packje.json에 아래 코드 추가하기. { "resolutions": { "styled-components": "^5" } } 불러오기 import styled from "styled-components" 기본사용법 백틱 사용 //임포트를 해주고 import styled from "styled-components"; //컴포넌트를 만들고 //styled.태그종류 const MainButton = styled.button` background-color: red; color: white; &:hover{ background: yel..

UI 분석 컬럼 그리드 시스템 사용 여부 핸드폰기준 4개의 컬럼 그리드를 사용. 인테리어시공탭의 위쪽 검색창이나 인스턴스들의 크기는 조정이 필요할 듯싶다. UX 분석 피터 모빌의 UX 7요소 충족 여부 1.유용성(Useful): 사용 가능한가? 충족★ 첫페이지에서 온라인 집들이를 할 수 있도록 꾸몄고, 스토어에서도 필요한 물품목록을 찾아 들어갈 수 있다. 2.사용성(Usable): 사용하기 쉬운가? 충족★ 집들이/구매/시공 으로 나누어 사용자의 니즈에 맞는 곳으로 들어갈 수 있다. 3.매력성(Desirable): 매력적인가? 충족★ 집들이 부분에서는 등수에 따라 포인트를 주고, 스토어부분에서는 세일코너가 따로 있어서 충분히 매력적이다. 4.신뢰성(Credible): 신뢰할 수 있는가? 충족★ 전문가 인테..

UI/UX 개념 좋은 UX가 좋은 UI 를 의미하거나, 좋은 UI가 항상 좋은 UI를 보장하지는 않는다. BUT, 나쁜 UI는 보통 나쁜 UX를 유발한다. UI란? User Interface(사용자 인터페이스). 사람들이 컴퓨터와 상효 작용하는 시스템을 의미한다. ex) 화면상의 그래픽 요소, 키보드, 마우스 등의 물리적 요소 GUI(Graphical User Interface, 그래픽 사용자 인터페이스) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경. 프론트엔드개발자의 UI ex) 운영체제의 화면, 애플리케이션 화면 등 UX란? User Experience(사용자 경험). 사용자가 어떤 시스템, 제품, 서비스를 직,간접적으로 이용하면서 느끼고 생각하는 총체적 경험. 제품, 서비스 그자체에 ..

has, get 등의 메소드들을 사용하기위해 배열 => 객체 바꿀때 사용 var myArray = ['value1', 'value2', 'value3']; var mySet = new Set(myArray); console.log(mySet) //{'value1', 'value2', 'value3'} console.log(...mySet); //value1 value2 value3 console.log([...mySet]) //['value1', 'value2', 'value3'] Set.prototype.has() has() 메서드는 Set 객체에 주어진 요소가 존재하는지 여부를 판별해 반환한다. const set1 = new Set([1, 2, 3, 4, 5]); console.log(set1.has..

JSON.stringify : 객체를 JSON으로 변환합니다. (직렬화) JSON으로 변환된 객체의 타입은 문자열입니다. JSON.parse : JSON을 객체로 변환합니다. (역직렬화) let transferableMessage = JSON.stringify(message) console.log(transferableMessage) // `{"sender":"김코딩","receiver":"박해커","message":"해커야 오늘 저녁 같이 먹을래?","createdAt":"2021-01-12 10:10:10"}` console.log(typeof(transferableMessage)) // `string` 자바스크립트 객체JSON 키 키는 따옴표 없이 쓸 수 있음 { key : "property" } ..

생각보다 많이 쓰여서 정리하는 아스키코드 문자열 변환.. 문자 => 아스키 코드로 변환 charCodeAt() https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt String.prototype.charCodeAt() - JavaScript | MDN charCodeAt() 메서드는 주어진 인덱스에 대한 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환합니다. developer.mozilla.org let str = 'hello' console.log(str.charCodeAt(1)) //101 아스키코드 => 문자열 변환 String.fromCharCode() https..

REST API란? REpresentational State Transfer 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 표준 메서드 : List, Get, Create, Update, Delete REST API 디자인하는 방법 실제로는 엄밀하게 3단계까지 지키기 어렵기 때문에 2단계까지만 적용해도 좋은 API 디자인이라고 볼 수 있다. => HTTP API REST 성숙도 모델 - 0단계 REST API 를 작성하기 위한 기본 단계. 단순히 HTTP 프로토콜을 사용하기만 해도 된다.(해당 API를 REST API 라고 할 수는 없다.) POST 메서드 사용. 엔드포인트 : /appointment REST 성숙도 모..

프로토콜이란?? 통신 규약. 약속 주요 프로토콜 전송 계층 프로토콜 이름 설명 TCP HTTP,FTP 통신의 등의 근간이 되는 인터넷 프로토콜 UDP (양방향의 TCP와는 다르게) 단방향으로 작동하는 훨씬 더 단순하고 빠르지만, 신뢰성이 낮은 인터넷 프로토콜 응용 계층 프로토콜 이름 설명 HTTP 웹에서 HTML, JSON등의 정보를 주고받는 프로토콜 HTTPS HTTP에서 보안이 강화된 프로토콜 FTP 파일 전송 프로토콜 SMTP 메일을 전송하기 위한 프로토콜 SSH CLI 환경의 원격 컴퓨터에 접속하기 위한 프로토콜 RDP Windows 계열의 원격 컴퓨터에 접속하기 위한 프로토콜 WebSocket 실시간 통신, Push 등을 지원하는 프로토콜 URL & URI URI > URL URI : Unifo..