가수면

이번 주차는 새로운 팀원들이 모여 4일 간 미니 프로젝트를 만드는 주다. 목표로 했던 스코프를 기술 매니저님의 의견을 수용해 줄이기로 결정. 나는 사용자의 주변 지역 애견 카페를 지도에 띄우고, 해당 카페들을 크롤링해와 카페명, 주소 등을 목록화하고, 해당 카페들에 댓글을 달 수 있는 기능을 담당하게 되었다. 즐겨찾기 기능은 덤. 그리고 아무리 수정해도 지도의 위치가 고정되어 움직이지 않는 등 역시나 쉽지 않다... 지도 api 활용 라이브러리라 정해진 틀을 바꾸기 쉽지 않다. 지도 위로 버튼이나 이미지를 띄우는 것이나 정해진 라이브러리의 기능을 벗어나는 기능('키워드로 검색'에 중심 좌표를 옮기려는 행위 등)은 건드릴 수 없는 듯 하다.

이번주 작성한 TIL을 읽어보며 휘발되었었던 개념들과 휘발될 것 같은 개념, 각 챕터의 문제들을 다시 풀어봤을 때 안 풀렸던 문제들을 정리해보고자 한다. 이론 &&(논리곱) 둘 중 하나라도 false라면 false 반환. 그렇기에 프로그램은 양쪽 모두 확인하게 됨 왼쪽이 true면 오른쪽을 뱉음 왼쪽이 false면 왼쪽 을 뱉음 ||(논리합) 둘 중 하나라도 true라면 true를 반환. 그렇기에 앞에 것이 true라면 뒤에 걸 확인하지 않음. 왼쪽이 있다면 왼쪽을 뱉고, 왼쪽이 없다면 오른쪽을 뱉음 for in vs for of for in => 숫자 for of => 요소 for in 좀 더 구체적인 예시 const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업'] for ..

.forEach() 가장 기본적인 콜백 함수. 배열 내부의 요소를 사용해 콜백 함수를 호출 const numbers = [273, 52, 103, 32, 57] # array는 잘 쓰이지 않음 numbers.forEach(function (value, index, array) { console.log(`${index}번째 요소 : ${value}`) }) .filter() 리턴 값이 true인 것들만 모아서 새로운 배열을 만드는 함수 # const는 재할당이 안돼서 오류남 let 배열 = [273, 52, 103, 32, 57] 배열 = 배열.filter(function (value, index) { return value % 2 === 0 }) console.log(배열) [52, 32] .map() ..

