리드미 몬스터 서비스가 궁금하다면!서비스 둘러보기 : https://www.readme-monster.com/깃허브 둘러보기 : https://github.com/Readme-Monster/readme-monster/wiki 🏃🏻♂️ 시작하기사용자들이 자유롭게 피드백을 남길 수 있는 공간이 필요했습니다. 익명성을 보장하여 사용자의 직접적인 피드백을 듣기 위함입니다. 아래는 익명게시판 완성된 페이지 이미지 입니다.사용자는 게시판에 댓글을 남길 수 있으며, 댓글 목록은 실시간으로 업데이트됩니다. Firebase Firestore를 사용하여 데이터를 저장하고 불러옵니다.1. Import 및 초기 설정import React, { useState, useEffect } from "react";import {..
📌애플리케이션 등록 먼저, 카카오 개발자 페이지에서 애플리케이션을 등록해야 합니다. 등록하는 방법은 아래 링크를 참고하자. 카카오 로컬 API 시작하기 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 📌카카오 로컬 API Javascript SDK 설치 카카오 로컬 API를 사용하기 위해서는 Javascript SDK를 설치해야 한다. 'npm' 패키지 매니저를 사용하여 설치하자. npm install kakao-sdk 📌주소 검색 컴포넌트 구현 import React, { useState } from 'react'; import { KakaoM..
React Fragments React에서 컴포넌트가 여러 엘리먼트를 반환하도록 사용하는 것이 일반적인데, Fragment는 DOM에 의미 없는 div를 사용하지 않고 여러 하위 노드들을 그룹화해서 사용할 수 있습니다! render() { return ( ); } 예를 들어 Table과 테이블 아래의 Column을 세팅해주는 컴포넌트가 있다고 가정합니다. class Table extends React.Component { render() { return ( ); } } class Columns extends React.Component { render() { return ( Hello World ); } } 이때 Table의 출력결과는 아래와 같이 나옵니다. Hello World 결과를 보면 tr 아래에..
3. state 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. Props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꾸어주어야 한다. 예를 들어 현재 상황에서는 App 컴포넌트에서 MyComponent를 사용할 때 props를 바꾸어 주어야 값이 변경될 수 있는 것이다. 반면 myComponent에서는 전달받은 name 값을 직접 바꿀 수 없다. 리액트에는 두 가지 종류의 state가 있습니다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state입니다. 3.1. 클..
1. 개념 React에서 자주 사용되는 Props와 State의 개념과 차이점입니다. Props란, 컴포넌트가 가지고 있는 프로퍼티로 자식 컴포넌트가 부모 컴포넌트로부터 값을 받고 싶을 때, props를 통해 받아올 수 있습니다. 일반 객체 지향에서 특정 function의 인자(parameter)로 생각하면 좋습니다. 위는 객체 데이터를 표시하거나 변경 사항등을 알리기 위해 사용되며 읽기전용이므로 값을 수정할 수 없다는 특징을 가지고 있습니다. State는 private한 속성을 지니며 컴포넌트에 의해 완전히 제어되고 있다는 특징을 가지고 있습니다. 즉, 컴포넌트 내부에서만 사용할 수 있는 속성인 것이고, Local State라고도 부릅니다 2. Props 우선 MyComponent 컴포넌트를 수정하여 ..
퇴사를 하고 vue개발자로 지내다가 이직을 준비해야 하는 시점에서 시간이 남을 때 리액트 공부를 해두는 것도 좋을 것 같다는 생각이 들어 리액트 사이드 프로젝트를 합류하게 되었다. 공부할 겸 정리하려고 한다. 1. 리액트란? 웹페이지에 인터렉션이 자주 발생하고, 동적인 UI를 기존의 Javascript만으로 표현하면 개발과 수정이 일어날때마다 DOM을 직접 수정해야 하기 때문에 메모리 누수와 코드가 난잡해지는 문제가 발생하곤 한다. 처리해야 할 이벤트들도 다양해지고, 관리해야 할 상태 값이나 DOM의 구조도 다양해지게 된다면 이에 따라 처리해야하느 ㄴ업데이트 규칙도 복잡해지기 마련이다. 이러한 문제점을 개선하기 위해 페이스북 개발팀에서 만든것이 바로 리액트이다. 페이스북 개발팀은 이를 해결하려고 어떤 데..
- Total
- Today
- Yesterday
- http
- 웹훅
- 항해솔직후기
- react
- props
- focus와blur
- Repository pattern
- 더미데이터
- Vue.js
- 항해플러스프론트엔드
- 빅오표기법
- useState
- 항해플러스후기
- Http통신
- React18v
- 레포지토리패턴
- loadbalancer
- 이벤트버스
- 알고리즘
- store.js
- 이벤트리스너
- 디바운싱
- vue3
- Vuex
- vue.js3
- reactnative
- event종류
- eventListner
- 로그인 인증
- JWT토큰
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |