Jerry

SideProject 오늘 기존 정적 웹 페이지인 HTML 마크업을 리액트 코드로 전환하였다. next.js를 적용해서 하다보니 에러 핸들링 하면서 시행착오가 많았다. 1. Prerender Error prelendering error가 특히 많이 발생했는데 이 에러 대한 레퍼런스를 보긴했지만, export 설정을 잘 해주었고 pages 폴더 안에 해당 페이지를 잘 위치해두었기에 결국에 발견하지 못한 에러를 찾으려고 시간을 많이 보냈다. cf) Prerender Error : https://nextjs.org/docs/messages/prerender-error 2. styled-components 활용한 리렌더링 방지 또한, 인라인 스타일로 css 속성을 적용할 경우, 불필요한 리렌더링을 발생하게 되는..

SideProject 오늘은 CSS 작업을 하였다. CSS가 아닌 SCSS(SASS)를 이용하였다. Header → Main → Login → SignUp → Cart → Item Info 순 위 순서대로 하려고 했는데, 하다보니 Header, Main, Cart, Item Info 페이지 순으로 했다. 못한 Login, Signup 페이지는 다음날 계속 이어서 할 예정이다. 예전에 SCSS를 처음 접할 땐, 익숙하지 않았는데 이번에 다시 복습하고 적용해보니 저번보단 유연하게 현재 개발코드에 적용시킨거 같아서 재미있었다. 모르거나 어려운 문제일수록 자주보고 오래보면 자연스럽게 알게 되는거 같다!

SideProject - React로 NodeBird SNS 만들기 (Hello, Next.js & antd 사용해 SNS 화면 만들기), 2.3 referer 이전 페이지, opener: 누가 나를 열었는지 Made by Jaylee 리액트에서 배열에서 jsx 사용할 땐 키 적어줘야 한다. onFinish - antDesign에서 form은 새로고침 안 되게 되어있어서(이미 적용) preventDefault()를 하지 말아야한다. 리액트 리렌더링은 해당 함수를 전체를 다시 렌더링하지만, 실제로는 바뀐 부분만 리렌더링된다. return 부분을 virtualDOM이라고 생각, 리액트에서 리턴 한번그려줘요, 이전 virtualDOM과 현재 virtualDOM을 비교해서 달라진 부분을 리액트에 알려줘 그 부분..

Side Project 오늘은 회원가입 페이지, 장바구니 페이지, 상품 정보 페이지에 대한 레이아웃을 마크업하는 작업을 진행했다. 그 후, PM2로 nodeJS가 백그라운드에서 실행하도록 할 수 있게 설정하였고 aws s3를 활용한 클라이언트를 배포를 띄우는 것까지 완료를 하였다. 그 후 todolist상에는 CSS 작업을 하기로 했는데, 문득 CSS작업을 먼저할지 리액트 작업과 같은 framework를 적용할지 고민이 되었다. 배운 점 1. s3로 클라이언트 배포를 진행하는 과정에의 고민 s3로 클라이언트 배포를 진행하는 과정에서 react로 코드를 짠 상황에서는 npm build를 이용해 build를 진행 후 클라이언트에 배포하면 되지만, 나는 html로만 정적페이지를 구성해놓은 상황이라 순간 멘붕이..

Side Project 오늘 프로젝트 진행 목표는 layout 마크업 작업과 그 후 S3를 활용해서 만든 마크업을 배포까지 하는 것을 목표로 하였다. 프로젝트말고 다른 공부도 같이해서 그런지 시간 배분을 잘 못 했던 거 같다. 내일부터는 1순위로 먼저 끝내도록해야겠다. 각 페이지마다 들어가는 Header 부분과 랜딩 페이지, 로그인 페이지 마크업 작업만 하고 깃헙에 푸시하고 마무리하였다. 아쉬웠던 점 각 페이지 마크업 작업할 때마다 브랜치 땋고 pr 날리고 merge하는 과정에서 단순하게 index.html 파일 하나만 merge하고 있었다. 다행히 큰 문제 없게 알아채서 다행이지만 기본적인 실수를 해서 아쉬웠던 부분이었다. 눈치챈 후 index.html 파일명 대신 각 페이지 이름으로 rename 하였다.

Side Project 오늘 프로젝트 진행 목표는 aws ec2 인스턴스를 만들어 aws와 연동하여 "Hello World!"를 띄우는 것과 Front-end Layout까지 하는 것이었다. 배포는 나중에 가서 한꺼번에 하게되면 버그가 났을 때 디버깅하기 힘들다는 것을 알기 때문에 먼저하려고 했다. 오랜만에 하는터라 여러 레퍼런스를 참조하면서 했다. 애먹었던 점 오랜만에 해보는거라 aws에도 익숙하지 않은 상태였다. ec2 인스턴스를 만든 후 node.js로 서버와 연결하기 위해서 node.js 코드가 당연히 있어야 하는 것도 기억을 못하고 있어서 시간을 잡아먹었다... 하지만 무엇보다도 어처구니 없는 부분에서 시간을 많이 잡아먹었다. 인스턴스 만들고 보안설정까지는 잘 설정했지만, 퍼블릭 IPV4 DNS..