Front-end

💡 이번에 과제를 진행하면서 API 주소, API KEY와 중요 정보들도 다뤘는데 이때 이러한 값들이 노출되지 않게 하기 위해서는 어떻게 해야 되는지 정리해 봤다. 💻 프로젝트를 진행할 때 해당 프로젝트에서 사용되는 중요한 정보, KEY등과 같이 공개적으로 노출되면 안되는 값들이 있다. 이럴 때 따로 .env 파일을 만들어 그곳에 저장해서 사용할 수 있는 환경 변수를 설정해 줄 수 있다. 1. 환경 변수란? 프로젝트가 동작하는 환경 자체에다가 어떤 변수를 만들어서 데이터를 담아놓고 그 환경에서만 데이터를 활용할 수 있는 방법. 2. 환경 변수 설정하기 1) 루트 폴더에 .env 파일을 생성한다. 2) .env 파일에 변수와 값을 입력해준다. REACT＿APP＿변수 이름 = 값 3) 중요한 정보를 담고 있..

🚨 에러 발생 리액트에서 input type 체크박스를 사용하던 중에 아래와 같은 에러가 발생했다. Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. 해석해보면 checked 속성을 사용하여 값을 지정하지만 해당 값을 변경할 때 처리할 onChange 핸들러가 없어 오류가 난다는 것이다. 따라서 `defaultChecked`를 사용하거나 `onChange` 혹은..

1. Ajax(Asynchronous JavaScript and XML) 란? 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식. 브라우저가 제공하는 web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 전통적인 방식의 단점 Ajax 등장 이전의 웹페이지는 여러 단점들이 있었다. 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. 변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다. 이로인해 화..

1. 동기와 비동기 1.1 동기(Synchronous)란? 하나의 작업이 실행되고 완료될 때까지 다음 작업이 실행되지 않고 대기하는 것을 말한다. 즉, 한번에 하나의 작업만 실행하는 것이다. 동기 처리는 순서대로 처리하기 때문에 실행 순서가 보장된다는 장점이 있지만, 앞선 작업이 종료될 때 까지 이후 작업들이 블로킹 되는 단점이 있다. console.log(1); console.log(2); console.log(3); // 1 // 2 // 3 1.2 비동기(Asynchronous)란? 하나의 작업 완료와 상관없이 다음 작업이 실행될 수 있는 것을 말한다. 즉, 한번에 여러가지 작업을 실행하는 것이다. console.log(1); setTimeout(() => console.log(2),1000); c..

1. 생성자 함수와 클래스 생성자 함수와 클래스는 모두 프로토타입 기반의 인스턴스를 생성하지만 똑같이 동작하지는 않는다. 클래스는 생성자 함수 보다 엄격하고 새로운 기능도 제공한다. 생성자 함수와 클래스의 차이점 생성자 함수 클래스 new 연산자 없이 호출하면 일반 함수로서 호출 됨 new 연산자 없이 호출하면 에러가 발생 함 extends와 super 키워드를 지원하지 않음 상속을 지원하는 extends와 super 키워드를 지원 함 함수 호이스팅, 변수 호이스팅 호이스팅이 발생하지 않는 것처럼 동작 암묵적으로 strict mode 지정 안됨 클래스 내 모든 코드에 암묵적으로 strict mode가 지정 됨 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[..

📍 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어다. 그러니까 자바스크립트를 이루고 있는 거의 모든것이 객체다. 처음에 말했듯 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어다. 원시 값을 제외하고 나머지 값은 모두 객체다. 객체 지향 프로그래밍은 객체의 상태를 나타내는 데이터(프로퍼티)와 상태 데이터를 조작할 수 있는 동작(메서드)을 하나의 논리적인 단위로 묶은 복합적인 자료구조이다. 1. 상속과 프로토타입 프로토타입이란 객체의 원형을 뜻한다. 즉, 모든 객체는 프로토타입이라는 객체를 가지고 각각의 프로토타입으로 부터 프로퍼티와 메서드를 상속받는다. 상속은 객체지향 프로그래밍의 핵심 개념으로 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다..