OneMoreEnergyDrink OneMoreEnergyDrink

React 시작하기리액트의 탄생기능이 추가되며 코드가 복잡해지기 시작했고 따라서 이를 효율적으로 개발할 수 있는 React가 등장하였다.마크주커버그는 페이스북을 만들었고 빠르게 성장함에 따라 여러 기능이 추가되었다.나의 첫 리액트 프로젝트리액트 프로젝트를 시작할 수 있다.개발 모드 실행npm run startnpm init react-app 리액트 개발자 도구 살펴보기React 개발자 도구를 사용하면 컴포넌트 등 여러 정보를 얻을 수 있다.React 개발 기초리액트 최신 버전에 대한 안내index.js 파일을 보면 ReactDOM.render가 아닌 ReactDOM.createRoot 함수를 사용하는 코드가 생성된다. 수업의 코드를 그대로 사용하면 개발자 도구 콘솔창에 아래와 같은 경고 메시지가 나타날 ..

쿠키쿠키의 특징로그인을 한 뒤 서버에서는 response로 쿠키 값을 보내주고 이는 자동으로 클라이언트에 기록된다.서버에서 설정해둔 기간 동안은 쿠키로 사용자를 인지하여 로그인 상태를 유지할 수 있다.쿠키 사용법서버에서 set-cookie 헤더를 리스폰스로 보내주면 웹 브라우저는 알아서 쿠키 값을 저장해 둔다.리퀘스트를 보낼 때 주소에 해당하는 쿠키가 저장되어 있다면 웹 브라우저가 알아서 쿠키를 보내준다.권장되지 않지만 자바스크립트에서도 쿠키를 생성, 참조, 수정할 수 있다.추가, 수정하기위 코드는 쿠키를 등록하고, 만약 기존에 session-id 라는 쿠키가 있다면 수정한다.document.cookie = "session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; ..

웹 기초 다지기fetch 함수와 response 객체fetch 함수는 Promise 객체를 반환이 객체의 then 메소드로, '리스폰스가 왔을 때 실행할 콜백'을 등록할 수 있음.이렇게 등록된 콜백들은 then 메소드로 등록한 순서대로 실행되고, 이때 이전 콜백의 리턴값을 이후 콜백이 넘겨받아서 사용할 수 있음처음 넘어온 response는 각종 부가 정보들과, 실제 내용을 함께 갖고 있는 하나의 객체(object)가 넘어옴, 따라서 reponse 객체의 text라는 메소드를 호출해서 내용을 가져와야 함.개발자 도구란?프론트 엔드 개발자에게 유용하다.https://developers.google.com/web/tools/chrome-devtools 위 링크에서 자세한 내용을 볼 수 있다.웹, url이란?u..

메타태그메타태그란?메타 태그란 로 작성하는 HTML 태그이다.이는 구글 검색 페이지의 사이트 설명 및 링크 미리보기에서 사용된다.메타 태그 사용 예시 1HTML 문서의 문자 인코딩을 utf-8로 지정한다. 브라우저가 웹페이지를 해석하는 방식을 지정해서 문서의 깨짐을 방지한다.name="viewport" 설정으로 반응형 웹 사이트를 제작할 수 있다.width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정한다.initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정한다.minimum-scale=1: 최소사이즈를 1배로 처리해서 축소를 못하게 막는다.maximum-scale=1: 최대사이즈를 1배로 처리해서 확대를 못하게 막는다.user-scalable..

인터랙티브 자바스크립트 시작하기웹 서비스와 JavaScriptHTML과 CSS만으로는 인터렉티브한 웹을 만들 수 없고 따라서 JavaScript를 사용한다.우리는 웹을 통해 인터넷과 상호작용하며 여러 정보를 주고 받을 수 있다.id로 태그 선택하기document.getElementById(’id’);자바스크립트에서 위 코드로 접근할 수 있다.없는 id에 접근하면 null을 반환한다.id는 고유값이고 하나의 요소에 접근할 때 사용한다.HTML에서 id속성을 부여하고,class로 태그 선택하기document.getElementByClassName(’color-btn’);위 코드로 접근할 수 있다.배열은 아니지만 length나 대괄호 표기법([])으로 요소에 접근이 가능하다.없는 class에 접근하면 빈 HT..

-Fetchfetch() 옵션method(메소드): `'GET'`, `'POST'`, `'PATCH'`, `'DELETE'`headers(헤더): 자주 설정하는 헤더로는 `'Content-Type'`가 있다.body(바디):  JSON 문자열로 바꿔서 보내야 한다.GET 리퀘스트 const information = await fetch(”~~”);리퀘스트를 보내고 response를 얻을 수 있다.POST 리퀘스트 const information = await fetch(”~~”, { method: 'POST', body: JSON.stringify(surveyData), });POST 리퀘스트를 보낼 수 있다.JSON.stringify로 값을 JSON형태로 변환 시킬 수 있..

콜백함수:어떤 함수의 아규먼트로 전달되는 함수를 콜백 또는 콜백 함수라고 부른다.비동기 실행:자바 스크립트의 코드는 순차적으로 실행된다. (동기)만약 수행이 오래걸리는 코드가 있을 경우 이를 무시하고 다른 줄부터 수행하는 것을 비동기 실행이라 한다. 비동기 실행에서 무시되는 코드는 중간에 다른 작업을 처리하다가 다시 돌아와서 마무리한다.(예: 서버에 데이터를 요청하고 응답을 받는 경우)setTimeout()함수를 통해 이를 테스트 해볼 수 있다.비동기 함수는 이후에 있는 모든 코드를 실행한 뒤 콜백을 실행한다.실행할 콜백이 여러개이면 동기적으로 실행됨.그 외 비동기 함수:setInterval() 함수clearInterval(변수명)으로 중지할 수 있음.setInterval() 함수는 시간 간격을 두고 콜..

과반수 찾기 알고리즘:n크기의 배열이 주어지고 그 안에는 n/2보다 많이 중복되는 수 x가 존재한다면,그 수를 찾는 알고리즘이다.입력: 정수의 배열 A[n]을 입력으로 받는다ex: {1, 1, 2, 5, 3, 5, 1, 3}출력:A[n]에서 n/2번 이상 나오는 원소가 있다면 그 원소를 출력한다.더보기Brute Force:각 원소마다 자기 뒤에 나오는 횟수를 세어본다.worst case: O(n2)Sorting Method:예시: 3 1 2 2 1 1 1 1 2 1 3 2 1 1 1 2배열을 정렬함 (시간복잡도 = O(n log n))1 1 1 1 1 1 1 1 1 2 2 2 2 2 3 3하나씩 읽고 바로 직전 원소와 같다면 count해서 n/2보다 큰 경우 return. (시간복잡도 = O(n))맨 마..