내일배움캠프 AI - 1일차 TIL, 2022.08.29

스파르타 코딩클럽 내일배움캠프 AI 웹개발자양성과정 3회차

2022.08.29. 1일차 - TIL

1. 서문

스파르타코딩클럽을 통해 이전에 웹개발종합반과 앱개발종합반을 수강하고, ai 개발을 공부하고 싶었던 찰나에 마침 내일배움캠프를 모집한다는 글을 보게 되어 본 과정을 시작하게 되었다.

인공지능관련 주제로 프로젝트를 할 생각에 걱정 반 설렘 반으로 1일차가 시작되었다.

 

2. 미니프로젝트

일단 조원들과 처음 만나는 자리에서 마이크가 나오지 않아 혼자서 난리를 쳤던 것이 가장 기억에 남는다. 기본적으로 협업은 충분한 소통이 기본 베이스이기 때문에 목소리를 잃은 나는 혼자 열심히 채팅을 쳤더랬다... 다른 팀원들이 모두 비전공자로 코딩에 자신이 없어 해서 그냥 내가 팀장을 맡기로 했다.(물론 코딩이 자신있다는 말은 결코 아니다) 일단 프로젝트 주제와 기능들을 소개받고 정말 난감했다. 모두들 웹개발종합반 강의를 수강하기는 했지만 해당 기능들은 그 영역을 벗어나기 때문에 팀원들과 잘 할 수 있을 지 걱정이 많았다. 덕분에 주말동안 해당 내용을 혼자 코딩에 보는 것으로 불안감을 달랬다. 다행히 이후 튜터님께서 우리의 실력을 감안해 난이도를 대폭 낮추어 주셨고 부담이 훨씬 많이 줄어들었다.(부담이 많이 줄었지만 한편으로 나는 주말동안 뭐한거지 하는 일종의 자괴감이 살짝 들기는 했다) 프론트엔드만 제작하는 것은 크게 어렵지 않았기에 혼자서 프로젝트를 하나 더 생산해 이것저것 건드려보는 것으로 첫날 공부를 마쳤다.

 

3. 개발일지

1. 팀원소개 페이지

1) version_1 : 초기 기획안대로의 기능과 ui를 만들기 위한 발악 -> card 클릭 시 디테일 페이지 이동과 이미지첨부 기능 추가 필요

2) version_2 : ui와 기능들이 조금 더 단순하되 DB와 서버를 이용 -> 삭제 기능 추가 필요

3) version_3 : 단순한 프론트엔드

--> DB 조회 시 primary key값을 사용하는 경우가 있을텐데 mongodb의 경우 그것이 '_id'인 듯하다. 그러나 이것은 objectid의 형태로 이것을 어떻게 자유롭게 건드릴 수 있는지 잘 모르겠다.

--> 참고문헌_1 : https://stackoverflow.com/questions/16478552/convert-objectid-mongodb-to-string-in-javascript

Convert ObjectID (Mongodb) to String in JavaScript

--> 참고문헌_2 : https://flask.palletsprojects.com/en/1.1.x/patterns/fileuploads/

Uploading Files — Flask Documentation (1.1.x)

 

2. 웹 프로그래밍 A-Z 기초 강의

• 부트스트랩 - 미리 완성된 CSS
• 이미지 어둡게
  
  

linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

• 모바일 처리 - 가로 사이즈 문제

width: 95%;
max-width: 500px;

• Javascript - 리스트와 딕셔너리의 조합
  
  

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'

new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

• Javascript - 특정문자로 문자열 나누기
  
  

또, 특정 문자로 문자열을 나누고 싶은 경우

let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta','gmail.com']

result[0] // sparta
result[1] // gmail.com

let result2 = result[1].split('.') // ['gmail','com']

result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

• CSS 조함 - 배경이미지&정렬방향
  
  

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.topstarnews.net/news/photo/201807/456143_108614_510.jpg');
background-position: center 30%;
background-size: cover;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

• jQuery : 편리한 Javascript를 미리 작성해둔 것 = 라이브러리
  jQuery의 지정은 선택자를 id로 가능
• jQuery 임포트 필수
  
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

• value 가져오기

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
// <input id="url" ...>
$('#url').val();

// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');

 

4. 후기

사실 하루에 12시간을 앉아있어 본 것이 고등학생일 때 이후로 거의 없었던 것 같아 처음에는 부담이 되었다. 하지만 의외로 카메라 키고 게더에 모여서 공부하니 약간 선생님한테 관찰(?) 받는 느낌으로 졸지 않고 집중해서 공부할 수 있었다. 그래서 사실 나중에 이 시간들이 쌓여서 어떻게 작용할 지 기대가 크다. 또 튜터님과의 개인 상담이 개인적으로 크게 도움이 되었다. 기술적인 문제에 대한 고민과 현재 개발자를 준비하는 것에 대한 고민 등 여러가지 이야기를 나눌 수 있었다.(극강의 낯가림러여서 사실 시작하기 전에 고민이 많았다) TIL도 미루지 말고 되도록 이면 그날 끝내야겠다. 사실 어제 쓰고 자려고 했는데 저녁 9시에 끝나자마자 운동하러 갔다왔더니 집에 와서 뻗어서 자버렸다... 열심히 살자....