TIL

프로젝트 회고 5 :: 왜지감자의 프로젝트 끝!

나의 첫 프론트엔드 프로젝트가 끝났다! 말 그대로 프론트엔드로는 처음하는 프로젝트였기때문에 당연히 아쉬움이 많지만 그래도 완성해냈다는 뿌듯함도 크다. 우리팀 리드미에도 썼던 내용이지만 프로젝트를 진행한다는게 코드를 짜는것 이외에 이렇게 많은 것을 할 줄 몰랐다. 회의록이나 에러, 컨벤션 등 많은 것들을 문서화하고 밤낮없이 계속 소통하게된다. 그리고 소통하면서 우리팀에서 가장 많이 했던 말이 두 개가 있다. 왜지? 뭐지? 원인을 못찾으면 다들 '왜지...뭐지.....'이러는데 우스갯소리로 왜지뭐지 노이로제가 걸렸다고 할 정도이다. 그래도 이 만큼의 시간을 들여 고생하여 만든 프로젝트를 완성할 수 있어 뿌듯하다. 함께해준 팀원들한테도 고맙다 :)

프로젝트 회고 4 :: 기능이 적은데 많아요

진행상황 파트 분배를 할 때는 적당하다고 생각하여 진행했는데 진행하다보니 내가 많은 부분을 하고있었다. 나 - 마이프로필, 유저 프로필, 팔로워 리스트, 팔로잉 리스트, 상품 등록, 팔로우 팀원1 - 피드, 검색, 좋아요, 모달 팀원2 - 스플래시, 로그인, 회원가입, 프로필 수정 팀원3 - 게시글 댓글, 일반 게시글 작성, 채팅(UI) 딱 이렇게만 작성하여 분배해서 진행했더니 프로필에서 기능들이 더 많았던 것이다. 일단 프로필 페이지에서 로그아웃, 게시글 조회도 이루어져야하고 상품도 등록뿐 아니라 수정, 삭제, 조회도 이루어졌어야했다. 그래서 팀원들과 빠르게 분배해서 구현했다.. 사실 프로젝트 시작할때는 그렇게 오래 걸릴지 이게 프로젝트로 쓸 수 있을 만큼의 규모일까 걱정했었는데 진행하면서 느꼈던건 협..

프로젝트 회고 3 :: 기능시작! 그런데 공통 UI를 해볼까요..?

진행상황 각자 파트를 나누어서 진행을 나누었고 HTML, CSS를 먼저 완성한 후에 JS를 시작하기로 했다. 잘 되고 있는 점 각자의 진행상황 공유가 원활하고 서로가 어디를 하고있는지 파악이 잘 된다. 다들 비슷한 부분을 따로 만드니깐 팀원들의 코드 방식도 보이고 각자의 취향이 드러나는게 보여서 재미있다. 생각하지 못한 방법으로 하니깐 공부에 도움이 된다. 모르는게 생기면 바로 얘기를 한다. 물론 혼자만의 삽질을 거친후에 물어보긴 하지만 누군가 물어보면 다같이 해결한다. 아쉬운 점 - pr이 너무 많이 쌓인다!! 이걸 어떻게 효율적으로 보고 서로 물어보지 않아도 해결할 수 있을까? - 공통 UI작업을 조금 더 빨리하지 않아서 아쉽다. -> HTML, CSS 코드를 통일해야하나 말아야하나 고민을 잠깐 했었..

프로젝트 회고 2 :: 기능부터 컨벤션까지 정해야 할게 너무 많아요.

팀 깃헙을 만들었다면 이제부터 정해야하는 것들의 연속이다. 커밋 컨벤션은 어떻게 할 것인가? issue 컨벤션은 어떻게 할 것인가? 협업툴은 어떤것을 쓸 것인가? - 슬랙, 디스코드, 카톡, 트렐로, 노션, 깃허브 프로젝트 pr 컨벤션은 어떻게 할 것인가? 브랜치 전략은 어떤것을 쓸 것인가?- git-flow? github-flow? 우리팀이 정한 컨벤션을 정리해보았다. 컨벤션 변수 이름 변수: ‘명사형'으로 작성. 무엇을 담고있는지 정확히 표현(예: numberOfPeople) 함수 : ‘동사형'으로 작성. 무엇을 하는 함수인지 정확히 표현(예: getInputValue){용도}-{기능명} : product-img, login-input HTML/CSS : 케밥, JS : 카멜 커밋 컨벤션 ### 제목..

프로젝트 회고 1 :: 프론트엔드 프로젝트는 어떻게 해야하죠?

