uhee-12의 등록된 링크

키자드에 등록된 총 186개의 포스트를 확인하실 수 있습니다.

Tistory

[Express] 3 Layer Architecture 적용하기

express로 코드를 짜서 깃에 올리기 전에 3계층 레이어를 적용하면 좋다는 말에 여러 글을 보고 정리한 글이다. 1. 3 layer architecture란? 3 layer architecture는 비즈니스 로직을 분리하는 것을 목적으로 한다. Controller, Service Layer , Data Access Layer 세개의 층으로 나뉜다. Controller : client와의 통신에서 필요한 req, res를 다룬다. Service layer : business logic을 Data Access Layer은 DB와의 직접적인 통신을 한다. Business logic : client와 Data Acees Layer 사이에서 데이터를 관리한다. 2. 3 Layer Architecture을 적용..

원문보기 내부링크
Tistory

axios 모듈화하기

프론트랑 백엔드단에서 데이터를 가져올 때 axios모듈을 많이 사용한다. 그런데 axios를 쓰게 되면, url을 사용해서 데이터를 가져오고 넘겨주고 해야 한다. 만약 url이 같다면 똑같은 코드를 계속적으로 쓰게 된다. axios를 모듈화하여 사용하면 코드를 한결 덜 길게 사용할 수 있다. axios 기본 코드 import axios from 'axios'; function Other() { const [data, setData] = useState([]); useEffect(() => { useEffect(() => { axios.get("").then((res) => setData(res.data)); }, []); return ( {JSON.stringify(data.userId)} ) } exp..

원문보기 내부링크
Tistory

[React] 무한스크롤 구현하기

https://velog.io/@yiyb0603/React에서-무한스크롤-구현하기-8rdmbhtj 위의 사이트를 따라하며 쓴 글입니다. 1. 파일 생성 및 코드 작성하기 임의의 폴더를 만들어 파일을 생성한다. InfiniteScroll.js을 만들어준다. InfiniteScroll.js import React, { useState, useCallback, useEffect } from 'react'; import { getPostList } from './postList'; const InfiniteScroll = () => { const [page, setPage] = useState(1); const [posts, setPosts] = useState(getPostList(1)); return (..

원문보기 내부링크
Tistory

[React] 콘솔에 코드 출력시 두개의 콘솔 뜰 때 해결

문제 발생 console.log(data); 위와 같은 코드를 쳤을 때 콘솔에 두개로 출력이 되었다. ️ 문제 해결 이러한 현상은 StrictMode 때문이다. React로 만든 파일에 들어가면 index.js 파일이 존재한다. 아래는 index.js 파일이다. // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); roo..

원문보기 내부링크
Tistory

[React] 간단한 검색 기능 구현하기

검색 기능은 한번도 구현해본 적이 없는데 우연히 어떤 글을 보다가 따라하게 되었다. 색깔 배열 우선은 검색 기능을 구현하려면 검색할 대상이 있어야 하기 때문에 배열을 만들어 색깔 목록을 만들어주었다. const colorList = ["red", "orange", "yellow", "green", "blue", "purple"]; 색깔 목록을 만들어서 div태그로 보여주고자 한다. 컬러 목록 보여주기 ColorData.js import React, { useState } from "react"; function ColorData() { const colorList = ["red", "orange", "yellow", "green", "blue", "purple"]; return ( {colorList.m..

원문보기 내부링크
Tistory

[React] Scroll Progressbar 만들기

지금 작성하는 Scroll Progressbar는 아래의 사이트를 따라하여 만들었습니다. https://velog.io/@yiyb0603/React에서-Scroll-Progressbar-만들어보기 1. 컴포넌트 생성하기 components라는 폴더를 만들어, ScrollProgress파일을 만들어 이곳에서 progressbar를 만들어줄 것이다. 그에 대한 style을 css파일 넣어 따로 관리해준다. 2. 기본 셋팅하기 1) components/ScrollProgress.js import React, { useState, useCallback, useEffect, useRef, MouseEvent, } from "react"; import "./ScrollProgress.css"; const Scr..

원문보기 내부링크
Tistory

[React] Redux(리덕스)란 무엇인가?

: 상태관리 라이브러리redux 등장배경MVC패턴 형식으로 state가 변화되면 Model, View, Controller에 이벤트가 발생하고 값이 변화하는 구조였다. 이를 양방향 데이터 흐름이라고 한다. 이는 복잡하며 데이트 흐름이 한번에 판단하기 힘들다. 이러한 단방향 데이터 흐름이 있다.즉 redux이다. redux는 MVC패턴의 단점을 개선하는 것이 목적이다.리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며, 글로벌 상태 관리를 쉽게 할 수 있다.Redux의 3가지 원칙리덕스 사용을 위해서는 다음의 3가지 원칙을 지켜야 한다.단일 스토어 : 하나의 애플리케이션 내부에는 하나의 스토어를 만들어 사용해야 한다. 여러 개의 스토어를 만들어 사..

원문보기 내부링크
Tistory

[React] SWR의 개념 알아보기

개념 SWR은 vercel에서 제작한 모듈이며, 데이터를 가져올 때 쓰인다. vercel의 SWR 공식문서 "SWR"이라는 이름은 HTTP RFC 5861(opens in a new tab)에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다.그리고 UI는 항상 빠르고 반응적입니다. 장점 단 한 줄의 코드로 프로젝트 내의 데이터 가져오기 로직을 단순화할 수 있다. 빠르고, 가볍고, 재사용 가능한 데이터 가져오기 내장된 캐시 및 요청 ..

원문보기 내부링크
Tistory

[React] SWR을 활용하기

글을 쓰다가 글의 길이 길어져 활용하는 부분은 다른 페이지로 만들어 작성하고자 한다. SWR 활용하기 우선은 파일을 새로 만든다. 아래의 코드를 작성하여 새로운 react 파일을 만든다. npx crate-react-app {생성하고자 하는 파일 이름} 폴더 셋팅 위와 같이 폴더를 셋팅하였다. pages/Main.js import React from "react"; const Main = () => { return Main; }; export default Main; pages/Detail.js import React from "react"; const **Detail** = () => { return **Detail**; }; export default **Detail**; pages/index.js ..

원문보기 내부링크
Tistory

[React] 로그인 시간 설정하기

로그인을 구현하기만 하면 될 줄 알았더니 몇일간 로그인이 유지된다는 말을 듣고 수정해야겠다는 생각이 들어 홈페이지를 봤다. 그런데 나는 매번 로그인하고 로그아웃을 해서 몰랐던 것 같다. 그래서 localstorage에 로그인 정보를 입력하고 그에 대한 값을 삭제하지 않아 계속 로그인이 유지되는 것이었다. 이에 대해 글을 써보려고 한다. LocalStorage 홈페이지를 구성하다보면 cookie나 session등 저장소를 저장하게 된다. 이도 하나의 종류이며 만료시간은 존재하지 않는다. 그러나 Javascript를 사용하여 TTL(Time to Live)을 추가하여 일정 시간이 경과한 후 localStorage의 항목을 무효화할 수 있다. 만료시간 설정 후 저장 function setWithExpiry(k..

원문보기 내부링크
Tistory

[React] PropTypes 개념 알아보고 활용하기

1. 사용 이유 공식문서에 따르면 앱이 커짐에 따라 타입체킹을 통해 많은 버그를 잡을 수 있습니다. 일부 어플리케이션에서 Flow나 TypeScript같이 어플리케이션 전체에서 타입체크를 할 수 있는 자바스크립트 확장을 사용할 수도 있습니다. 하지만 이런 것들을 사용하지 않는다면 React에서 빌트 인 타입 체킹이 가능합니다. 컴포넌트의 props에서 타입을 체크하고싶다면 특별한 propTypes 속성을 할당할 수 있습니다. 위의 같은 이유가 대표적이다. 자바스크립트의 유연한 특성 때문에 작성이 편한 반면, 파일이 많아지면 생산성이 떨어진다는 점 때문에 타입스크립트를 많이 사용한다. 자바스크립트를 이용해 앱을 개발해야 하는 상황에서는 이러한 문제점을 피하기 위해 PropTypes를 활용하는 것을 권장한다..

원문보기 내부링크
Tistory

[React] useReducer 개념 살펴보기

reducer : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다. function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 되게 된다. action : 업데이트를 위한 정보이다. 주로 type값을 지닌 객체 형태로 사용되기도 한다. useReducer useReducer를 쓸려면 reducer의 구조를 알아야 되서 살펴보았다. useReducer()함수는 첫번째 인자로 넘어오는 reducer 함수를 통해 컴포넌트의 상태(state)가 행동(action)에 따라 어떻게 변해야하는지를 정의한다..

원문보기 내부링크
Tistory

[Flutter] flutter 3.7에 따른 element embedding 활용하기

2023년 1월 25일 유튜브 Flutter 공식 채널에서 Flutter forward 2023이 진행되었다. Flutter는 3.7.0로, Dart는 3.0으로 업데이트가 되었다. Element Embedding의 개념 Flutter 콘텐츠를 모든 표준 웹에 추가할 수 있습니다. 이러한 방식으로 통합하면 Flutter는 단순히 웹 구성 요소로 전환되어 웹 DOM과 원활하게 통합되고 CSS 선택기 및 변환을 사용하여 부모 Flutter 개체의 스타일을 지정할 수도 있습니다. → 플러터에서 제공한 웹을 보았을 때, 웹에서 플러터앱을 사용할 수 있는 기능을 말한다. Element Embedding을 사용할 수 있는 웹 https://flutter-forward-demos.web.app/#/ 위의 사이트는..

원문보기 내부링크
Tistory

[React] 부모 컴포넌트에서 자식 컴포넌트에 값 전달하기

navigate도 많이 쓰고 여러가지 쓰는데 부모 컴포넌트에서 자식 컴포넌트에 값 전달하는 방법도 있을 것 같아, 찾아보다가 정리하게 되었다.props의 개념상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 수단.하위 컴포넌트에서 상위 컴포넌트가 전해준 값에 접근을 할 수 있게 한다.하위 컴포넌트에서 상위 컴포넌트로 값을 전달할 수 없다.props의 사용1. 상위 컴포넌트에서 하위 컴포넌트로 값 전달1) 상위 컴포넌트(부모 컴포넌트)function 함수=()=>{ const [변수, set변수] = useState('')}const 상위페이지이름 =()=>{ }2) 하위 컴포넌트(자식 컴포넌트)전달 받은 값 : {props.value}값이 전달되는 방식상위 컴포넌트에서 넘겨주고자 하는 값을 선언한다. ..

원문보기 내부링크
Tistory

[Flutter] FocusNode과 TextEditingController 개념 알아보기

텍스트 필드가 선택되고 input에 입력을 하게되면 focus, 즉 초점이 맞춰진다. 포커스 관리는 직관적인 흐름으로 양식을 만들기 위한 기본 도구입니다. 예를 들어 텍스트 필드가 있는 검색 화면이 있다고 가정합니다. 사용자가 검색 화면으로 이동할 때 검색어의 텍스트 필드에 포커스를 설정할 수 있습니다. 이를 통해 사용자는 텍스트 필드를 수동으로 누를 필요 없이 화면이 표시되는 즉시 입력을 시작할 수 있습니다. 표시되는 즉시 focus 주기 앱에서 텍스트 필드가 표시되자마자, focus를 주려면 이 autofocus속성을 사용해야 한다. TextField( autofocus: true, ); 버튼을 누를 때 focus 주기 1) FocusNode 생성하기 class MyCustomForm extends ..

원문보기 내부링크
Tistory

[Flutter] safeArea 개념 알아보기

개념 충분한 패딩(들여쓰기)으로 자식(child)을 삽입하는 위젯이다. 예를 들어, 화면 상단의 상태표시줄, 노치, 카메라영역등이 존재하면 해당 영역을 포함하여 패딩처리를 수행 합니다. 최소 패딩이 지정된 경우에는 최소 패딩 또는 안전 영역 패딩 중 더 큰 패딩이 적용됩니다. 사용이유 아래의 왼쪽 사진처럼 ui를 제대로 보여지지 않는 경우가 생길 수 있다. 그럴 경우를 대비하여 safeArea로 감싸주는 것이다. 옵션 설명 위의 사진에 보면 SafeArea의 옵션들이 나와있다. key : key를 설정할 수 있다. top, bottom, right, left 에 boolean값으로 SafeArea를 개별적으로 설정할 수 있다. minimum : SafeArea를 지키기 위한 최소한의 padding을 설정..

원문보기 내부링크
Tistory

[Flutter] linkify와 url_launcher로 텍스트와 링크 연결하기

linkify 개념 : 텍스트 URL과 이메일을 Flutter용 텍스트의 클릭 가능한 인라인 링크로 바꿔준다. linkify 설치하기 pubspec.yaml파일에 들어가서 종속성에서 다음 항목을 추가해준다. 항상 말하지만 들여쓰기를 주의해야 한다. dependencies: flutter_linkify: ^5.0.2 사용하기 import 'package:flutter_linkify/flutter_linkify.dart'; Linkify( onOpen: (link) => print("Clicked ${link.url}!"), text: "Made by ", ); url_launcher 개념 : 브라우저/OS에서 링크를 열 수 있도록 도와준다. url_launcher 설치하기 dependencies: url_..

원문보기 내부링크
Tistory

[Flutter] Hero 개념 알고 사용하기

: 위젯 애니메이션이다. 한 화면에서 다른 화면으로 넘어갈 때, 위젯에 애니메이션 효과를 준다. 이 방법은 두 화면을 이어주는 시각적 연결 고리를 만들어 준다. 1. 같은 이미지를 보여주는 2개의 화면 만들기 같은 이미지를 두 개의 화면 모두에 보여줘야 한다. 첫 번째 화면에서 사용자가 이미지를 탭하면 두 번째 화면으로 전환되면서 애니메이션이 발생하게 된다. class MainScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Main Screen'), ), body: GestureDetector( onTap: () { Navigat..

원문보기 내부링크
Tistory

[Flutter] DefaultTabController 개념알고 사용하기

공식문서에 따르면DefaultTabController는 TabController 를 TabBar 또는 TabBarView 와 공유하는 데 사용되는 상속된 위젯입니다 . 명시적으로 생성된 TabController를 공유하는 것이 편리하지 않을 때 사용됩니다. 그 이유는 탭 바 위젯이 stateless 부모 위젯 또는 다른 부모 위젯에 의해 생성되기 때문입니다.DefaultTabControllerlength : 필수로, 아이템의 갯수가 들어가야 한다. 탭바의 갯수를 넣으면 된다.child : 필수로, 자식이 들어가야 한다. 활용 home: DefaultTabController( length: 4, child: Scaffold( body: TabBarView(..

원문보기 내부링크
Tistory

[Flutter] FlutterFire 사용 및 오류 해결하기

FlutterFire 사용하기 Google 에서 Flutter를 조금 더 강력하게 지원한다. FlutterFire라는 이름으로 Flutter를 위한 firebase 기능과 문서를 제공한다. Flutter에서 Firebase 기능을 사용하기 위해 firebase를 초기화 하는 방법이 변경되었다. FlutterFire CLI 사용 Firebase 서비스를 사용하려면 먼저 FlutterFire를 초기화해야한다. FlutterFire를 초기화하려면 클래스 initializeApp에서 메서드를 호출해야 한다. 이를 위해서 다음의 CLI 명령어를 실행해야 한다. dart pub global activate flutterfire_cli cli를 설치하고, configure를 설치한다. flutterfire confi..

원문보기 내부링크
Tistory

[Flutter] Vscode로 flutter 코딩할 때 셋팅해야 하는 것

VSCode로 flutter를 코딩하다보면 불편한 점이 존재한다. 그래서 VSCode로 코딩했을 때 불편한 점을 줄이고자 간단한 셋팅을 하고자 한다. 1. warning 줄 없애기 1) 설정 전 flutter 코딩을 하다보면 위의 사진과 같이 파란줄이 표시된다. 이는 warning인데, 거의 const를 붙이라는 warning이다. 2) 설정 하기 2-1) 명령 팔레트 들어가기 warning을 없앨려면 VSCode 왼쪽 하단에 톱니바퀴 즉 설정을 눌러 명령 팔레트를 누른다. 혹은 ctrl + shift +p 단축키를 눌러도 된다. 그리고 setting이라고 쳤을 때, 아래 사진과 같이 나오면 이를 클릭한다. 간혹 아래와 같이 두개가 나오는데, (JSON)이 아닌 (JSON)이 없는 것을 누르면 안된다. ..

원문보기 내부링크
Tistory

[Flutter] FutureBuilder 알아보기

: 비동기 함수에서 리턴하는 Future 받아 먼저 Build하고 비동기 함수 계산이 완료되면 실제 리턴 값을 보여준다. FutureBuilder를 쓰는 이유 API와 통신을 할 때 서버와 모바일 기기는 데이터를 대표적으로 JSON으로 통신한다. 데이터 단위가 크면 클수록 서버에서 기기로 송신하고 수신하는 데 시간이 오래 걸린다. 이 때 모바일 기기 입장에서 다른 일도 많은데 데이터 수신만 기다릴 수 없다. 따라서 기기는 다른 일을 먼저 처리하고 만약 데이터가 완전하게 도착하면 그 때 미뤄왔던 일을 처리한다. 앱 사용자들은 이 모든 과정을 로딩 화면으로 인식한다. 서버에서 데이터를 받아올 때 어플리케이션 측에서는 정보를 언제 다 받는지 알수가 없다. 그렇기 때문에 future의 상태를 확실히 확인하는..

원문보기 내부링크
Tistory

[Flutter] Shared preferences 알고 사용하기

: 상대적으로 적은 양의 키-값 데이터를 저장하려고 할 때 사용한다. 사용하고 보니 웹의 localStorage와 비슷하다. Shared preferences 알아보기 1. 의존성 추가하기 https://pub.dev/packages/shared_preferences/install 위의 사이트에 들어가 최신 버전의 플러그인을 가져온다. 그리고 flutter 파일에서 pubspec.yaml 파일을 찾는다. 아래와 같이 shared_preferences 플러그인을 붙여넣으면 된다. 항상 의존성을 추가하고자 할 때는 들여쓰기를 주의해야 한다. dependencies: flutter: sdk: flutter shared_preferences: "" 2. 데이터 저장하기 SharedPreferences 클래스..

원문보기 내부링크
Tistory

[Flutter] showDatePicker 사용하기

DatePicker는 날짜를 선택하는 모달을 표시한다. DatePicker의 경우 showDatePicker 메소드를 호출해서 DatePicker 표시할 수 있다. 변수 알아보기 Future _selectDate() async { DateTime? picked = await showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime(2016), lastDate: DateTime(2029)); builder: (BuildContext context, Widget? child) { return Theme( data: ThemeData.dark(), //다크 테마 child: child!, ); }, if (picked ..

원문보기 내부링크
Tistory

[Flutter] static, outlinedButton 설정하기

static static이란 일반 객체를 만들 때 같이 메모리에 저장하는 것이 아닌 따로 메모리를 두어 static 구문을 객체가 공유하여 사용할 수 있게 해주는 구문이다. 즉, 인스턴스에 귀속되지 않고, 클래스 통째로 귀속이 되는 것을 의미한다. class Family{ static String House; String name; Family( String name, ):this.name = name; void printMySweetHome(){ print('저는 ${this.name}이고, ${House}에 살고 있습니다.'); } } Family클래스에서 House변수에 static을 사용하여 선언하였고, name변수는 static을 사용하지 않고 선언하였다. printMySweetHome()함수에..

원문보기 내부링크
Tistory

[GetX] 상태 관리 알고 사용하기

Flutter에서 상태를 관리하기 위해서 Bloc패턴이나 Provider와 같은 패키지를 사용하게 된다. 그러나 시간이 흘러 GetX가 나와 사람들이 많이 쓰는 추세이다. GetX GetX설치와 관련해서는 따로 정리해놓은 글이 있기 때문에 이를 첨부해놓겠다. 2023.02.24 - [Flutter] - [GetX] getX 사용해서 snackbar 구현 [GetX] getX 사용해서 snackbar 구현 snackbar는 앱에서 수행했거나 앞으로 수행할 작업을 사용자에게 알려주는 UI 요소이다. 일시적으로 화면 하단에 나타난다. getX 사용하기 1. 종속성 추가 flutter파일에 pubspec.yaml파일이 존재한다. 여 uhee-12.tistory.com 상태 관리 내 경우에는 GetX없이 부모 위..

원문보기 내부링크
Tistory

[Flutter] tableCalendar에 마크표시 오류 고치기

todo앱 만들면서 캘린더에 마크 표시가 안되어 해결방법을 적어보려고 한다. 1. 문제 파악하기 위의 사진은 마크 표시가 안 된 캘린더를 표시한 것이다. 원래 todo앱에 일정이 등록되면 해당 날짜에 마크 표시와 슬라이딩업패널에 일정보기 아래에 해당 날짜의 일정이 보여야 한다. 그러나 둘다 표시가 안 되었다. 그래서 다른 날짜를 클릭했을 때도 그런가 확인했다. 확인해보니 앱을 제일 처음 구동했을 때만 안되는 것이었다. 그렇다는 것은 해당 기능이 된다는 것은 변수를 잘못 선언했다는 말이었다. 2. 디버그 콘솔에 출력하기 디버그 콘솔에 앱 구동하고 바로 일정을 등록하면 어떻게 출력되는지 확인하고자 하였다. 그리고 나서 다른 날짜를 클릭하고 일정을 등록시 날짜가 어떻게 출력되는지 확인하였다. → 여기서 둘다 ..

원문보기 내부링크
Tistory

[Flutter] ListView와 ListView.builder, separated 구분하기

ListView ListView: Creates a scrollable, linear array of widgets from an explicit List. This constructor is appropriate for list views with a small number of children because constructing the List requires doing work for every child that could possibly be displayed in the list view instead of just those children that are actually visible. → ListView의 생성자에서 아이템(ListTile)을 직접 구현하여 ListView를 구성하는 방..

원문보기 내부링크
Tistory

[Flutter] SingleChildScrollView, GestureDetector, decoration, Align, datetime 개념 및 활용하기

1. overflow에러(SingleChildScrollView) 왼쪽 사진은 화면의 크기보다 위젯이 더 큰 경우 발생하는 overflow 에러이다. 이 경우에는 사용하고자 하는 위젯의 최상위 Class를 SingleChildScrollView로 감싸주면 된다. 하나뿐인 자식이 너무 커서 화면에 다 안나오고 삐져나간다던지 할 때 스크롤을 해서 자식을 다 볼 수 있도록 해준다. 그렇게 되면 password 인풋을 눌렀을 때 왼쪽같은 오류가 났었다가 이제는 오른쪽처럼 스크롤이 가능하게 된다. 그래서 키보드에 의해서 인풋창이 가려지지 않게 된다. 2. 키보드 밖 클릭시(GestureDetector) 이와 관련된 강의를 여러번 봤지만 안 익혀져서 다시 정리한다. @override Widget build(Buil..

원문보기 내부링크
Tistory

[Flutter] Widget Tree, Element Tree, RenderObject Tree 알아보기

widget: Flutter에서 화면에 표시된 모든 요소가 위젯이라 한다. 눈에 보이지 않지만 화면을 구성하는 레이아웃(Layout)도 위젯이라고 한다.위젯은 크게 두 가지로 분류할 수 있다.Stateful WidgetStateless WidgetStateful, Stateless Widget1) Stateless Widget: 어떠한 상태도 가지고 있지 않은 정적인 위젯이다. 어떠한 상태값도 가지고 있지 않기 때문에 Stateless Widget은 화면에서 어떠한 움직임이나 변화가 없다.예: 텍스트, 이미지 등.Stateless Widget은 화면에는 표시되지만, 사용자와 어떠한 인터렉션도 하지않는다. Stateless Widget은 StatelessWidget을 상속하여 생성한다.2) Stateful..

원문보기 내부링크
Tistory

[GetX] getX 사용해서 snackbar 구현

snackbar는 앱에서 수행했거나 앞으로 수행할 작업을 사용자에게 알려주는 UI 요소이다. 일시적으로 화면 하단에 나타난다. getX 사용하기 1. 종속성 추가 flutter파일에 pubspec.yaml파일이 존재한다. 여기에 들어가서 dev_dependencies탭에 아래의 명령어를 추가해준다. get: ^4.6.5 그러면 종속성이 알아서 추가된다. 가끔가다가 추가가 안되는 경우가 존재하는데, 이럴 경우에는 flutter pub get 명령어를 쳐서 종속성을 설치해준다. 2. import 하기 import 'package:get/get.dart'; getX를 사용하고자 하는 파일에 상위에 import를 하여 패키지를 가져온다. 3. GetMaterialApp로 사용하기 이를 바로 사용하려면 안되고 m..

원문보기 내부링크
Tistory

[React] react 모바일 페이지 구현하기

홈페이지는 나혼자 구현해서 시간이 없기에 모바일까지 코드구현하는데 시간이 소요된다. 사이트를 보고자 하는 사용자를 위하여 모바일 페이지에서 데스크톱으로 이동하여 사이트를 이동할 수 있도록 모바일 페이지에서 데스크톱 페이지로 이동하라는 문구를 구현하고자 하였다. 1. react-device-detect 설치 npm i react-device-detect react-device-detect를 설치하여 모바일에 보일 화면을 만든다. 2. 모바일에 보일 화면 준비 import React from "react"; import styled from "styled-components"; const Outer = styled.div` display: flex; justify-content: center; `; cons..

원문보기 내부링크
Tistory

[Flutter] final, generics, future에 대한 개념 적립하기

1. final과 const1) final 과 const 선언final 과 const 는 아래와 같은 방식으로 선언한다.final double pi = 3.141592;const double e = 2.71828;2) final과 const 공통점, 차이점final과 const 공통점한 번 설정한 값을 변경할 수 없다. (다른 값으로 변경하려고 시도하면 컴파일 오류가 발생)final & const 차이점const의 경우, 컴파일 타임에서 상수를 정의할 수 있다. 즉, const로 정의한 상수는 런타임에서 정의되는 값을 설정할 수 없다는 의미다.예를 들어, DateTime.now()의 경우 런타임에서 호출 될 때마다 결과 값이 다른데 이러한 값은 const로 설정할 수 없다.final은 런타임에서 결정되는..

원문보기 내부링크
Tistory

[Flutter] Flutter 시작할 때 알아야 되는 개념 알아보기

import와 void main import 'package:flutter/material.dart'; void main() => {runApp(MyApp())}; 처음에 플러터를 시작하게 되면 main.dart 파일을 만들게 된다. 이는 기본적으로 만들지 않아도 생성되는 파일이다. 그래서 임포트를 해서 material.dart package를 가져오면 된다. 그리고 나서 void main() {runApp(MyApp())};라는 main이라는 함수를 실행하게 된다. 여기서 MyApp()은 자기 마음대로 이름을 바꿔도 된다. materialApp class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { retu..

원문보기 내부링크
Tistory

[Flutter] 터미널에서 플러터 인식못할 때 인식시키기

1. Flutter SDK path 파악하기 flutter SDK download 된 경로 파악한다. 이는 SDK경로를 터미널에서 인식하게 하기 위함으로 SDK위치를 저장해놓는다. 2. SDK경로 저장하기 1) $HOME/.zshrc 파일열기 터미널로 들어가서 아래 명령어를 친다. vi **$HOME/.zshrc** 그러면 vi에디터로 해서 insert를 할 수 있게된다. 2) 명령어를 치고 저장 $HOME/.zshrc 파일에 제일 처음에 저렇게 써져 있어서 아래에 path를 입력했다. export PATH="$PATH:pwd" 3. flutter 사용하기 추가 가끔 가다가 플러터 버전이 바껴서 코드를 못 따라하는 경우가 있다. 웬만해서 자신의 플러터 버전을 외우겠지만 버전을 확인하고 싶을 때는 flut..

원문보기 내부링크
Tistory

[Flutter] Stack, EdgeInsets, BuildContext 개념 및 활용하기

1. Stack : stack는 자료구조에서 많이 보인다. 기본적으로 push와 pop을 사용한다. flutter에서 stack은 화면 위에 위젯을 표시하는 방식으로 화면에서 이동한다. 화면 위에서 위젯을 표시할 때 push를, 위에 표시된 화면을 제거할 때에는 pop을 사용한다. Stack의 자식 위젯 위치를 조절하는데 쓰인다. Postioned Positioned 위젯은 Stack안에서 사용되어야 하며, StatelessWidget과 StatefulWidget에서만 사용가능하다. 그런데 여기서 positioned를 사용하여 top, left, right, bottom을 이용해서 자식들을 배치할 수 있다. 내가 하면서 제일 먼저 생성한 자식위젯은 맨 아래에 쌓인다. 그리고 제일 나중에 생성한 위젯은 제..

원문보기 내부링크
Tistory

[React] react 게시글 작성해보고 구현하기

table 태그를 사용하여 디자인을 구성하였다. 게시글에 대한 데이터는 db에 저장하였다. 그리고 게시글을 등록했을 경우 페이지가 이동되면서 게시판에서 내가 쓴 글을 볼 수 있도록 구현하였다. 아래는 내가 꾸민 게시판 글쓰기 페이지이다. 게시판 게시글 생성하기 게시판을 구성할 때 필요한 것은 사진을 참조해서 보면 맨 위에서부터 글 제목, 작성자, 내용, 비밀번호와 비밀글 설정, 개인정보 수집 및 동의 등이 필요했다. 이메일의 경우는 비회원과 회원을 구분하지 않으므로 비회원도 글을 작성할 수 있도록 하였다. 그래서 이는 꼭 필요한 항목이 아니기에 없어도 되고, 작성하지 않아도 alert창이 뜨지 않게 구성하였다. useInput 생성 코드가 너무 길어서 커스텀하여 useInput과 useInputRef를 ..

원문보기 내부링크
Tistory

[Error] mysql연결시 나는 오류 해결하기

나중에 정리해놓고 글을 보았을 때 유용하게 쓰일 것 같아 정리해보고자 한다. 문제 발생 이러한 오류가 뜨면서 db를 작업하는 tableplus에서는 드라이버가 어떠한 패킷에 대한 응답을 받지 않았다고 하여 에러가 발생하였다고 적혀있었다. 이 문제 발생시 방화벽에 대한 규제는 풀어주었기에 방화벽에 대한 에러는 아니었다. 또한 mysql의 경우 tcp/ip나 socket을 사용하여 mysql과 연결하는데, 내 경우 socket을 사용치 않으므로 tcp/ip를 사용한다. 그래서 netstat으로 하여 지금 쓰는 포트에 대한 규제가 있는지 확인하였다. 1) linux에서 규제 확인 netstat -ntlp | grep 3306 위와 같은 코드를 쳐서 확인해주었다. 2) mysql에서도 규제 확인 서버 변수에서도..

