이번 리액트 수업하기 전, 간단하게 자바스크립트로 Todo List를 실습해보는 것이다.나는 사실 자바스크립트로는 로그인, 회원가입을 제외한 기능을 구현해본 적이 없다. 즉 게시물이라던지 화면에서 삭제하고, 그런걸 제대로 해본 적이 없다. 그래서 이번 실습을 할 때, 코드는 이해가 되었으나 뭔가 바로 구현을 하기에는 좀 어려움이 있었다. 일단 순서대로 진행을 해보겠다. 아래 기본적인 화면이다. 할일을 적는 input과, 추가 버튼, 그리고 리스트와 삭제 버튼이 있다. 차근차근 진행해보겠다.일단 html 코드이다. Todo List - 목록 조회 :) 파일 경로: 쇼핑 목록 ..

1. 처음 config 파일을 만들어, 키를 저장하였다. 그리고 key를 사용하는 곳에, config import를 하여 config 파일을 가져왔다. 그리고 gitignore파일에 config파일을 추가하여, 깃허브에 올라가지 않도록 했다.근데 여기서 문제가 발생했다. 바로 이 config 파일 자체를 읽지 못하여, 키를 못가져오는 상황이 되버렸다defined 에러를 보이며 키를 못받아와 소셜로그인을 하지 못했다. 그래서 여러가지를 찾아보다 .env파일을 추가해 여기에 키를 추가시켜 보안처리를 하고, process.env를 하여 키를 가져오는 방법을 했지만, 이 방법은 node에서 사용하는 방법으로, 자바스크립트에서 사용하려면 다른 방법을 해야햇다. 바로 import.meta.env.VITE.식별자 를..

1. 에러 처리의 필요성우리는 코드를 작성할 때 에러를 발생하지 않는 코드를 작성한다? 이것은 있을수가 없다.그래서 우리가 에러가 났을 때, 대처할 수 있는 방법이 몇가지 있다. 그 중에 소개해 줄 것은 try..catch..finally 문이다. 1-1. try .. catch .. finallytry catch 문을 사용하여 발생한 에러에 적절하게 대응하면, 프로그램이 강제 종료되지 않고 계속해서 코드를 실행할 수 있다.console.log('[Start]');try { foo();} catch(error) { console.error('[에러 발생]', error); // 에러 발생}// 발생한 에러에 적절한 대응을 하면 프로그램이 강제 종료되지 않는다.console.log('[End'); c..

REST REpresentational State Transfer는 HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩의 2000년 논문에서 처음 소개되었다. 발표 당시의 웹이 HTTP를 제대로 사용하지 못하고 있는 상황을 보고 HTTP의 장점을 최대한 활용할 수 있는 아키텍쳐로서 REST를 소개했고 이는 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful" 이라고 표현한다. 즉, REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. 1. REST API의 구..

1. ajax자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다.ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 왼쪽은 전통적인 웹페이지의 단점이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다.변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다. 이로 인해 화면 전환이 일어나면 화면이 순간적으로 깜박이는 현상이 발생한다.클라이언트와 서버와의 통신이 동..

1. 동기처리와 비동기 처리함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 실행된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스텍이라고 부른다)에 푸시되고 함수 코드가 실행된다.함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되게 때문이다. 이처럼 함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다.자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 최상위 요소인 실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 모두 실행 대기 테스크들이다. 현재 실행 컨텍스트가 POP되어 스택에서 제거 되면 다음 실..