분류 전체보기

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

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

간단하게 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..

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

데이터 가져오기 페이지네이션을 하기 위해서는 데이터가 있어야 한다. 우선은 데이터가 없으므로 게시물 데이터는 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..

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

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

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