원문보기 내부링크
Tistory

[AWS] AWS EC2 인스턴스 디스크 용량 확장(EBS 볼륨 확장)하기

이전에 볼륨과 인스턴스를 연결했는데 잘못 연결하여 그 디스크를 못 쓰게 되었다. 그래서 루트에 있는 디스크 용량이 너무 적어 이를 파티션으로 늘리고자 한건데, 이 디스크를 확장하는 방법을 알게 되어 확장하게 되었다. 1. 볼륨 용량 늘리기 늘리고자 하는 볼륨을 선택하여 작업을 클릭해 볼륨 수정을 누른다. 그러면 아래와 같이 어느 정도 늘린 것인지 물어본다. 내 경우 16gb선택하여 늘리고자 하였다. 16gb를 써서 수정을 누르면 수정이 된다. 또한, 이는 스냅샷이라는 것이 있는데 이 스냅샷은 백업을 의미하니, 백업을 하고 하면 더 좋다. 차례로 볼륨의 상태가 저렇게 변한다. optimizing이 100%가 되면 사용중으로 변하며 이는 리눅스에서 수정을 할 수 있다는 것을 의미한다. 2. linux에서 용..

원문보기 내부링크
Tistory

[React] 페이지네이션(Pagination) 구현하기

데이터 가져오기 페이지네이션을 하기 위해서는 데이터가 있어야 한다. 우선은 데이터가 없으므로 게시물 데이터는 JSON Placeholder라는 인터넷에 공개된 API를 통해 가져온다. fetch('') .then(response => response.json()) .then(json => console.log(json)) 이렇게 데이터를 가져온다. 사이트를 참고하면 이렇게 fetch를 사용해서 가져온 데이터는 아래와 같은 데이터로 가져와진다. { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false } 게시물 목록 구현 import { useState, useEffect } from "react"; import styled fro..

