항해 99 1주차 WIL

송지은·2021년 9월 19일

주차별 프로젝트

목록 보기

1/2

~~WIL

(Weekly I learnd)

1주차를 돌아보며 느낀점

어떤 기능을 배웠는지 보다 내 느낌을 먼저 회고 하고 싶다

폭풍같은 1주일이 지났다. 바다로 항해를 나가자 마자 엄청난 폭풍이 몰아쳤다. 나 혼자였다면 이미 바다로 떨어졌을것 같지만 같은 팀원들이 배를 너무 잘 끌어 주셔서 1주일의 항해를 잘 마칠수 있었던 것 같다.

우리 팀들은 각자의 역량이 한분 한분 도드라졌다.
백엔드쪽을 잘 구성하는 분, 프론트를 가위손처럼 척척 만지시는 분, 백과 프론트를 함께 어우르며 오류를 빠르게 수정해주시는 분!

나는 귀를 담당했다. 말은 잘 못하고 듣기만; ..

잘 몰라도 팀들은 열심히 하는데 뭐라도 찾아봐야겠다는 마음에 엉덩이를 딱 붙히고 앉아 있었다 .

처음에는 막 야심차게

제가 할께욧 !!!!
이라고 당당하게 손들었다
그땐 몰랐찌.

왕초보반은 구냥 따라하면 잘 동작 했는데
우왕 웹개발 플러스는 마냥 따라하는게 아니더라;

우리 팀원님들은 믿고 맡겨 주셨다.
야심차게 코드를 열심히 따라 하고 실행을 했는데
웬걸 안된다.
왜냐!
나는 그냥 따 라 만 했기 때문...

client = MongoClient('mongodb://52.78.166.114', 27017, username="test", password="test")
db = client.dbsparta_plus_week4

저기 나의 몽고 디비 주소를 선생님거랑 똑같이 쓰고 있었다.

나는 저기 AWS의 주소에 대한 개념이 그냥 zero였다....
여기 쓰기도 부끄럽네

초장부터 안되니까. 다음 강의로 넘어가질 못했다.
그래서 포기..하고 ㅋㅋㅋㅋㅋㅜㅜ...
새봄님이 결국 기능 구현을 해주셨다.
아주 내 맘 저 안쪽 까지 So respect 가 새봄님에게 뿜뿜하게 느껴지더라..

그리고 새봄님이 나에게 Tip을 주셨지

왕초보 시작반 5주차를 들어 보라고 !

근데 아주 천천히..
이해하면서!!
이해하면서가 포인뜨 였다.

그래서 다음날 진짜 천천히 맘 잡고 들어 보니까
아 이제 웹개발 플러스에서 강의 하시시는 내용이 차차 머리로 알아 듣기 시작했다 ^^;;

배운 개념들

1. get 과 Post 의 이해

처음에 우린 웹 페이지에 대한 전체적인 그림을 그려 나갔다.
어떤 부분에는 get을 적용하고 어떤 부분에 post를 적용하는지

아 ,, 이거 느낌으론 알겠눈뎁ㅋ ;;;
확실하진 않아;;;;

맞아 나는 그게 문제야!!
어영부영하게 아는거 !!!

<GET 방식>
get <- literally 가져 오다
우리가 필요한 정보를 얻기 위해 도서관에서 책을 빌려 가져오는 (get)상황
어떠한 정보를 가져와서 조회하기 위해서 사용되는 방식 !

<post 방식>
post <- literally 제출하다. 부치다
우리가 어디에 서류를 제출하는 것은 우리에 대한 정보를 제출(post)하여 추가하기 위함이다.

데이터를 서버로 제출하여 추가 또는 수정하기 위해서 사용 하는 방식
![]

2. API

튜터님이 계속 은행 창구라고 하셨다는것 밖엔,..

내가 생각 하는 은행 창구는?
은행에 볼일이 있을때 앉아야 하는 곳.

유튜브에서 api대해서 봤던 것중
가장 뭔가 알아들었던게

키보드였다
컴퓨터와 나와의 소통을 위해선 키보드로 입력을 해야 소통이 가능하지 않냐
코드들끼리 소통하기 위해 만들어진게 api다

?????또 모라는고야 ㅋ

서버안에 코드들이 소통하기 위해 키보드처럼 서버 안에다 넣어둔게 api

좀 더 이해 한발짝 더 다가감ㅋ
언제쯤 fully하게 이해할수 있을진 모르겠다.

