Jerry

웹 페이지 색깔 고르기 대장전! 오늘도 프로젝트 2주 차이다. 내가 속한 프론트 엔드 파트는 기획 단계에서 머물고 있다. 1주 차에 와이어프레임이나 플로우 차트를 그려본 상태지만 코드 작업에 들어가기 전에 웹 페이지의 첫인상을 줄 수 있는 랜딩 페이지를 인상적으로 보이길 원했기 때문이다. 랜딩 페이지를 시작으로 디자인과 기능들 위치 같은 전체적인 레이아웃을 보완 및 보충해 나갔고 자연스레 나머지 페이지들의 디자인과 테마들을 맞춰가고 있다. 이 과정에서 처음에 페이지 색감을 어떻게 잡을지에 대한 방법을 몰라 단순히 이 색 저 색을 가져와 이질감은 없는지 색끼리 조화는 어떤지 같은 비교하는 식으로 웹 페이지 콘셉트를 정하려고 했다. 하지만 색에 대해 무지한 나로선 색의 배합을 맞추기가 버거웠고 결국 구글에 ..

어제는 몸이 안 좋아 글을 쓰지 못해서 오늘 쓰기로 했다. 어제 팀원들과 기획 부분에서 wireframe과 기능 플로우를 짜는 시간을 가졌다. 그 후 다시 css 공부를 계속 이어나갔다. css 생각보다 쉽지 않다.. 꾸준히 공부하는 게 답이다... GRID 어제부터 글을 쓰는 현시점까지 grid를 공부를 했다. 시작하기에 앞서, flex를 이용해서 레아아웃을 쉽게 구성할 수 있는데 왜 grid가 필요한 것이고 왜 생기게 되었을까? 그 이유를 먼저 알아보자! flex의 한계와 grid의 등장 flex의 한계? 이게 무슨 말이지? 할 것이다. 이런 flex box가 있다고 가정해보자. 1부터 4까지의 박스가 레이아웃을 이루고 있는 상황에서 4 박스 오른쪽이나 2 박스 아래에 박스를 추가해보려고 한다. di..

오늘 프로젝트 2일 차에는 기획 회의를 진행을 했다. 팀 주제와 wireframe을 그려나갔다. 아직까지 뭔가 이슈거리가 없어서 특별히 글로 남 길거리가 없다. 오늘도 css 공부를 계속 이어나갔다. 오늘은 flex의 wrap, nowrap, reverse, align-content, flex-grow, flex-shrink, flex-basis에 대한 개념을 배웠다. wrap은 flexbox에게 child의 width 크기를 유지하라고 애기한다. nowrap; 무슨 짓을 하더라도 이 엘리먼트들은 같은 줄에 있게 한다. flex-grow / flex-shrink 는 원하는 자식의 크기를 얼마만큼 줄이거나 키우거나 할 수 있다. ( box 주변의 공간을 가져.) 예를 들어, response design할 ..

4주 프로젝트의 서막이 시작되었다. 4주 프로젝트는 포트폴리오와 직결이 되기 때문에 먼저 팀원 구성에 대해 긴장을 했다. 다행히도 해볼 만한(?) 팀 구성이 이루어진 것 같아 한시름 놓았던 순간이었다. 1. 프로젝트 기획 회의 #1 보통 1주 차는 SR 시간이라고 해서 기획 단계를 집중적으로 토의하고 정하게 된다. 이 주에서 기획을 한 것이 나머지 주에 영향을 주기 때문이다. 아무튼, 팀이 구성되고 나서 4명의 멤버는 자기소개로 아이스 브레이킹을 하였고 팀장 선정, 팀 주제 아이디어와 팀 룰(그라운드 룰), 스택 관련해서 각자의 생각을 주고받았다. 위 시간을 가지면서 신기했던 부분이 있었는데 2주 프로젝트 경우에는 이 부분이 쉽게 정해졌고 빠르게 지나갔었는데 이번 시간을 겪으면서 이야기를 들어보니 보통 ..