원문보기 내부링크
Tistory

[React] react 상품 위시리스트 구현하기

로그인 if(localStorage.getItem("user_id") === null){ alert('로그인 후 위시리스트에 등록 해주세요.') navigate('/user/login') } 처음에 상품을 위시리스트에 담기 위해서는 로그인을 하도록 페이지이동을 하였다. 로그인이 되어 있는지 알기 위해서 로컬 스토리지에 로그인한 정보를 담아두었기 때문에 이를 가져온다. 그래서 이 정보가 null이라면 로그인이 되지 않았다는 의미로, 로그인 페이지로 로그인을 하게 하였다. 로그인이 되었다면 바로 상품이 위시리스트에 담기게 하였다. 위시리스트에 담기 axios .post(`http://localhost:3001/wish_list/wish`, { user_no: localStorage.getItem("user_..

원문보기 내부링크
Tistory

[React] react ToDo 리스트 생성하기

간단하게 todo리스트를 생성하고 하면서 배운 점들을 서술하고자 한다. todo리스트 생성하기 1) input창에 쓴 글 반영하기 여기에 input창에 글을 쓰면 todo리스트가 생성되게 해야 한다. const [text, setText] = useState(""); const onChangeHandler = (event) => { setText(event.target.value); }; onChangeHandler(event)} placeholder="해야 할 일을 입력하세요." value={text} /> input을 만들어 입력한 글을 input창으로 변하게 해야 한다. 그럴려면 value에 useState로 선언한 변수가 들어가야 한다. 그리고 계속적으로 input창이 변하기 때문에 onchang..

원문보기 내부링크
Tistory

[React] 제어&비제어 컴포넌트 알아보기

모르는 개념을 알게되어서 적게되는 글이며, 항상 react에서 겪는 오류들이 줄어들었으면 하는 바람에 쓰는 글이다. 개념 1) 제어 컴포넌트 HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. 2) 비제어 컴포넌트 모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 ..

