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

이전 글로 하여금 4주 프로젝트의 회고가 마무리될 줄 알았지만... 정규 스케줄 이후, 팀원 모두가 합심하여 구현하지 못했던 기능과 css 디자인 개선을 해보기로 되어버렸다! (이런 열정맨들!!!) 아무래도 코드스테이츠 (취업을 제외한) 모든 과정이 끝났으니 매일매일 블로그 글도 올리면서 취업 준비하고 싶었지만 막상 이것저것 같이 준비하다 보니 코스 과정보다는 몸이 자유로워졌지만 해야 할 일은 더 늘어났다. 끝날 때까지 끝난 게 아니라는... 아무튼 이번주는 블로그 글을 못 써서 아쉽지만 돌아오는 주부터는 TIL를 잘 써보려고 한다. (회고 남길 겸...ㅎ) (다만,, 너무 귀찮다는 점...) (TMI: 아참! 몇 주간 글을 못 써서 블로그가 망하는 거 아닌가 하는 생각을 하곤 했는데 오늘 보니 생각보다..

서문을 어떻게 시작해야 할지 고민이 되었다. 현재 회고를 남기는 시점이 4주 프로젝트가 끝난 후기도 하며 코드스테이츠 immersive 과정이 끝난 시점이기도 하며 프로젝트하느냐 바쁘다는 핑계로 회고글(혹은 블로그 글)을 쓰게 된 지 2주가 넘은 시점이어서 어떤 이야기로 글을 시작하면 좋을까 고민이 되었는데 (고민하다 회고를 영영 못 쓸 뻔했다..) 사족을 생략하고 프로젝트 중심으로 이야기해보겠다. 참고로, gif 부분에서 gif 안 보이신다면 조금만 참고 기다려주시면 짜잔! 하고 나타납니다! 혹시, gif 가 안 움직이시면 클릭을 하셔서 봐주시는 것을 권장드립니다! 0. 프로젝트 소개 이번 4주 프로젝트의 서비스명은 나간다 (nAgAndA) 이다. 나간다는 "계획된 일정을 공유하고 정리할 수 있는 서비..