프창고

7주간 엘리스 SW 엔지니어 과정 교육이 끝났다.

길었다면 길었고 짧았다면 짧은 기간 동안  참 많이 배운 것 같다.

이제는 배운 걸 활용해 볼 시간!!

첫 프로젝트는 웹 쇼핑몰 제작이다.

여담이지만 나는 원래 쇼핑몰 사이트를 개발해 주는 사람이 되고 싶었다.

건당 1.5 받고 30명 한테만 구축해 줘도 흐흐

아무튼 좋은 기회에 관심 있는 프로젝트 주제여서 잘해 보고 싶다!!

팀원 결성!🎉

팀원 5명이 결성되었다..!

서비스의 목적 (Goal)과 목표 (Objective) 설정! 🎯

목적:

저희는 반려견을 막 키우기 시작한 분들이나 어떤 상품이 자신의 반려견에게 괜찮을지 맞춤 서비스를 제공해 상품을 고르는데 고민을 최소화하고 빠르게 구매를 유도할 수 있는 서비스를 제공합니다.

목표:

1. 키우는 반려견의 정보를 사용자에게 받아 알맞은 상품을 추천해 줍니다.

2. 상품마다 특징을 표시해 줍니다. (예를 들어 식품은: 친환경, 장난감은: 무독성)

3. 초보 반려인들을 위한 편리한 서비스를 제공합니다.

페르소나 정의 🫥

페르소나란?
페르소나는 서비스의 대상 사용자를 대표하는 가상의 인물 프로필로, 그들의 특성, 필요, 동기 등을 구체화하여 제품이나 서비스의 디자인과 전략을 결정하는 데 도움을 줍니다.

이름 : 체셔켓

나이: 30

직업: 직장인

반려견: 대형견 키움

구매 동기:

  " 저희 집 강아지에게 딱 맞는 장난감을 구매하려고요,

     근데 어떤 상품이 좋은지 잘 모르겠네요.. "

디자인 기획 단계 💅

디자인을 기획하면서 새로운 사실을 알게 되었다.

사람은 3 원색을 기반으로 바라보지만

반려견과 반려묘들은 2 원색을 기반으로 바라본다는 사실!

이런 사실을 기반으로 반려견들의 바라보는 시선을 간접적으로 체험 해고자 

사이트의 대표 컬러는 파란색과 노란색으로 결정되었습니다.

이제 실전이다!

살아온 인생이 제각각 다른 우리, 코드 스타일도 제각각 일 테니 제일 가장 먼저 정의한 것은

컨벤션 정의

였습니다.

커밋 컨벤션 정의 ✨

1. Commit 메시지 구조

[이모지] [타입] [내용]

[본문]

* 각각의 구분자는 스페이스로 합니다.

* 한 줄을 띄워 본문과 구분합니다.

2. Commit 타입

• ✨ Feat : 새로운 기능을 추가하는 경우
• 🐛 Fix : 버그를 고 친경우
• 💄 Style : UI style 변경
• 🔄 Rename : 파일명(or 폴더명)을 수정한 경우
• 🔥 Remove : 코드(파일)의 삭제가 있을 때. "Clean", "Eliminate"를 사용하기도 함
• 🔨 Refactor : 코드 리펙토링
• 💡 Comment : 필요한 주석 추가 및 변경
• 🚚 Move : 코드의 이동이 있는 경우
• ⚙️ Setting : package.json 포함 및 모든 설정 파일 수정

예시) git commit -m '✨ Feat 로그인 기능 추가'
         git commit -m '💄 메인 페이지 UI 추가'

코드 컨벤션 정의 💻

Prettier 적용!

prettier는 코드 포맷터로, 코드를 일관된 스타일로 자동으로 정리해 주는 도구입니다.

{	
  // 쌍따옴표 대신 홑따옴표 사용
  "singleQuote": true,
  // 모든 구문 끝에 세미콜론 출력
  "semi": true,
  // 탭 대신 공백으로 들여쓰기
  "useTabs": false,
  // 들여쓰기 공백 수
  "tabWidth": 2,
  // 가능하면 후행 쉼표 사용
  "trailingComma": "all",
  // 줄 바꿈할 길이
  "printWidth": 80,
  // 객체 괄호에 공백 삽입
  "bracketSpacing": true,
  // 항상 화살표 함수의 매개 변수를 괄호로 감쌈
  "arrowParens": "always",
  // OS에 따른 코드라인 끝 처리 방식 사용
  "endOfLine": "lf"
}

상세기능 명세 🚧

구현해야 할 기능들을 리스트업 하고 필요한 작업이 무엇이 있는지 스케치하듯 메모했다.

상태를 변경해 전체 기능 구현 진척도를 한눈에 알 수 있을 것이다.

파일 구조 만들기 📁

파일 구조를 명확히 하고 그 목적에 맞게 사용되어야 합니다.

예를 들어 비즈니스 로직이 라우팅 폴더에 들어가 있으면 안 됩니다.

파일 구조는 

