리액트(React), 뷰(Vue), 앵귤러(Angular)는 각각 JavaScript 기반의 프론트엔드 프레임워크 또는 라이브러리로, 모두 웹 애플리케이션을 개발하기 위한 도구로 사용돤다. 하지만 각각은 고유한 특징과 철학을 가지고 있다. 러닝 커브 (Learning Curve) : 학습곡선 리액트: 자유도가 높아 초기 학습 곡선이 다소 높을 수 있다. (시간과 노력이 필요하다.) 뷰: 진입 장벽이 낮아 빠르게 학습할 수 있다. 앵귤러: 기능이 많고 복잡한 특성 때문에 학습 곡선이 다소 가파르다. (기울기가 크다는 의미로 학습 초기에 어려움이 있다.) 문법 및 구조 리액트: JSX(JavaScript XML)라는 문법을 사용하여 컴포넌트를 정의하며, 가상 DOM(Virtual DOM)을 활용하여 성능을 ..

토큰 (Token) 이란? 토큰은 정보를 나타내는 작은 조각으로, 보통 문자열 형태로 표현된다. 컴퓨터 시스템에서 토큰은 인증, 권한부여, 데이터 교환등 다양한 컨텍스트에서 활용된다. 토큰기반 인증방식 (Token-Based Authentication) 사용자 인증을 위해 사용되는 방식중 하나로, 인증상태를 서버에서 관리하는 대신, 토큰이라는 정보조각을 사용하여 인증을 처리한다. 토큰은 일반적으로 JSON Web Token (JWT)포맷을 따르며, 클라이언트와 서버간 통신에서 사용된다. 토큰기반 인증방식 작동방식 로그인 (Login): 사용자가 애플리케이션에 로그인을 시도한다. 이때 사용자가 제공한 신원 정보(일반적으로는 아이디와 비밀번호)를 서버에 제출한다. 인증 (Authentication): 서버는..