팀프로젝트를 하게되었는데 이번에는 기록을 해봐야겠다는 마음으로 써보려고한다. 이번 프로젝트는 놀랐던게 프론트엔드에만 집중할 수 있게 기획자, 디자이너, 백엔드는 된 상태에서 진행되었다. 백엔드 프로젝트를 할 때는 기획부터 백엔드까지 다 우리가했기때문에 하는게 너무 없는게 아닐까? 이정도로 포트폴리오가 될까?라는 의문을 가졌지만 퀄리티있게 만드려면 본인의 파트에 집중하는게 맞다고 생각했다. 1. 기획 그런데도 왜 기획이 있냐고 하면 우리팀만의 차별점을 두기위해 기획을 조금 바꾸었다. 기획하기전에 읽었던 내용인데 회의할 때 도움이 되었다. 기획을 하기 앞서 먼저 해야 하는 질문은 다음과 같습니다. 왜 웹 서비스를 만드는가? - 핵심 요소는 무엇인가? - 1인가구 간의 소통 누가, 어떤 기기를 가지고 이 홈페..

냅다 함수 :: React로 투두리스트 만들기 (ft.preventDefault)

이번에 외운 함수는 리액트로 만든 투두리스트입니다. 기능 - input 창에 글자를 입력하면 onChange된 내용을 감지한다. - add 버튼을 누르면 toDos 배열에 저장되고 저장된 개수를 h1에서 확인할 수 있다. 코드 냅다 외우고 써보기 참고로 녹화를 끝내고 실행해봤더니 length에 오타가 있어서 실행이 안됐다... 오타 조심 정리 Event.preventDefault() 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다. 라고 하는데 읽어도 동작하는 방법이 이해되지 않는다. 예제에서 쓰인 이유는 form 태그 안에서 type이 'submit'인데 실행하게 되면 창이 새로고침이 된다. 그때 preventDefault ()..

냅다 함수 :: React로 시계 만들기

지금 리액트를 공부중이기때문에 이번에 외운 함수는 리액트로 시계만들기이다. 녹화하려고 여러번 반복하다보니 말할 수 있을 정도로 외웠다. setInterval 두렵지 않아..! 아직 짧은 코드만 외워서 그런지 코드 외우기보다 녹화가 더 어렵다🤣

냅다 외우기 :: [JS] 소수판별

문제를 풀고 복습하는것도 좋지만 무작정 외워서 직접 써보는것 즉, 백지 복습을 해보는게 도움이 될 것 같아서 소수판별 문제를 외워서 써봤습니다. // 소수판별 (소수: 1과 자기 자신으로만 나눠지는 수) // 소수이면 Yes, 아니면 No로 출력하세요. function checkPrime(n) { for (let i = 2; i < n; i++) { if (n % i === 0) { console.log("NO"); return false; } } if (n === 1) { console.log("NO"); return false; } console.log("YES"); } checkPrime(n); 영상으로 남기고 보니 몇 줄 안되는데 2분 가까이 걸린게 놀라웠고 이렇게 시작하기를 잘한 것 같다는 냅다..

발표 절대 못 한다던 내가 첫 연사를 마친 소감

나는 사람들 앞에서 절대 발표 못해 라고 장담했던 사람이다. 글과는 거리가 멀어 집필은 머나먼 얘기하고 생각했었다. 거의 운명적으로 타입스크립트 책 집필을 하게됐고 또 연사까지 이어졌다. 준비하는 과정은 생각이상으로 쉽지 않았는데 수없이 내용을 바꾸고 회의하고 또 대본 수정하고 회의하고 정신없었다. 제주에서 진행된 연사라서 연사일보다 며칠 빨리갔는데 팀원들과 계속 회의하면서 수정하다보니 하루라도 제대로 논적없다고 투덜거리기도했다. 그리고 나는 염소 발표할거니 다들 웃지 말아달라는 농담을 했었는데 결론부터 말하자면 꽤나 잘 해냈다. 영상으로 남겨놨는데 두려워서 아직 확인은 못했다. 환상의 분업 파트 분배부터 명함 디자인까지 사소한 부분까지 맞춰가는 과정에서 의견이 갈리기 쉬운데 굉장히 순탄했던 것 같다. ..

TIL 34 :: 캡처링? 버블링?

이벤트는 코드의 순서대로 실행이 되는 줄 알았는데 캡처링과 버블링이라는것이 존재하고 그에 따른 순서가 있다고한다. 일명 캡캡캡 버버버인데 정리해보려고한다. 캡처링(Capturing) 위에서 아래로 간다 (큰 영역에서 작은 영역) 버블링(Bubbling) 버블버블 (위로 올라간다 거품이 생기면서 점점 위로 올라간다고 생각하기) 기본값이 false라 평소에 썼던 이벤트들은 전부 버블링이다. 둘의 차이가 뭘까 이벤트가 실행될때 캡처링이 먼저 일어나니깐 실행도 먼저된다는데 이해가 되지 않는다. 제출 => document의 이벤트에 세번째 매개변수자리에 true가 없으므로 이벤트 버블링 발생한다. (submit => document) submit.addEventListener('click', (event) => ..