뭘 배웠지?

엘리스 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..

엘리스 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..

엘리스 SW 엔지니어 트랙 71일차 팀 프로젝트 6일차 설날 주간에 부트 캠프 방학이 있었다 🎊🎊🎊🎊🎊🥳🥳🥳🥳🥳🎉🎉🎉🎉🎉 방학 부트 캠프 시작 이래로 계속 달려온 것 같다 팀 프로젝트가 끝나면 부트 캠프도 종료된다 이후 어떻게 움직일지에 대해 계획도 세우고, 오랜만에 한 숨 돌릴 수 있는 주간이었다 2주간의 팀 프로젝트 불태우기 시작! 오늘은 각 페이지에 프론트 1명, 백엔드 1명이 같이 개발하기로 정했다 프론트엔드 코스라 백엔드 하시는 파트너분도 프론트 정답게 한다 그렇다곤 하지만 맡은 페이지에 오픈 데이터 API를 사용하기에 어떻게 하면 더 효과적으로 사용할 수 있을까에 대해 의견을 나눴다 개발에 들어가서 처음부터 컴포넌트를 딱딱 나누고, 재사용되는 코드를 묶고, styled-components를 고..

엘리스 SW 엔지니어 트랙 70일차 팀 프로젝트 5일차 기획 발표 준비 내일 있을 기획 발표를 위해 기획을 전체적으로 돌아본다 페이지도 많고, 기능도 짧은 기간에 구현하기에 조금 많네 기획의 목적 그리고 유저가 왜 사이트를 사용할까 생각해서 기능의 우선 순위를 정했다 1차 2차 3차 그리고 추가로 구분해서 일정을 정하고 안전장치를 마련하면 될 것 같다 개발 준비 사용될 기술에 대해 다큐먼트를 읽어보는 시간을 가지려고 한다 개인적으로 styled componenets 그리고 하단 참고 링크 리액트 리팩토링를 통해 리액트 작성법을 엿보자 팀 미팅외에도 여러 미팅(오피스 아워, 커리어 빌드업) 있는 날이라 조급하지 않고 여유롭게 오늘을 가져가자 컴포넌트 내가 맡은 페이지를 이렇게 개발하려고 한다 1. 페이지를..