Ming's develop story

발제가 끝난 뒤에 실전프로젝트를 같이 진행할 팀이 랜덤으로 꾸려졌고, 첫번째 회의에서 나는 이왕 하는거 더 바쁘고 더 열심히 해보자는 마인드로 팀장에 자원했다. 회의 끝에 결정된 주제는 물물교환에 관한 커뮤니티이다. 몇일 뒤에 정해진거긴 하지만 우리 프로젝트 이름은 '핑퐁'이다. 와이어 프레임을 디자이너 분들의 도움과 다른 프론트엔드 팀원들과 짜보았는데, 이런 형태로 웹에서 모바일이 있는것과 같은 느낌으로 만들어 보기로 했다. 처음에 어느정도 대충 틀을 잡아논 뒤에 백엔드분들과 같이 API 명세를 작성하는데 막상 작성 할수록, 또 와이어프레임을 다듬을수록 필요한 api와 페이지가 하나 둘 씩 늘어났다... 상대적으로 다른 조들에 비해 과정이 순조롭게 진행 되었는데 아마 웬만하면 예스를 외쳐주던 팀원들 또..

정신없이 한주 한주가 지나가고 있었는데 드디어 실전 프로젝트를 들어가기 전 마지막 주차인 클론코딩 주차를 보냈다. 일단 처음 새로운 팀원들을 만나고 난 뒤 백엔드 쪽에서 팀장이신분을 제외하고는 그다지 적극성이 없어 보이셔서 어떻게 해쳐나가야 할지를 먼저 생각했던것 같다. 어느정도 회의를 거치고 우리의 주제는 최종적으로 Airbnb로 결정이 되었다. 이후 이번에는 프론트엔드가 나 포함 2명밖에 없었기 때문에 VScode의 Live Share 기능을 사용해 보기로 했다. 하나의 프로젝트를 공유하며 같이 쓸 수 있으니 앞으로 계속 쓰지는 않는다 하더라도 둘이서 짧게 작업하기에는 나름대로 효율적으로 사용했던것 같다. 1주일이라는 시간밖에 없었기 때문에 우린 메인, 서울page의 postlist와 map, 그리고..

패키지를 사용하지 않고 모달창을 구현하는 방법도 있지만 6일이라는 시간내에 프로젝트를 끝내기엔 빨리빨리 만드는게 중요하기에 패키지를 사용하였다. 1. 패키지를 추가해준다. yarn add react-modal 2. 버튼을 누르면 모달창이 나오는 방식으로 구현하기 위해 버튼 컴포넌트에서 시작하였다. const Hbutton = () => { // 모달 기본 세팅 true, false로 열고 닫아주기 위해 변수 지정 const [firstModalStatus, setFirstModalStatus] = React.useState(false); // 버튼 클릭 시 모달창 활성화 시키기 위한 함수(위 변수를 true로 변환) const firstModalOpen = () => { setFirstModalStatu..

정규표현식 생기초 - 특수문자 추가할 것 형식: /정규식/ - : 범위(어디에서 어디까지) a-z : a에서 z까지를 의미 0-9 : 0에서 9까지를 의미 ㄱ-ㅎ : ㄱ에서 ㅎ까지를 의미 ㅏ-ㅣ : ㅏ에서 ㅣ 까지를 의미 가-힣 : '가'에서 '힣'까지를 의미 [] : 괄호 안에 문자중 1개 [a-z] : a에서 z중 하나. [abc]d : ad, bd, bd 를 의미 [^] : 괄호안의 문제 부정(제외) [^a-z] : a ~ z를 제외한 모든 문자 [^0-9] : 숫자를 제외한 모든 문자 | : 또는(OR) [a-z|A-Z] : a ~ z 또는 A ~ Z 의미(영어 전체) [ㄱ-ㅎ|ㅏ-ㅣ|가-힣] : ㄱ ~ ㅎ 또는 ㅏ ~ ㅣ 또는 가 ~ 힣 의미(한글 전체) ^ : 문자열의 처음 ^[a-zA-Z] ..