```
📦 
├─ .gitignore
├─ client
│  ├─ README.md
│  ├─ index.html
│  ├─ package-lock.json
│  ├─ package.json
│  ├─ postcss.config.js
│  ├─ public
│  ├─ src
│  │  ├─ App.css
│  │  ├─ App.jsx
│  │  ├─ assets
│  │  ├─ index.css
│  │  └─ main.jsx
│  ├─ tailwind.config.js
│  └─ vite.config.js
├─ package-lock.json
├─ package.json
└─ server
   ├─ routes
   ├─ controlloers
   ├─ middlewares
   ├─ services
   ├─ models
   │   └─ schemas
   ├─ .prettierrc
   ├─ app.js
   ├─ config.js
   ├─ package-lock.json
   ├─ package.json

```
©generated by [Project Tree Generator](https://woochanleee.github.io/project-tree-generator)

아직 정의해야 할 것은 수 없이 많다. API 명세서 라던가 API 명세서 라던가.. API 명세서..

이번에 팀장으로 팀을 이끌게 되면서 협업과 문서 작성 방법에 대해서 많이 배우는 것 같다.

작성하기 조금 번거롭지만 이런 것들이 앞으로 개발할 때 순조롭게 프로젝트를 완성시켜 줄 것이라고 확신한다.

1. My sql 설치 

https://dev.mysql.com/downloads/mysql/

위 사이트에서 자신위 운영체제 버전에 맞는 DMG Archive 를 받아 설치 하면 되겠습니다.

설치 도중 root 계정의 임시 비밀번호를 알려주는데  초기 설정하는데 꼭 필요하니 복사하거나 적어두시기 바랍니다.

설치가 완료 되면 시스템 환경설정에 Mysql 패널이 생긴걸 확인 할수 있는데요.

이곳에서 먼저 실행 서버를 실행시켜 줍니다.

2. 초기 설정

먼저 terminal 로 와서 mysql 이 설치된 경로 cd /usr/local/mysql/bin 으로 이동해주세요.

그 다음 ./mysql -u root -p 를 관리자 계정이 아니라면 sudo ./mysql -u root -p 를 쳐주세요

비밀번호를 묻는 곳에 아까 임시 비밀번호를 붙여넣기 해줍니다. 만약 sudo 로 치셨다면 맥계정의 비밀번호를 먼저 치신뒤 임시비밀번호를 입력하면 됩니다.

접속 성공 하셨으면 DB 목록을 보여주는 명령어 SHOW DATABASES; 를 입력해 보세요.

비밀번호를 재설정 해줘야한다는 문구가 뜨면서 재설정을 요구합니다.

재설정 방법은 alter user 'root'@'localhost' identified by '새비밀번호'; 를 입력후

commit;

exit;

로 나와 새로 설정한 비밀번호로 접속해보세요.

다시 DB 목록을 확인해보면 정상적으로 보여지는것을 확인 할 수 있습니다.

2-1 . mac 환경변수 설정하기.

매번 cd /usr/local/mysql/bin 을 치고 접속하는게 불편합니다.

어디서든 mysql의 명령어를 치고 싶을때 path 설정을 해주면 됩니다.

우선 cd ~ 로 들어오셔서 vi .bash_profile 로 파일을 생성 및 수정 해줍니다.

이때 기존에 있는 PATH는 지우지 마세요.

PATH 뒤에 여러 path들이 보일텐데요. mysql 경로를 뒤에 이어줍시다. 경로를 나누는 기호는 : 이에요!

:wq 로 저장하고 나와주고 source .bash_profile 쳐서 설정을 적용시켜줍시다.

which mysql 로 잘 적용됐나 확인해볼까요?

설치된 디렉토리 경로가 나온다면 성공입니다.

이제 아무곳에서 mysql -u root -p 로 접속하시면 됩니다.

3. my sql 삭제 하는 법

혹시나 임시비밀번호를 잊으신분은 삭제후 다시 설치해주세요!

sudo rm -rf /usr/local/mysql*

sudo rm -rf /Library/PreferencePanes/My*

sudo rm -rf /var/db/receipts/com.mysql.*

먼저 checkbox의 기본 개념을 설명하자면,

input type="checkbox" 는 다수의 체크박스가 존재할때 "radio" 타입과달리 같은 name으로 묶어도 여러개의 선택이 가능합니다.

그리고 체크박스는 getElementById가 아닌  getElementsByName 으로 접근해야 NodeList형태로 받아올수있습니다.

NodeList안에는 우리가 제어하고싶은 다양한 속성이 존재하는데 이것은 배열로 접근 가능합니다.

주요 속성은

checked , length , name , value 정도가 되겟습니다.

간단하고 심플한 예제입니다.

<input type="checkbox" name="ch" id="ch" onchange="isChecked()">

<label for="ch">체크안됌</label>

<input type="checkbox" name="ch" id="ch2" onchange="isChecked()">

<label for="ch2">체크안됌</label>

<input type="checkbox" name="ch" id="ch3" onchange="isChecked()">

<label for="ch3">체크안됌</label>

<br>

<br>

<span id="span">모두 동의 되었습니다.</span> // css 에서 display : none;이나 visibility: hidden; 해줍니다.

<script>

function isChecked() {

     var ch = document.getElementsByName("ch");

     var span = document.getElementById("span");

     var trueNum = 0;

     for (var i = 0; i < ch.length; i++) {

          if (ch[i].checked == true) {

               ch[i].labels[0].innerText = "체크됌";

               trueNum++;

          } else {

               ch[i].labels[0].innerText = "체크안됌";

               span.style.visibility = "hidden";

          }

     }

// All체크 인지 체크하는 부분.

     if (ch.length == trueNum)

          span.style.visibility = "visible";

     else

          span.style.visibility = "hidden";

     trueNum = 0;

}

</script>