원문보기 내부링크
Tistory

[React] useMemo()와 React.memo, useCallback() 비교하기

1. 성능 향상을 위한 Memoization React.memo와 useCallback(), useMemo의 개념을 이해하기 위해서는 Memoization의 정의를 알아야 한다. 정의는 다음과 같다. 결과를 캐싱하고, 다음 작업에서 캐싱한 것을 재사용 하는 비싼 작업의 속도를 높이는 자바스크립트 기술 이전 값을 메모리에 저장해 동일한 계산의 반복을 제거해 빠른 처리를 가능하게 하는 기술 캐시에 초기 작업 결과를 저장하여 사용함으로 써 최적화 할 수 있다. 만약 작업을 다시 수행해야 한다면, 어딘가에 저장되어진 동일한 결과를 단순히 반환 해준다. 메모이제이션(Memoization) 자주 사용되는 값을 받아오기 위해 반복적으로 계산을 해야 하는 상황에서, 특정 값을 캐싱하는 것을 말한다. 해당 값이 또 ..

원문보기 내부링크
Tistory

[Flutter] flutter 환경변수 설정시 오류(window) 살펴보기

1. flutter 설치 flutter.dev 위의 flutter.dev를 들어가면 flutter를 설치할 수 있는 홈페이지가 나오게 된다. 자신의 컴퓨터환경에 맞게 클릭한다. 나는 window라 이를 클릭해서 압축파일을 풀었다. 그런데 압축파일이 크다보니 푸는데 너무 오래걸렸다. 그래서 아래의 git으로 푸는 방법이 존재하여 그를 사용하였다. 나는 파일위치를 보지 않고 풀어서 파일을 찾는데 시간을 조금 소요했다. git clone -b stable 윈도우라면 웬만하면 git으로 푸는 것을 추천한다. 2. Flutter 환경변수 추가 내 컴퓨터에 환경변수를 추가하면 cmd에서 폴더경로 없이 바로 exe파일을 실행할 수 있도록 도와준다. 시작 > 검색 > 시스 환경 변수 편집을 클릭한다. 고급탭에 환경 변..

