본문 바로가기

전체 글72

UI) 자주 쓰이는UI 디자인 패턴 UI 디자인 패턴 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴이다. 자주 사용되는 UI 컴포넌트라고 할 수 있다. (재귀로 구현해보았던 Tree UI도 자주 쓰이는 UI 패턴 중에 하나) 자주 쓰이는 UI 디자인 패턴 모달 (Modal) 모달은 기존에 이용하던 화면 위에 오버레이 되는 창을 뜻한다. 팝업창과 비슷한데 팝업은 브라우저에 의해 강제로 막힐 수 있지만, 모달은 브라우저 설정에 영향을 받지 않아, 꼭 보여주고 싶은 내용이 있다면 모달을 사용하는 것이 좋다. 토글 (Toggle) 토글은 On/Off를 설정할 때 사용하는 스위치 버튼이다. 보통 On/Off와 같이 두 개의 옵션이 있을 때 사용하지만, 여러 개의 옵션.. 2022. 8. 23.
UI/UX UI(User Interface, 사용자 인터페이스) 사람들이 컴퓨터와 상호 작용하는 시스템 ex) 화면상의 그래픽 요소, 키보드, 마우스 등 GUI(Graphical User Interface, 그래픽 사용자 인터페이스) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 ex) 운영체제(Window, Mac OS)의 화면, 혹은 애플리케이션 화면 ⭐️ 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미한다. UX(User Experience, 사용자 경험) 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 사용자 경험이라고 할 수 있다. ⭐️.. 2022. 8. 23.
KPT회고(코드스테이츠 section2) KPT를 기반으로한 개인 회고 목표 상기하기 Keep, Problem 작성하기 Try 작성하기 우선순위 정하기 🌈 section2 회고 1. 목표 상기하기 🚗 기존 목표 첫 연봉 세후 3000이상인 곳에 개발자로 취업하기(월300이상) 5년안에 외국계 회사 취업해 디지털 노마드 실현 연봉 1억이상 만들기✨ 🚗 부트캠프 중 생긴 목표 부트캠프 기간동안 포기하지 말기💪 포트폴리오로 낼 수 있을만한 개인 프로젝트 5개 만들기!✨ 2. keep,problem 작성하기 👊 keep 기본 개념을 다시 공부한 것. 복습 스터디를 만든 것.✨ 하루에 최소 3시간 이상 공부하려고 노력한 것. 저녁시간 알차게 보내기(스트레스 노노) 👊 problem 체력 부족 + 운동부족 진도를 따라가기 벅차 개인 공부 시간을 확보하지 .. 2022. 8. 18.
REST API REST API(Representational State Transfer) 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식이다. REST 성숙도 모델은 총 4단계(0~3단계)로 나누어집니다. 로이 필딩은 이 모델의 모든 단계를 충족해야 REST API라고 부를 수 있다고 주장했지만 실제로 3단계까지 지키기 어렵기 때문에 2단계까지만 적용해도 좋은 API 디자인이라고 볼 수 있고, 이런 경우를 HTTP API 라고도 부른다. REST 성숙도 모델 - 0단계 REST 성숙도 모델에 따르면, 0단계에서는 단순히 HTTP 프로토콜을 사용하기만 해도 되지만, 해당 API를 REST API라고 할 수는 없다. 0단계는 REST AP.. 2022. 8. 5.
AJAX 보이는 곳의 통신을 이해할 수 있다. AJAX의 개념을 이해할 수 있다. SSR과 CSR의 차이를 이해할 수 있다. [AJAX] Asynchronous JavaScript And XMLHttpRequest의 약자 검색창에 한 글자를 입력할 때마다, 해당 글자로 시작하는 단어들을 서버로부터 받아와, 아래 추천검색어로 보여주게 된다. 검색창에서는 필요한 데이터만 비동기적으로 받아와 렌더링 되며, 여기에 AJAX가 사용되는데 역시 비동기적으로 데이터를 서버에서 받아와 브라우저에 렌더링을 하는 것이며, 이러한 기법을 AJAX라고 합니다. JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법이다. 서버와 통신하기 위해 XMLHttpRequest.. 2022. 8. 4.
JavaScript 프로토타입 체인 실습 이론으로 봤을 때는 어렵지 않았었는데 막상 문제를 보고 풀려고 하니 당황스러웠다. 익숙해질 수 있게 연습해보자🚗🚗🚗 [프로토타입 체인] JavaScript 객체 지향 프로그램에서 상속을 구현할 때 사용한다. 문제1) 클래스 SweetLemon의 `flavor` 속성은 `lemon`이어야 한다. class SweetLemon{ constructor(flavor = `lemon`){ this.flavor = `lemon` // this.flavor = flavor } } 문제2) 클래스SweetLemon의 `eat` 메소드가 존재해야 하고, `eat` 메소드를 통해 레몬을 먹는다. class SweetLemon{ constructor(flavor = `lemon`){ this.flavor = `lemon` .. 2022. 7. 25.

티스토리툴바