키보드를 들고 이게 ios앱에 들어간다라고 하는 노마드 코더님이 너무 웃겼다
처음 api를 만났던게 공공api를 이용하면서였다
api는 인포메이션을 제이슨형식으로 제공하는 페이지로만 생각했다.

3. JWT

뭔가 존맛탱일 연상시키는 단어다..JMT

그만..

내가 이래서 공부를 못하는 가보다

하나를 시작하면 계속 그것만 생각해야하는데
나의 생각의 브랜치는 끝도 없이 만들어진다 막
깃 브랜치는 하루종일 해도 안 만들어 졌는데...하;;
삭제 불가임
마치 내가 아무리 내머리 깃배시에다가
git branch -d
rm -ef 뭐시기를 쳐도
브랜치 삭제 안됨;;_;;

나의 생각 알고리즘은 무한대로 퍼져나간다

아 다시 존맛탱..
아니 jwt에 대해서 가보자

JASO WEB TOKEN의 줄임말(영어로는 줄임말을 액크로늠 이라 한다 Acronyms 갑자기?;;)

토큰 말이 너무 정겹다
토큰이 영어일줄은 진짜 몰랐다

우리가 옛날 지하철 탈때 지하철을 표살때... 토큰 시절
ㅋㅋㅋㅋㅋ토큰 시절 ㅋㅋㅋㅋㅋ

여튼 표를 넣고 들어 왔으면
역무원 직원이와서
나 지하철 안에 있는데
표있으세요 막 이렇게 안물어 보지 않냐

왜냐 내가 토큰이 있어야만 여기 들어 올수 있었으니까 !
물어볼 필요가 없징
여기서 표가 jwt이다

JSON 객체를 사용해 정보를 안정성 있게 전달하는 웹표준이다

(스파르타 코딩 클럽의 좋은 점 하나 !
진짜 개념 을 압축해서 쉽게 잘 설명 해놓으신것 같다)

더 깊게 알아보기 링크도 있다.

토큰 더알아보기

하지만 내 마음은 지금 더 깊게 알고 싶지 않다.. 내마음이 그래..

이범규 튜터님이 말씀하셨다
너무 깊게 알려고 하지 말라고
이게 왜이렇게 생겼는지 지금은 알려고 하지 말라고..
AJAX이게 왜 이런 형식으로 생겼는지 여기 괄호가 왜 이건지
그냥 알려고 하지 말라고..
나는 말은 잘들으니까
안궁이다 안궁 !ㅎㅎ

4.git hup 이용하기!

항해 처음 시작하고, 이제 팀 프로젝트를 위해
깃헙을 사용하기 시작했다

모두가 처음 이라 브랜치 생성에 거의 하루를 다썼다.

git bash랑 먼저 친해지기
생긴게 코맨드창이랑 많이 닮았는데
맞다 하는일이 똑같았다

깃배시..깃은 알겠는데 bash는 모지?

바로 'Bash(배시)'

bash는 'Bourne Again Shell'의 줄임말로,

스티브 본(Steve Bourne)이라는 사람이 개발한 최초의 유닉스 '쉘 프로그램'인

sh의 확장판이라는 의미를 담고 있다.

그럼 쉘 프로그램이 모야?

쉘(Shell)이란 키보드로 입력한 명령어(Command)를 운영체제(OS)에

전달하여, 키보드로 입력한 명령어를 실행하게끔 하는 프로그램이다.

멋지다
저렇게 본인 이름을 넣은 프로그램 이름..

만약 내가 만들었다면

송지은이니까..

git sash?

ㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋ막이랰ㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋ

허허..

여튼

깃배시에 요리저리 넣은 명령어들을 적어 보겠다

일단.

깃허브에서 repository를 만들기 우선

나도 승민님 레파지토리를 일단 내 로칼 컴터에 심어야하니까

git init

먼저 넣고

git clone [레파지토리 코드]

와 이 깃 클론이 진짜 왜 안돼??

그다음에 내 파일 푸쉬하기 ~ 가상 저장소에 푸시푸시하기

git add .

git commit -m [메시지]

(커밋 메세지 꼭 직관적이면서 심플하게 하지만 요점 확실히 !)

git push origin master (마스터에게 푸쉬~)
git push origin [브랜치명]*(특정 브랜치 푸쉬)

git checkout mybranch1(브랜치 이동)