함수의 기본 작동 원리 const f = function (아무거나) { # 점프 return 아무거나 + 5 } consol.log(f(1)) # 6 1. 함수는 건너뛰고 consol.log를 인식한다. 2. 점프 구간으로 넘어가 내용물을 리턴값으로 리턴한다. 간단한 응용 const sum = function (limit) { let output = 0 for (let i = 1; i value) { output = value } console.log(`= ${output}`) } return output } console.log(min([52, 273, 32, 103, 275, 24, 57])) # 처음 실행 때의 output = 52 # 현재 비교 대상 52과 52 중에 더 작은 것은? # = 52..

.splice() 배열 중간에 요소 추가하기: splice(인덱스, 0, 요소) 배열 요소 제거하기 .splice(인덱스, 1) .indexOf() 배열 내부에서 값의 위치 찾기 a = [52, "추가", 273, "안녕", "하세요", 100] a.indexOf('안녕') 3 # 없는 요소를 찾을 경우 a.indexOf('777') -1 둘의 응용 const index = a.indexOf('하세요') a.splice(index, 1) [52, "추가", 273, "안녕", 100] slice( ) vs splice( ) slice() - 원본을 복사한 배열객체를 반환 splice() - 원본 배열객체를 직접 수정 for of const 배열 = ['바나나', '사과', '귤'] for (const 요..

토이 프로젝트 때 터미널 명령어로 팀원들과 굉장히 복잡하게 협업을 했었던 것이 Sourcetree를 사용하니 굉장히 우스워져 버렸다.(도구의 위대함...!!!) 그렇다고 삽질했던 그 경험들이 의미 없진 않았다. 그 경험 덕에 강의 내용을 따라가기 너무도 수월했고, 이게 왜 안 될까 골머리를 앓았던 경험들은 시스템적인 개념을 이해하는 데 도움이 되었다. 그런데 하다보니 문득 궁금증이 생겼다. Git 도대체 무슨 원리일까? '어떻게 git은 바뀐 코드들을 바로바로 캐치하고 이걸 띄워서 사용자에게 보여주는 걸까?' 찾아본 내용을 간단하게 요약해보자면, init을 하며 만들어진 .git 폴더 안의 내용물 중에는 Working Tree (Working Directory)라는 것이 있는데, 그곳으로 add된 파일들..

프로젝트 중이던 폴더의 경로를 바꾼 경우, 아래 사진과 같이 '프로젝트에 잘못된 Python 인터프리터가 선택되었습니다'라는 문구가 뜸과 동시에 파일이 먹통이 된다. 해결하는 방법은 다음과 같다. 인터프리터 없음으로 설정해준 뒤 확인을 누르면, 위와 같은 메시지가 뜨는데 파란색 밑줄쳐진 부분을 누르면 패키지들이 자동으로 설치되며 해결된다. 인터프리터 구성으로 직접들어가 설정을 해보려고 했지만 이 방법은 무엇 때문인지 먹히질 않았다.

switch 조건문 이제는 잘 쓰이지 않지만, 남이 써 놓은 코드를 보는 게 일인 개발자로선 알아둬야 할 필요가 있음. 아래는 기본 형태. const x = Number(prompt('숫자를 입력해주세요', '')) switch (x) { case 1: alert('입력한 값이 1입니다.') break case 2: alert('입력한 값이 2입니다.') break case 3: alert('입력한 값이 3입니다.') break default: alert('입력한 값이 1-3이 아닙니다.') } 조건부 연산자 (=삼항 연산자) ㅇㅇ ? ㅇㅇ : ㅇㅇ 불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과 예시1) const x = Number(prompt('숫자를 입력해주세요', '')) alert((x >..

기본 용어 및 개념 표현식 = 값을 만들어내는 간단한 코드 문장 = 표현식이 모인 것 키워드 = 특별한 의미가 있는 단어들 (ex. for, if ····.) 식별자 = 변수명, 함수명(숫자로 시작하면 안 됨) 문자열 자료형 큰따옴표("), 작은따옴표('') 문자열 의미 통일 권장 (내부 외부에 동시 사용하고자 할 경우 혼용 가능) 이스케이프 문자 \n = 줄 바꿈 >'동해물과 백두산이\n마르고 닳도록' "동해물과 백두산이 마르고 닳도록" \t = 탭 >'이름/t나이/t지역 "이름나이지역" \\ = \ 불 자료형 true, false, 비교 연산자, &&(논리곱), ||(논리합) 템플릿 문자열 백틱으로 감싼 문자열 내부에 ${표현식}을 넣으면 문자열 내부에서 표현식이 계산됨 자료형 변환 prompt() ..

토이 프로젝트 도중 현재 상영작을 포스트 하는 방식에서 문제가 생겼다. 데이터를 크롤링해서 저장하는 과정에서 mongo DB에 순서대로가 아닌 랜덤으로 저장되는 문제가 발생했고, 이를 가져오다 보니 순서가 뒤죽박죽으로 섞여서 출력되는 상황으로 이어졌다. 때문에 페이지를 열 때마다 아예 출력이 안 되거나, 새로고침할 때마다 순서가 달라지는 문제도 있었다. 문제 해결 과정 1. 원인 찾기 이를 해결해보기 위해 먼저 팀원이 적어놓은 코드가 정상적인 코드인지를 확인해보기로 했다. 기본 세팅 코드들만 남긴 뒤 돌려보니 정상 작동되는 것을 확인했다. 그러나 다시 @app.route('/') def home(): return render_template('index.html') . . [POST] . . [GET] ..

목표. 메인페이지(index.html)에서 버튼 등을 클릭해 premovies.html의 화면으로 넘어가기 1) app.py에 추가 @app.route('/') def home(): return render_template('index.html') 위와 같은 기본 코드 아래로 다음과 같은 내용을 추가해준다. # 'pre-movies'는 넘어갈 페이지 주소 @app.route('/pre-movies') def premovies(): return render_template('premovies.html') 2) html에 반영 상영예정작 보너스) 새로고침 상영예정작 상영예정작 페이지에서 다시 상영예정작을 눌렀을 때 새로고침이 된다.

만들어둔 페이지를 내리다가 보니 맨 위로 가기 기능이 없다는 것을 깨달았다. 위로 가기 기능 만드는 순서는 다음과 같다. 1. html에 구역 만들기 img는 css에 background-image로 빼도 좋다. 2. css로 꾸미기 .toTop { width: 40px; height: 40px; position: fixed; right: 30px; bottom: 30px; display: none; } .toTop > img { width: 40px; } 3. Jquery로 스크립트 짜기 $(document).ready(function () { # 화면을 아래로 스크롤했는지 여부를 확인 $(window).scroll(function () { if ($(this).scrollTop() > 100) { $..

오늘도 즐거운 코딩 공부~ 1. 영화 목록 창 위 사진의 문제를 해결하기 위해 display: flex를 주었었는데, 그럴 경우 영화가 지정된 범위를 벗어나 정렬되어버리는 바람에 어찌할 바를 몰랐었던 것을 드디어 해결했다. 방법은 flex에 아래와 같은 코드를 붙여주면 됐다. flex-wrap: wrap; 2. 메뉴 창 뷰포트를 수정하고 메뉴창을 정렬시키는 과정에서 아래 사진과 같은 문제가 발생했다. hr도 건드려보고 온갖 삽질을 했었지만, 원인은 @media 설정을 해주면서 길이를 그대로 가져간 것이 문제였다. 메뉴 창의 길이를 450px로 지정해둔 상태다 보니 450px 이하로 줄어드는 순간 칸이 줄어들지 않고 공간을 밀어내는 것이다. @media를 줄 때는 width와, margin을 다시 수정해주..

팀원이 로그인 회원가입 버튼을 만들어달라고 해서 추가했다. 행렬에 대해 조금 익숙해진 터, 사용한 코드들의 큰 개념을 한 번 정리해놔야 할 필요성을 느꼈다. 줄 display: inline; 줄바꿈 없이 순서대로 한 줄에 보이도록 해줌 width와 height 속성을 지정해도 무시하는 특징이 있음. float: left; 비슷한데 한줄로 착착 쌓음. 이렇게 사용하면 display랑 다르게 묶이지 않고 독립적인 영역으로 사용 가능...? display: block; 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지. display: inline-block; inline처럼 순서대로 한 줄에 보이도록 해주면서 block처럼 width와 height 지정도 가능해지는 하이브리드 코드. display: ..

오늘의 목표는 프로젝트의 마무리! 1. 상단바에 반응형 적용 사진처럼 pc에서는 정상적인 듯한 모습이지만, 제대로 나오지 않는 모습이다. 코드를 조금 지저분하게 짠듯하여 스타일을 갈아엎기로 했다. .menu { font-size: 45px; display: flex; flex-direction: row; justify-content: center; align-items: center; } 가운데 정렬 사총사를 .menu에 적용시켜주고, @media (max-width: 600px) { .menu { font-size: 35px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: ce..

아직 구현하지 못한 프로젝트의 나머지 기능들을 구현해보고자 한다. 1. D-day 구현하기 만들려고 하는 것이 구글에 돌아다니는 d-day 만들기와는 구조적으로 조금 달라 상당히 해멨지만, 직관적으로 어렴풋이 복잡하진 않을 것 같다는 느낌이 들었다. 그렇게 코드를 이해하는 데 상당한 시간을 들이길, 지금 상황에서 불필요한 코드들을 전부 쳐내고 심플하게 접근하는 방법으로 원하는 기능을 구현해낼 수 있었다. let today = new Date() let dDay = new Date(date) let remain = today - dDay let diffDay = Math.floor(remain / (1000 * 60 * 60 * 24)) 2. D-day가 0이 되면(영화가 개봉하면) 목록에서 없애기 if ..

토이 프로젝트 3일 차. 진행 상황과 그 과정에서 겪은 몇 가지 이슈에 대해 다뤄보고자 한다. 이슈 1. 프린트 공백 드디어 어제 골머리를 싸매게 만들었던 문제를 동기의 도움을 받아 해결했다! (동기 사랑 나라 사랑!) tagTemp = '#contents > div.wrap-movie-chart > div.sect-movie-chart > ol:nth-child(number) > li' for i in range(4,51,2): tag = tagTemp.replace('number',str(i)) movies = soup.select(tag) for movie in movies: title = movie.select_one('div.box-contents > a > strong').text print(..

문제 크롤링을 하다가 문제에 부딪혔다. 배운 대로 크롤링을 하기 위해 2022.10.29(토)에 있는 영화의 제목들을 'selector 복사' 해왔다. #contents > div.wrap-movie-chart > div.sect-movie-chart > ol:nth-child(4) > li:nth-child(1) > div.box-contents > a > strong #contents > div.wrap-movie-chart > div.sect-movie-chart > ol:nth-child(4) > li:nth-child(2) > div.box-contents > a > strong 아래와 같이 중복되는 부분을 잡고 그 제목 부분을 추출해냈다. movies = soup.select('#content..

목표 각 조원이 아이디어 낸 것을 투표한 결과, 우리 조는 cgv 홈페이지를 크롤링해보기로 했다. 내가 구현해야 할 기능은 아래와 같다. 상영예정작 페이지를 만드는 것으로, cgv 홈페이지에서 포스터, 제목, D-day, 예매율, 개봉 날짜를 크롤링해와야 할 것으로 보인다. 진행상황 cgv, 무비차트, 상영예정작, 코멘트 남기기에 해당 페이지로 넘어갈 수 있도록 각각 하이퍼링크 걸어놓음 구글과 함께 html 틀을 완성시켰다. 아래 포스터 만드는 부분에서 꽤 시행착오를 겪었다. 처음엔 배운 대로 부트스트랩을 이용해보려고 했는데 카드박스의 실선이 제대로 표시되지 않아 한참을 뒤적인 결과, 부트스트랩 스크립트를 따로 추가해줘야 한다는 걸 알았다... (강의 땐 템플릿을 그냥 무지성 복붙 해서 스크립트 추가해줘..

1. repository 만들기 2. git bash 에서 환경설정 하기 (한 번만 하고 이후부턴 3번 과정부터 하면 되는 듯)2-1.유저이름 설정git config --global user.name "your_name"2-2. 유저 이메일 설정하기git config --global user.email "your_email"2-3. 정보 확인하기git config --list 3. github에 업로드하기 (터미널에 입력)3-1. 초기화 (처음 한 번만)git init3-2. 추가할 파일 더하기# 전부git add .# 지정 파일git add 파일명.확장자3-3. 상태 확인 (선택사항)git status3-4. 히스토리 만들기git commit -m "first commit"3-5. Github repo..