1. 석고대죄 + 심경고백
공부를 꾸준히 하긴 했는데 이번주에는 블로그 갈아타고 싶다는 생각이 또 치밀어오르는 바람에 (결국 핑계) 블로그 포스팅도 하나도 하지 않았고...
눈에 띌만한 결과물을 그럴듯하게 만들어내지도 못해서 맴이 씁쓸한것이 현실이다. 공부를 뭔가 하긴 했는데 왜 항상 일주일의 끝에 오면 그동안 뭘했는지 생각이 안나고 과거의 나를 매우 치고만 싶을까.
그래서 심난한 마음을 달랠 겸, 이번주에 블로그 포스팅 한개도 안한 죄를 약간이나마 회개할겸 2주차 공부로그를 올린다.
2. 공부의 큰 틀
지금 나는 위코드 개강을 앞두고 3월부터 시작한 '스파르타코딩클럽'이라는 8주과정의 웹개발 기초과정에 참여하고 있다. 원래도 한 번에 한 가지밖에 못하는 ✨뚝심있는 나✨는 위코드 사전스터디가 시작됨과 동시에 스파르타에서 배우는 내용이 어려워지는 바람에 저번주에 아예 html과 css공부밖에 하지 못했고.... 스파르타 과제를 못하는 불상사가 발생했다. 문제는 이제 스파르타에서 3주동안 개인프로젝트를 개발하는 시간이 주어지는데 사실 배웠던걸 써먹는다는점에서 지금부터가 제일 중요한 시간이라고 볼 수 있겠다.
그래서 나름 결심한건, 위코드 사전스터디와 스파르타 공부를 둘 다 놓치지 않도록 두가지 트랙으로 잘 나눠서 공부하는거다.
소즁한 우리 쓰리고팀의 스터디 방향도 조금 바꿔봤다. 1주차보다 더 많이 소통하고 스터디 자체를 활용하자고 얘기가 모였고, 매일 밤 9시에 하루 공부 피드백을 공유했다. 확실히 시간을 정해놓고 공부하고 있는 내용 공유를 하다보니까 서로 어려웠던점이 있을때 해결을 같이 할 수 있었다. (다같이 모르는 거라 해결 못할때도 있었지만...🙄좋은것만 보쟈구요.) 이렇게 새로운방식을 도입해도 아직 지식의 수준이 낮아서 생산적인 얘기가 나오지 않을때도 있었는데, 이걸 좀 더 극복하기 위해서 다음주부터는 뭔가를 만들어보는 공통의 목표를 두고 매일 그것에 대해 얘기하기로 했다.
3. 공부내용
3-1. Westudy 2주차 자바스크립트
FreecodeCamp Basic JS로 기초 문법 내용 복습
기존에 자바스크립트에 대한 기초 문법을 생활코딩과 코드카데미로 한번 봤지만 잠시 손을 놓은 중에 홀랑 까먹어버린것 같아서, 자바스크립트 내용을 다시 복기할겸 freeCodeCamp의 기초 자바스크립트 부분 110개 문항에 대해 읽고 예제를 풀었다.
그중에서 반복문을 대체하기 위해 쓸 수 있는 재귀함수 부분에 대한 내용이 너무 어려워서 이 부분은 스킵했다.
그리고 중요개념이 끝날때마다 한번씩 등장하는 굵직한 문제들을 할 때 좀 막힌 부분이 많아서 나중에 다시 정리해둬야겠다. 꼭!
공부하면서 새로 깨달은 것
함수에서 Return이 필요한 이유
함수에서 Return은 크게 두가지 기능을 한다.
1) 함수의 결과값을 반환한다. 2) 함수의 실행을 종료한다.
그중에서 이 '반환'한다는게 무슨 개똥같은 소리여,,라고 생각하며 항상 이해가 안됐는데 드디어 이해했다. 이 말인즉슨 함수의 실행결과를 함수 밖에 가져와서 쓸 수 있게 해준다는거다. 이게 중요한 이유는 바로 리턴의 두번째 기능 함수의 실행을 종료한다는 데에 있다. 리턴이 나오면 그 함수는 소멸해버리는데 함수가 끝난 이후에도 그 결과값을 함수 바깥으로 쓸수 있게 해주는 아주 중요한 기능을 하는것이다!
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function
Tenary Operator : 삼항 조건 연산자
아래의 긴~~~ 조건문 함수를 간단화하여 단 한줄로 처리할 수 있다.
조건 ? 참일때 실행내용 : 거짓일때 실행내용
function findGreater(a, b) {
if(a > b) {
return "a is greater";
}
else {
return "b is greater";
}
}function findGreater(a, b) {
return a > b ? "a is greater" : "b is greater";
}삼항조건 연산자를 중첩시키기
중첩시킬때는 indentation (들여쓰기)에 주의해야한다.
function findGreaterOrEqual(a, b) {
return (a === b) ? "a and b are equal"
: (a > b) ? "a is greater"
: "b is greater";
}이렇게 쓰면 Silly!!!! (프리코드캠프에서 그렇다구함ㅎㅎㅎ)
function findGreaterOrEqual(a, b) {
return (a === b) ? "a and b are equal" : (a > b) ? "a is greater" : "b is greater";
}JS 로 만들어볼 수 있는 간단한 기능 만들기
Drum kit
Javascript30 라고 자바스크립트로 빌드해볼 수 있는 30가지 챌린지를 발견해서 내 수준에서 시도해볼만한게 뭐가 있을지 구경하다가 첫번째 챌린지에 있는 드럼키트 만들기를 해봤다. 자세한 과정은 꼭 추후에 기록을 하는걸로 하고 오늘은 느낀점 정도만 요약하려고한다.
https://rimuuu.github.io/javascript30/drumKit/
빌드할때 핵심
keycode라는 개념이었는데 나중에 키보드 이용한 게임 만들고 할 때 유용하게 쓰게될 녀석인것 같아서 잘 알아둬야할 것 같다. 그리고 많은 js 이용한 효과들이 그렇듯이 addEventlistener 함수 + 상황에 따라 class를 추가, 제거 하는 방식으로 만들어졌다. 중요한건 DOM에서 노드리스트를 반환하는 경우에 대한 정리를 잘 해서 이럴때 forEach문을 잘 쓸 수 있게 해야할 것 같다.
그외 더 공부해야하는부분
CSS 선택자에 대해 좀 더 제대로 공부해야겠다.
결국 html과 css에서 만든것을 JS DOM으로 선택해서 움직임을 구현해야하는데,태그를 어떻게 선택해야하는지에 대해 제대로 모르고 있어서 자꾸 에러가 난다. 앞서 말했듯 DOM에서 nodelist를 반환하는 경우 등에 대해 공부해야겠다. 그리고 화살표함수와 forEach문 공부해야겠다.
FreecodeCamp OOP (객체지향프로그래밍) 개념 공부
생성자, 인스턴스, 프로토타입에 대해 간단하게 공부하고 이해하려고 노력했다.
Freecodecamp 26개 주제 중에 18번까지 봤다.
아쉬운점: 객체지향을 적용해서 실제적인걸 빌드해보지않아서 개념이 어떻게 활용되는지 이해가 부족하다. 그래도 나중을 위해 심화개념은 조금씩이라도 눈에 익숙해지게 만들어야할 거같음
3-2. 스파르타코딩클럽 공부내용
스파르타코딩클럽에서는 3주차에 파이썬을 이용해서 웹 크롤링하는 법에 대해 배우고 4주차(이번주)에 mongoDB와 Flask를 이용해서 DB와 서버를 다루는법에 대해 배웠었다. 아직 파이썬을 다루는게 좀 낯설어서 가볍게 복습하려고 노력했다. 마음의 여유가 없어서 flask로 서버 다루는 부분은 html/css/js 렌더링 하는 부분만 공부했다. json 렌더링은 아직 개념 정립이 덜 된듯하다. 이번에 꼭 복습하고 다시 정리할거다.
그리고 다음주부터 시작될 개인플젝으로 뭘 할지 구상을 했다. 아직 부끄러워서 블로그에는 차마 올리지 못했지만, 크게 욕심내지 않고 작은 기능이라도 남들이 쓸 수 있는걸 만들어보려고 한다.
새로깨달은것
1. headers 추가해서 보안문제 우회하기
파이썬 이용해서 웹 크롤링 하는법을 복습하려고 지니뮤직 사이트에서 TOP50 리스트 데이터를 가져오기를 공부했다. 근데 자꾸 보안상의 문제로 크롤링이 자꾸 안되어서 막혔었는데 이 부분은 따로 뚫는 방법이 있었다. 아래 코드로 해결이 되었다.
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('url',headers=headers)2. for in문
for 변수 in 반복할 횟수 :
실행할 코드for in문을 완죠니 잘못 사용하고 있었다.결국 for 뒤에 오는 게 변수라서 반복을 실행할 코드에 변수가 반드시 들어가야하는데 반복할 횟수에 관련된 것을 실행할 코드에 쓰고 있었음.. 바보??
soup = BeautifulSoup(data.text, 'html.parser')
movie_info = soup.select('div.tit5')
for movie in movie_info:
title = movie.select('a')
print(title)
3. find()와 select()에 대하여
find
원하는결과를 모두 찾아주는데 결과가 딕셔너리 형태로 나와서 출력을 해보면 에러가 난다. 그래서 원하는 결과를 얻기 위해서는 코드 바깥에 list ( )로 묶어서 리스트로 만들어줘야한다.
그리고 결과를 모두 찾아주기 때문에 하나만 가져오기 위해서는 find_one을 사용해야한다.
select
원하는 결과를 모두 찾아주는데 결과를 리스트로 가져온다.
하나만 가져오기 위해서는 select_one을 사용해야지 에러가 안난다.
4. 야심찬 다음주 공부계획
위코드 사전스터디 3주차 주제는 파이썬이다. 마침 스파르타코딩클럽에서 해볼 개인프로젝트도 파이썬 크롤링을 이용해서 데이터 다루기를 해볼 생각이라 타이밍이 맞아 떨어진다.
그리고 자바스크립트 공부를 놓치않고 가져갈 생각이다. 쓰리고팀에서 공통과제로 크롬앱 momentum 클론 코딩을 하기로 했으니 자바스크립트 공부도 꼭 열심히 해야쥐.
