티스토리

hustle-ing

검색하기

블로그 홈

hustle-ing

hustle-ing.tistory.com/m

허슬하는 웹개발자 지망생

구독자: 0

방명록 방문하기

주요 글 목록

4주간의 메인프로젝트 후기 프로젝트 마지막 날 모든 걸 포기하고 탈주해 버린 팀장 때문이 아니라.... 여러모로 스스로에게 아쉬운 게 많은 메인프로젝트였다. 1. 메인프로젝트에 대한 욕심을 많이 내지 못한 것. - 사실 메인프로젝트 시작 전에는 해보고 싶었던 게 많았다. Motion Graphics나 UI Animation 등을 통해 세련된 UI를 만들어보고 싶었고, 유저들을 위한 게시판이나 채팅기능도 만들어보고 싶었다. 하지만, 우리 팀은 팀장의 아이디어에 이끌려서 모였던 팀이었기에 회의 시에 팀장의 의견을 많이 따를 수밖에 없었다. 팀장은 보수적인 사람이었고, 새로운 것들에 도전하기보다는 기본에 충실해서 애초에 기획했던 기본 기능들을 모두 구현하는 것에 목표를 두었다. 팀원들의 속마음은 잘 모르겠지만, 다들 팀장의 의견에 동의.. 공감수 0 댓글수 0 2023. 7. 27.
로그인/회원가입 페이지 + 모달컴포넌트 2일만에 완성!! 프로젝트 마지막 날 탈주해버린 팀장의 이야기... https://hustle-ing.tistory.com/81 메인프로젝트 마지막 날. 팀장의 탈주. 사실 어제(월요일)가 메인프로젝트의 마지막 날이었다. 어제 23시 59분까지 메인프로젝트를 완료하고 과제를 제출하여야 했다. 과제제출에는 배포링크, 기술발표영상, 서비스매뉴얼 등이 포함된 hustle-ing.tistory.com 탈주해버린 팀장이 맡았던 부분들을 내가 대신 할 수 밖에 없는 상황이었다. 어제는 밤을 새서 로그인페이지를 완성했고, 오늘 밤을 새서 겨우겨우 회원가입 페이지와 모달컴포넌트를 완성시킬 수 있었다. 프리프로젝트 때도 로그인/회원가입 페이지를 담당했었는데, 그 때는 일주일 넘게 걸렸던게.... 상황이 급박하다보니 2일만에 되긴 됐다... 공감수 0 댓글수 0 2023. 7. 26.
메인프로젝트 마지막 날. 팀장의 탈주. 사실 어제(월요일)가 메인프로젝트의 마지막 날이었다. 어제 23시 59분까지 메인프로젝트를 완료하고 과제를 제출하여야 했다. 과제제출에는 배포링크, 기술발표영상, 서비스매뉴얼 등이 포함된다. 당장 오늘부터는 우리의 결과물을 공개하고, 부트캠프 동기들의 피드백을 받는 시간이다. 하지만..... 결과부터 말하자면, 로그인 & 회원가입을 맡았던 팀장이 해준다 해준다 말만 해놓고 결국 잠수를 타버렸다. 못하겠으면 차라리 미리 말이라도 해주지..... 한 달 동안의 노력이 물거품 되기 일보직전이다. 회원가입을 해야 로그인을 할 테고, 로그인을 해야 로그인 상태에 따라 헤더가 바뀌고 마이페이지로 들어가고 할 수 있을 테니 말이다. 사실 금요일부터 걱정이 되긴했다. 금요일에 로그인 & 회원가입 페이지를 완료해 줄 거.. 공감수 0 댓글수 0 2023. 7. 25.
구조 분해 할당(Destructuring assignment) 팀원 중 한명이 버튼컴포넌트를 담당하였는데, 여러가지 상황에서 쓰이는 공통컴포넌트다 보니 매개변수가 엄청나게 많아 지는 상황이 발생하였다. 멘토님께서 구조 분해 할당을 공부해서 적용해보라는 조언을 해주셔서 자세히 알아보았다. const SelectedButton = ({ clicked, checked, id, ...props }) => { 모든 상황에서 꼭 들어가는 매개변수만 적어주고(clicked, checkd, id) 나머지 기타 상황에서 필요한 매개변수는 ' . . . props'로 대체해 준 코드이다. 구조 분해 할당 객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조이다. 키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용한.. 공감수 0 댓글수 0 2023. 7. 23.
position: absolute의 사용법 postion: absolute를 사용하면 그 요소를 다른 요소들에 영향받지 않고 원하는 자리에 고정시킬 수 있다. 부모요소 없이 사용하게 되면 뷰포인트 전체에서 자리를 잡게 된다. 부모요소에 postion: relative를 써서 postion: absolute를 사용하는 요소를 묶어주면(가둬주면) 부모요소 안에서만 위치하게 된다. 요약 : absolute를 사용하려면 부모요소에 postion:relative를 써서 absolute를 가둬주는 것이 대부분의 상황에서 좋다. 공감수 0 댓글수 0 2023. 7. 21.
overflow, text-overflow, white-space 텍스트가 길어질 경우 뒷부분을 '...' 으로 남기는 방법을 기억해두면 좋을 것 같다. ... overfolw: hidden; // 내용이 Container(Wrapper)를 넘어갈 경우 숨김 text-overflow: ellipsis; // 넘어간 텍스트를 '...'으로 표시 white-spce: nowrap; // 텍스트가 길어져도 한 줄에 나타나도록 설정 ... 공감수 0 댓글수 0 2023. 7. 18.
어떤 이미지 포맷을 써야할까? PNG vs SVG 이번 메인프로젝트에서 메인페이지, 헤더, 푸터 등등 UI 구성을 위해 이미지를 써야 하는 상황이 많았다. 팀장님의 추천대로 PNG로 이미지를 다운받아서 사용하고 있었는데, 멘토님께서는 SVG을 사용하는 것을 추천하셨다. 사실, 메인프로젝트 전 프리프로젝트에서는 모든 이미지를 SVG로 써 왔었고 장점 또한 대충은 알고 있었다. 이번 기회를 통해 웹개발에서 많이 쓰이는 PNG와 SVG을 조금 더 자세히 알아보고 장단점을 제대로 알아보고 넘어가고자 한다. (+JPG) 1. JPG : 개발에 관심이 없던 '일반인' 시절 가장 많이 사용하였던 이미지 포맷이다. 언제부터인지, 왜 그랬는지는 모르겠지만, 항상 JPG로 저장하고 사용하였었다. 사진과 같은 다양하게 연결되는 톤을 가진 이미지에 적합하다. 사이즈를 줄이기.. 공감수 0 댓글수 0 2023. 7. 17.
async와 await 자바스크립트는 싱글 스레드 프로그래밍 언어이기 때문에 비동기 처리가 기본이다. 비동기 처리는 그 결과가 언제 반환될 지 명확하게 알 수 없기 때문에 동기식으로 처리하려면 동기적인 기법들을 사용하여야한다. 대표적인 동기식 처리방식 중에는 callback, promise 등이 있다. async와 await는 promise를 사용한 코드보다 훨씬 직관적이기 때문에, promise를 대신하여 사용한다. async와 await 사용법 사용법은 간단하다. function 앞에 async를 붙여주고, promise 객체 앞에 await를 붙여주면 된다. async function getApple() { await delay(); return "apple"; } async의 예외처리 방법 promise 객체를 사용하.. 공감수 0 댓글수 0 2023. 7. 16.
HTML/CSS 네이밍 시에 Wrapper와 Container 차이 메인프로젝트를 진행하면서 팀원들의 코드를 리뷰하다보니, 나 포함 모든 팀원들이 container와 wrapper를 사용함에 있어서 큰 규칙없이 혼용해서 사용하고 있다는걸 문득 깨닫게 되었다. 대충 맞게 쓰고는 있지만, 명확한 기준은 없이 쓰는 느낌이 강했다. 정확한 사용법을 알고 싶어서 찾아보니 스택오버플로우에 토론 게시글이 있었다. https://stackoverflow.com/questions/4059163/css-language-speak-container-vs-wrapper CSS Language Speak: Container vs Wrapper? What's the difference between container and wrapper? And what is meant by each? stac.. 공감수 0 댓글수 0 2023. 7. 13.
Header와 Footer의 position 속성 Header CSS의 postion 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정한다. Header의 경우 모든 상황에서 항상 최상단에 위치하는 것이 일반적이므로, Header의 postion 속성은 fixed로 지정해주는 것이 일반적이다. postion: fixed; top: 0; width: 100%; 이렇게하면 Header는 완전히 독립되어 브라우저 화면(viewport) 상에서 항상 최상단에 위치하게 되며, 브라우저 화면을 스크롤했을 때도 영향을 받지 않기때문에 움직이지 않는다. 하지만, 처음이라면 생각하지 못할 요소가 있는데 그것은 바로 '완전히 독립'되어 있다는 점이다. Header 밑에 바로 body를 만들었을 경우 Header는 body와는 완전히 독립되어 있기때문에 body의.. 공감수 0 댓글수 0 2023. 7. 12.
메인페이지 완성! CSS는 어렵다.... 정말 어렵다! 지금은 메인프로젝트 진행 중.... 어제 밤에는 멘토님과의 멘토링이 진행되어서 블로깅을 하지 못해서 오늘 적어본다. 메인프로젝트 직전, 프리프로젝트 때는 StackOverflow를 클론코딩하는 것이 주제였다. 짧았던 기간에 비해 꽤 높은 싱크로율의 UI가 나왔고 기능 구현도 많이 해내서 다른 팀들에 비해 완성도가 높았다. 그 때 당시에도 CSS 때문에 참 머리가 아팠는데, 그래도 많이 익숙해져서 도움이 많이 되었던 시간이었다. 그래서 이번 메인프로젝트 때는 CSS 부분은 금방 넘어갈 수 있겠지... 라고 생각했는데 그렇지가 않다. 개발을 하다보면 어떻게 매번 이렇게 새로운 문제들이 매일같이 생기는지 정말 신기할 정도다. 프리프로젝트때는 로그인 / 회원가입을 맡았는데 이번에는 우선 헤더와 푸터 그리고 메인.. 공감수 0 댓글수 0 2023. 7. 11.
브랜치 관리를 어떻게 해야할까? 프리프로젝트 때 브랜치 관리의 중요성을 몸소 겪으면서 이번 메인프로젝트 때는 완벽하게 브랜치를 관리해보자고 다짐했었다. 그러나 막상 프로젝트를 진행해보니 이게 쉽지 않다. 계속해서 잘게 쪼갠 컴포넌트들에 수정해야 할 상황들이 생겼기 때문이다. 원격 브랜치는 Main - Dev - FE - BE 이런 식으로 관리하고 있어서 아직까지는 문제가 없다. 문제는 로컬 브랜치이다. 예를들어 내가 FE_Footer 브랜치와 FE_Header 브랜치를 만들었었고, Footer와 Header의 개발을 끝내서 MainPage 개발을 위해 FE_MainPage 브랜치를 만들어서 작업을 시작했다고 생각해보자. Footer와 Header는 개발이 끝난 상태였으니(끝났다고 생각했으니) 원격브랜치 FE에 Merge를 한 상황. F.. 공감수 0 댓글수 0 2023. 7. 11.
import 할때 중괄호 { }의 의미는 무엇일까? Header와 Footer의 개발이 끝났기에, 오늘은 메인페이지에 들어갈 컴포넌트들을 만드는 작업을 하였다. 무탈하게 개발을 하고 있었는데...... 오늘도 역시나 오류를 만나버렸다 :) import { TagWrapperStyled, NoLineTag } from './NoLineTag'; 이 녀석이 오늘의 만난 문제의 원인!! import NoLineTag from './NoLineTag'; import { TagWrapperStyled } from './NoLineTag'; 이게 원래 import 구문이었는데, 똑같은 곳에서 import 해오는 건데 두 줄로 적혀 있는게 마음에 안들어서 NoLineTag도 중괄호 안에 넣어버린게 화근이었다. 알고보니 단순히 묶어주기만 하는 줄 알았던 저 중괄호에도 .. 공감수 0 댓글수 0 2023. 7. 7.
Github에서 Merge 취소하기 pull request를 올린 후 팀원들이 코드리뷰를 해주었다. 몇몇 수정해야할 사항을 알려주셨고, 간단한 수정을 마친다음 내가 직접 Merge를 하기로 하였다. 사실, pull request를 한 번 올려놓으면 수정사항을 수정 한 후 commit을 올리면 자동으로 이 pull request에 적용이 된다. 하지만 그때의 나는 이걸 미처 몰랐다. 그래서 pull request틀 취소한 후, 코드를 수정한 뒤, 다시 pull request를 올려서 Merge를 하였다. 바로 이 때 오늘의 비극이 시작되었다. FE에 Merge를 했어야했는데, 실수로 Main에 Merge를 해버린 것. 취직한 후 이런 실수를 했다면(애초에 내가 직접 Merge를 할 일도 없겠지만) 나는 짤렸을 지도 모른다. 지금이라도 이런 .. 공감수 0 댓글수 0 2023. 7. 6.
Footer 개발 중 발생한 오류 어제 역할배분을 나눴는데, 내가 우선 Header와 Footer를 담당하기로 하였다. 그리 어려운 작업이 아니라 생각했기에 금방 끝낼 줄 알았는데, 하루를 다 써도 Footer를 완성시키지 못했다. 왜냐하면..... 문제는 바로 저 왼쪽에 생긴 여백. 개발자 도구를 활용해서 살펴보니 이렇게 나왔다. 코드를 아무리 살펴봐도 저런 값을 준 적이 없어서 도무지 이해가 가지 않았다. 모든 padding이나 margin 값을 좌우대칭으로 줬었기에 저런 비대칭이 나온다는게 이해가 되지 않았다. 몇 시간 동안이나 Footer 컴포넌트 안의 스타일드컴포넌트 요소들을 이것저것 수정해봐도 결국 해결하지 못했다. #root { /* max-width: 1060px; margin: 0 auto; */ padding: 2rem.. 공감수 0 댓글수 0 2023. 7. 5.
메인프로젝트 시작! 5일 전에 있었던 메인프로젝트 팀빌딩. 팀장님의 아이디어가 마음에 들어서 참가 신청을 하였고, 팀이 완성되었다! 프리프로젝트 때의 경험을 떠올리며, 본격적인 개발에 들어가기 전에 회의를 많이 하기로 하였다. 그래서 약 5일 동안 팀회의를 거쳐 아이디어를 다듬었고, 사용자요구사항 정의서를 작성하고, 화면 정의서를 만들고, 피그마도 완성하고, 칸반보드를 만들어서 역할분담까지 끝마쳤다. 개발 환경 초기세팅도 완료하였기에 이제부터 개발 시작! 디자이너 출신이신 팀장님이 피그마를 정말 완벽하게 만들어주셔서, 이제부터 피그마를 보고 그대로 따라서 UI를 만들면 아주 편할 것 같다. 경험이 많지 않다보니 항상 새로운 프로젝트를 시작할 때면 헷갈리는 부분이 많은 것 같다. 깃허브 사용법이라던가, eslint & pre.. 공감수 0 댓글수 0 2023. 7. 4.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.