분류 전체보기 93

자료구조 정렬(버블, 선택, 삽입, 합병, 퀵)

정렬(sorting) 배열 내 원소들을 번호순이나 사전 순서와 같이 일정한 순서대로 열거하는 알고리즘. 1. 거품정렬(bubble sort): 서로 인접한 두 원소를 비교하면서 정렬하는 알고리즘 평균 시간 복잡도: O(n^2) 1.인접한 값 비교 => 큰값 교환 2. index N번 3. N 차례 N-i //swap함수는 arr를 받고 매개변수 두개를 받아 각각의 인덱스를 받는다. let swap = function (arr, idx_1, idx_2){ //원소의 값 교환 let tmp = arr[idx_1]; arr[idx_1] = arr[idx_2]; arr[idx_2] = tmp; }; let bubbleSort_1 = function (arr){ for (let i = 0; i < arr.leng..

자료구조 2022.07.04

[React] CDD 개발 도구 Styled Components Props 활용

🔖 Props 활용하기 Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있다. 내려준 props 값에 따라서 컴포넌트를 렌더링하는 것도 가능하다. 1) Props로 조건부 렌더링하기 //삼항연산자를 활용해 컴포넌트에 skyblue 라는 props가 있는지 확인하고, //있으면 배경색으로 skyblue를, 없을 경우 white를 지정해주는 코드. const Button = styled.button` background: ${ (props) => props.skyblue? "skyblue" : "white"} `; import styled from "styled-components"; import GlobalStyle from "./GlobalStyle"; //..

React 2022.07.01

[React] CDD 개발 도구 Styled Components

🔖 CSS in JS 라이브러리란? CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있다. 현재 CSS in JS 라이브러리 중 가장 인기 있는 라이브러리는 Styled Components 이다. 🔖 Styled Components 설치하기 // 1. 터미널에 아래의 명령어 한 줄을 입력한다. # with npm $ npm install --save styled-components # with yarn $ yarn add styled-components // 2. package.json에 다음 코드를 추가(권장하는 편) // 아래의 코드를 추가하면 여러 버전의 St..

React 2022.07.01

[React] 컴포넌트 주도 개발 Component Driven Development (CDD)

📌 Component Driven Development (CDD) : 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 CDD 방법을 활용하여 UI 를 구축하는 사이트 1) UN 2) BBC Storybook latest--5d28eb5ee163f6002046d6fb.chromatic.com 📌 CSS 전처리기(CSS Preprocessor) : CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 SASS (Syntactically Awesome Style Sheet) CSS를 확장해 주는 스크립팅 언어 자바스크립트처럼 특정 속성(ex. color, margin, width 등)의 값(ex. #ffffff, 25rem, 100px 등)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용 복되는 코드를 한 ..

React 2022.06.30

React State Practice

[노마드코더] React JS로 영화 웹 서비스 만들기 HTML 삽입 미리보기할 수 없는 소스 https://codepen.io/mellomello-made/pen/yLKLdLM [React] State Practice ... codepen.io 1) input 옆에 쓰는 label의 for 속성을 react에서 htmlFor로 표시한다. 2) input 값은 controlled component로 만들자. controlled component : Input 태그 나오면 value, onChange 속성을 붙여서 상태를 관리하자. 3) Input의 disabled 속성은 input을 비활성화 시킨다. 4) class는 className으로 바꿔쓴다 5) setState() 에 함수를 할당하는 것은 잘 활..

React 2022.06.30

인스타그램 애플리케이션 UI/UX 분석 및 개선

Figma로 프로토타입을 제작할 수 있다. 웹 사이트의 UI/UX를 분석할 수 있다. 웹 사이트에서 사용중인 UI 디자인 패턴을 발견할 수 있다. 웹 사이트가 컬럼 그리드 시스템을 사용하고 있는지 알아낼 수 있다. 웹 사이트가 피터 모빌의 UX 7요소들을 충족하고 있는지 분석할 수 있다. 웹 사이트의 user flow를 그려볼 수 있다. 웹 사이트가 제이콥 닐슨의 10가지 사용성 평가 기준을 충족하고 있는지 분석할 수 있다 UI/UX를 분석한 내용을 토대로 개선할 수 있다. 💡 UI 분석 컬럼 그리드 시스템(Column Grid System) margin : margin은 최소화 하여 많은 정보를 담는 동시에 답답해 보이지 않도록 적당한 margin을 두었습니다. column : 메인 페이지는 colum..

UI|UX 2022.06.29

피터 모빌의 UX 7요소

1. 유용성(Useful) : 사용 가능한가? 유용성은 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소입니다. 계산기라면 계산을 틀리지 않고 맞는 결괏값이 나오는지, 계산기 본연에 목적에 맞는 기능을 하는지가 중요하겠죠. 여기에 꼭 목적에 맞지 않더라도, 비실용적이라도 추가적인 기능을 제공하는지도 관련이 있습니다. 계산기의 디자인은 계산기의 기능 자체에는 영향을 주지 않지만, 심미적 기능을 제공한다고 판단합니다. 2. 사용성(Usable) : 사용하기 쉬운가? 사용성은 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소입니다. 기능이 아무리 잘 작동하더라도 사용자가 사용하기 어렵다면 좋은 UX를 제공하기 어렵습니다. 가능한 단순하면서 직관적이고 사용하기..

UI|UX 2022.06.29

state를 세팅하는 2가지 방법

function App() { const [counter, setCounter] = React.useState(0); const onClick = () => { //setCounter(5); setCounter((current) => current + 1); {/*state를 세팅하는 데는 2가지 방법이 있다. 1) 직접 할당 :setState(state +1) 2)함수를 할당:setState(state => state +1) (함수의 첫번째 인자는 현재 state 이다) 현재 state랑 관련이 없는 값을 새로운 state로 하고싶은 경우에는 (1), 현재 state에 조금의 변화를 주어서 새로운 state를 주고 싶은 경우에는 (2)*/} }; return ( Total clicks: {counter..

React 2022.06.29

UI/UX, UI와 UX의 차이점

UI (User Interface, 사용자 인터페이스) UI는 사람들이 컴퓨터와 상호 작용하는 시스템이다. 컴퓨터와 상호 작용하기 위한 시스템에는 화면상의 그래픽 요소, 키보드, 마우스,스마트워치, 키오스크, 대중교통 터치스크린 안내판 등이 있다. GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경이다. 운영체제(Window, Mac OS)의 화면, 혹은 애플리케이션 화면이 있다. UX (User Experience, 사용자 경험) UX는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험이다. UI와 UX의 차이점 UI는 누구나 빠르고, 편리하게 제품/서비스를 이용할 수 있도록 시각적으로 디자인된 부분 이다. 하지만 UX 디자인과는 다르게 사용자..

UI|UX 2022.06.29