이야.. 2주 프로젝트가 끝이 났다.! 프로젝트 결과물 이번 2주 프로젝트는 2021.02.01 ~ 2021.02.15 동안 진행이 되었다. 오늘 이후로 2주 프로젝트에서 해방이다!! 후련 후련한 기분은 감추어지질 않는다. 하지만 4주 프로젝트가 바로 시작할 예정이다!! 후련한 기분은 다시 주머니 속으로... 좋다 좋아 :_))) 필자는 이번에 개발 첫 프로젝트에 첫 팀장을 맡게 되었다. 책임감과 부담 또한 있어서 팀장 노릇을 제대로 못 할까 봐 내심 걱정도 하고 역량이 부족함을 느껴 더 좋은 리더가 되어 더 좋은 결과를 못 낸 점에 대해서 미안한 마음이 줄곧 있었다. 2주 동안 나를 제외한 2명의 조원들 모두 첫 개발 프로젝트였고 어려운 점과 제약사항이 분명히 존재하였을 텐데 싫은 티 내지 않고 하나의..

요 며칠간 프로젝트 진도를 빼느냐 회고와 TIL도 밀어둔 채이번 설 연휴를 반납하여 팀원들과 프로젝트에 시간을 할애하였다. 하루종일 프로젝트 완성을 위해서 미친듯이 팀원 셋이서 지지고 볶고 지치고 낙담도 하고 웃기도 하면서 프로젝트 완성이라는 한 목표를 향해 전진하였다. 비록 처음 계획한 기능들과 수준은 훗날에 양보를 하고 현실과 타협을 했기 때문에 아쉽지만 기능들을 많이 쳐냈고 부족한 부분을 채우게 되었다. 며칠 전까지 프로젝트가 탄생할 수 있을까 하는 걱정도 했지만 다행히(?) 결과물은 탄생할 수 있게 되었다. :) 아직 많이 부족하고 목이 마르다. 이 갈증을 채울 수 있을 수 있을까 생각도 해본다. Sprint(스프린트) 지난 번 회고 글에서 우리 팀 레이아웃 이미지를 가져와봤다. 이때까지는 배포만..

2주 프로젝트의 막이 내려오고 있다. 2주 프로젝트 시간 언제 가나 싶었는데 순식간에 지나갔고 가고 있다고 느껴지는 듯하다. 오늘도 쌓인 기능 구현을 위해 팀 다 같이 으쌰 으쌰 했다. 하지만 다들 각자가 맡은 기능이 어려웠는지.. 컨디션이 별로 했던 것인지... 셋 모두 제대로 된 기능을 구현하지 못했다.. 아쉽지만.. 과정의 일부분이라고 생각하고 내일 더 잘하자고 서로에게 긍정적인 말로 팀플의 끝맺음을 했다. 데이터 정렬하기 오늘 내가 구현하려고 한 기능은 메인 페이지에 있는 트렌딩 버튼과 최신 버튼 기능을 구현하려고 했다. 시작하기 전까지는 이게 나를 힘들게 할지 몰랐다. 트렌딩 버튼은 하트 개수 기준으로 내림차순으로 게시글을 렌더링 하는 기능을 가지고 있고, 최신 버튼은 만들어진 순서 기준으로 게..

Infinite Scroll 인피니트 스톤... 아니 인피니트 스크롤을 만들어 보았다! 팀원의 권유로 위 기능을 만들게 되었고 구글링을 통해 힌트를 얻어 기능을 구현할 수 있었다. 힘들었던 부분은 "저 한 칸 씩 다른 이름, 다른 내용의 데이터를 어떻게 보이게 할 것이냐? " 였다. 머릿속으로는 구현이 이미 되었는데 코드로 옮기는 과정에서 잘 되지 않았다. 1) 데이터를 어느 컴포넌트로 일일이 값을 넘겨줄 것인지가, 2) 해당 컴포넌트 내에서 할 것이냐 props로 넘길 것이냐 3) 넘긴 data를 조건문으로 분기를 할 수 있느냐로 구분해볼 수 있을 거 같다. 처음에 map 메서드를 이용해서 상태값을 props로 넘긴 값들을 조건문을 통해서 일정 개수 단위로 끊어서 렌더링 하고 싶었지만... map 메소..