원문보기 내부링크
Tistory

[Flutter] Flutter 설치 및 오류 살펴보기

처음 Flutter SDK 설치시 failed이라고 떠서 미국 flutter에서 설치하였다. 1. SDK 설치 압축파일을 받고 iTerm에서 unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip 이것은 압축파일이름을 잘 확인해야 한다. 그리고 굳이 명령어로 압축파일을 안 풀어줘도 되니 문서로 가서 압축된 파일을 바로 풀어도 된다. 2. 경로 설정 export PATH="$PATH:`pwd`/flutter/bin" 이를 쳐서 경로를 설정한다. 윈도우의 경우 환경변수 설정으로 들어가서 설정해주어야 한다. 나는 mac임으로 이렇게 경로를 설정했을 경우, 영구적으로 설정된 것이 아니기에 매번 들어갈 때마다 이를 쳐주어야 한다. 그래서 영구적으로 설정해야 한다...

원문보기 내부링크
Tistory

[React] location.href 와 location.replace, navigate 비교하기

react에서 페이지 이동할려고 했을 때 이를 검색한 적이 있다. 각각마다 차이점이 존재하여 이에 대해서 서술해보고자 글을 적게 되었다. 개념 자바스크립트에서 페이지 이동 location.href : 새로운 페이지로 이동 location.replace : 새로운 페이지로 이동 react에서 페이지 이동 navigate : 새로운 페이지로 이동 차이점 1. 이전 페이지 이동 1) location.href와 location.replace location.href는 객체의 속성이며, loaction.replace()는 메서드(함수)로 작동된다. href는 페이지를 이동하는 것이기 때문에 뒤로가기 버튼을 누른 경우 이전 페이지로 이동이 가능하지만, replace는 이동한 페이지를 현재 페이지로 덮어 씌우기 때문..

원문보기 내부링크
Tistory

[React] 이미지 업로드, custom hook, 페이지 이동, props 관련 정리

1. 이미지 업로드 const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); 이미지 업로드 2. hook으로 저장하여 커스텀 훅으로 사용 여기서 거의 핸들러 빼고 setter만 넣어서 value와 setter만 리턴하는 경우로 많이 쓴다. import { useState, useCallback } from 'react'; export default (initValue = null) => { const [value, setter] = useState(initValue); const handler = useCallback((e) => { setter(e.target.value); }, ..

원문보기 내부링크
Tistory

[React] StrictMode 개념 다지기

우연히 글을 보다가 정리해두면 좋겠다 싶어서 정리하게 되었다. 정리하게 된 계기 React18 + StrictMode에서는 개발모드에서 data fetching이 최소 두 번이상 일어날 수 있다. 이러한 글을 계속 보았지만 왜 그런지 모르고 그냥 그런가보다하고 넘어갔다. 우리가 react를 이용하여 웹 사이트를 구현하고자 할 때 app.js는 기본적으로 생성된다. ReactDOM.render( , document.getElementById('root') ); 위와 같이 app.js가 생겼는데, 이를 아래와 같이 바꾸면 두번이나 재랜더링이 되지 않는다. ReactDOM.render( , document.getElementById('root') ); 개념 공식문서에 따르면 strictmode는 StrictM..

원문보기 내부링크
Tistory

[React] useState() 개념 다지기

우연히 글을 보다가 useState()가 비동기방식이라는 것을 알 수 있었다. 근데 react 코드를 짜면서 느낄 수 있는 부분들이 많아 놀랍지는 않았지만, 개념으로 확인시켜주니 좋았다. 그래서 비동기방식으로 처리할 때 불편함이 있어 동기 방식으로 처리하는 방식을 알고자 정리하게 되었다. 개념 const로 선언하는 이유는? 변수의 재할당을 막기 위해서 let을 사용하면 변수의 재선언이 가능해지기 때문에, 이를 방지하고 setState를 사용한 변수 변경만을 허락하기 위해서 const로 선언 state를 사용하는 이유 변수는 변경되어도 자동으로 화면이 바뀌지 않는다. setState를 사용시 state가 변경되면 자동으로 화면이 바뀌기 때문에 state를 사용한다. 비동기 방식 우선 개념에 대해서 보면, ..

원문보기 내부링크
Tistory

[React] props 개념 다지기

react의 기본 개념이 부족해서 값을 전달하거나 받아오는 것에 한계를 느껴 기본 개념을 정리하다가 글을 쓰게 되었다. 개념 컴포넌트 속성을 설정할 때 사용하는 요소로, 간단히 말하자면 컴포넌트에서 컴포넌트로 전달하는 데이터이다.(단방향 데이터의 형식의 흐름을 갖는다) properties의 줄임말이다. props는 읽기 전용으로, 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다. 순수함수 → 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문 function sum(a, b) { return a + b; } 순수함수 → 자신의 입력값을 변경하기 ..

원문보기 내부링크
Tistory

filter() 함수 알아보고 활용 및 삭제하기

개념 filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 반환한다. 즉 filter()메서드는 내가 원하는 값들을 말 그대로 필터링하여 사용할 수 있다. 사용법 사용법에는 여러가지가 존재하는데 두가지로 나누어 설명하겠다. 1) filter()을 활용한 검색 let users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]; let re..

원문보기 내부링크
Tistory

[React] Context()알아보고 활용하기

context()에 대해서 정리하는 이유는 많이 보았기에 궁금해서 찾아보다가 너무 유익해서 정리하고자 한다. context()는 언제 쓰는가 여러 글 봤었는데 유튜브의 영상이 잘 설명되어 있어서 맨아래에 첨부해놓는다. react로 개발을 하다보면 props를 가져와서 쓰고 싶은 경우가 생긴다. 즉 하위 컴포넌트에서 상위 컴포넌트의 데이터를 가져오고 싶은 것이다. 나의 경우는 https://uhee-12.tistory.com/51 위 글을 보면 알겠지만, navigate와 location을 많이 사용했었다. 또한, redux를 사용하지 않아서 아직은 상태관리에 많은 어려움을 겪고 있다. 그러던 와중 context()를 알게 된 것이다. 위에서도 말한 것 같이 데이터를 전역적으로 사용하고 싶을 때 conte..

원문보기 내부링크
Tistory

[React] react-router-dom v6 개념 쌓아보기

업데이트 날짜를 찾아볼려고 했는데 한 2021년 11월쯤 업데이트한 것 같다. 거의 다 최신 버전으로 쓰고 있고 배우기도 그렇게 배워서 정리해야된다는 생각을 못했는데, 여러 모듈을 쓰다보니 이전 버전들을 쓰는 블로그들로 인해 헷갈려서 정리하게 되었다. 업데이트를 하면서 번들 크기가 최적화가 가능해졌다. 70%정도로 줄어든다. React v16.8 React Router v6은 React Hook을 많이 사용하므로 React Router v6으로 업그레이드를 시도하기 전에 React 16.8 이상으로 설치가 되어 있어야 사용이 가능하다. React Router v5는 React >= 15와 호환된다. 내가 글을 쓰고 있는 시점은 react-router-dom은 v6.3.0이다. 설치 npm i react-..

