WIL(내일배움캠프 AI트랙 3기) 1주차

22.09.04(1주차)

1.fact 

1)웹개발 종합반 강의 

2)파이썬 기초 강의

3)백준 문제

4)미니프로젝트

5)OT

2.feeling 

1)웹개발 종합반 강의

 복습인데도 어렵다. 하지만 가장 큰 수확은 처음 들었을때 연결 안되던 부분이 연결이 되고 정상적으로 작동된다는것. 이번주에는 틈날때마다 5주차까지 다 듣고, 다시복습하거나 아예 처음부터 강의 없이 자료만 보고 실습하기를 진행해봐야겠다.

2)파이썬 기초 강의

 파이썬의 기초를 두번째 듣는데 매우 직관적이라는 것을 유념하며 공부해야겠다. 말그댈로 기초인데 아직 어려운 부분이 있는 것 같다. 마찬가지로 강의 배속해서 처음부터 한 번 더 들어야겠다. 따라가기 벅찬 정도는 아니다.

3)백준 문제

 알고리즘을 처음 마주했는데 어려우면서도 쉬운느낌? 일단 input사용해서 문제를 풀어나가는 방법에 대해서 배울 수 있었다. 그런데 아예 계산식조차 생각할 수 없었던 문제가 몇개 있었고 마찬가지로 많은 노력과 정리가 필요한 부분이다. 확실한 건 문제푸는건 재미있기때문에 꾸준히 할 수 있겠다 싶다. 뭐 막히면 풀이도 보고 해야지. 오류나는 부분에 대해서 오류창을 봐도 어려운 부분이 있긴하다.  

4)미니프로젝트

 역할분담이 가장 어려웠다. 어떻게 역할을 나눌지가 막막했는데, 한번 해보고 다른 팀원들이 어떻게 나눴는지 보니 대충 감은 온다. 백엔드와 프론트로 나누는게 일반적인것 같은데 코딩을 함에 있어 정확히 이 둘이 구분이 잘 안되서 헷갈렸던 것 같다. 

5)OT

앞으로 방향에 대한 가이드라인. 어떤 개발자가 되어야할지 고민할 수 있던 시간
3.finding 

1)웹개발 종합반 강의

ㅇflex활용하는 방법
display:flex;
flex=direction: column;
justify-content: center;
align-items:center;
ㅇ버튼에 바로 속성 먹여주는 법
<style>에서 .mytitle > button{} 해주면됨.
ㅇ배경화면 색깔을 투명하는 방법
background color: transpatent;
ㅇ버튼에 마우스 올렸을때 선 굵어지게 하는 방법
.mytitle>button:hover{
border: 2px solid white ; } 
ㅇ배경 이미지를 어둡게 하기
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

