FE

[keyword] UI 분석, UI 디자인 패턴, UX 분석, 피터 모빌의 UX 7요소, User flow, 사용성 평가, 제이콥 닐슨 10가지 사용성 평가 이번 과제는 클론을 진행했던 사이트의 UI/UX 분석이다. 클론을 진행한 사이트는 네모건축이다. 네모건축 네모건축, 주택공사, 근린생활시설, 전원주택리모델링, 목조주택, 스틸하우스, 펜션, 시공업체, 설계 및 견적문의 4mo.co.kr 📍UI 분석 사용중인 UI 디자인 패턴 탭(Tap) ➡️ Portfolio 주택 | 근린생활시설 부분, 네비게이션바에 적용되었다. 드롭다운(Drop down) ➡️ 온라인 문의 연락 가능한 시간을 선택할 때 사용되었다. 캐러셀(Carousel) ➡️ 메인페이지의 메인이 되는 부분에 자동으로 넘어가고, 정지 기능이 있는..

[keyword] UI, UX, UI와 UX의 차이점 🔮 UI : User Interface - 사용자 인터페이스 🔮 UX : User Experience - 사용자 경험 UI UI는 사람들이 컴퓨터와 상호작용하는 시스템을 의미한다. 크게 CLI와 GUI로 나뉘며 CLI(Command Line Interface, 명령 줄 인터페이스) : 터미널 GUI(Graphical User Interface, 그래픽 사용자 인터페이스) : 운영체제 화면, 애플리케이션 화면 마우스와 키보드 등도 컴퓨터와 상호작용을 하기 위해 필요한 시스템이므로 UI이다. UX UX는 사용자 경험이다 즉 사용자가 어떤 서비스를 경험하고 느끼고 생각하는 총체적 경험을 뜻한다. UX에는 여러 요소가 있겠지만 그 중 하나가 UI이다. 특히 ..

Section 2 회고 벌써 section2가 끝났다는게 믿겨지지 않는다ㅜㅜ section1보다 훨씬 빠르게 느껴졌고, 난 아직 많이 부족하구나를 매일 깨닫고 있다. section2를 하면서 좋은 페어분들도 많이 만날 수 있었고, React와 서버의 일부분을 배울 수 있어서 즐거웠다. 물론 과제는 쉽지 않았지만ㅎㅎ 복습이 매우 중요하게 느껴졌던 시간이 많았다. section3에서도 학습이 끝나면 꼭 복습을 해야겠다. 그리고 section3에서는 생활패턴이 정리가 됐으면 좋겠다. 1. 목표 📍 코드스테이츠 수료 후 3개월 이내에 복지 좋은 회사에 들어가기 📍 내가 만들어 보고 싶은 웹사이트 만들어서 배포해보기 2. Keep & Problem Keep 👍 6시에 일어나서 한 시간씩 꾸준히 공부하고 기록한 것..

[Keyword] REST API REST 성숙도 모델 Open API API Key 1. REST API REST API = Representational State Transfer API 웹에서 사용되는 데이터나 리소스를 HTTP URI로 표현하고 HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 API는 메뉴판이다 클라이언트는 메뉴판을 보고 요청을 하며, 서버측은 메뉴판에 있는 메뉴가 정상적으로 요청이 됐다면 데이터베이스라는 재료로 메뉴를 만들어 클라이언트 쪽으로 응답해준다. 그런데 메뉴판이 너무 다양하다 가게별로 읽는법도 매우 다르다 간혹 어떻게 읽어야 되는지 모르겠는 메뉴판도 있다 그렇다고 메뉴판을 읽을 수 있는 한 가게만 가거나 이상한 메뉴를 주문하고 싶지 않다!! 그렇다면 처음부터 메뉴판..

프로토타입 체인, .prototype, .__proto__, Object, extends,super 자바스크립트는 프로토타입 기반 언어다. 이 자바스크립트에 상속을 부여하기 위해 사용되는건 프로토타입 체인이다. 프로토타입 체인은 부모클래스의 속성과 메소드를 자식클래스에게 부여하면서 자식클래스는 딱시 명시하지 않아도 상속받은 부모클래스의 속성과 메소드를 사용할 수 있다. 2022.07.22 - [SEB_FE] - SEB_17_프로토타입과_클래스 SEB_17_프로토타입과_클래스 프로토타입과 클래스 자세하고 정확한 설명은 https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes Object prototypes - Web 개..

프로토타입과 클래스 자세하고 정확한 설명은 https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes Object prototypes - Web 개발 학습하기 | MDN Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 본 문서에서는 프로토타입 체인이 동작하는 방식을 설명하고 이미 존재하는 생성자에 메소드를 추가하기 위해 developer.mozilla.org javascript는 프로토타입 기반 언어이다 객체를 상속하기 위하여 프로토타입이라는 방식을 사용하는데 약간 비밀스러운 공간이라고 생각하면 된다 정확히 말하면 상위 객체에 있는 속성을 하위 객체에게 물려준다는 것보다 프로토타입 체..

객체 지향 프로그래밍(OOP - Object Oriented Programming) 절차 지향 : 순차적으로 명령에 따름 객체 지향 : 데이터와 기능(메서드)가 별개 취급되지 않고 한 번에 묶어서 처리 가능 원시적 언어에서는 절차 지향 프로그래밍이었다. 최근 언어들은 객체 지향적이다. 자바스크립트는 정확히 말하면 객체 지향 언어는 아니지만 객체 지향으로 작성은 가능하다. > 도대체 왜 객체 지향적으로 언어가 변화하였을까? - 객체 지향 프로그래밍의 4가지 개념으로 알아보자 - 1. Encapsulation (캡슐화) ➡️ 데이터와 기능을 하나의 단위로 묶는 것 ➡️ 은닉(hiding)과 느슨한결합(Loose Coupling) ➡️ 느슨한 결합은 코드가 상징하는 실제 모습과 비슷하게 코드를 모아 결합하는 ..

클래스와 인스턴스에 대해 설명하려면 일단 객체 지향 프로그래밍이라는 것을 알아야한다. 객체 지향 프로그래밍이란? OOP(Object-oriented programming) 코드를 추상화하여 사람이 읽기 쉬운 코드를 만들어 낼 수 있다 자바스크립트에는 내장 타입인 객체(object literal)가 있는데 이것과 구분하기 위해 객체 지향 프로그래밍을 위한 틀은 클래스(Class)라는 이름으로 부른다 클로저 모듈 패턴은 객체.메서드() 방식처럼 객체 내의 메서드를 호출하는 방법이다. 클로저 모듈 패턴을 사용하면 재사용성이 높아지기 때문에 추상화를 하기에 적합하다. 객체지향도 추상화를 위한 것이라 객체 지향 프로그래밍을 할 때 클로저 모듈 패턴이 많이 사용된다. 다만 주의할 점으로는 클로저 모듈 패턴을 사용할..