민희의 코딩일지

필자는 그동안 Rest-API만 사용해봤는데 Graphql-API란 존재를 알게된 후 백엔드에서 다르게 생성해줘야 하는지와 Graphql-API의 개념과 사용법에 대해 궁금해 포스팅을 작성한다. 1. HTTP 통신 HTTP란 두 컴퓨터간에 텍스트 데이터를 주고 받는 길이다. (참고) FTP: 파일, SMTP: 간단한 메일 HTTP 라는 길로 요청 request 와 응답 response 2가지를 서로 주고 받을 수 있다. - 200: 성공 - 4xx: 프론트엔드 에러 - 5xx: 백엔드 에러응답 상태코드자주 볼 수 있는 응답 상태코드 HTTP 상태 코드 - HTTP | MDN 백엔드는 응답할 때 응답 상태코드를 함께 보내준다. 응답 상태코드는 100~599 까지의 숫자로 구성되어 있다. 2. API API..

원시 타입의 값, 즉 원시 값은 변경 불가능한 값, 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 원시 값을 변수에 할당하면 변수에는 실제 값이 저장된다. 객체를 변수에 할당하면 변수에는 참조 값이 저장된다. (변수: 확보된 메모리 공간) 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다 : 값에 의한 전달 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다 : 참조에 의한 전달 11.1 원시 값 한번 생성한 원시 값은 읽기 전용 값으로서 변경할 수 없다. // const 키워드를 사용해 선언한 변수는 재할당이 금지된다. 상수는 재할당이 금지된 변수이다. const o = {}; // const 키워드를 사용해 선언한 변수에 할당한 원시 값은..

CSS 적용하기 전 위 피그마 화면과 동일하게 만들기 1. input 태그 만들기 .signUp { width: 466px; height: 56.35px; margin-bottom: 21px; border: 1px solid #CFCFCF; border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 1; } .signUp:hover { border-bottom-color: #0068FF; } 마우스를 올리면 input 태그의 밑줄이 파란색으로 바뀐다. (따로 hr 태그를 작성하지 않고 input 태그에서 박스의 아랫선만 보이도록 설정하였다.) 이렇게 완성!

제어문은 조건에 따라 코드블록을 실행하거나 반복 실행할 때 사용된다. 8.1 블록문 블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문의 끝에는 세미콜론을 붙이지 않는다. 8.2 조건문 조건문은 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다. 자바스크립트는 if..else문과 switch문으로 두가지 조건문을 제공한다. 8.2.1 if…else 문 if(조건식) { // 조건식이 참이면 이 코드 블록이 실행된다 } else { // 조건식이 거짓이면 이 코드 블록이 실행된다 } if 문의 조건식은 불리언 값으로 평가되어야 한다. 만약 if문의 조건식이 불리언 값으로 평가되지 않으면 암묵적..

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 한다. 그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다. 7.1 산술 연산자 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NaN을 반환한다. 7.1.1 이항 산술 연산자 2개의 피연산자를 산술 연산하여 숫자 값을 만든다. 7.1.2 단항 산술 연산자 1개의 피연산자를 산술 연산하여 숫자 값을 만든다. 증가, 감소 (++, —) 연산자는 피연산자의 값을 변경하는 부수 효과가 있다. 7.1.3 문자열 연결 연산자..

자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시타입 primitive type 과 객체 타입 object/reference type으로 분류할 수 있다. 원시타입 숫자 Number 숫자, 정수와 실수 구분없이 하나의 숫자 타입만 존재 문자열 String 문자열 불리언 Boolean 논리적 참 True와 거짓 False undefined var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌 symbol ES6에서 추가된 7번째 타입 객체 타입 객체, 함수, 배열 등 6.1 숫자 타입 자바스크립트는 하나의 숫자 타입만 존재한다. 자바스크립트의 숫자 타입은 모든 수를 실수로 처리한다. 이는 정수로 표시된다 해도..

5.1 값 값은 표현식이 평가되어 생성된 결과를 말한다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 값을 생성하는 가장 기본적인 방법은 리터럴을 사용하는 것이다. 5.2 리터럴 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다. 자바스크립트 엔진은 런타임에 리터럴을 평가해 값을 생성한다. 5.3 표현식 표현식은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. (리터럴도 표현식이다) 표현식은 값으로 평가된다. 이떄 표현식과 표현식이 평가된 값은 동등한 관계, 즉 동치이다. 표현식은 다른 표현식의 일부가 되어 새로운 값을 만들어낼 수 있다. 5.4 문 문은 프로그램을 구성하는 기본 단위이자 최..

4.1 변수란 무엇인가? 왜 필요한가? 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 배열이나 객체같은 자료구조를 사용하면 관련이 있는 여러 개의 값을 그룹화해서 하나의 값처럼 사용할 수 있다. var user = { id:1, name:'Lee' }; var user = [ { id:1, name:'Lee' }, { id:2, name:'Kim' }, ] var result = 10+20; 10+20은 연산을 통해 새로운 값 30을 생성한다. 그리고 이 30을 메모리 공간에 저장한다. 이때 메모리 공간에 저장된 값 30을 다시 읽어 들여 재사용할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙인 것이 바로 변수다. 메모리 ..