Pre-Project의 시작 이전 팀 프로젝트에서는 팀원분께서 만들어주신 Jira에서 프로젝트를 만들어 진행해서 몰랐습니다.... 저의 개인 프로젝트와 pre 프로젝트 모두 팀원분의 도메인에 작성했다는 걸... 어쩐지 안되더라구요.... Jira Software에 들어간다 Get it Free를 누른다. Next를 누른다. 사이트 도메인 이름을 누른다. 대기 간단 설문 프로젝트 만들기 도구 연결하기 완성! https://www.atlassian.com/software/jira 성공! 이제 사용자를 초대하고, 작업을 이어나가면 됩니다!

개요 알고리즘 스터디에서 만난 5명의 팀원과 함께 2주 단위로 프로젝트를 진행해보고 있다. 지난 쇼핑몰 클론 코딩은 HTML, CSS, JavaScript를 통해 같은 사이트를 보고 따로 구현을 진행하였다. 이번 프로젝트에서는 리액트를 이용해보기로 하였다. 프로젝트 기간 2022.09.06 ~ 2022.09.20 기술 스택 React Styled Components 협업 도구 Zenhub : 이슈를 관리하기 위해 사용하였습니다. Slack : 프로젝트에 대해 빠르게 소통하고, 정보를 채널별로 관리하기 위해 사용하였습니다. Notion : 회의 내용을 기록하고 공유하기 위해 사용하였습니다. Git & Github : branch를 통한 버전 관리와 소스코드 공유를 위해 사용하였습니다. 역할 우리 팀 Cor..

1편이 궁금하시다면 여기를 참고해주세요! 1. 프로젝트 설명 이 프로젝트는 알고리즘 스터디원들과 함께 진행한 사이드 프로젝트이다. 본격적인 협업 이전에 모두 한 사이트를 보고 html, css, javascript를 이용해서 클론하기로 하였다. 1주차에는 폴더 정리, css 등 스파게티 코드 그 자체였다. 수정하려면 모두를 건드려야 하는... 그 와중에 PR하려다가 git 문제로 파일들을 모두 날렸다. 복구하려고 노력하다가 스파게티 코드가 아니라 깔끔한 코드를 짜보자!라는 마음으로 다시 구현하였다. 2. KPT회고 2주차의 나를 KPT회고의 형태로 돌아보자. 2주차의 잘한 Keep 1) 파일 분리 및 폴더 정리 2) CSS의 flex와 grid 속성 사용 3) 커밋 메시지 4) 더미 데이터 사용 2주차의..

시작 쇼핑몰 클론하기 프로젝트는 알고리즘 스터디 팀원들과 함께 0816~0830동안 노멜렛이라는 쇼핑몰 사이트를 HTML, CSS, Javascript를 통해 클론한다. 처음으로 배운 걸 써먹는 프로젝트인만큼 아주 멋진 성을 짓고 싶었지만!!! 1주차 결과 어림도 없었다. 나는 아주 더러운 코드를 짰었다... 사이트는 얼추 비슷해보였지만 코드를 보면 아주 엉망이었다!! ㅠㅠ HTML을 작성하며 공통적인 부분을 복사, 붙여넣기 했더니 일부 수정할 때마다 고쳐야 했다. class와 id명이 많아질수록 헷갈렸고, HTML 레이아웃과 동시에 CSS를 작성하니 문제점을 찾기 어려웠고 display에 grid, flex 등등 온갖 css 속성이 섞였다. 하하... 겉으로 보기에는 조금은 괜찮아 보일지도...라고 생..

상단은 나, 하단은 페어님이 맡으셨다! 배운 점 및 어려웠던 점! 캐러셀 패턴을 사용해보았다. 유튜브에서 참고해서 만들어보았다! 다양한 기능을 구현할 수 있어 재밌어 보이긴 했지만, 직접 자바스크립트로 코딩을 했을 때는 어떤 모습일지 더 궁금했다! 파일, 폴더명의 중요성! 보여주기 부끄럽지만 클론에 사용했던 레이어이다. 기능별로 묶어놓지 않았고, 이미지와 도형에 명확한 이름을 달지 않다 보니, Lo-fi로 작업 후 Hi-fi로 변경하는 과정에서 이게 뭐지? 어떤 걸 수정해야 하지? 하면서 진행했다. 지금 진행하고 있는 쇼핑몰 클론에서도 css를 작성하면서 작성했던 위치를 찾기 어려웠었다. 개인 작업 뿐만 아니라 협업을 위해서라도 규칙을 정하고 나중에 수정하기 쉽도록 작성해야겠다고 생각했다!

어쩌다 원티드 원티드라는 사이트는 페어님이 소개해주셨다! 그 전에 내가 생각하던 목록은 OKKY, 잡플래닛, 인프런 등이었다! 원티드를 분석해보자! 디자인 원티드 사이트에서 인상적이었던 것은 직관적이고 미니멀한 디자인이었다. 태그와 슬라이드를 이용해서 직관적으로 카테고리를 넘어갈 수 있었다. 도움말 및 설명 문서 hover 이벤트가 발생했을 때, "관심 태그를 등록하시면 이벤트가 오픈되는 즉시 카카오톡으로 알려드릴게요"라는 설명이 뜬다. 버튼을 눌렀을 때 팝업창으로 볼 수 있다. 직관적으로 동작해서 좋았다. 피그마는 어때 사실 이전에 어도비 XD로 프로토타이핑을 진행해봤었고, 이번 수업의 일환으로 figma를 배우게 되었다. 플러그인 연동 덕분에 보다 편하게 느껴졌다. 최근 HTML, CSS, javas..