본문 바로가기

전체 글73

Header와 Footer의 position 속성 Header CSS의 postion 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정한다. Header의 경우 모든 상황에서 항상 최상단에 위치하는 것이 일반적이므로, Header의 postion 속성은 fixed로 지정해주는 것이 일반적이다. postion: fixed; top: 0; width: 100%; 이렇게하면 Header는 완전히 독립되어 브라우저 화면(viewport) 상에서 항상 최상단에 위치하게 되며, 브라우저 화면을 스크롤했을 때도 영향을 받지 않기때문에 움직이지 않는다. 하지만, 처음이라면 생각하지 못할 요소가 있는데 그것은 바로 '완전히 독립'되어 있다는 점이다. Header 밑에 바로 body를 만들었을 경우 Header는 body와는 완전히 독립되어 있기때문에 body의.. 2023. 7. 12.
메인페이지 완성! CSS는 어렵다.... 정말 어렵다! 지금은 메인프로젝트 진행 중.... 어제 밤에는 멘토님과의 멘토링이 진행되어서 블로깅을 하지 못해서 오늘 적어본다. 메인프로젝트 직전, 프리프로젝트 때는 StackOverflow를 클론코딩하는 것이 주제였다. 짧았던 기간에 비해 꽤 높은 싱크로율의 UI가 나왔고 기능 구현도 많이 해내서 다른 팀들에 비해 완성도가 높았다. 그 때 당시에도 CSS 때문에 참 머리가 아팠는데, 그래도 많이 익숙해져서 도움이 많이 되었던 시간이었다. 그래서 이번 메인프로젝트 때는 CSS 부분은 금방 넘어갈 수 있겠지... 라고 생각했는데 그렇지가 않다. 개발을 하다보면 어떻게 매번 이렇게 새로운 문제들이 매일같이 생기는지 정말 신기할 정도다. 프리프로젝트때는 로그인 / 회원가입을 맡았는데 이번에는 우선 헤더와 푸터 그리고 메인.. 2023. 7. 11.
브랜치 관리를 어떻게 해야할까? 프리프로젝트 때 브랜치 관리의 중요성을 몸소 겪으면서 이번 메인프로젝트 때는 완벽하게 브랜치를 관리해보자고 다짐했었다. 그러나 막상 프로젝트를 진행해보니 이게 쉽지 않다. 계속해서 잘게 쪼갠 컴포넌트들에 수정해야 할 상황들이 생겼기 때문이다. 원격 브랜치는 Main - Dev - FE - BE 이런 식으로 관리하고 있어서 아직까지는 문제가 없다. 문제는 로컬 브랜치이다. 예를들어 내가 FE_Footer 브랜치와 FE_Header 브랜치를 만들었었고, Footer와 Header의 개발을 끝내서 MainPage 개발을 위해 FE_MainPage 브랜치를 만들어서 작업을 시작했다고 생각해보자. Footer와 Header는 개발이 끝난 상태였으니(끝났다고 생각했으니) 원격브랜치 FE에 Merge를 한 상황. F.. 2023. 7. 11.
import 할때 중괄호 { }의 의미는 무엇일까? Header와 Footer의 개발이 끝났기에, 오늘은 메인페이지에 들어갈 컴포넌트들을 만드는 작업을 하였다. 무탈하게 개발을 하고 있었는데...... 오늘도 역시나 오류를 만나버렸다 :) import { TagWrapperStyled, NoLineTag } from './NoLineTag'; 이 녀석이 오늘의 만난 문제의 원인!! import NoLineTag from './NoLineTag'; import { TagWrapperStyled } from './NoLineTag'; 이게 원래 import 구문이었는데, 똑같은 곳에서 import 해오는 건데 두 줄로 적혀 있는게 마음에 안들어서 NoLineTag도 중괄호 안에 넣어버린게 화근이었다. 알고보니 단순히 묶어주기만 하는 줄 알았던 저 중괄호에도 .. 2023. 7. 7.
Github에서 Merge 취소하기 pull request를 올린 후 팀원들이 코드리뷰를 해주었다. 몇몇 수정해야할 사항을 알려주셨고, 간단한 수정을 마친다음 내가 직접 Merge를 하기로 하였다. 사실, pull request를 한 번 올려놓으면 수정사항을 수정 한 후 commit을 올리면 자동으로 이 pull request에 적용이 된다. 하지만 그때의 나는 이걸 미처 몰랐다. 그래서 pull request틀 취소한 후, 코드를 수정한 뒤, 다시 pull request를 올려서 Merge를 하였다. 바로 이 때 오늘의 비극이 시작되었다. FE에 Merge를 했어야했는데, 실수로 Main에 Merge를 해버린 것. 취직한 후 이런 실수를 했다면(애초에 내가 직접 Merge를 할 일도 없겠지만) 나는 짤렸을 지도 모른다. 지금이라도 이런 .. 2023. 7. 6.
Footer 개발 중 발생한 오류 어제 역할배분을 나눴는데, 내가 우선 Header와 Footer를 담당하기로 하였다. 그리 어려운 작업이 아니라 생각했기에 금방 끝낼 줄 알았는데, 하루를 다 써도 Footer를 완성시키지 못했다. 왜냐하면..... 문제는 바로 저 왼쪽에 생긴 여백. 개발자 도구를 활용해서 살펴보니 이렇게 나왔다. 코드를 아무리 살펴봐도 저런 값을 준 적이 없어서 도무지 이해가 가지 않았다. 모든 padding이나 margin 값을 좌우대칭으로 줬었기에 저런 비대칭이 나온다는게 이해가 되지 않았다. 몇 시간 동안이나 Footer 컴포넌트 안의 스타일드컴포넌트 요소들을 이것저것 수정해봐도 결국 해결하지 못했다. #root { /* max-width: 1060px; margin: 0 auto; */ padding: 2rem.. 2023. 7. 5.
메인프로젝트 시작! 5일 전에 있었던 메인프로젝트 팀빌딩. 팀장님의 아이디어가 마음에 들어서 참가 신청을 하였고, 팀이 완성되었다! 프리프로젝트 때의 경험을 떠올리며, 본격적인 개발에 들어가기 전에 회의를 많이 하기로 하였다. 그래서 약 5일 동안 팀회의를 거쳐 아이디어를 다듬었고, 사용자요구사항 정의서를 작성하고, 화면 정의서를 만들고, 피그마도 완성하고, 칸반보드를 만들어서 역할분담까지 끝마쳤다. 개발 환경 초기세팅도 완료하였기에 이제부터 개발 시작! 디자이너 출신이신 팀장님이 피그마를 정말 완벽하게 만들어주셔서, 이제부터 피그마를 보고 그대로 따라서 UI를 만들면 아주 편할 것 같다. 경험이 많지 않다보니 항상 새로운 프로젝트를 시작할 때면 헷갈리는 부분이 많은 것 같다. 깃허브 사용법이라던가, eslint & pre.. 2023. 7. 4.
프리프로젝트 회고(스택오버플로우 클론코딩) 프리프로젝트 시작 전, 코드스테이츠 프론트엔드 부트캠프 과정을 나름대로는(?) 잘 따라가고 있다고 생각했지만 실전경험이 부족한 탓(수업 끝나고 주도적인 학습을 했었어야 했는데....!)에 팀원들에게 민폐를 끼칠까 봐 매우 염려되었다. 머리로 이해하는 것과 손가락이 기억하는 것은 분명히 다르니까. 그래도 정말 운이 좋게도 좋은 팀원들을 만나서 프리프로젝트를 나름 성공적으로 해낸 것 같아서 뿌듯하다. 팀장 & 팀원분들이 원활한 의사 소통을 할 수 있도록 여러 가지 초기 환경을 구성해 주셨고(기본적인 규칙이라던지, 슬랙을 활용한 커뮤니케이션 등등) 나는 그 위에서 맡은 분야를 코딩만 하면 됐으니 얼마나 고마운 일인가? 어느 정도 역할분담을 나눈뒤에는 주로 프론트는 프론트끼리 백엔드는 백엔드끼리 나뉘어서 작업을.. 2023. 6. 27.
modal 컴포넌트의 아이콘의 크기가 페이지마다 달라지는 현상 import styled from 'styled-components'; import { close } from '../../redux/reducers/modalSlice'; import { useDispatch } from 'react-redux'; const ModalWrapper = styled.div` position: absolute; width: 100%; height: 100%; `; const ModalBackDrop = styled.div` background-color: rgba(0, 0, 0, 0.3); position: fixed; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-.. 2023. 6. 23.
공통 컴포넌트인 Header가 페이지마다 다르게 나오는 현상 const HeaderContainer = styled.header` position: sticky; min-width: auto; width: 100%; height: 3.5rem; display: flex; align-items: center; border-top: 3px solid var(--orange); border-bottom: 1px solid var(--black-100); box-sizing: border-box; top: 0; background-color: var(--white); z-index: 9999; `;​ 1. Header의 높이가 페이지마다 달라지는 현상 발생 : 처음엔 별 문제없어 보였으나, 게시글을 여러개 가져와서 스크롤이 생기는 페이지에서 Header의 높이가 달라지는.. 2023. 6. 22.
프리프로젝트 진행 중.... 스택오버플로우를 클론코딩하는 프리프로젝트를 진행 중이다. 내가 맡은 부분은 로그인페이지와 회원가입페이지. UI는 구현했고, 이제 기능구현을 위해 열심히 달리고 있다. 간단한 일일줄 알았더니, 생각보다 할 일이 많다. 그리고 무엇보다 잘잘한 오류들을 처리하는 것에 시간이 많이 쓰인다. 개발은 문제를 해결하는 것이라더니.... 정말 공감이 된다. UI를 구현하기까지도 수많은 오류들에 부딪혔었고, 해결해나갔었는데 시간에 쫓겨 상세히 기록을 해두지 못한 것이 아쉽다. 프리프로젝트는 일주일 정도 더 진행될테고, 그 다음에 메인프로젝트가 진행될텐데 아무리 시간에 쫓기더라도, 나의 성장을 위해서 매일 30분 ~ 1시간은 투자하여 내가 마주친 오류들과 그것들을 해결하는 과정을 기록으로 남겨두어야 겠다. 지금부터라도 기.. 2023. 6. 21.
사용자 요구사항 정의서 작성 후기 드디어 어제부터 프리 프로젝트(메인 프로젝트 진입 전 연습)가 시작되었다. 주제는 스택오버플로우 클론 코딩하기. 첫 시작은 사용자 요구사항 정의서를 작성하는 거였다. 그러기 위해서 우선 스택오버플로우의 구성요소들을 하나하나 살펴보았다. 코딩을 어느 정도 배웠으니(대부분 이론만 배웠지만) '클론 코딩 정도야 그렇게까지 어렵진 않겠지....? 새로운 걸 만드는 것도 아니고 따라하는건데 ㅎㅎ!' 라는 생각을 했었는데 정말 크나큰 오산이었다. 처음엔 자신만만했지만, 스택오버플로우를 샅샅히 뜯어보면서...... 정말 많은 것들을 생략할 수 밖에 없었다. 자칫 단순해 보일 수 있는 스택오버플로우 메인페이지 하나에 얼마나 많은 요소들이 들어가있는지 자세히 들여다보기 까지는 깨닫지 못했었다. 아무튼, 스택오버플로우를 .. 2023. 6. 15.

티스토리툴바