[UIUX] UI UX란 무엇인가

UI UX UI는 사용자 인터페이스, UX는 사용자 경험을 말한다. 쉽게 말해 UI는 사용자가 사용하는 제품, 시스템, 서비스를 말하는 것이고, UX는 그걸 사용한 사용자의 평가같은 거다. 그렇기때문에 UX는 UI를 포함하는 개념이다. UI 디자인 패턴 모달 (Modal) - 페이지 위에 겹쳐지는 창으로 브라우저 탭이 새로 열리는 것과는 차이가 있음. 토글 (Toggle) - on/off 스위치 탭 (Tab) 태그 (Tag) 자동완성 (Autocomplete) 드롭다운 (Dropdown) - 설문조사 등에서 입력창을 누르면 아래로 선택지가 주르륵 뜨는 것 아코디언 (Accordion) - 누르면 접혀져 있던 내용이 펼쳐지며 상세 내용이 뜸 캐러셀 (Carousel) - 컨베이어 벨트처럼 옆으로 넘어가..

• format_list_bulleted SW공부/그 외
• · 2023. 4. 13.
• textsms

[React] Router 설치

react 사용 중 router 필요한 경우 설치 방법: 터미널 $ npm install react-router-dom //버전 6 설치 $ npm install react-router-dom@6 index.js 을 로 감싸기 root.render( ); import 해오기 import { BrowserRouter } from "react-router-dom";

• format_list_bulleted SW공부/React
• · 2023. 4. 9.
• textsms

[JavaScript] Array().fill().map()으로 배열에 숫자 순차적으로 담기

let arr = Array(n).fill().map((v,i)=>{return i+1}) //n에 필요한 배열 개수 //return을 i+1으로 해주면 1부터 배열에 담을 수 있음. //i로 하면 0부터 한 번씩 필요할 때가 있는데 자꾸 까먹어서 적어둔다. //ex let arr = Array(10).fill().map((v,i)=>{return i+1}) console.log(arr)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

• format_list_bulleted SW공부/JavaScript
• · 2023. 4. 6.
• textsms

[Network] REST API에 관하여

REST API REST는 “Representational State Transfer”의 약자이며, API는 "Application Programming Interface" 의 약자로 REST API는 프로그렘과 프로그렘 사이에 데이터를 전달하기 위한 방법을 말한다. api는 메뉴판과 같다. 데이터를 주문하고, 받을 때엔 메뉴판처럼 정해진 룰이 있어서, 형식에 맞게 공손하게 주문하면 형식에 맞게 예쁘게 돌아온다. REST 성숙도 모델 REST API를 디자인하기 위해서는 정해진 규칙에 따라야 하는데, 바로 레오나르드 리차드슨(Leonard Richardson)이 만든 REST 성숙도 모델 이다. REST 성숙도 모델 3단계 HATEOAS 원칙 준수 : 요청은 2단계와 동일하지만, 응답에 리소스의 URI를..

• format_list_bulleted SW공부/Network
• · 2023. 3. 29.
• textsms

[JavaScript] new Set()으로 배열에 중복이 있는지 확인하기

new Set([ iterable ]) Set()은 모든 값을 하나씩만 중복되지 않게 모아주는 Collection객체라고 한다. let arr = [1,2,2,3,4,4,5]; let newCollection = new Set(arr); let newArr = [...newCollection]; console.log(newCollection); //{1, 2, 3, 4, 5} console.log(newArr); //[1, 2, 3, 4, 5] if(arr.length !== newCollection.size) console.log('중복있음'); //중복있음 위의 예시처럼 arr.length와 newCollection.size를 비교하거나 Set()으로 만든 Collection객체를 다시 배열로 바꾸어..

• format_list_bulleted SW공부/JavaScript
• · 2023. 3. 28.
• textsms

[CSS] 유용한 CSS 초기 설정

*{ Margin: 0; Padding: 0; Box-sizing: border-box; } css를 본격적으로 시작하기 전에 위와 같이 전체 설정을 주면 인라인 박스, 블록 박스 등 각각의 요소가 가지고 있는 고유의 margin, padding 사이즈를 0으로 통일해주기 때문에 추후 사이즈를 설정하기에 편리하다. box-sizing은 박스 크기를 계산하는 기준을 설정하는 것으로 border, 즉 테두리를 기준으로 사이즈를 계산하겠다는 뜻이다.

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 3. 22.
• textsms