AJAX AJAX (Asynchronous JavaScript And XML)는 웹 페이지에서 새로운 데이터를 보여주려고 할 때 전체를 새로고침 하지 않고, 보여주고자 하는 데이터가 포함된 페이지의 일부분을 로드하기 위한 기법이다. 자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식 최근에는 XML 보다 JSON을 더 많이 사용한다 Ajax 동작방식 요청 (Request): 브라우저가 서버에 정보를 요청 서버의 동작: 서버는 JSON, XML 등의 형식으로 데이터를 전달 응답 (Response): 브라우저에서 이벤트가 발생하여 콘텐츠를 처리 MPA & SPA, CSR & SSR 정리 https://studyhard-everyday.tistory.com/34 MPA & SPA, CS..

API 애플리케이션 프로그래밍 인터페이스(API)는 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙을 정의합니다. 개발자는 다른 애플리케이션이 프로그래밍 방식으로 애플리케이션과 통신할 수 있도록 API를 표시하거나 생성합니다. 웹 API는 클라이언트와 웹 리소스 사이의 게이트웨이라고 생각할 수 있습니다. REST REST (Representational State Transfer)는 애플리케이션 개발의 아키텍처 중 하나입니다. REST는 처음에 인터넷과 같은 복잡한 네트워크에서 통신을 관리하기 위한 지침으로 만들어졌습니다... (아키텍처: 애플리케이션을 설계, 제작하는 데 사용하는 패턴과 기술의 총칭) REST는 다음의 구성으로 이루어져 있습니다. 자원 (Resource) - URI (URL) ..

MPA MPA (multi page application)는 여러 페이지로 구성된 웹 어플리케이션입니다. 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식입니다. SPA SPA (Single Page Application)는 하나의 페이지로 구성된 웹 어플리케이션입니다. 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식입니다. SPA는 현재 웹 개발의 트랜드로 볼 수 있고 react, vue, 앵귤러와 같은 자바스크립트 프레임워크등이 SPA의 방식을 가지고 있습니다. CSR CSR (Client Side Rendering)은 렌..

동기 비동기 차이 동기 Synchronous 동기는 요청과 결과가 동시에 일어납니다. 요청을 하면 시간이 얼마나 걸리든 요청한 자리에서 결과가 주어져야 합니다. 동기방식은 직관적이고 순서에 맞춰 진행되는 장점이 있지만, 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있습니다. 비동기 Asynchronous 비동기 처리는 요청과 결과가 동시에 일어나지 않고, 응답을 즉시 처리하지 않아도 되므로 대기 시간 동안 다른 작업을 처리할 수 있습니다. 이는 자원을 효율적으로 활용할 수 있게 해주는 장점이 있지만, 동기 방식보다 복잡하고 구현이 어려울 수 있습니다. 블록/논블록은 기술적으로 명확히 구분 동기/비동기는 블록/논블록과 다르게 기술적으로 구분되지 않으며, 추상적인 구분 즉, 행위에 대한 이야기..

const [userArea, setUserArea] = useState(""); const [textArea, setTextArea] = useState(""); const [tweets, setTweets] = useState(dummyTweets); 구조 분해 할당 (Destructuring assignment)을 통해 변수와 함수를 할당하여 사용 const handleButtonClick = event => { // TODO : Tweet button 엘리먼트 클릭시 작동하는 함수를 완성하세요. // 트윗 전송이 가능하게 작성해야 합니다. const tweet = { id: tweets.length + 1, username: userArea, picture: "https://randomuser.m..

State, Props React에서 props와 state는 데이터를 다루는 개념입니다. 둘 다 JavaScript 객체이고 렌더링에 영향을 줍니다. props는 단방향 데이터 흐름의 리액트에서 상위에서 하위로의 데이터 전달을 위해 사용하고, state는 컴포넌트 내부에서 관리되는 데이터의 상태를 의미합니다. 좀 더 간단하게 설명하면 props는 함수에 전달하는 매개변수, state는 함수 내부에 선언된 변수 정도로 볼 수 있습니다. Props Props (Properties)는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 말합니다. 부모 컴포넌트로부터 받는 데이터이므로 자식 컴포넌트에서는 변경할 수 없습니다. 이는 한 컴포넌트의 속성과 같음을 의미합니다. const Text = ({text})..

SPA SPA는 Single Page Application으로 페이지가 한 개인 웹 애플리케이션을 의미하며, CSR(Client Side Rendering) 방식으로 렌더링 합니다. SPA는 기존 페이지에 컴포넌트화된 서브 페이지나 적절한 테이터만을 넘겨주어, 첫 요청 시에 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지 내부를 수정하는 방식을 사용합니다. 장점 단점 필요한 리소스만 부분적으로 로딩하여 성능에 좋다 초기 로딩 시간이 비교적 느리다 UI 개발을 빠르게 할 수 있다 검색엔진최적화가 어렵다 해당 부분만 수정이 가능하여 유지보수에 좋다 CSR 방식은 클라이언트측에서 사용자에 대한 정보를 저장하기에 보안 이슈가 있을 수 있다 컴포넌트별로 코딩을 하기 때문에 코드 재사용성이 좋다 리액트는 SP..

리액트 는 사용자 인터페이스(UI)를 구축하기 위한 선언적이고 효율적이며 유연한 자바스크립트 라이브러리이다. 리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트 해준다는 점과 선언적인 개발이 가능하게 된다. UI를 자동으로 업데이트하는 과정에서 Virtual DOM을 통해서 최적화를 구현한다. JSX (JavaScript Syntax Extension) 자바스크립트 확장 문법으로 자바스크립트와 HTML을 합쳐놓은 듯한 형태이다. 마크업을 편리하게 작성하기 위한 문법으로 HTML에서 마크업 하고, 자바스크립트에서 로직을 연결하고 붙이는 과정을 하나의 자바스크립트 파일 내에서 편리하게 처리할 수 있다. JSX로 작성한 코드는 자바스크립트가 인식할 ..