이벤트 핸들링 (Event Handling) React의 이벤트 처리는 DOM의 이벤트 처리 방식과 유사하지만, 몇 가지의 문법 차이가 있다. React에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수를 전달한다. HTML과 React 이벤트 처리 방식은 ...

State, Props State 와 Props 는 ‘데이터가 변하는가? 변하지 않는가?’로 쉽게 구분할 수 있다. 예를 들어, 일반적인 사람의 데이터가 있다고 가정하자 이름 나이 성별 거주지 결혼 여부 여기서 이름과 성별을 변하지 않는 데이터다. 나머지의 정보들은 당장 내일이라도 바뀔 수 있다. 이렇게 변하지 않는 데이터는 ...

SPA가 등장하기 전까지는 웹 사이트에서는 웹 사이트 내의 다른 페이지로 이동하면 매번 HTML 파일로 된 페이지 전체를 불러와야했다. 웹 사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서 사용자와 서비스 사이에 더 많은 상호작용이 일어나게 되었지만, 중복되는 요소들을 매번 불러오는 것은 서버와의 불필요한 트래픽을 발생시켰다. 사용자 입...

React란? 리액트(React)는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리다. React 특징 1. 선언형 (Declarative) React는 한 페이지를 보여주기 위해 HTML, CSS, JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX 를 활용한 선언형 프로그래밍을 지향한다. 2. 컴포넌트...

비동기 요청의 가장 대표적인 사례는 단연 네트워크 요청이다. 네트워크를 통해 이루어진 요청은 그 형태가 다양하다. 그 중에서 URL로 요청하는 경우가 제일 많고, URL로 요청하는 것을 가능하게 해주는 API가 Fetch 와 Axios 이다. 본문에 들어가기 전, 자주 사용되는 용어들이 있어 간단히 정리하고 넘어가도록 한다. GET...

다들 동기와 비동기라는 단어는 한 번쯤 들어봤을거라고 생각한다. 비동기를 들어가기 전에 간단하게 동기를 설명하자면, 자바스크립트의 동기(synchronous) 처리는 특정 코드의 실행이 완료될 때까지 기다리고 난 후에 다음 코드를 수행하는 것을 의미한다. 비동기(Asynchronous)란? 자바스크립트의 비동기(Asynchronous) 처리...

클래스와 인스턴스를 설명하기 전, 객체 지향 프로그래밍이 무엇인지 아는 것이 중요하다. 개념을 먼저 살펴보도록 한다. 객체 지향 프로그래밍이란? 객체 지향 프로그래밍 (Object Oriented Programming) 은 컴퓨터 프로그래밍 패러다임 중 하나로 프로그래밍에서 필요한 데이터를 하나로 모아 추상화시켜 상태와 행위를 가진 객체를 생...

고차 함수를 알아보기 전, 일급 객체를 알고 있어야 조금 더 이해가 쉽다. 일급 객체(First-class object)란? 자바스크립트의 대표적인 일급 객체 중 하나가 함수다. 함수는 변수에 할당할 수 있어 배열의 요소나 객체의 속성 값으로 지정할 수 있다. 또 함수를 데이터(string, number, boolean, array, object)...

Section 1을 마치면서 벌써 한달이라는 시간이 지나 섹션 1 회고를 진행하는게 신기하다. 엊그제 오티한 거 같은데 이제 섹션 2를 들어간다니 ..!! 아직 내 수준은 병아리에도 못미치지만 더 성장할 수 있도록 노력해야겠다 🐥 부트캠프를 시작하기 전부터 주말에 알바를 하였는데 병행하기 너무 힘들어서 12월달을 마지막으로 그만두게 되었다. 하루종일 ...

과제 Rule 다음과 같이 과제가 주어졌고, 내가 직접 구현한 것만 체크하였다. Bare Minimum Requirement 디스커션 나열 기능 ☑️ script.js를 수정하여 agoraStatesDiscussions 배열의 데이터를 나열할 수 있게 구현합니다. ☑️ CSS ...