React 라이프 사이클 리액트는 컴포넌트단위로 생성되는데, 이 컴포넌트들은 생명주기를 갖고있다. 생성부터 시작하여 업데이트, 소멸 되는 과정을 라이프사이클 이라고 한다. 리액트 v16.3 이전에는 클래스 컴포넌트의 라이프사이클이 메서드로 주로 다뤄졌지만, v16.3 이후부터는 함수 컴포넌트에서도 라이프사이클에 대한 기능이 Hooks를 통해 도입되었다. 함수 컴포넌트 함수형 컴포넌트는 리액트의 함수 컴포넌트 기능과 Hooks를 활용하여 UI를 구성하는 방식이다. 함수컴포넌트 예시코드 import React, { useState } from 'react'; function FunctionalComponent() { const [count, setCount] = useState(0); return ( Cou..

useCallback과 useMemo의 차이점 결론 부터 말하자면 useCallback과 useMemo는 모두 컴포넌트를 최적화하기 위해 사용하는 Hook 이다. 차이점은 useCallback은 함수를 캐싱하고, useMemo는 결과값을 캐싱한다. useCallback useCallback은 함수를 기억하는 Hook으로 2개의 인자를 받는다. 첫번째 인자는 새로만들 함수의 내용이 들어오고, 두번째 인자는 함수가 의존하는 값이 들어있는 배열이 들어온다. 두번째 인자가 변경되지 않으면 기존의 함수를 재사용하게 된다. 예를 들어 다음과 같은 코드가 있다. function Example({ onClick }) { const handleClick = () => { console.log('button clicked..

Application을 만들때 가장 중요한 통신에는 동기와 비동기가 있다. 그의 차이점은 여기서 확인하자. https://strap.tistory.com/75 동기, 비동기란? 동기(Synchronous) 동기방식은 어떠한 일을 처리하는 동안 다음 작업이 수행하지 못하고 첫번째 작업이 끝난 후 다음동작이 가능한 것을 말한다. 순서대로 하나씩 작업을 처리할 수 있는 방식을 말 strap.tistory.com 웹 비동기 통신 종류중 JS에서 사용되는 HTTP 통신을 알아보자. Ajax (Asynchronous JavaScript And XML) Ajax는 JavaScript를 사용하여 서버로 데이터를 보내고, 서버에서는 XML, JSON 등의 데이터 형식으로 응답한다. 이 데이터를 사용하여 웹 페이지의 일부..

오버로딩 ( Over Loading ) 오버로딩은 한 클래스 내에 여러 같은 이름의 메소드르 정의해, 프로그램의 가독성을 증가시키는 방법이다. 오버로딩의 특징 메소드 이름이 같다 파라미터 개수가 달라야한다 파라미터 갯수가 같다면, 데이터 타입이 달라야한다. public class Overloading{ void test(){ System.out.println(" 매개변수 없음 "); } void test(int a, int b){ System.out.println(" 매개변수 없음 " + a + b); } void test(string abc){ System.out.println(" 매개변수 없음 " + abc); } } 이렇게 메소드의 이름을 같게하고 매개변수의 갯수를 다르게 혹은 타입을 다르게 선언하..

REST API란? 쉽게 설명하면 REST API는 인터넷에 연결되어 있는 애플리케이션 과 서버가 통신하기 위해 정해놓은 규칙이다. 형식에 맞춰 정보를 요청하면 그에 해당하는 정보를 받아올 수 있게 도와주는 통신을위한 아키텍처 스타일 중 하나이다. Rest API는 Representational State Transfer API의 약어로, REST 아키텍처 스타일을 따른다. GET, POST, PUT, DELETE 등 표현의 개념을 사용하여 클라이언트와 서버간의 통신을 설계한다. 비슷한 용어로 RESTful API가 있다. RESTful API란? RESTful API는 쉽게말해 REST API를 더욱 엄격하게 지키는 API를 이야기 하며, 표현 뿐만 아니라 HTTP 상태 코드사용, 캐싱등의 RESTfu..

MVC (Model - View - Controller) 소프트웨어 개발에서 많이 사용되는 소프트웨어 디자인 패턴중 하나로, 애플리케이션의 구성 요소를 세가지 역할로 나누어 관리함으로써 개발의 유지보수성과 확작성을 높이는 모델이다. Model 애플리케이션의 데이터를 관리하는 역할을 담당 데이터의 구조와 접근 방식을 정의, 데이터 변경에 따른 로직도 포함 View 애플리케이션의 사용자 인터페이스를 담당 데이터의를 보여주는 역할을 하며 UI와 데이터의 상호작용도 포함됨. Controller Model과 View 간의 상호작용을 관리하는 역할을 담당함 사용자의 입력에 대한 처리와 Model의 데이터 업데이트 등을 수행함. Flux 패턴 Facebook에서 개발된 소프트웨어 아키텍처 패턴중 하나로, React와..

React의 SPA 란? SPA (Single-Page-Application)는 어플리케이션을 단일 페이지로 구성하는 것을 의미한다. 처음 웹페이지 전체가 한번만 로드되고, 이후에 사용자 인터페이스가 동적으로 변경되면서 필요한 데이터만 서버에서 가져오는 방식으로 동작한다. React 의 SPA는 여러개의 컴포넌트를 조합하여 구성되는데 각각의 컴포넌트는 독립적으로 작동하며, 필요에 따라 다른 컴포넌트와 상호작용 한다. 쉽게 설명하면 Web에서 변경되어야할 부분(컴포넌트 단위)만 리 랜더링 되는것을 말한다. Android의 fragment와 차이점 이러한 컴포넌트들은 어플리케이션의 fragment와 비슷한 개념이지만, 더욱 동적이고 재사용성이 높은 방식으로 작동한다. React의 SPA는 React Rout..

태그와 태그는 모두 클릭 가능한 요소이지만, 차이점이 존재한다. 태그 태그 목적 하이퍼링크 생성 클릭 가능한 버튼 생성 탭 순서 탭 키를 이용한 포커스 이동 시 고려됨 탭 키를 이용한 포커스 이동 시 고려되지 않음 전달되는 값 href 속성을 이용하여 다른 페이지 또는 문서로 이동 클릭 이벤트를 처리하기 위해 자바스크립트 함수 또는 폼 제출 사용 스타일 밑줄과 파란색으로 기본 스타일 지정됨 기본 스타일이 없으며, 개발자가 스타일을 직접 지정해야 함 Anchor 태그 Anchor 태그는 어디론가 이동할 수 있는 링크나 페이지내의 특정 영역으로 이동할 때 사용한다. 엔터키로 동작하며 내부엔 text contents 가 있어야한다. 또한 href 가 없이 javascript로 작동하게 하면 안된다는 특징이 있..