전체 글

프로젝트 회고 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 : 카멜 커밋 컨벤션 ### 제목..

[Git] pull request 했는데 바꾸라고요..? closed 안하고 수정하기

처음으로 pull requset를 올리고 코드리뷰를 받았는데 해당 부분은 빼기로 했었는데 내가 추가해서 작업을 하고 말았다..!! 그래서 일단 closed해서 다시 수정하는게 대부분이길래 closed했다. 그런데 issue부터 다시 pr하는 과정을 반복하고싶지 않아서 수정할 수 있는 방법을 찾아 시도해봤다. 주의사항! pull request을 closed한 상태에서 하면 안되고 꼭 open된 상태에서 진행해야한다. 만약 closed해버렸다고해도 해당 pull request로 가서 Reopen pull request하면 된다. $ git add . $ git commit --amend / git commit --amend -m "커밋메세지" $ git push -f origin 브랜치명 1. closed한..

[CSS] css가 이상할 때 user agent stylesheet의심하기!

input의 placeholder의 css를 적용하던 중 지정하지 않은 padding이 들어가있어서 원인을 찾아봤다. 정말 딱 1px 밀려가있는걸 확인할 수 있다. 처음에는 브라우저에 적용된 기본 폰트때문인가 의심했지만 전혀 다른 문제였다. 🔍접근 방법 1. 강력 새로고침, 캐시 삭제해보기 ➡ 해봤지만 바뀐게 없다. 2. inline방식으로 주었을 때 적용이 되는가? 적용이 잘된다 ➡ 어디서 padding이 들어간걸까? ➡ 개발자 도구에서 확인해보자 개발자 도구에서 발견한 user agent stylesheet css에서 설정하지 않은 padding이 들어가있는걸 확인할 수 있다. ✅ 해결해 보자! 1. css에서 해당 영역에 padding 속성이 있는지 확인한다. 기존에 padding-bottom으로만..

반응형 단계별로 쉽게 접근해보기

css를 하다보면 반응형 만들기가 쉽지 않다. css는 넘쳐나고 어떤 부분을 반응형으로 바꿔야한 고민되는데 조금 가볍게 접근하는 방법에 대해 알아보자! 반응형으로 바꾸는 순서 1. reset빼고 @media태그 안에 전부 ctrl + c, ctrl + v한다. - reset 관련 속성을 제외하고 /* layout */부터 footer 영역까지 반응형이 필요한 부분 다 그대로 넣는다. 2. 길이나 크기를 조절하는 요소외에 나머지 지우기 3. font나 margin등 변경되는 부분들 수정하기 Tip! 되도록 반응형을 할 때 추가 property가 없게 만든다. 그래서 처음부터 단축 속성을 미리 써두면 좋다고한다. property value만 바꿔주면 되기때문인데 property 하나하나 쓰면 property..

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

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

keycode 확인할 수 있는 사이트

event를 쓰다보면 가끔 조건으로 keyCode를 써야할때가 있는데 그때마다 매번 찾기 어렵더라고요. 그래서 아래 사이트에서는 keyCode 번호와 이름을 정리해두어서 이용하면 좋을 것 같습니다. https://www.toptal.com/developers/keycode/table-of-all-keycodes JavaScript Key Code List & Table | Toptal® www.toptal.com 이 사이트의 아이디어가 좋다고 생각했던 부분이 키보드를 누르면 해당 페이지로 바로 이동합니다! shift 누르니깐 바로 페이지 이동이하면서 keyCode를 알려주더라고요. 만약 keyCode 쓸 일이 종종 있다면 즐겨찾기 해두면 좋을 사이트인 것 같습니다.

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

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

쉽게 따라하는 NFT 마스터 가이드 :: 이젠 나도 NFT 마스터?!

블록체인, 비트코인에 이어 요즘 이야기가 많이 나오는 NFT! 단어는 많이 들어봤는데 정확히 어떤건지 이해가 잘 되지는 않았어요. 그래서 이번에 쉽게 따라하는 NFT 마스터 가이드 책을 읽어봤습니다. https://www.hanbit.co.kr/store/books/look.php?p_code=B8676970090 쉽게 따라하는 NFT 마스터 가이드 대체 불가 토큰 NFT에 대한 기본적인 이론부터 실제 프로그래밍을 통한 기술적인 구현까지 따라하며 살펴보는 도서 www.hanbit.co.kr NFT에 대한 다양한 지식이 궁금하다! 직접 그린 그림을 NFT로 민팅해보고 싶다! 프로그래밍을 통해 NFT를 제작해보고 싶다! 같은 생각을 하시는 분들에게 읽어보시는 것을 권장합니다. 목차를 봐도 키워드별로 정리가 ..

[React] return할 때 unique key가 필요한 이유

💥 문제 발생 export default function Category({category}) { return ( /* 생략 */ {category.map( (category, i) => { return ( {category}); })} /* 생략 */ ) } Warning: Each child in a list should have a unique "key" prop. return 값에서 map을 사용해 return 값을 주었는데 실행은 되지만 warning 메시지가 떴다. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 ..