뭘 배웠지?

엘리스 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년 계획서 고쳐야지 오늘도 스크럼으로 할 일에 대해 공유하는 시간으로 시작 서버와 통신해서 가져올 데이터에 대한 준비와 처음 접해보는 페이지네이션의 학습으로 시작했다 현재 더미 데이터로 쓰고 있는 부분밑에 // 주석으로 연결만되면 사용할 수 있도록 추가했고 페이지네이션은 스테이트로 꽤 간단하게 구현됐다 목요일까지 마무리하고 전체적으로 점검하는 시간을 가질 수 있도록!

엘리스 SW 엔지니어 트랙 75일차 팀 프로젝트 10일차 어느새 10일차 주말 제외하고 어느새 10일차다 혼자 개발을 할 때보다 코드에 더 신경을 쓰게된다 팀원이 사용할 수 있도록 코드를 작성하니까 작성시의 기준도 생기고 좋다 컴포넌트 구분 기준 예를들면 컴포넌트를 구분할 때 어디에 넣어도 작동하도록 독립을 시켜준다 버튼은 딱 버튼이고, 프로그레스는 딱 프로그레스 등 예를들면 MUI가 컴포넌트를 나누듯 이렇게 배워가는구나 오늘 크게 2군데에서 고전을 했다 첫 번째는 비동기적으로 받은 데이터를 그려주는 것 리액트의 렌더링 방식을 깊게 생각해보게 되었다 중간에 어떻게 돌아가게 만들었는데 명확하지 않아서 돌아돌아 마침내 완성 두 번째는 컴포넌트 독립시키기 위해서 '컴포넌트 구분 기준'처럼 이미 얽히고 설킨 컴..

엘리스 SW 엔지니어 트랙 74일차 팀 프로젝트 9일차 오늘도 프론트, 백 페어로 각 페이지 개발 삼매경 👨‍💻👩‍💻👨‍💻👩‍💻👨‍💻👩‍💻 개발 맑음 기능 세분화하고 To do 만들어서 하나씩 구현하고 컴포넌트로 나누며 의존성 떨어뜨리고 테스트까지 착착 스타일 흐림뒤 맑음 그려놓은 피그마에 따라 만들어야 되는데 생각대로 안되고, 값을 이리저리 변경해보다가 한 속성의 파워로 스타일 구현은 물론 기본적인 반응형도 가져가게 되었다 그 속성 이름하야 clamp() width: clamp(0px, 100%, 600px); clamp(최소크기, 지금크기, 최대크기) 간단하게 최소크기, 보통일 때 크기, 최대 크기 지정하는 것 항상 지정하는 버릇 들이면 나중에 미디어 쿼리 작성이 줄어들 듯! 아무튼 구세주 clamp..

엘리스 SW 엔지니어 트랙 73일차 팀 프로젝트 8일차 본격적으로 개발을 시작한지 3일차가 되었다 각자 맡은 코드에서 고군분투 중일걸로 보인다 나도 그렇고 컴포넌트화 맡은 페이지의 기능은 작동이 되도록 어제 만들었다 오늘은 코드 정리와 스타일을 마무리 하려고 했지만 내일 끝내게 될 듯 싶다 이유는 코드 정리에 생각보다 시간이 걸린 것 기능 구현에 힘을 쓴 코드를 독립성 있는 컴포넌트화 시켜주는 일을 했다 다른 페이지에서도 거의 똑같은 쓰이기 때문에 여기서 작업을 해주면 가져다 쓸 수 있기 때문이다 코딩 검색 코딩 검색 쉼 코딩 검색 코딩 마침내 독립성 꽤 유지! 그리고 다른 이유는 스타일에 생각보다 시간이 훨씬 걸린 것 여기서 검색이 대부분의 시간이 걸렸다 넓이, 높이, 박스에 대한 이해도도 증가 시켜야..

엘리스 SW 엔지니어 트랙 72일차 팀 프로젝트 7일차 오늘도 스크럼이라는 회의로 시작! 스크럼의 목적은 팀원의 작업 공유와 해결할 문제에 대해 같이 의논하는 것이겠지 어떻게 하면 의례적이지 않고 효과적으로 사용할 수 있을까 생각을 해봤다 아무래도 스크럼 포한 공유 활동 관리를 전담하는 사람이 있으면 기획에도, 디자인에도 그리고 개발시에도 문서적인 정리 뿐만 아니라 공통으로 사용되는 리소스에도 정리가 잘 되지 싶다 나부터 이런 일에 기여를 할 수 있도록 움직이자! 큰 수확 상태 관리 React로 개발하며 현재까지 제일 큰 수확은 상태 관리다 조금씩 더 리액트의 작동 방식에 대해 이해하게 되었고 언제 글로벌한 상태관리가 동아줄을 던져줄지도 알았다 styled-components styled-componen..