대충 얼레벌레 깔아서 리액트 구축해오던 나.. 리액트 환경을 처음부터 구축할 기회가 생겼다. 이거 포스팅에 놓칠 수 없다는 생각이 들어 오늘의 글 건덕지를 하나 잡게 되었다. 1. node.js 설치 node.js 설치 페이지 LTS 버전을 설치해주면 된다. 무작정 다음(NEXT) 을 눌러 설치하여도 무관하다. 하나 신경 쓸만한 부분은 바로 이 부분인데.. automatically install the necessary tools. Note that this will also install Chocolatey. The script will pop-up in a new window after the installation completes Chocolatey 및 추가 설치 도구를 다운로드 받게 할건지 말건..

Recoil 도입 역사의 시작 로그인 및 데이터 관련 전역 상태관리 기술로 Recoil을 채택하고 있다. Recoil 리코일(Recoil) 은 API, 의미, 동작을 최대한 리액트스럽게 유지하며 이를 개선하고자 페이스북에서 만든 상태관리 라이브러리 Recoil 핵심개념 Atom : 하나의 작은 상태. 일반적인 리액트의 상태로 컴포넌트들 구독이 가능 useRecoilState : atom 값을 읽고 update 하는 hook. React Hook의 UseState 와 같은 방식으로 사용. 클래스형 컴포넌트의 상태관리에서 State와 SetState를 합친 것과 같음. useRecoilValue : setter을 제외한 atom의 값만 제공. 클래스형 컴포넌트의 상태관리에서 state의 역할 useSetRe..

UseEffect Hook useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 으로 클래스형 컴포넌트의 마운트 단계인 componentDidMount + 업데이트 단계인 componentDidUpdate + 언마운트 단계인 componentWillUnmount 의 기능을 담당하는 훅이다. componentDidMount+componentDidUpdate에 해당하는 코드들은 useEffect에 전달되는 함수 내에 작성하면 되며, componentWillUnmount에 해당하는 코드들은 함수 형태로 return하게끔 작성하면 된다. 글쓴이가 작성한 UseEffect에 관한 글(1) 여기에 더 간단한 설명이 조금 추가되어 있긴 하다. 아무튼 이렇게 어떤 특정 ..

왜? 날짜 데이터를 이용할 때 어떤 변수에 Date 를 선언해둔 뒤 getFullYear, getMonth, getDate 등을 이용하여 잘라서 간단하게 가져오고는 한다. 하지만 이렇게 사용하면 Month는 1~12의 형태로 출력이 되고, Date의 경우에는 1~31의 값을 출력해주게 된다. 보통 조회 조건을 설정할 때에는 yyyy-MM-dd 형태를 사용하게 되는데 말이다.. 기존 문제가 되는 사항은 아닌데 이런 로그가 자꾸 발생하게 된다. The specified value "2023-1-3" does not confirm to the required format, "yyyy-MM-dd" 대충 노란색인 것을 보자하니 알아서 변환해서 적용하고 있는 건가 싶기는 하지만 눈에 거슬리므로 해결해보도록 하자. ..

이런 형태의 막대그래프를 만들어보도록 할 것이다. 1. 개요 리액트에서 사용가능한 차트 라이브러리는 꽤나 많은데 나는 딱 기본 형태의 막대 그래프 가 필요하여 제일 보기에 코드가 쉬워보이는 Recharts 라는 라이브러리를 채택하였다. 혹시나 복잡한 형태의 차트가 필요하다면.. Nivo.rocks, React Vis, Apexcharts, Victory, Chartjs, Highcharts 등 다양한 라이브러리들을 구경해보는 것도 좋을 것 같다. 나는 참고로 리액트 그래프/차트 라이브러리 모음 이라는 글을 참고하여 라이브러리를 골랐다. 똑같은 차트 기능을 하는 라이브러리라 하더라도, 각각 다른 특징이 있으니 이런 것도 고려하면 좋을 듯 하다. 2. 사용법 1. 라이브러리 설치 $ npm install r..

What is difference between Fetch and Axios ? JS에서 많이 사용하는 HTTP 기반 비동기 통신 방법인 Axios 와 Fetch 의 차이에 대해 알아보도록 하자. Axios/Fetch 생겨난 배경 기존의 웹에서는 어떤 정보들을 비동기로 요청하기 위해서 XHR(XML HTTP Request) 객체를 사용하여야만 했다고 한다.. 근데 XHR은 되게 불친절하게 정보를 제공한다고 한다. (데이터를 통째로 줘버린다던지..) 요청의 상태나 변경을 계속 보고 있게 하려면 이벤트를 추가로 등록해서 변경사항들을 다시 받아야 하고.. 요청의 성공/실패/상태변경 등에 따른 분기를 나누는 것도 복잡했다. → 새로운 url을 호출할 때마다 모든 페이지를 새롭게 그려야 하는 등의 흔히 생각하는 ..