말은 쉬워보이지만 이 과정에서 엄청난 에러들을 만났다 ㅎ

깃 시작하기 가이드를 자주 참고 하자
링크텍스트

오늘 일요일 쉬면서 집청소를 하는데..
키우던 석류나무가 있는데 관리에 너무 소홀했어서
가지를 좀 잘라주는데..

이러고 있었다.. 아진짜

우리만 이해할수 있겠지 이런 개그..;;ㅋㅋㅋㅋㅋㅋㅋ

팀원들에게 배우고 싶은 점

백앤드part :

- 에러가 났을때 한줄 한줄 뜯어보기 :

내가 로그인이 안될때.. 몽고 디비 주소를 잘 못썻을때
나는 오류를 그냥 복붙해서 찾고 있었다

아무리 오류를 서칭하더라도 글자는 같아도 나랑 완전히 다른 상황인데도 똑같은 오류 메세지를 받을 수 있지 않냐!

그것도 생각 못하고 나오는데로 코드를 바꿔 볼려하니
하루종일 안풀리지..
팀원들에게 원격으로 보여주면서
한줄 한줄 뜯어 보시는게
진짜 멋찜이였다.

아 그리고 맨마지막에 서버 배포 한다 했을때도

내가 한다고 막 설쳤는데.. 결국 배포 내가 못함;_;
지은아 너 새벽 네시까지
왕초보에서 배포하는거 배웠지 않니?,,
뭐가 문제니?
아니

깃에서 pull을 못해서
집 파일로 조원이 해놓은걸 받았는데
막 내가
받은 파일 폴더를...ㅋㅋㅋㅋㅋㅋ
조 이름이 다사 여서

처음에는 Dasa로 시작해서 seconddas, realdasa,finaldasa, realfinaldasa,thelastdasa이러고 앉아있으니,. 뭐가 최종본인지 이제 나도 막 햇갈리는거야;;

깃을 잘 활용하자 또 한번 느끼고..

- 기능 찾아볼때 한 곳에 정착해서 찾아 보기:

검색해서 막 여러곳 찾아다니면서

아 글자가 뭔가 읽기 싫게 생겼다

여기는 pass..

아 여기는 뭔가 비슷은한데
내가 원하는 기능이랑 쪼끔은 다른것 같은데..>
pass..

여기에 시간을 너무 소비 많이 한것 같다

한 곳에 정착해서 차근 차근 따라하기!

프론트앤드 part:

전반적인 기본적인 프론트 앤드 코드 알고 있기 :

우리 조장님이 서버랑 문제가 있었나?
여튼 코드 수정 후 페이지로 확인하는게 좀 어려웠어서인가?

여튼 내 컴퓨터로 원격 접속해서 프론트를 수정을 하셨다

군데 밸런스가 안맞으면 css로 뚝딱뚝딱

아 그면

justify- conter를 센터로 해보세요

응????????????
구게 모지??

dispay를 flex로 해보세요

flex??????
플랙스 내가 아는 그 플렉스 인가;;?

지금 다시 찾아보니 이건
flex box를 위해 제공되는 속성 들이 였다

display
flex-direction
justify-content
align-items
flex-wrap
flex-flow
align-content

이정도 있다는 점

justify-content 속성은 플렉스 요소의 수평 방향 정력 방식을 설정한다고 한다.

아직도 잘 모르겠지만 단어가 뭔가 간지가 난다.

나만 그래??;;

내가 아는 css는..
마진..음 text-align

또...
padding 이정도 인데

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
검색도 안하고 척척척 나오는게

와 Socooool!

CSS의 가위손님 보고 계신가요?

기타 느낀점 :

폴더정리 잘하기.
이름 정할때 simple하고 직관적으로!!!
커피 너무 많이 안마시기
안잔다고 잘하는게 아님

내가 이번 프로젝트에서 구현한 기능

Etner키 누르면 sign_in 함수 실행시키기
(엔터치면 버튼 안누르고 바로 로그인 되게 하기)

<script>
function Enter_Check(){
  
  if(event.keyCode == 13){
  
  sign_in();
  return;
  }}

 </script>
 
 
 밑에는 <body> 패스워드 인풋에다가 온키다운만 심어주기
  <input 
     id="input-password"   
     onkeydown="JavaScript:Enter_Check();"
     class="input"
     type="password"
     placeholder="비밀번호"
                    >