1. EC2 인스턴스 생성AWS에서 EC2 인스턴스 생성이 필요한데, 이 과정은 인터넷에 매우 잘 나와있어서 생략하겠습니다.저같은 경우는 다음 블로그를 참고했습니다.https://velog.io/@kyj311/AWS-EC2-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 저는 Amazon Linux기반의 EC2로 생성해줬습니다! 2. 인바운드 규칙 설정HTTP 80포트와 HTTPS 443포트를 열어주고, NextJS프로젝트를 올리기 위해 3000포트도 열어주었습니다.80이나 443포트로 들어오는 요청을 3000포트로 포워딩해주면 브라우저로 NextJs프로젝트를 볼 수 있습니다. 3. SSH로 EC2 컴퓨터에 접속해서 nodejs, pnpm 설치SSH로 EC2 연결하는 과정은 AWS에서 ..

결과 미리보기 더보기 구현하고 싶은 것페이지는 최대 다섯개까지만 보여줌내가 선택한 페이지가 가운데 위치했으면 좋겠음ex) 총 페이지가 8페이지, 내가 선택한 페이지가 6이라면, 4 - 5 - 6 - 7 - 8 이렇게 보여주기 구현한 방법현재 페이지와 총 페이지를 상위 컴포넌트로부터 Props로 받는다.1~총 페이지까지 배열 PageArray를 생성한다.PageArray배열을 slice를 이용해 현재 페이지 기준 앞 뒤로 2개씩 자른다.여기서 예외를 처리해줘야 하는데 가능한 예외는 다음과 같다.일단, 현재 페이지가 1이라면 그냥 1 2 3 4 5 이런식으로 보여줘야 함현재 페이지가 2여도 1 2 3 4 5그리고 현재 페이지가 총 페이지 - 1이라면 총 페이지가 8이라고 했을때, 4 5 6 7 8 이렇게 보..

1. 여러장의 이미지 파일 업로드하고 미리 보여주기 input 태그에서 onChange일때 addImageFile이라는 함수를 호출해준다.const [imageFiles, setImageFiles] = useState([]);const addImageFile = (e: React.ChangeEvent) => { let tmp = e.target.files; if (tmp) { const reader = new FileReader(); reader.readAsDataURL(tmp[0]); reader.onloadend = () => { if (reader.result) { setImageFiles(prev => ..

goodplassu 글 상세보기 페이지에서 댓글 작성하는 부분을 만들겁니다!결과 미리 보기 ↓더보기 1. 자동으로 크기 조절되는 textarea 만들기 (react + typescript)const textRef = useRef(null);const changeHandler = (e: React.ChangeEvent) => { setComment(e.target.value); if (textRef.current) { textRef.current.style.height = `auto`; textRef.current.style.height = `${textRef.current.scrollHeight}px`; }}; { changeHandle..

1. root directory에 .env 파일 생성❗️무조건 root directory❗️src 밑에 안됨 2. REACT_APP_ + 원하는 이름 = 으로 변수 생성 ❗️뒤에 세미콜론 붙이면 안됨💡만약 next라면 아마도 NEXT_APP_ 이런식으로 ! 3. (create react app은 생략 가능)npm install dotenv❗️만약 create react app으로 프로젝트 생성했다면 이미 자동으로 설치되어 있음 4. 원하는 파일에서 process.env.REACT_APP_이름 으로 환경 변수 접근 ⭐️ 5. 실행중인 local 서버를 껐다 키기 ⭐️원래 실행중이던 localhost에서는 적용 안됨 Ctrl + c로 종료 시키고 다시 npm run start 해야함 5번 방법을 몰라서 계..

goodplassu는 2년전 2022년에 전공 수업에서 진행했던 프로젝트이다.당시 react, javascript 모두 하나도 몰랐기에 지금보면 완성된게 놀라울 정도이다. ㅎㅎ일단 코드 부터 당시에 잘 안됐던 기능이 몇몇개 있었는데리팩토링 + 오류 고치기 + typescript적용을 목적으로 다시 시작하게 되었다. 먼저 기존 react에 typescript를 적용하려면 패키지 설치가 필요하다.npm install typescript @types/node @types/react @types/react-dom @types/jest 근데 문제는 이후에 npm install 했더니 react scripts와 typescript간의 버전 문제가 났다.npm ERR! code ERESOLVEnpm ERR! ERES..