0. about UseEffect UseEffect 함수 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook component의 mount 상태가 바뀔 때, 혹은 내용이 update 되었을 때, 특정 작업을 처리할 수 있게 해준다. 사용법 은 import React, {useEffect} from 'react' 이렇게 함수를 불러와서 useEffect(()=>{ 값이 변경될 때마다 하고 싶은 일 },[기준 값]) 이렇게 사용해주면 된다. 컴포넌트가 화면에 가장 처음 렌더링 될 때 딱 한 번만 실행하고 싶을 때에는 기준값이 들어가는 [] 부분을 그대로 빈 배열로 두면 된다. 1. 문제 상황 useEffect(()=>{},[]) 얘를 넣어주면 이론상 딱! 한번만 불러와야 하는데...

오늘은 HTML의 기본 SEO 에 대해 알아보려고 한다. 사유는 몇일 전의 내가 TITLE 도 안 바꾸고 프로젝트를 올릴뻔한 적이 있어서 나는 HTML에 H도 모르는구나 라고 깨달았기 때문이다. 대참사는 눈치껏 막아냈지만.. 또한 우리가 만든 아기 웹앱 👶은 보다싶이 링크를 추가해도 아무런 미리보기를 제공해주지 않는다. 노션도 마찬가지이다. 한참 로딩이 걸리다가 - 그냥 링크 이름만 걸어준다 😥 대강 이런 느낌이다.. 콩지야.. 난 더이상 안되개써 🐸 이 이유에 대해서는 심각한 건 아니고 아주 간단하게 HTML 기본 SEO에 대해 알면 해결할 수 있게 된다. 🐵🐵🐵 우선 0. SEO 란? Search Engine Optimization의 약자로, 검색엔진최적화 를 의미하는데, 웹 사이트와 웹페이지를 검색..

완성본 사진... 렛츠고 JSON-SERVER ? 비교적 간편하게 아주 짧은 시간을 들여 REST API를 구축해주는 라이브러리. 주로 프로토타입을 만들거나, 공부하고 실습할 때.. 이용하는 서버로 사용하면 아주 굿인 도구 ! REST API 서버의 왠만한 기본적인 기능을 대부분 갖추고 있는데 프로덕션용으로는 부적합하다고 한다. 나는 공부하기 위한 용이니까 아무튼 렛츠고 ~! 🔌 JSON SERVER Setup 나는 npm을 사용해서 json-server를 설치했다. 서버를 붙이고 싶은 react 파일이 있는 폴더 최상단에서 터미널을 열어서 // 서버 폴더를 만들어준다. 나는 성장용이라 이름을 이렇게 지었다. $ mkdir server-grow // 만든 서버 폴더로 이동 $ cd ./server-gro..

SQL INJECTION 이란? 사용자가 정상적인 입력이 아닌 비정상적인 임의의 SQL 문을 입력해서 DB에 비정상적으로 접근하는 것.. 비정상적이지만 컴퓨터는 비정상인걸 몰라서 데이터를 다 줘버린다 (문제) SQL INJECTION 보안 방법 입력 값에 대한 검증 (지금 할거임) Prepared Statement 구문 사용 - 한줄로 조회 때려버리지말고 나눠서 검색 조건이 될만한 애들은 변수나 이런데 저장놓고 뽀개서 쓰란 소리 Error Message 노출 금지 - 디테일 한 것들은 개발 단계에서 개발자만 보자... 방화벽 사용 해결방법 나는 앞에서 말한 보안 방법들 중 1번 입력 값에 대한 검증을 해보도록 하겠다. 흔히 말하는 정규식을 사용 한 것인데.. 정규식(Regular Expressions)란..

🐵 현재 상황 게시글 delete 하면 바로 삭제되어버림 로그인한 정보를 바탕으로 게시글 작성자를 인식해서 수정/삭제 버튼을 열어주고 있기는 하지만 삭제 할까말까 고민하다가 손가락이 빨라버려서 열심히 쓴 글을 지워버린다면... 혹은 지우지 않아야할 글을 지워버린다면... 사용자가 꽤 슬프게 될 것이다. 물 한방울도 아껴써야 하는 이 세상에서 사용자의 눈물을 헛되이 쓰게 할 수는 없다. 렛츠고 수정 간단하게 confirm 한번 더 받고 확인 누르면 그때 axios 신호를 주도록 하자. C#에 messagebox 가 있듯, react에는 window.confirm이 있다. 사용법은 간단하다. window.confirm("띄우고 싶은 메세지"); 답변 값은 확인: true 취소: false 답변 값도 깔끔하게..

참고 블로그 원 참고 블로그 투 UI는 굳이 이쁘게 만들 생각이 없었고 원하던 기능만 말해보자면.. 구현하고 싶었던 기능 설명 사진 갯수에 제한 안두고 사진을 보여주고 싶음 -> 사실 몇개가 될지 모름 사진이동 1.1. 기본은 사진이 자동으로 넘어가게 할건데 1.2. 원하면 사진을 직접 넘길수도 있어야 한다 탭 이동하면 지정해둔 사진 바뀌어야 한다 별거 아니라고 생각했는데 마지막께 처음을 바라보고 있어야 하며 내가 구현한거는 양 옆에 사진 두장도 짜잔하고 보여주고 있어야 하므로 구현해두고도 이게 이렇게 복잡한 게 맞나 싶은 느낌이다. 구현 기술과 관련된 설명은 참고 블로그 원 에서 정말 상세하게 잘 다뤄주고 있기 때문에 나는 생략하도록 하겠다. 😇 Code 사진은 /public/store_image 에 ..