twingkle

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..

1. 목표상기하기 현재 ‘내'가 학습을 통해 이루고자 하는 것은 무엇인가요? 개발지식 능력의 향상 및 협업능력 향상. 완벽한 개발자는 아니더라도 충분히 성장가능성이 있는 개발자가 되고자 한다. 여러분이 현재 바라는 목표를 모두 이루었다면 ‘나'는 어떻게 변해 있을까요? 회사에서 찾는 개발자가 되어있을 것이다. ‘나'에게서 어떤 모습을 보았을 때, 목표를 이루었다고 말할 수 있을까요? 기술질문에서 막힘없이 대답할 수 있을때, 그리고 협업과정에서 질문을 부끄러워하지않고, 꾸준히 공부해나가는 내 모습을 보았을 때 2. Keep,Problem Keep 목표를 달성하기 위해 시도했던 것 중 가장 효과적이었던 노력은 무엇인가요? 1. 코드 리팩토링 내가 과거에 짜놨던 코드도 다시보기! 그땐 그게 최선의 선택이었겠지..

01.DOM(Document Object Model) -node: 요소의 상위 개념.DOM관련 대부분의 객체가 node에서 파생됨. -HTML을 조작할 수 있다. -document객체를 통해 HTML에 접근(BOM은 window객체를 통해 브라우저에 접근) -document.cloneNode: 복제 메서드 -document.importNode: template 를 활용하여 내용을 붙여 넣을 때 사용하는 메서드 03.요소 조회 -document.querySelector('div) : 최상단 '하나' 조회 -document.getElementById('div): id가 인 요소 '하나' 조회 -document.getElementsByClassName('div): class가 인 요소 '여러 개' 조회 -do..

버튼비활성화 만들기 HTML 사용할 수 있는 아이디입니다 아이디는 네 글자 이상이어야 합니다 숫자만 입력이 가능합니다. 비밀번호가 일치하지 않습니다 회원가입 JS 1. 첫번째 시도해봤던 코드 let elInputUsername = document.querySelector('#username') let elPassword = document.querySelector('#password') let elPasswordRetype = document.querySelector('#password-retype') let elTargetBtn = document.querySelector('#target_btn') //버튼 활성 비활성화 //vlaue가 모두 입력된다면 elTargetBtn.onclick =functi..

console.log(1+'1') //11 console.log(1+ true) //2 //true =1 , false = 0 console.log(122- '1') //121 console.log('1'+true) //1true 레퍼런스 https://github.com/denysdovhan/wtfjs https://google.github.io/styleguide/jsguide.html#features-use-const-and-let 함수 선언식(declaration) vs 함수 표현식(expression) console.log(typeof funcDeclared) //'function' console.log(typeof funcExpressed) //'string' function funcDecla..