뭘 배웠지?

Next.js Crash Course를 보고 배운내용 Next.js 프론트엔드 + 백엔드 콤비네이션으로 Vercel이라는 회사가 만들었다 정적인 사이트도 가능하고, 서버사이드 렌더링 가능 중간이상의 리액트 프로젝트, 프로덕션 레벨의 앱을 만들면 Next.js로 만들고 싶을거라고 한다 장점 API Routes TypeScript나 Sass 사용하고 싶으면 그냥 확장자만 변경하면 된다 디플로이가 쉽다 Vercel, heroku 등으로 쉽게 푸시 ... 등 라우팅 라우팅 기능이 정말 쉽다 CRA에서 react-router-dom으로 했다면 여기서는 그냥 pages 폴더에 넣으면 끝이다 예를 들어 pages폴더 안에 about.js를 만들어주면 localhost:3000/about.js 이렇게 접속이 가능하다 ..

일지 2022/03/24 개발 항해를 하면서 머리 정리하러 기록해야겠다 카테고리 부자 또 새로운 카테고리를 추가했다 '개발일지' 카테고리 부자 되겠군 NextJS 항해 시작 누군가 NextJS가 CRA의 superset이라고도 하네 안해볼 이유 없지 하고 NextJS 항해중 그냥 읽는건 재미없으니 만들면서 배워야지 API 긁어와서 만드는게 재밌어서 긁어오는 프로젝트 만들기 시작한 것은 Affiliate 관련으로 여러 군데의 API를 사용하게 될 것 같다 우선 기본 틀을 마련하고 피드백을 받아보고 로그인, 보안 등 까지 이어질수도 그런데 지금 CORS 녀석에 이틀정도 막혔네 그 이유는 CRA랑 proxy 설정 법이 다른 거랑, 가져오는 데이터가 xml 인지 몰랐네 허허 참고링크 1, 2, 3으로 해결! x..

리액트를 배우고 있는 현재 Web3로 뛰어 들 때 도움되도록 북마크를 위한 포스트 - Fundamentals of CS - HTML and CSS - JavaScript - React - Solidity - Chai - Web3.js / ethers.js - A CSS framework - Hardhat - Alchemy - IPFS - Pinata 출처 트위터 => https://twitter.com/VittoStack/status/1497169528903680000 전체 로드맵 및 리소스 => https://vitto.cc/web3-and-solidity-smart-contracts-development-roadmap/

엘리스 SW 엔지니어트랙 졸업 80일간의 프론트엔드 일주 80일간의 프론트엔드 일주 엘리스 SW엔지니어트랙으로 80일간의 웹의 세계를 무사히 완주했다. 재밌게 봤던 쥘베른의 '80일간의 세계일주'과 같은 포맷이 되니 괜히 좋다 세계 일주를 겉핥기로 했던 것과 달리 부트캠프에서 배운 스킬을 제대로 사용하고 싶기에 16주간의 배운 내용을 정리해보려고 한다 목적은 1. 배운 정리 내용 2. 프론트엔드 공부 로드맵 for 독학러 3. 배운 기술 중 강화할 기술 선택 4. 새롭게 배우고 싶은 기술 요약(TL;DR) 1. HTML, CSS, Git 2. JavaScript, DOM, Node(개념) 3. 프로젝트: 간단 자기소개 페이지 4. TypeScript 5. Node.js(백엔드) 6. 프로젝트: JavaS..

엘리스 SW 엔지니어 트랙 80일차 팀 프로젝트 15일차 드디어 오늘은 2차 팀 프로젝트 마지막 날 아침부터 코치님의 피드백을 받고 주로 디자인, 작은 결핍(?)들을 고쳐가고 있다 막바지에는 브랜치를 파고, 머지하고 하는 일이 자잘자잘하게 많아지는 구나~ 점검의 시간 배포가 된 후 기능, 반응형 등 마지막 점검을 시작한다 기능이 잘 작동이 되어 조금 편한 마음으로 스타일을 이리저리 바꿔도 보고 어떻게 하면 조금 더 시선을 끌 수 있을까 생각도 해본다 참고 링크 useNavigate => https://dev.to/salehmubashar/usenavigate-tutorial-react-js-aop

