Jaypedia

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

CodeSquad🔹Day 86 Presentation - Browser Rendering Process 오늘은 크롱의 수업 대신 미니 세미나가 있는 날이었다. 나는 저번 주에 미리 구글 시트에 발표 순서를 선점해 두고, 주말에 발표 자료를 준비했다. 주제는 Browser Rendering Process로 정하고, 발표 자료는 저번 세미나에서 도트가 만들었던 피그마 자료에 영감을 받아서 나도 피그마를 활용해 보았다. 피그마 발표자료로 발표한 것은 처음이었는데, 다음에는 안 쓸 것 같기도 하고 잘 모르겠다. 하지만 학습한 것을 시각적으로 보여주기엔 편했다. 발표를 준비하면서 브라우저 렌더링 과정의 기본적인 흐름을 이해할 수 있었다. 물론 세부적으로 더 알기 위해 공부가 더 필요하다. 나 포함 총 13명이 발..

CodeSquad🔹Day 85 Project - UI 완성 & Pull Request Styled Components를 활용해서 UI를 모두 완성했다. 오늘은 2시까지 PR을 보내고, 3시에는 피어 세션이 있었다. 피어 세션에서 UI를 코딩하며 고민한 점을 공유해 보았다. 피그마 디자인 시안을 만들 때, 화면 자체의 크기가 아닌 브라우저의 내부 높이(innerHeight)를 고려해서 짜야 좀 더 정확한 디자인이 가능하다는 것. Styled Components 쓸 때 전달하는 props에 따라 스타일을 변경하고 싶을 때 switch case문을 활용한 것 - 객체로도 가능하다. font 적용이 안 되어서 고생했던 것 이와 관련해서 제이가 알려준 것이 있다. createGlobalStyle에 @import ..

CodeSquad🔹Day 84 Vending Machine Project Design grid를 적용해서 자판기 디자인을 거의 완료했다. 도안과 비교해 보니, 약간 다른 점도 있지만 거의 비슷하게 나왔다. React Router v6 적용 React Router v6 튜토리얼 리액트 라우터 v6를 새로 접하시는 분들을 위한 튜토리얼을 작성했습니다. 리액트 라우터 v6 의 기본적인 사용법, 그리고 이 라이브러리에서 제공하는 다양한 유용한 기능들에 대해서 알아봅시 velog.io 위 글을 참고해서 React Router를 학습하고 적용해 보았다. 개념부터 코드 예제까지 차근차근 쓰여 있어서 공부하기 매우 좋았다. 중첩된 Route를 사용할 때, Outlet 컴포넌트를 써서 처리하는 것이 신기하면서도 편했다...

Class by Honux - 클라우드와 인프라의 기초 처음 접해보는 분야라서 생소했지만, 클라우드와 인프라는 백엔드는 물론이고 프론트엔드라고 해도 알아야 하는 지식이라고 한다. IDC, REST API, Infrastructure, PaaS, Sticky Session, Load Balancer 등과 같은 키워드가 나왔다. 좀 더 체계적으로 알아보기 위해 기초 책을 찾아보았다. 그림으로 배우는 클라우드 인프라와 API의 구조 - YES24 이 책은 클라우드, 그 중에서도 IaaS와 같은 인프라 부문에 종사하는 엔지니어를 위한 책이다. 특정 클라우드 서비스에 종속된 기능이 아닌 좀더 거시적인 관점에서 클라우드 인프라를 이해할 수 www.yes24.com Project & Pull Request 이번에 진..

CodeSquad🔹Day 82 요구사항 분석 - User story User story를 적는 방식으로 요구사항 분석을 했다. 간단한 프로젝트라고 해도 꼭 필요한 부분이었다. 요구사항 분석 방법 - 실용주의 프런트 엔드 개발 작성 형식은 ~하면 ~할 수 있다 와 같은 형식으로 언제, 무엇을 하는지 정의하며, 하나의 기능만을 표현한다. 그리고 기획서를 왼쪽에서 오른쪽으로 위에서 아래방향으로 보면서 각각의 사용자 peter-cho.gitbook.io 위 글에 따르면 사용자 스토리란 기획서에 표현된 기능을 사용자 입장에서 작성한 기능의 사용방법이다. 사용자 입장에서 작성함으로써 보완이 필요한 기능이 있는지를 알 수 있게 된다. 작성 형식은 ~하면 ~할 수 있다 형식으로 작성하며 하나의 기능만 포함해야 한다. ..

CodeSquad🔹Day 81 Project [Vending Machine] 방학이 끝나고 첫 프로젝트는 개인으로 진행하게 되었고, 주제는 바로 React로 자판기를 구현하는 것이었다. 그런데 2주간의 프로젝트 치고는 저번 프로젝트와 달리 디자인 시안이 없어서 그냥 내가 만들어버렸다. 어차피 디자인은 자유이기도 하고, 2주나 할 건데 디자인이 없으면 동기 부여도 잘 안 될 것 같았다.(2주 프로젝트가 아니라 며칠 하고 마는 미션 같은 거였다면 굳이 만들지 않았을 것이다.) 디자인을 하면서 내 생각을 반영하는 게 정말 재미있었다. 만들어 나가면서 내가 더 낫다고 생각하는 것은 살짝 바꾸거나 추가하기도 했다. 사실 더 중요한 건 구현을 하는 것이라는 것을 안다. 내일부터는 프로젝트 셋업도 제대로 해 볼 것이..

CodeSquad🔹Day 80 2주 간의 프로젝트가 끝나다 2주가 정말 빠르게 지나갔고 벌써 프로젝트가 끝이 났다. 하지만 정말 끝이 난 것은 아니다. 아직 마지막 PR에 대한 리뷰를 받지 않았고, 3번째 PR 리뷰는 적용하지 못했다. 또한 Slider를 구현할 때 로직이 아직 설명할 수 있을 정도로 정리가 되지 않았기 때문에 이를 블로그에 한 번 정리해 보려고 한다. React와 좀 더 가까워질 수 있는 프로젝트였지만 아직 모르는 것이 많아 그만큼 한계도 많이 느꼈다. 앞으로 1주일 간의 방학 동안에는 React Hooks 등을 학습하며 React에 대해 더 가까워지는 시간을 가질 예정이다. 오늘은 발표도 두 번이나 있었다. (전체발표, 페어세션) 그러다 보니 하루가 더 정신이 없이 빠르게 지나갔다. ..