분류 전체보기

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

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

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

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..

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

리눅스에서 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로 해서 내부접근하는 경우와 외부접근하는 경우도 있기에 아래 사이트를 참고..

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..