JavaScript (60) 썸네일형 리스트형 [Movie App Project ] JS로 Store 구현하기 *JavaScript에서 클래스 기반의 컴포넌트를 사용하고 있으며, 본 게시글 또한 클래스를 사용한 코드로 작성합니다. 클래스 기반의 컴포넌트를 사용하여 프로젝트를 진행하다 보니 A컴포넌트에서 생성된 state를 전역적으로 사용할 수 있도록 해주어 B컴포넌트도 해당 state를 사용할 수 있도록 해주어야 했습니다. store 구축 전 아래의 기본 개념을 먼저 살펴보겠습니다. Object.defineProperty 정적 메서드 defineProperty는 객체에 새로운 속성을 직접 정의하거나 이미 정의된 속성을 수정한 후 새롭게 정의된 객체를 반환합니다. [특징] 속성에 접근 권한을 설정할 수 있습니다. 속성에 getter와 setter를 만들 수 있습니다. [매개변수] Object.defineProper.. Testing 테스팅(Testing) 작성한 코드에 대한 원하는 결과가 있을 것입니다. 예상 결과를 확인하기 위해 브라우저에서 해당 기능을 사용해볼 것입니다. 또한 이러한 예상 결과를 가지고 애플리케이션을 테스트하게 될 것입니다. 만약 테스트가 성공적이라면 다음 코드 작업으로 넘어갈 것이고, 만족하지 못한다면 코드를 수정하게 될 것입니다. 이러한 테스트 과정을 브라우저를 통해 모두 수동으로 테스트할 필요는 없습니다. 테스트를 자동화하게 되면 코드를 변경할 때마다 자동화된 테스트는 실행되어 다시 수동으로 테스트하지 않고도 애플리케이션에 영향을 주는지 확인할 수 있습니다. 자동화된 테스트는 코드의 큰 변경 사항이나 문제를 볼 수 있고, 애플리케이션의 전혀 다른 곳인 A에서 변경되어 생긴 문제를 즉시 확인할 수 있다는 장점.. HTTP 클라이언트와 서버 간의 통신은 HTTP 요청과 응답을 통해서 발생하는데 클라이언트에서 서버로 요청을 보내기 위해서는 도메인과 경로로 구성된 URL이 필요합니다. 각 HTTP 요청에는 HTTP 메서드(GET, POST, PATCH, PUT, DELETE)가 할당되어 있습니다. 서버가 특정 작업을 수행하기 위해 어떤 메서드와 URL 조합을 사용할지는 전적으로 서버에 달려있습니다. 따라서 서버에 필요한 작업을 지시하지 않는 메서드를 사용하면 서버는 서로 다른 엔드 포인트를 노출하게 됩니다. 예를 들어 /post에 대한 POST 요청은 지원하지만 /posts에 PATCH 요청은 지원하지 않는 것입니다. 즉 서버 측이 지원하지 않는 조합을 사용할 경우 응답으로 HTTP 오류가 발생할 것입니다. HTTP 요청의 또.. 함수 순수함수와 부수효과 순수함수는 인수가 전달되면 늘 같은 출력값을 반환하며 아무런 부수 효과가 없습니다. *부수효과란 함수의 외부를 바꿔놓는 것을 일컫는 용어입니다. function add(num1, num2) { return num1 + num2; } console.log(add(1, 5)); // 6 출력 함수 add는 매개변수 num1, num2에 인수를 전달받아 + 연산한 값을 반환하는 함수입니다. 해당 함수는 인수로 전달하는 값이 동일하면 여러 번 호출해도 매번 같은 값을 반환하는데 이것을 순수 함수라고 합니다. function addRandom(num1) { return num1 + Math.random(); } console.log(addRandom(5)); // 매 실행마다 다른 값 반환 함.. Closure [22.12.25 함수의 렉시컬 범위와 Closure 개념 보충 수정] 클로저(Closure) 클로저(Closure)란 함수가 선언될 때 해당 함수가 유효하게 동작할 수 있는 범위(렉시컬 범위)를 기억하고 있다가, 함수가 외부에서 호출될 때 그 유효 범위의 특정 변수를 참조할 수 있는 개념을 말합니다. const createCount = () => { let a = 0; return () => { return (a += 1); }; }; const count = createCount(); console.log(count()); // 1 console.log(count()); // 2 console.log(count()); // 3 간단한 예시와 함께 살펴보면 함수 createCount 내부에는 변수 a가.. 클래스 Prototype JavaScript는 Prototype 기반의 언어입니다. const fruits = ["apple", "banana", "cherry"]; 위와 같이 과일을 담을 배열이 있으며, 해당 배열을 리터럴 방식을 사용하여 배열을 생성하였습니다. const fruits = new Array("apple", "banana", "cherry"); 리터럴 방식을 사용하지 않고 배열을 생성할 경우 위와 같이 생성자 함수를 사용하여 배열을 생성할 수 있습니다. Array 클래스에 인수로 배열로 생성할 요소를 전달하여 배열을 생성하는 방법입니다. console.log(fruits); console.log(fruits.length); console.log(fruits.includes("apple")); 이.. 정규표현식 정규표현식(Regular Expression) 정규표현식은 문자를 검색하거나 대체하거나 추출하는 패턴입니다. 정규표현식을 만드는 방법은 생성자 방식과 리터럴 방식이 있습니다. [생성자 방식] // new RegExp('표현', '옵션') new RegExp('[a-z]', 'gi') 생성자 방식은 RegExp 클래스를 사용하여 정규식을 만드는 방식으로, 표현과 옵션을 통해 문자 검색이 가능합니다. const str = ` 010-1234-1234 nicehyun12@tistory.com Hello world! The quick brown fox jumps over the lazy dog. there!! `; const regexp = new RegExp("the", ""); console.log(str... JavaScript 동작 원리(동기와 비동기) *테스크큐와 콜백큐는 같은 개념입니다. 동기와 비동기를 예시 코드와 함께 살펴보도록 하겠습니다. function taskA() { //taskA가 완료되는 시간 : 0.5초 console.log("A"); } function taskB() { //taskB가 완료되는 시간 : 5초 console.log("B"); } function taskC() { //taskC가 완료되는 시간 : 10초 console.log("C"); } taskA(); taskB(); taskC(); 위의 예시 코드처럼 3가지의 작업을 해야 하는 상황이라고 가정해보도록 하겠습니다. taskA의 작업이 완료되는 시간은 0.5초, taskB가 완료되는 시간은 5초, taskC가 완료되는 시간을 10초라고 가정해보겠습니다. taskA, .. 이전 1 2 3 4 ··· 8 다음
