코딩하는 짱구

리액트 SPA(Single Page Application)는 리액트(React) 라이브러리를 사용하여 개발된 웹 애플리케이션입니다. SPA는 사용자가 애플리케이션을 로드할 때 초기 HTML 문서를 한 번만 받고, 이후에는 서버와의 동적인 데이터 교환을 통해 필요한 컨텐츠를 업데이트합니다. 이로써 전통적인 다중 페이지 애플리케이션과는 달리 페이지를 새로고침하지 않고도 부드러운 사용자 경험을 제공할 수 있습니다. 리액트 SPA의 특징 컴포넌트 기반: 리액트는 UI를 독립적인 컴포넌트로 나누고, 각 컴포넌트를 조합하여 애플리케이션을 구축합니다. 이는 재사용 가능하고 유지보수가 쉬운 코드를 작성할 수 있게 합니다. 가상 DOM (Virtual DOM): 리액트는 가상 DOM을 사용하여 UI 업데이트를 효율적으로..

프론트앤드 부트캠프/Day 2023. 5. 19. 23:57

오늘은 리액트 첫번째날!! 리액트는 뭐야?? _Chat GPT에게 물어보기 리액트(React)는 페이스북에서 개발된 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. 리액트는 가상 DOM(Virtual DOM)을 사용하여 효율적인 UI 업데이트를 가능하게 하고, 컴포넌트 기반 아키텍처를 통해 재사용성과 모듈화를 강조합니다. 리액트의 주요 특징과 개념은 다음과 같습니다: 1. 컴포넌트 기반 아키텍처: - 리액트는 UI를 독립적인 컴포넌트로 분리하고, 이를 조합하여 복잡한 UI를 구축하는 방식을 채택합니다. - 각 컴포넌트는 재사용 가능하며, 독립적으로 상태(state)와 속성(props)을 가질 수 있습니다. 2. JSX (JavaScript XML): - JSX는 자바스크립트..

프론트앤드 부트캠프/Day 2023. 5. 18. 17:58

화살표 함수 화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다. this, arguments나 super에 대한 자체 바인딩이 없고, methods로 사용해서는 안됩니다. new.target키워드가 없습니다. 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다. 생성자(Constructor)로 사용할 수 없습니다. yield를 화살표 함수 내부에서 사용할 수 없습니다. 기본 구문 (param1, param2, …, paramN) => { statements } (param1, param2, …, ..

웹 < 프론트앤드 >/자바스크립트 2023. 5. 17. 17:59

점점 어려워지고 힘들어진다 ㅠㅠ 존버할수있을까?? 비동기 & 동기 비동기(Asynchronous)와 동기(Synchronous)는 프로그램의 동작 방식을 설명하는 데 사용되는 개념입니다. 이 두 용어는 작업의 진행과 관련된 시간적인 흐름을 나타냅니다. 동기(Synchronous): 동기적인 작업은 순차적으로 진행되며, 한 작업이 끝나야 다음 작업이 시작됩니다. 각 작업은 이전 작업의 완료를 기다릴 수 있고, 작업의 결과가 동기적으로 반환됩니다. 동기적인 작업은 코드의 흐름을 예측하기 쉽고, 간단한 작업 흐름을 구현하기에 용이합니다. 비동기(Asynchronous): 비동기적인 작업은 작업이 시작되고 결과를 기다리는 동안 다른 작업이 수행될 수 있습니다. 작업은 독립적으로 진행되며, 결과는 나중에 콜백 함..

프론트앤드 부트캠프/Day 2023. 5. 17. 17:38

거친 고차함수를 뚫고 가보자 자바스크립트 배열 고차함수 고차함수는 다른 함수를 인자로 받거나 함수를 반환하는 함수를 의미합니다. 자바스크립트는 일급 함수(First-class function)를 지원하므로 함수를 변수에 할당하고 인자로 전달하거나 반환할 수 있습니다. 이러한 특성을 활용하여 고차함수를 구현할 수 있습니다. 더보기 고차함수에는 여러 가지 종류가 있습니다. 다음은 일반적으로 사용되는 고차함수의 몇 가지 예시입니다: 1. `map()`: 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환합니다. ```javascript const numbers = [1, 2, 3, 4, 5]; const squaredNumbers = numbers.map(function(num) {..

프론트앤드 부트캠프/Day 2023. 5. 16. 17:45

Underscore.js는 자바스크립트 라이브러리 중 하나로, 다양한 유틸리티 함수를 제공하여 개발자가 자바스크립트 코드를 더욱 효율적이고 간결하게 작성할 수 있도록 도와줍니다. 이 라이브러리는 함수형 프로그래밍 스타일을 적극적으로 지원하며, 객체, 배열, 함수, 컬렉션 등에 대한 다양한 메서드를 제공합니다. Underscore.js는 다양한 환경에서 동작하기 때문에 브라우저에서도 사용할 수 있으며, Node.js 환경에서도 사용할 수 있습니다. 이 라이브러리를 사용하면 자바스크립트 코드를 작성할 때 다양한 상황에서 편리하게 활용할 수 있는 유틸리티 함수들을 쉽게 사용할 수 있습니다. 예를 들어, 배열에서 특정 값이 있는지 확인하거나, 배열 또는 객체를 정렬하거나, 컬렉션을 필터링하거나, 함수를 캐싱하거..

웹 < 프론트앤드 >/자바스크립트 2023. 5. 16. 09:12

고차함수 리뷰 및 과제 풀이 시간이 꽤나 많이 지났다 벌써 한달이 넘었으... 6개월 과정의 1달이 지다나니... 그러나 아직도 나는 모르겠닼ㅋㅋㅋㅋㅋㅋ 그래도 화이팅 자주 사용되는 기본적인 JavaScript의 배열 메서드를 직접 구현하며 원리를 이해한다. _.identity _.identity는 전달인자(argument)가 무엇이든, 그대로 리턴합니다. // 이 함수는 underbar의 기능 구현 및 테스트를 위해 재사용되는 함수입니다. _.slice _.slice는 배열의 start 인덱스부터 end 인덱스 이전까지의 요소를 shallow copy하여 새로운 배열을 리턴합니다. _.take _.take는 배열의 처음 n개의 element를 담은 새로운 배열을 리턴합니다. _.drop _.drop는 ..

프론트앤드 부트캠프/Day 2023. 5. 15. 16:14

오늘은 객체 지향 프로그래밍 마지막 날 ! 오전에 프로토타입 공부와 오후에는 Beesbeesbees 과제까지 마무리 했다! Bessbessbess 과제에 중심이된 클래스 상속 클래스 상속 클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있습니다. 기존에 존재하던 기능을 토대로 새로운 기능을 만들 수 있죠. ‘extends’ 키워드 class Animal { constructor(name) { this.speed = 0; this.name = name; } run(speed) { this.speed = speed; alert(`${this.name} 은/는 속도 ${this.speed}로 달립니다.`); } stop() { this.speed = 0; alert(`${this.name} 이/가 멈..

프론트앤드 부트캠프/Day 2023. 5. 12. 16:16