HTTP 란? 요청, 응답 메시지에서 부가적인 정보들을 전송하기 위해 사용된다. HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다 HTTP 헤더 http 전송에 필요한 모든 부가정보 본문 데이터 관련 정보 인증정보 브라우저 정보 서버 애플리케이션 정보 캐시 관련 정보 HTTP 헤더의 구조 Field-Name + : + OWS + Field-Value + OWS Ows = 띄어쓰기 허용 Field-Name = 대소문자 구문 x HTTP 헤더의 분류 General Header : 메시지 전체에 적용되는 정보 Request Header : 요청 정보 Response Header : 응답 정보 Entity Header : 엔티티 정보(body컨텐츠 정보) General Heade..

클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 1xx(informational): 요청이 수신되어 처리중 2xx(Successful): 요청 정상 처리 3xx(Redirection): 요청을 완료하려면 추가 행동이 필요 4xx(Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음 5xx(Server Error): 서버오류, 서버가 정상 요청을 처리하지 못함 2xx 클라이언트의 요청을 성공적으로 처리 200 OK 201 Created post 요청을 해서 서버에서 자원을 새로 생성하는 경우 응답헤더에 Location정보가 들어있을 수 있다. 202 Accepted 요청 접수가 되었으나 처리가 완료되지 않았다. 배치 처리 같은 곳에서 사용한다. 204 N..

디자인 요구사항 중 한글, 영문 폰트 다르게 적용해 달라는 요청이 들어왔다. 이런경우 한글, 영문 폰트의 @font-face로 unicode-range 적용을 하면된다. @font-face 텍스트를 표시할 사용자 정의 글꼴을 지정한다. 사용자의 컴퓨터에서 찾을 글꼴 이름을 지정하고 사용자 에이전트가 일치 항목을 찾으면 로컬 글꼴이 사용된다. 그렇지 않으면 url() 함수를 사용하여 지정한 글꼴 리소스를 다운로드하여 사용한다. unicode-range @font-face 속성 중 unicode-range를 사용하여 특정 폰트를 필터하고 적용할 수있다. 숫자, 영문폰트, 한글폰트를 유니코드를 이용해 필터할 수 있다. 유니코드란? 유니코드(Unicode)는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 ..

Array.prototype.sort() 배열을 정렬하는 메소드. 기본 정렬 순서는 문자열 유니코드를 기준으로 한다. const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // Expected output: Array ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // Expected output: Array [1, 100000, 21, 30, 4] 반환값은 새로운배열이 만들어지는게 아니라 원배열이 수정된다. 정렬기준을 매개변수로 받아서 구현할 수 있다. arr.sort..

이 세개는 항상 헷갈릴때가 너무 많다. 영어로도 많이 쓰여서 헷갈린다. 매개변수, 인자, 인수, 파라미터, 아규먼트!! 매개변수(Parameter), 인자 둘다 동일한 것 함수 선언할 때 사용되는 변수 a, b는 매개변수, 인자이다. function addCount(a, b) { return a + b } 인수(Argument) 함수 호출할 때 매개변수에 들어가는 실제로 들어가는 값 1, 3 인수가 된다. addCount(1, 3); 참고 https://bskyvision.com/entry/%ED%97%B7%EA%B0%88%EB%A6%AC%EB%8A%94-%EC%BD%94%EB%94%A9%EC%9A%A9%EC%96%B4-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98parameter%E..

fetch() promise는 HTTP error에 의해 reject 되지 않는다. https://developer.mozilla.org/en-US/docs/Web/API/fetch fetch(api url) .then(( response ) => { if(!response.ok) { throw new Error(`error status: ${response.status}`) } return response.json() }) .then(( data ) => { // 처리 코드 console.log(data) }) .catch((error) => { // 에러 처리 코드 console.log(error) })

gh-pages? Github Pages에 build된 정적인 파일을 올리기위한 npm package Github Pages? git 저장소에 있는 정적인 페이지를 호스팅 해주는 서비스 설치 npm i gh-pages package.json 수정 homepage키를 추가한다. 깃헙 아이디와 저장소 이름을 요 형식에 맞춰서 "https://깃헙아이디.github.io/저장소이름" 넣어주면 된다. 저장소 이름 확인하는 방법 git remote -v로 확인해 볼 수 있다. 아래 이미지에서 todo가 저장소 이름이 된다. { ....other code, "homepage": "https://깃헙아이디.github.io/저장소이름" } 스크립트에 deploy, predeploy를 추가해 준다. predeploy는..

노마드코더 NextJS 를 보고 정리한 내용입니다. NEXTJS 설치 npx create-next-app@latest 라이브러리와 프레임워크의 차이 라이브러리 원할때 사용할 수있다. 앱을 만드는데 자유도가 있다. 프레임워크 프레임워크가 정한 규칙을 지켜야한다. 다른설정없이도 규칙만 지키면 동작한다. 커스텀이 제한된다. pages nextjs 프로젝트 내 pages폴더에 파일을 넣으면 파일이름이 url로 들어간다. localhost:3000/aboout CSR, SSR CSR - Client Side Rendering 브라우저가 자바스크립트를 가져와서 UI를 만든다. 네트워크가 느리면 화면이 늦게 노출 될 수있어서 로딩처리를 해야한다. 소스보기를 하면 root dom을 확인할 수 있다. SSR - Serv..

useState 컴포넌트에서 동적인 값을 상태(state)라고 합니다. useState를 사용해서 컴포넌트 내부에서 상태관리를 할 수 있습니다. 배열 비구조화 할당문법을 사용한 형태입니다. 첫번째 원소는 현재상태, 두번째 원소는 setter 입니다. setter를 사용하면 데이터도 변경할 수있고, 컴포넌트도 리렌더링 할 수있습니다. const [number, setNumber] = useState(0) setState()에 callback 함수 setState에 콜백함수를 넣으면 콜백함수의 인자값으로 이전state값을 가져올 수 있다. return을 하면 새로운 state를 지정할 수 있다. setState((prev) => { return !prev }) useState 초기값으로 callback 함수..

리액트 배경 자바스크립트로 UI를 제어하는 경우 간단하게 counter를 만든다고 가정했을 때 제어 원하는 dom select -> 이벤트 핸들러 -> dom 업데이트 라는 과정을 거칩니다. 규모가 커지는경우 많은 DOM을 직접 건드리면서 작업을하면 코드가 난잡해집니다. 리액트는 상태가 변경되었을 때 기존 dom을 날리고 새로운 dom을 보여준다는 개념에서 시작되었습니다. 매번 상태가 변경될 때마다 새롭게 만들게 되면 속도가 엄청나게 느려집니다. 리액트는 상태가 변경되면 Virtual DOM을 사용해서 업데이트가 필요한 곳의 UI를 렌더링 합니다. 그리고 실제 DOM과 비교하여 다른부분에 대해서만 실제 DOM에 패치시켜줍니다. Virtual DOM 개념 메모리 상에 가상으로 존재하는 dom 왜 필요할까 ..