원문보기 내부링크
Tistory

[React] 리스트와 key 개념 쌓아보기

리스트 import React from "react"; const IterationSample = () => { return ( 봄 여름 가을 겨울 ); }; export default IterationSample; 위의 코드를 보면 가 반복되는 것을 알 수 있다. 지금은 ul태그 하나 뿐이라 그렇게 문제가 되지는 않아 보인다. 그렇지만 코드가 좀 더 복잡하다면 코드의 양은 더욱 늘어날 것이고, 파일 용량도 쓸데없이 증가할 것다. 코드 관리가 점점 어려워질 것이다. → 이러한 경우는 map()을 사용하여 반복적인 코드를 정리해서 정리하면 된다. import React from "react"; const IterationSample = () => { const names = ["눈사람", "얼음", "눈"..

원문보기 내부링크
Tistory

[React] useEffect와 useLayoutEffect 비교하여 알아보기

필수 개념 Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정 즉 시각적 변경 사항이 사용자에게 표시되는 것을 말함. 개념 1) useEffect useEffect는 컴포넌트들이 render와 paint된 후 실행된다. 이는 **비동기적(asynchronous)**으로 실행된다. paint된 후 실행되기 때문에, useEffect내부에 DOM에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게된다. 2) useLayoutEffect useLayoutEffect는 컴포넌트들이 render된 후 실행되며, 그 이후에 paint가 되게 된다. 이 작업은 동기적(synchronous) ..

원문보기 내부링크
Tistory

[react] 페이지 이동시 스크롤 최상단에 위치하기

페이지 이동시 임의의 페이지 화면이 보여서 눌렀을 때 최상단에 위치하게 하기 위해서 찾아보다가 이글을 정리하게 되었다. useLocation() 처음에 useLocation()을 알아야 하는데 이는 npm install react-router-dom react-router-dom 모듈을 설치하여 임포트해준다. import { useLocation } from 'react-router-dom'; const location = useLocation(); useEffect(() => { console.log(location); }, [ location ]) 그리고 나서 location 변수에 담아 이를 location이 랜더링될 때마다 콘솔에 찍어 보이게 한다. 그리고 콘솔에 보면, hash, pathname..

원문보기 내부링크
Tistory

[React] Automatic Batching(react v18) 개념 쌓아보기

개념 배칭(batching)은 업데이트 대상이 되는 상태값들을 하나의 그룹으로 묶어서 한번의 리렌더링에 업데이트가 모두 진행될 수 있게 해주는 것을 의미한다. 한 함수 안에서 setState(업데이트)를 아무리 많이 호출시키더라도 리렌더링은 단 한번만 발생한다. 나오게 된 배경 이전부터 리랜더링과 관련해서 react-17v에서 이벤트 핸들러 내부에서 발생하는 상태 업데이트만 배치처리를 지원했다. 하지만 이벤트 핸들러 내부에 fetch()등 과 같은 콜백을 받아 처리하는 메소드가 존재할 경우 내부의 콜백이 모두 완료된 후에는 Automatic Batching이 처리되지 않았다. 그리고 react-17v에서 업데이트가 동기적으로 일어나지 않았다. 이전 버전과 최신 버전의 비교 1) React-17v impo..

원문보기 내부링크
Tistory

[React] startTransition 개념 알아보기