ㅇjquery 
-js를 쉽게 쓰도록 짜둔 것(css의 부트스트랩과 동일)
-jquery사용을 위해 남이 만든 코드 가져와야함.
-부트스트랩 탬플렛에는 포함이 되어 있지만, 부트스트랩 안쓸거면 추가 해줘야하는 코드가 있음.(구글링 필요)
-제이쿼리는 class대신에 id 써줌. 
-콘솔창 입력 $('#id').val('입력하고 싶은 내용') 콘솔->웹페이지 / 출력 $('#id').val() 웹페이지->콘솔
-class값과 id 값을 동시에 주는 것 가능.
-문자열을 html로 바꿔주기
< button>버튼</button>조차도 콘솔에서는 그저 문자열에 불과(html아님). 그런데 이것을 html로 바꿔줄 수 있는데 그것이 바로 $('#id').append(temp_html)하면됨(단, let temp_html을 위에 먼저 써줘야함) 
let temp_html = `html로 만들고 싶은 부분을 넣어주세요`
하고 콘솔창에 입력해주면 바로바로 반응함.
-temp_html에서 그때그때 내용이 바뀌는 경우 : 변수를 꽂아줘야함. 방법은 ${변수} 하면 내용이 계속 바뀔 수 있음.
-버튼 누르면 나오고 다른 버튼 누르면 사라지게 하는 것 해보기
<script>안에다가 function open_box(){} / function close_box(){} 하고 html <button>에서 <button onclick="open-box()">
다시 <script>로가서 $('#post-box').show() 하면 상자 등장(닫기는 .hide() 해줌. 
코드를 따로 파이참에 안쓰고 콘솔창에 바로써서 웹페이지의 반응을 볼 수 있음.

 

ㅇ목록불러오는데 계속 쌓이지 않고 처음부터 비워서 나오게하는 법

ajax 콜에서 
type / rul / data / success 네개를 불러오는데 그 중에 success를 우리가 손댐. 
success : funtion (response) {
let rows = response['movies']
for (let i = 0; i < row.length; i ++) {
let title = row[i]['title']

let temp_html = `<div>바꾸고 싶은 것`
해줌. 그리고 카드를 붙이고 싶으면 밑에 $('#cards-box').append(temp_html)해주면 카드가 데이터대로 붙어서 올라감. 
ㅇ파이썬 문법은 직관적인 것 
-패키지 사용 
requests 사용 해보기 : request는 print(rjson)해주면 나옴
날씨 api사용해서 출력 해보기 
rows = rjson['realtimecityair']['row'] 하면 출력 됨. 

for row in rows:
print(row)하면 row 전체 값이 나옴.

for row in rows:
 gu _name =row['이름']
 gu-mise=row['미먼']
print(gu_name, gu_mise) 해주면 이름이랑 미먼 출력
+)미먼이 60보다 작을 경우
if 'gu_mise' < 60:   *여기서는 위에 gu_mise를 지정했으니 gu_mise
print(gu_name)
하면 60미만인 곳의 이름만 나옴.
ㅇ크롤링하기 
-두가지 일을 해야함: 요청해서 html을 가져오기. (requests로 이미함),제목을 쉽게 찾아야함(beautifulsoup)를 설치해야함.
ㅇ파이선에서 글자만 출력하기
print(a.text)
-순위, 제목, 평점 크롤링(인터넷에 있는 데이터를 가져오는 것)
제목 : 
순위 : alt="01" 에서 alt 값을 가져온다. alt는 <> 안에 있음 ->['alt']로 잡음
평점 : 9.64 <>밖에 있음. -> text로 잡음
title = a.text
rank= movie.select_one(중복안되는 곳)['alt']
star= movie.select_one(중복안되는 곳).text
+)중복되는 부분 찾는 것은 카피해서 카피셀렉터로 찾아내면 된다.

-functiopn q1() {
$('#id').empty()
}
ㅇ조건별로 색 다르게 나오게하는 법  
1)let temp_html = `<li class="bad">${값1}:${값2}</li>`
지정해주고 css가서 .bad{color : red}하면 해당되는 값은 색이 바뀜.
2)여기에서 조건문을넣어줌
if (gu_mise > 120){
 temp_html = `<li class="bad">${값1}:${값2}</li>`

ㅇ데이터관리 (추가, 가져오기)

2)파이썬 기초 강의

ㅇ변수형, 선언형 구분

ㅇ문자열 다루기

ㅇ리스트와 딕셔너리

ㅇ조건문

ㅇ반복문

ㅇ튜플, 집합

ㅇf-string : print(f'{name},{score})하면 되는데 앞에 f만 붙이고 {}에 변수넎어주면 됨.

ㅇ예외처리 : try: ~~~ except: 

ㅇ파일불러오기 from ~~_~~~ import* 하고 밑에 함수하면 함수 작동됨.

ㅇ한줄의 마법 

ㅇ함수 심화

ㅇ클래스

3)백준 문제

ㅇ사전 설명 

ㅇ문제중 틀린 것

-문제를 잘읽기(나눈값을 정수로 표현해야하는 부분은 int를 한 번 더 해줌)

-변수지정은 중요한 것이 아님(x,y 대신에 a,b넣어도 맞음)

-조건문 쓸 때 다 맨앞으로 붙여쓰기(if, elif, else)

-if 문안에 중복 사용 가능 and, or, ()도 사용 가능. 같지않다는 !=(if문안에서는 , 대신에 and 사용)

-

4)미니프로젝트

ㅁSA 하는 방법

-와이어프레임

-API 구상

-역할분담

ㅁ웹페이지 만들기(프론트엔드)

ㅇimage관련내용

-넣기 : 블로그에 올리기(비공개도 가능), 클라우드 이용

-비율 맞추기 : cover

-위치 조정 : background 3총사(background image/size/positon

-귀퉁이 : border-radious:10px

-그림자 : filter: drop-shadow(10px 6px 6px #3c3c3) <css>

ㅇtext관련내용

-flex 레이아웃

-flex 너비 :flex-grow: 증가 너비 비율/shrink:감소 너비 비율/basis:기본 너비

-띄어쓰기 : &nbsp;  &ensp; &emsp;

ㅇ하이퍼링크

-text : <a href=''url"></a> / image :<a href="url"><img src="사진위치" border="0"></a>

 

4.future 

1)웹개발 종합반 강의

 -이번주 5강까지 끝내기

 -혼자 강의 없이 실습하기

2)파이썬 기초 강의

 -강의 다시 듣기

 -혼자 강의 없이 실습하기

3)백준 문제

 -안풀리는 것 정리

 -강의로 이해해보기

 -강의도 이해안되면 튜터님께 질문

 -블로그에 백준문제 카테고리 따로 정리 및 공유 

4)미니프로젝트

 -미니 프로젝트 복습하기

 -다른 사람들의 블로그 참고해서 공부하기

5)OT

- 초심을 유지하기