구글 소유, 개발의 클라우드기반 모바일 및 웹 애플리케이션 개발 플랫폼이다.프론트단에서 별도의 백엔드 없어 데이터 저장, 조회 등의 작업은 물론회원가입과 로그인 등의 기능을 사용할 수 있도록 지원해준다.realtime db : 실시간으로 데이터가 동기화 되는 데이터베이
웹 브라우저에서 제공하는 클라이언트단 데이터 저장소객체와 같이 key : value의 구조를 띤다.데이터 보존 : 웹이 새로고침되거나 나갔다가 다시 방문해도 데이터가 유지된다.도메인별 데이터 저장 : 도메인별로 데이터가 저장되며, 같은 도메인끼리는 데이터가 공유된다.용
useEffect()는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 라이브러리의 훅이다.기본 구조dependency array의 dependency의 상태가 변경이 감지되면 useEffect내의 si
useState는 state의 상태를 변경하는 리액트 라이브러리의 훅으로 리액트의 훅들 중 가장 기본적이고 가장 많이 사용하는 훅이다.기본 구조state는 가변적인 값으로써 state의 상태를 변경하기 위해서는 결코 state를 직접 변경하지 않는다. 선언한 setSt
Js의 반복문의 일종.배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과들로 새로운 배열을 만들어 반환한다.for과 while 등과 같은 다른 반복문과 다르게 따로 조건을 입력할 필요 없이 배열의 길이만큼 실행된다.배열의 길이만큼, 모든 요소를 다 사용하기에
Js를 포함한 다양한 개발 언어들은 다양한 조건문을 사용한다.그중에서도 삼항 연산은 명시적이고 효율적이기에 많이 사용되는 조건문이다.삼항연산과 그를 통한 조건부 렌더링에 대해 알아보자.Ternary Operation, 조건문의 기본인 if else문을 대체하기 위해 많
property의 복수형인 properties의 축약형으로,Js에서 컨포넌트에 전달할 정보를 가진 객체의 역할을 한다.위와 같이 컴포넌트에 속성과 값을 넣어주는 형태로 전달, 객체이기에 props.속성의 형태로 사용할 수 있다.props에 문자열을 전달할 때에는 속성=
웅서트 스터디 세 번째 주제 - Jest & PlaywrightJest와 Playwright에 대해 간략하게 알아보자!
웅서트 프론트엔드 스터디, 두 번째 주제 - 리액트 쿼리리액트 쿼리를 익혀 API를 편하게 핸들링 해보자!!리액트 애플리케이션에서 상태와 데이터, 비동기 처리를 용이하게 해주는 라이브러리이름처럼 리액트 환경에서 서버/클라이언트 스테이트 관리를 포함한 다양한 비동기 작업
리덕스의 꽃, 미들웨어 리덕스에 대해 알아보기 시작하였다면 여기서 멈출 수 없지. 리덕스의 핵심, 미들웨어에 대해 알아보자. Before - 빌드업 우리는 무엇을 위해 프론트엔드를 공부하는가? 계산기를 만들기 위해서? 아니 투두리스트를 만들기 위해서? 아
리덕스! 최근 동아리에서 스터디를 진행하게 되었다. 그 첫 번째 주제로 리덕스에 대해 공부하기로 하였다. 지금부터 리덕스에 대해 알아보자. Before - 상태관리 라이브러리 리덕스에 대해 알아보기 전에 상태관리 라이브러에 대해 알아보았다. 아래를 통해 상태관리
상태관리 라이브러리 리덕스 공부하면서 상태관리 라이브러리에 대해서도 정리하게 되었다. 상태관리 라이브러리에 대해 알아보자 What - 상태관리 라이브러리란 무엇인가 이름 그대로 상태를 관리하는, 즉 state 관리를 목적으로 하는 라이브러리이다. Why - 상태관
배열을 보완하는 컬렉션(collection)다수의 데이터를 쉽고 효과적으로 처리할 수 있는 표준화된 방법을 제공하는 클래스의 집합컬렉션 프레임워크는 인터페이스를 통해 구현된다.데이터를 저장하는 자료 구조에 따라 다음과 같은 핵심이 되는 주요 인터페이스들을 정의하고 있다
JSX > Javascript 의 확장문법 JS + XML 의 형태 표준 Js 문법은 아님 사용 함수 내에 html 을 포함시킬 수 있다. html 태그 내에 동적으로 변수 할당이 가능하다. 컴파일링 JSX로 작성한 코드는 별도의 변환 과정이 필요하다. 위
Rest 파라미터는 말 그대로 Rest의 역할을 하는 함수 파라미터이다. ES6 에서 처음 도입된 것으로, 함수의 파라미터에 쓰여서 뒤에 남는 요소들을 배열로 받아 준다.a에 1, b에 2가 할당되고, 나머지 3, 4, 5 는 ...rest가 받아서 배열로 나타내준다.
Destructuring은 배열이나 객체의 구조(속성)을 분해(해체)하여 그 값을 변수에 담을 수 있게 하는 ES6 문법이다.Destructuring은 Array(배열) Destructuring와 Object(객체) Destructuring으로 나누어져있다.배열에 사용