React18 버전에서 가장 크게 강조된 키워드는 동시성이다. 자바스크립트는 싱글스레드 언어이기때문에 한 번에 하나의 작업만 처리할 수 있다. 화면이 오래 멈춰있다면 사용자 경험은 악화되기 때문에 웹 개발에 있어서 큰 걸림돌이 된다. React는 렌더링 블록킹 문제를 해결하기 위해 동시성을 이용하게 되었다. 개념 해당 기능은 상태 업데이트를 함에 있어서 우선순위를 정하는데 도움을 준다. 리액트에서는 상태 업데이트 대상을 두가지로 나누었으며, 이를 통해 transition이 의미하는 바가 무엇인지 파악할 수 있다. Urgent updates(높은 우선순위) : 버튼 클릭, 키보드 입력과 같이 직관적으로 보았을 때 업데이트가 즉각적으로 일어나는 것을 기대하는 상태 값들 Transition updates(낮은..

원문보기 내부링크
Tistory

[React] code-splitting 코드스플리팅 알아보기

앞 전에 suspense를 정리하였다. suspense가 기반되어야 쓸 수 있는 코드에 대해서 정리해보고자 한다. code-splitting 영어 단어 그대로 코드를 나눈다는 것이다. 왜 이것이 필요할까? 앱이 커짐에 따라 번들도 커지게 된다. 특히 큰 third-party라이브러리를 포함하는 경우에 번들에 포함된 코드를 주의깊게 확인해야 한다. 실수로 커진 앱으로 인해 로드시간이 오래 걸리는 문제를 방지한다. 큰 번들로 묶이지 않으려면 번들을 code splitting 하는것이 좋다. code splitting 기능은 런타임시 동적으로 로드할 수 있는 여러 번들을 만들 수 있는 Webpack 및 Browserify와 같은 번들러에서 지원되는 기능이다. code splitting을 하면 사용자가 현재 필..

원문보기 내부링크
Tistory

[React] useRef() 개념 쌓아보기

개념 useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회&수정한다. → 개인적인 견해로 여러 글을 보았는데 위의 문장이 제일 useRef()를 잘 설명해주는 것 같다. 사용 useRef함수는 current속성을 가지고 있는 객체를 반환한다. 인자로 넘어온 초기값을 current속성에 할당한다. 이 current속성은 값을 변경해도 상태를 변경할 때 처럼 React 컴포넌트가 다시 랜더링되지 않는다. 위에서 정의한 것처럼 리랜더링되지 않기 때문이다. React 컴포넌트가 다시 랜더링될 때도 마찬가지로 이 current 속성의 값이 유실되지 않는다. import React, { useState, useRef } from "react"; function ManualCounter() { const [c..

원문보기 내부링크
Tistory

[Node.js] node.js에서 AWS s3연동하기

node와 s3를 연동하면서 잘 되지 않았던 부분들을 정리하고자 글로 정리한다. 이는 세가지로 정리할 수 있다. s3연동하는 js하나, s3를 연동하는 js를 미들웨어로 넣어주어 사용하는 라우트 하나, 이에 대한 결과를 보여주는 컨트롤러로 이루어져 있다. 모듈 설치 npm install multer multer-s3 aws-sdk 위의 모듈은 s3와 node를 연동할 때 필요한 모듈이다. 이를 설치하고 난 후에 설치된 모듈의 버전을 확인해야 한다. 모듈과 관련하여 오류가 발생하였었다. 아래의 글을 한번 살펴보고 나서 이 글을 정독하거나 하면서 오류나는 부분들은 아래를 참고하면 좋다. 2023.02.08 - [Error] - [Error] this.client.send is not a function(no..

원문보기 내부링크
Tistory

[React] useEffect 개념 제대로 알기

항상 react를 쓰는데 인터넷강의로 너무 간략하게 배우다보니 이에 대한 개념이 적립되지 못해 이제야 이 개념을 적립하고자 정리한다. 개념 useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook이다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말한다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었다. 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었다. 즉, 라이프사이클 훅을 대체할 수 있게 되었다. component..

원문보기 내부링크
Tistory

[React] Suspense(ft. React v18) 변경사항 제대로 알기

react가 16에서 알파버전이었다가, 18버전에서는 베타버전이 되었다. 그만큼 안정화가 되었다는 것을 말해준다. 이는 우연히 블로그에서 정보를 찾으려다가 발견한 정보이다. 아직 공부가 많이 필요하다는 것을 많이 느낀다. 그래서 우연히 알게된 이정보에 대해서 공부할려고 찾아보다가 더 많은 부분까지 알게되어 개념은 어느 정도 알겠지만 정리가 안되어, 이 개념을 정리하고자 글을 써본다. 이전에 정리해놓은 글인데 이제야 올립니다. 들어가며, 위에서 말한 것처럼 react의 suspense는 이미 출시되어 있었다. 16버전에서 알파버전이어서 그만큼 불안정했다가, 18버전에는 안정화가 되었다. 여기에서 나오는 개념은 클라이언트 react server개념이 나온다. RSC(React Server Component)..

원문보기 내부링크
Tistory

[Node.js] 리눅스에서 mysql에 접속하기

리눅스에서 mysql에 접속 sudo /usr/bin/mysql -u root -p 을 입력하여 mysql에 접속한다. use mysql; 다음과 같은 명령어를 입력하여 들어간 다음에 // 특정 ip만 접근을 허용하는 사용자 추가 create user '유저명'@'123.456.789.100' identified by '비번'; // 권한 허용 grant all privileges on *.* to '유저명'@'123.456.789.100'; 이 때 나의 경우에는 aws ec2를 만들어서 mysql을 연결하여 사용할 것이기에, 한 포트만 사용해줄 것이다. 그래서 한 ip만 허용하여 유저가 들어가게 해놨다. 그렇지만 localhost로 해서 내부접근하는 경우와 외부접근하는 경우도 있기에 아래 사이트를 참고..

원문보기 내부링크
Tistory

[Error] this.client.send is not a function(node와 s3관련 오류 모음)

node와 s3를 연결하면서 나는 오류들을 정리하였다. 1. this.client.send is not a function → 구글링했을 때 이와 같이 오류난 사람들이 많았다. https://github.com/anacronw/multer-s3/issues/169 github에서 이러한 오류에 대해서 토론한 것이 있어서 이를 참조하여 문제를 해결하였다. 1) 문제 발생 원인 : multer-s3와 aws-sdk는 아마존의 s3와 node를 연결하기 위해서 깔아야 하는 모듈이다. 근데 이 둘의 버전이 아래와 같이 일치해야 한다. 내 경우는 일치하지 않아 나는 오류였다. 2) 문제 해결 : 그래서 multer-s3는 3.x으므로 이를 다운 그레이드를 하여 2.x로 설정하였다. 이렇게 하여 aws-sdk가 2..

원문보기 내부링크
Tistory

AWS S3(Simple Storage Service) 생성하기

AWS S3(Simple Storage Service)란? Simple Storage Service의 약자로 파일 서버의 역할을 하는 서비스다. 일반적인 파일서버는 트래픽이 증가함에 따라서 장비를 증설하는 작업을 해야 하는데 S3는 이와 같은 것을 대행한다. 정보의 중요도에 따라서 보호 수준을 차등 할 수 있고, 이에 따라서 비용을 절감 할 수 있다. 저장할 수 있는 파일 수의 제한이 없다. 최소 1바이트에서 최대 5TB의 데이터를 저장하고 서비스 할 수 있다. 파일에 인증을 붙여서 무단으로 엑세스 하지 못하도록 할 수 있다. Amazon S3 용어 Buckets Amazon S3에서 생성되는 최상위의 디렉토리, Amazon S3에 저장된 객체의 컨테이너이다. S3상의 모든 객체는 버킷에 포함된다. 버킷..

원문보기 내부링크
Tistory

[Node.js] mysql과 sessions 연결

HTTP Stateless Protocol http 프로토콜은 상태(state)를 유지하지 않는다. 이를 stateless protocol이라 한다. HTTP 프로토콜은 요청(request)를 전송하고 응답(response)를 전송받은 시점에서 통신이 종료되며 어떠한 상태 정보도 남지 않는다. 즉, 특정 클라이언트에서 동일 서버에 반복하여 접속하여도 각각의 접속은 독립적인 트랜잭션으로 취급된다. 따라서 로그인 화면에서 아이디, 패스워드를 입력하여 사용자 인증 과정을 거친 이후에 재차 웹사이트에 접근하면 로그인 상태임을 인식(유지)할 수 없으므로 매번 사용자 인증 과정을 반복해야 하는 문제가 발생한다. 쿠키와 세션 쿠키는 웹사이트에 접속할 때 생성되는 정보를 담은 임시 파일이다. 쿠키의 데이터 형태는 ke..

원문보기 내부링크
Tistory

[Node.js] RowDataPacket의 개념 알아보기

mysql과 node.js를 연결하다가 이러한 데이터 형식이 나왔다. 처음에 데이터를 추출하고자 했는데 잘 안되서, 몇번 헤매다가 데이터 추출 형식에 대해서 글로 작성해야 겠다고 생각하여 글을 적는다. 이에 대한 방법이 어려운게 아니라 배열형식으로 추출되서 다음에 할 때 또 까먹을 것 같아서 작성한다. RowDataPacket 이는 위에도 작성했듯이 mysql과 node.js를 연결하면 이러한 데이터 형식으로 도출이 된다. MySQL 데이터베이스에서 RowDataPacket로 반환해주는 듯하다. connect pool을 이용해 db와 연결하고 query문을 작성한다. query문에 맞는 데이터가 나온다. https://stackoverflow.com/questions/31221980/how-to-acce..

원문보기 내부링크
Tistory

[React] 페이지 이동시 값 넘겨주기

useHistory() import { useHistory } from "react-router-dom"; const test = useHistory(); 처음에 이 방법을 이용하여 사용하고자 했는데, 계속적으로 오류가 나서 찾아보았다. stackflow를 들어가서 해결점을 찾게 되었다. 내가 참고한 글이 오래된 글이었으며, 지금은 useHistory대신에 useNavigate를 사용한다는 것이었다. react-router-dom 6버전에서부터 교체 된 것 같았다. useNavigate() 내가 구현하고자 하는 기능은 버튼 클릭시 페이지가 이동된다. 그리고 이동시에 값도 같이 넘겨주도록 기능을 설계하고자 하였다. import { useNavigate } from 'react-router-dom'; con..

원문보기 내부링크
Tistory

[Node.js] Sequelize Associate 알아보기

Associate와 관련해서 db를 설계를 안 해서 구글링해보다가 알게되서 쓰는 글이다. Associate Sequelize CLI를 통해 Model을 정의하고, Migration으로 스키마를 관리한다. RDBMS의 Table간의 관계를 Sequelize에서 Model간의 관계로 정의하는 것을 말한다. 모델 및 마이그레이션 생성 테이블을 두개 생성할 것이다. 유저가 있으면 이 유저가 리뷰를 할 때, 이에 대한 모델 정의와 마이그레이션을 생성하고자 한다. // 유저 sequelize model:generate --name Write_user --attributes email:string,password:string,name:string // 리뷰 sequelize model:generate --name R..

원문보기 내부링크
Tistory

[Node.js] dotenv 접근 및 설치하기

환경 변수란? 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임 [위키피디아] 우리가 컴퓨터로 하는 모든 작업들은 OS라는 프로그램에 의하여 실행되는 자식프로세스이다. 환경변수는 OS입장에서 해당 프로세스를 실행시키기 위하여 참조하는 변수이다. 어느 환경에 배포하느냐에 따라서 다르게 설정해야하는 항목은 보통 운영 체제 레벨에서 환경 변수를 통해 관리하게 된다. DB password나 API key와 같은 인증 정보는 공개된 코드 저장소에 올리면 안 되기 때문에 환경 변수로 저장해놓고 사용한다. 환경 변수 접근 내가 사용할려는 node.js에서는 dotenv를 사용하여 접근한다. Dotenv is a zero-dependency module that loads environment v..

원문보기 내부링크
Tistory

timestamps 시간 고치기

mysql을 사용하다보니 계속 오전 시간을 기준으로 db에 저장되는게 보여 현재 시간을 기준으로 저장하기 위해서 구글링하였고, 답을 얻어서 이 글을 쓰게 되었다. 모델을 생성할 때 'timestamps: true' 옵션을 주게 되면, 데이터베이스에 created_at, updated_at을 자동으로 생성해준다. db에 값을 넣어주고 created_at, updated_at은 안 넣어줘도 된다. 그래서 저장된 값들을 확인하니 표준시간이 UTC+00:00이다. 한국시간보다 9시간 전 시간을 넣어준다. 그래서 이를 고쳐주기 위하여 Sequelize를 생성하면 config파일이 자동으로 생성된다. timezone 설정 config/config.json 파일에 timezone을 아래처럼 "timezone": "+..

원문보기 내부링크
Tistory

[Node.js] Sequelize Seed 구현해보기

정적인 데이터를 삽입해야 되는 때가 가끔씩 존재한다. 이걸로 몇번 데이터가 직접 만들어서 넣은 수고로움을 덜고자 글을 쓰고자 한다. 진작 알았더라면 좋을 것 같다. 역시 지식이 힘이다. sequelize를 install할 때, Sequelize CLI를 같이 설치 했기 때문에 이 명령어는 따로 작성하지 않아도 된다. 그렇지만 cli를 sequlize를 설치할 때 같이 작성치 않았다면 설치를 해준다. npm i —save sequelize-cli seeder파일을 삭제했다고 하더라도 generate할 때 자동으로 파일이 생성되기 때문에 삭제해도 무관하다. Seeder 개념 seeders는 생성된 각 테이블에 기본으로 필요한 데이터나 예시 데이터를 추가할 때 사용한다. 즉, 정적인 데이터 삽입 기능이다. S..

원문보기 내부링크
Tistory

[Node.js] morgan을 활용해 로그관리하기

: 요청과 응답에 대한 정보를 콘솔에 기록 저번에 썼던 wiston과 덧붙여서 작성한다. morganMiddleware.js const morgan = require("morgan"); const Logger = require('../config/logger'); const stream = { write: message => { Logger.http(message) } }; const skip = () => { const env = process.env.NODE_ENV || "development"; return env !== "development"; }; morgan.token("status", function (req, res) { let color ; if (res.statusCode < 300)..

원문보기 내부링크
Tistory

[Node.js] kakao login 구현하기

const express = require("express"); const router = express.Router(); const cors = require("cors"); const passport = require("passport"); const KakaoStrategy = require("passport-kakao").Strategy; const models = require("../models"); const { isLoggedIn, isNotLoggedIn } = require("../middlwares/auth"); const path = require("path"); require("dotenv").config(); router.use(passport.initialize()); rout..

원문보기 내부링크
Tistory

[Node.js] express-validator 사용법

이는 회원가입 관련하여 유효성 검사하면 많이 본 모듈이다. 나는 이걸 회원가입하면서 많이 쓰지 않았고 db에 모델 구축할 때 쓴 validate로 인하여 쓰게 되었다. express-validator 클라이언트가 서버에게 특정한 요청이나 리소스를 위해 바디로 보내는 데이터를 post 형식과 put형식등으로 보낼 때 요청이나 데이터들이 유효한지 확인하는 유효성 검사 모듈이다. 미들웨어 함수로도 사용할 수 있고, API 형태로 활용도 가능하다. validator.js를 활용해 편리하게 제작된 모듈이다. npm i --save express-validator 사용하기 전에 미리 설치해줘야 한다. 유효성 검사 방법 const { check, validationResult } = require("express-v..

원문보기 내부링크
Tistory

[Node.js] winston을 활용해 log 관리하기

log를 배포하면서 중요성을 많이 느꼈는데, 이번 node.js를 이용하면서 많이 쓰일 것 같아서 정리하고자 한다. 코드 설명 const winston = require('winston'); // -----------------------(1) require('winston-daily-rotate-file'); const logDir = `${__dirname}/logs`; const levels = { // ------------------------------------------(2) error: 0, warn: 1, info: 2, http: 3, verbose: 4, debug: 5, silly: 6 } const level = () => { // --------------------------..

원문보기 내부링크
Tistory

[Node.js] express 미들웨어(MiddleWare) 알아보기

미들웨어는 양 쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어, 네트워크를 통해서 연결된 여러 개의 컴퓨터에 있는 많은 프로세스들에게 어떤 서비스를 사용할 수 있도록 연결해 주는 소프트웨어를 말한다. express홈페이지에 가보면 미들웨어란 미들웨어함수는 요청 오브젝트(req), 응답 오브젝트 (res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한을 갖는 함수라고 서술되어 있다. 그 다음의 미들웨어 함수는 일반적으로 next라는 이름의 변수로 표시한다고 한다. app.use() 를 통해서 미들웨어를 정의할 수 있다. 미들웨어는 본인의 함수가 끝나면 next()를 통해서 다음 함수를 호출해야 한다. 미들웨어의 특징 각 미들웨어에 정..

원문보기 내부링크
Tistory

[Node.js] passport로 로그인 구현하기

passport 개념 Node.js 를 위한 인증 미들웨어이며, Express 기반 웹에서 유용하게 사용할 수 있다. Passport는 이름 그대로 서비스를 사용할 수 있게끔 해주는 여권 같은 역할을 하는 모듈이다. 로그인을 쉽게 할 수 있게 도와준다. strategy 종류 (로그인 인증 방식) : Local Strategy(passport-local) : 로컬 DB에서 로그인 인증 방식 Social Authentication (passport-kakao, passport-twitter 등) : 소셜 네트워크 로그인 인증 방식 Passport 설치 내가 지금 구현하고자 하는 것은 local strategy로 DB에서 로그인 인증 방식을 구현할 것이다. passport-local : 직접 구현할 때 사용 ..

원문보기 내부링크
Tistory

[React] Crypto로 로그인하기

비밀번호가지고 로그인 password : 로그인 인증할 때의 사용자가 입력한 비밀번호 userSalt : DB에 저장되어있는 사용자의 salt userPassword : DB에 저장되어있는 사용자의 암호화된 비밀번호(해시 값) 단방향 암호화이므로 복호화를 할 수 없다. 따라서 비밀번호 암호화했을 때의 비밀번호와 salt를 가지고 동일한 방법으로 암호화를 진행하여 나온 값과 비교한다. 이때 salt는 비밀번호를 생성했을 때의 값과 똑같은 값을 사용해야 한다. 그렇지 않으면 일치하지 않는다. 만약 일치한다면 true, 일치하지 않는다면 false를 반환하도록 한다. 최신 코드 export const verifyPassword = async (password, userSalt, userPassword) => ..

원문보기 내부링크
Tistory

[Node.js] Sequelize 사용하기

ORM(Object-Relational Mapping)은 객체지향 패러다임을 활용하여 관계형 데이터베이스(RDB)의 데이터를 조작하게 하는 기술이다. 이를 활용하면 쿼리를 작성하지 않고도 객체의 메서드를 활용하는 것처럼 쿼리 로직을 작성할 수 있다. Node.js의 대표적인 ORM인 Sequelize이 있다. Sequelize는 MySQL, PostgreSQL, MariaDB 등 많은 RDBMS를 지원하고 Promise 기반으로 구현되었기 때문에 비동기 로직을 편리하게 작성할 수 있다. Sequelize 설치 npm i sequelize sequelize-cli mysql2 sequelize : 시퀄라이즈 사용 sequelize-cli : 시퀄라이즈 명령어를 사용 mysql2 : MySQL과 연결해주는 ..

원문보기 내부링크
Tistory

[Node.js] node.js에서 CRUD기능 구현하기

create 기능 구현하기 파일 분리를 위해 routes 폴더를 만들고 그 안에 register.js라는 파일을 만들어 넣는다. router.post('/', (req, res, next) => { models.Users.create({ email: req.body.email, // 사용자로부터 입력 받은 email name: req.body.name, // 사용자로부터 입력 받은 name }) .then((result) => { // 회원 가입 성공 시 res.send(result); }) .catch((err) => { // 회원 가입 실패 시 res.send(err); }); }); server.js에 라우터 사용을 위해 아래와 같은 코드를 작성해서 넣어준다. app.use('/register', ..

원문보기 내부링크
Tistory

[Node.js] mysql 기본세팅 알아보기 & cors

body-parser npm install body-parser --save 를 하여 body-parser를 설치하여 준다. 이를 사용하는 이유는 클라이언트 POST request data의 body로부터 파라미터를 편리하게 추출하기 위해서이다. 프론트엔드에서 form등의 값을 가져올 때 undefined error를 마주하게 된다. req.body를 사용해서 가져오게 되면, body-parser를 사용하지 않는다면 기본값으로 undefined가 설정되어 있어서 그러한 오류가 난다. (Express v4.16.0 기준)express.js도 빌트인 body parser가 되어있다. 그래서 express.json, express.urlencoded도 가능하다. const bodyParser = require..

원문보기 내부링크
Tistory

[Node.js] Connection Pool의 개념과 사용법

커넥션 풀(DBCP)의 개념 웹 컨테이너(WAS)가 실행되면 데이터베이스에 연결된 Connection을 미리 만들어서 pool에 저장한다. 그 후, 클라이언트 요청이 오면 pool에서 Connection 객체를 빌려준다. 해당 객체의 임무가 완료되면 다시 Connection 객체를 반납 받아서 pool에 저장하는 프로그래밍 기법이다. 커넥션 풀 순서 사용자가 DB를 사용하기 위하여 Connection을 요청한다. Connection Pool에서 사용되지 않고 있는 Connection 객체를 제공한다. 사용자가 Connection 객체를 사용 완료하면 pool로 반환한다. 커넥션 풀(DBCP)의 장점 DB 접속 설정 객체를 미리 만들어 연결하여 메모리 상에 등록해 놓기 때문에 불필요한 작업(커넥션 생성, ..

원문보기 내부링크
Tistory

[React] Crypto로 암호화하기

단방향 암호화와 양방향 암호화 crypto는 단방향 암호화 방식이고, bcrypt는 양방향 암호화 방식이다. 단방향은 암호화할 수는 있어도 복호화해서 원래의 비밀번호를 알 수 없고, 양방향은 복호화해서 원래의 비밀번호를 알 수 있다. 그러나, Bcrypt는 Blowfish 알고리즘을 사용하기 때문에 해싱이 느리고 해싱에 엄청난 비용이 든다. 만약 해커가 브루트 포스같은 공격을 해대면 서버에 엄청난 부하가 가해진다. 암호화 복호화 단방향 가능 불가능 양방향 가능 가능 해시(hash) 해시(hash) : 해시 함수에 의해 얻어지는 값 해시 함수(hash function) : 해시 알고리즘(hash algorithm)이라고도 하며, 임의의 길이의 데이터를 고정된 길이의 데이터로 매핑하는 함수 키(key) : ..

원문보기 내부링크
1 2