엘리스 SW 엔지니어 트랙 79일차 팀 프로젝트 14일차 시원하게 해결 어제 새벽까지 잠이 안오게 했던 서버와의 통신 부분 속 시원하게 해결!! 문제는 간단한 문법의 실수에서 시작되기도 하는구나~ 다음 API는? 이번에 팀 프로젝트는 공공데이터를 사용한다 처음 이 API를 살펴볼 때는 데이터도 많아 보였고 꽤 자세히 되어있다고 생각했다 하지만 실제로 연결하고 받아와서 UI를 구성해보고 나니 빈 데이터도 많고 잘못된 데이터도 있었다 다음 프로젝트에서 API를 사용한다면 첫번재로, 데이터 양이 많은 것 그리고, 데이터가 똑바로 되있는지 이번 보다 더 확인! 위대한 FLEX 넓이를 정할 때 대체적으로 밑의 코드를 사용했었다 width: clamp(0px, 500px, 100%); 이유는 왠만한 어디어 붙여놔도..

엘리스 SW 엔지니어 트랙 78일차 팀 프로젝트 13일차 대망의 서버 연결 더미로 작성된 것을 치우고 서버와 연결의 날 생각대로 여러 문제 발생했다 모달 뒷배경 스크롤 금지 모달 뒷배경 CSS로 하는 방법을 생각하다 구글에게 물어봤다 useEffect를 적절히 사용하면 이렇게 할 수 있구나~ 그리고 이런 페이크가!!! 모달 주위서부터 어떻게 하려고만 했지 body 스타일을 올려서 보여주는 생각은 못했다 보여주는 방식에 대해 한층 더 다각도로 봐야겠다 useEffect(() => { document.body.style.cssText = ` position: fixed; top: -${window.scrollY}px; overflow-y: scroll; width: 100%;`; return () => { ..

엘리스 SW 엔지니어 트랙 77일차 팀 프로젝트 12일차 스크럼으로 시작 오늘도 스크럼이라는 짧은 회의로 시작 어제 한 일과 오늘 할 일을 공유하는 시간이다 여기에 더하기로 업무 툴이 있으면 좋을 것 같다 업무 툴도 좋고 노션에 템플릿을 만들어서 작업중인 것과 내용을 공유하면 1. 내 동료가 뭘 하는지 알 수 있어서 업무 분담 2. 이미 한 작업과 할 작업을 확인하고 일정 관리 3. 개개인으로도 뭘 하는지 명확하게 정리 이런 이점이 생길 듯 싶다 Debugger!!! 어제 발생한 버그를 고치려고 git으로 시간여행을 하며 이리 고치고 저리 고치고 했지만 찾지 못했다 어제도 debugger를 사용했지만 오늘은 React의 라이프사이클을 고려하며 debugger를 의심 가는 부분부터 붙여가보며 확인했다 마침..

엘리스 SW 엔지니어 트랙 76일차 팀 프로젝트 11일차 프로젝트 마지막 주 돌입 3주의 짧은 프로젝트지만 이제 마지막 장으로 나아간다 이 프로젝트가 마무리되면 엘리스도 마무리다 나름 잘 배운건지 만들고 싶은 것들 그리고 배우고 싶은 것들 투성이다 끝나고 나면 배운내용 쭈욱 돌아보고 배울 것들 쭈욱 정리해서 1년 계획서 고쳐야지 오늘도 스크럼으로 할 일에 대해 공유하는 시간으로 시작 서버와 통신해서 가져올 데이터에 대한 준비와 처음 접해보는 페이지네이션의 학습으로 시작했다 현재 더미 데이터로 쓰고 있는 부분밑에 // 주석으로 연결만되면 사용할 수 있도록 추가했고 페이지네이션은 스테이트로 꽤 간단하게 구현됐다 목요일까지 마무리하고 전체적으로 점검하는 시간을 가질 수 있도록!

컴포넌트를 가져와서 색상을 바꾸거나, 마진을 주거나 스타일을 바꾸려고 styled-components 공식 문서를 보고 (=> https://styled-components.com/docs/basics#styling-any-component) className를 넣어주는 간단해 보이는 방식인데 안됐다.. 1시간에 걸친 검색, 실험을 했고 매우 작고, 치명적인 실수를 발견했다 밑의 예는 가져온 버튼 컴포넌트에 margin을 주고 싶었던 1시간의 고통 문제의 코드 StyledButton을 우선 만들어줬다 Button.style.s import 'styled' from 'styled-components' const StyledButton = styled.button` background: blue; color..