본문 바로가기

전체 글

 (347)
프로그래머스 데브코스 17주차 회고 with. TS 웹 풀스택 회고⏲81일차 (07.29)알고 있던 내용까먹었던 내용새로 배운 내용     82일차 (07.30)알고 있던 내용까먹었던 내용새로 배운 내용     83일차 (07.31)알고 있던 내용까먹었던 내용새로 배운 내용     84일차 (08.01)알고 있던 내용까먹었던 내용새로 배운 내용     85일차 (08.02)알고 있던 내용까먹었던 내용새로 배운 내용    좋았던 부분💯 반성💦 및 바꿔나갈 부분
도커란 무엇인가? 📖도커 Docker: Accelerated Container Application DevelopmentDocker is a platform designed to help developers build, share, and run container applications. We handle the tedious setup, so you can focus on the code.www.docker.com 도커는 컨테이너 기반 가상화 플랫폼으로 Linux, Windows, MacOS 위에서 실행되는 컨테이너 엔진을 제공합니다. 📑설치도커에서 제공하는 사이트에서 설치를 진행할 수 있습니다. 📑도커 허브도커는 도커 허브를 통해 컨테이너 이미지를 공유할 수 있고 관리해 주는 온라인 서비스를 제공합니다. 이를 활..
프로그래머스 데브코스 81일차 with. TS 웹 풀스택 📚요약지난 시간까지 프로젝트를 마무리했습니다. 이번 시간부터 과정의 이름인 풀 사이클은 어떤 의미이고, 파이프라인이란 무엇을 말하는지, CI/CD는 어떤 것인지, 도커, 쿠버네티스, 젠킨스와 같은 도구들은 어떤 것이고 어떻게 사용하는 것인지에 대한 답을 찾아보겠습니다. 📖웹 개발 파이프 라인 구축📄배포와 인도 자동화의 중요성📑전통적인 인도 프로세스Development→QA→OperationAnalysis, Planning, Implementation, Unit Testing, DemoIntegration Test, Acceptance Testing, Non-functional analysisRelease, Monitoring 단점느린 인도 기간느린 피드백 주기자동화 미비핫픽스 위험성개발문화 건전성..
프로그래머스 데브코스 16주차 회고 with. TS 웹 풀스택 회고⏲76일차 (07.22)알고 있던 내용까먹었던 내용새로 배운 내용- 컴포넌트 분리 - dayjs 라이브러리- Styled Components 기능-컴포넌트 직접 사용- 낙관적 업데이트(Optimistic Updates)라는 호칭오늘은 강의를 들으면서 가장 기억에 남았던 부분은 낙관적 업데이트라는 단어라는 것을 들었던 부분이다. 원래 알던 것의 호칭을 처음 알게 되어서 이렇게 부르는구나 하는 새로움이었다. 또한 오늘 강사님의 컴포넌트 분리하는 기준을 말해주셔서 컴포넌트를 분리하는 또 하나의 기준을 알게 되었다. 77일차 (07.23)알고 있던 내용까먹었던 내용새로 배운 내용- useMemo- useNavigate, useLocation 활용- 주소 검색(다음 서비스)- 임시 스크립트 로드- 타입스크립트..
프로그래머스 데브코스 80일차 with. TS 웹 풀스택 📚요약지난 시간까지 회고에서 부족한 부분을 찾고 구현했습니다. 이번 시간에는 메인 화면을 만들고 모바일 대응을 해보겠습니다. 📖Book Store 프로젝트📄메인 화면메인 화면에서는 크게 배너, 추천 도서, 신간 도서, 댓글 정보를 제공해 줍니다. 📑배너배너는 기존 리액트에서 제공해 주는 기능을 활용해 슬라이드가 되도록 만들어 보겠습니다. 다양한 방식이 있겠지만 css의 transform: translate()와 화면에 보여줄 배너 데이터의 인덱스를 이용하면 옆으로 이동시킬 수 있습니다. 해당 방식은 Styled Components처럼 CSS in JS 방식을 사용할 때 사용할 수 있습니다.🍯tip! 배너는 오른쪽 버튼을 클릭하면 왼쪽으로 움직이기 때문에 translate 시 -를 붙여야 한다. ..
프로그래머스 데브코스 79일차 with. TS 웹 풀스택 📚요약지난 시간에 회고를 하면서 찾았던 부족한 부분을 채워나가고 있었습니다. 이번 시간에도 이어서 진행해 보겠습니다. 📖Book Store 프로젝트📄리뷰 기능현재 백엔드의 기능에는 리뷰에 대한 부분이 구현되어 있지 않습니다. 이를 모킹 서버와 가짜 데이터를 활용해 백엔드에서 구현은 안 되었지만 프론트에서 화면을 구현하는 것을 해보겠습니다. 📑모킹 서버(Mocking Server) with. MSW모킹이란 임시로 없는 것을 있는 것처럼 만들어서 사용하는 것입니다. 테스트를 할 때에도 사용되지만 프론트에서 개발을 진행하다 보면 백엔드의 개발이 마무리되지 않을 때가 있습니다. 그럴 때 임시로 API의 응답을 만들어서 사용하는 것 또한 모킹입니다. 모킹을 하는 경우 단순하게 데이터만 만들어서 사용할 수도..
프로그래머스 데브코스 78일차 with. TS 웹 풀스택 📚요약지난 시간에 이어 회고와 함께 부족한 부분을 구현해 보겠습니다. 📖Book Store 프로젝트📄중간 회고회고를 하는 이유는 결론적으로 "더 잘하려고"라고 할 수 있습니다.성장과 학습문제 해결유연성과 적용성퍼포먼스 향상📑진행했던 학습 주제타입과 모델 : 타입을 작성해서 발생할 수 있는 오류를 예방한다. 모델을 작성해서 백엔드와 약속된 데이터를 프론트에서 확인해 볼 수 있다. TS에서 제공되는 유틸리티를 잘 활용하는 것도 중요하다.데이터 흐름컴포넌트 작성css 스타일링 : flex, grid의 활용.커스텀 훅+ 생산성을 위해 고민해 볼 것들스니펫 사용 : 코드를 조금이나마 덜 치도록 도와주는 것.기능 단위 작업 흐름 파악 : 개인의 작업에 맞게 순서를 정하는 것. 해당 고민이 왜 생산성을 높여주..
프로그래머스 데브코스 77일차 with. TS 웹 풀스택 📚요약지난 시간에 이어 도서 주문과 주문 목록을 구현해 보겠습니다. 📖Book Store 프로젝트📄useMemouseMem훅은 성능 최적화를 위해 연산된 값을 재사용할 수 있게 도와줍니다. 값을 저장해 두고 값의 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하고, 값에 변경이 있을 때만 값을 연산하고 성능을 최적화시킵니다. 자세한 내용은 공식 사이트에서 확인할 수 있습니다. Hooks API Reference – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org🍯tip! VSCode custom snippet 만들기 📄URL과 같이 데이터 전달하기화면을 이동하면서 데이터를 넘겨주고 싶은 상황이 발생할 수 있..

티스토리툴바