본문 바로가기

💻 개발블로그80

WIL(2주차) 험난한 2주차의 수업도 계속 진행되었고, 개인 프로젝트 위주의 수업이 진행되었다. 파이썬으로 간단한 게임만들기, CSS를 이용한 카카오톡프로필만들기, 인스타그램클론 코딩 등 재미있는 프로젝트를 진행했다. 파이썬 프로젝트의 경우 계산법에 조건문까지 수학의 1도 싫어하는 나에게 너무 머리아픈 과제였고, 눈에 보이는 거라곤 내가 입력한 코드와 구글링으로 찾아낸 수 많은 코드와 글들.. 확실히 HTML,CSS는 직관적으로 보이는 작업이라 수시로 확인하고 내가 어디서 문제가 있는지 알아낼 수 있었고 재미있었다. 완벽한 프로젝트 제출은 못했지만 부분이라도 작업해도 즐거웠다. 알고리즘강의는 듣기전부터 왜 이렇게 거리감이 들던지, 예제를 보여주시는 것부터 머리에 들어오지않고 집중력이 흐려짐을 느꼈다. 완벽히 이해하진 .. 2021. 12. 27.
TIL(211226): 자료구조 알고리즘 강의 알고리즘이란 어떤 문제를 해결하기 위해 입력된 자료를 통해 풀어나가는 것. 그래서 이를 해결하기 위해서 다양한 방법들이 존재하고 어떤 조건이냐에 따라 다른 방법으로 해결할 수 있다! 알고리즘 리스트의 최대값을 찾을 때는 for문을 이중으로 사용하여 리스트의 값을 하나씩, 비교할 리스트의 값을 하나씩 꺼낸다. 아스키코드(ASCII)라는 듣기에는 어려운 개념을 배웠다. 아스키코드는 암기를 할 필요가 전혀없고 찾아보면 값이 나온다. *아스키코드(ASCII) 사용자가 입력한 문자가 기호들을 컴퓨터가 이용할 수 있는 신호로 변환한다. 즉 0과 1로 이루어진 2진수 신호로 변환한다. 아스키코드는 영문을 사용하고, 이는 외울 필요없이 검색하면 쉽게 찾아볼 수 있다. *.isalpha() 해당 문자가 영문자인지 알려주.. 2021. 12. 27.
TIL(211224): 인스타그램 클론코딩 오늘은 인스타그램 클론 코딩을 진행하면서 px사용을 금지하셔서 한개도 쓰면 안돼는줄알고 고군분투를 했다. 아직 기초 단계이긴 하지만 백엔드쪽을 진행하다가 프론트쪽을 진행해보니 해결못하는 문제를 찾아보는 과정도 흥미롭게 느껴진다. 팀원의 풀리지 않는 문제를 함께 봐주며 느낀 점은 로 정리를 하는 방법과 id와 class명의 정리의 중요성이다. 코드는 최대한 보기 쉽고 간결하게! 그래야 다른 사람이 나의 코드를 보더라도 어디가 어디인지 알 수 있다. 반응형CSS를 사용하기 위해서 뷰포트메타태그를 넣어줘야한다는 것을, 한참 헤매고서야 강사님의 코드를 하나하나 차근히 보며 알아냈다. 배신감과 바보같은 무지한 나에 대한 원망의 연속. justify-content 와 align-content or items 의 차.. 2021. 12. 25.
TIL(211220): 파이썬프로젝트-숫자맞추기 게임 파이썬을 이용해 숫자맞추기 게임 만들기 스파르타코딩 수업 1주일 배우고 2주차 첫날부터 개인 프로젝트를 진행했다. 그동안 배운것들 뒤죽박죽이라 구글링하며 비슷한 예제 찾아가며 입력했는데, 두 가지 과제 중 한 가지만 거의 비슷하게 구현했고, 두 번째 프로젝트는 미완성으로 제출했다. 일주일간의 노력의 결과물인데, 그래도 백지에서 이 정도 결과물을 완성했다는 건 스스로에게 격려해줄만하다. 그렇게 해야 더 열심히 할 수 있을 것 같다 *내가 자주하는 실수 -같다표시는 == 두번 사용할 것!! P값이 for문 바깥에 있으면 for문만큼 P를 반복하므로 P값을 for문안에 넣어준다. *프로젝트를 진행하면서 알아두면 좋은 함수, 코드들 *import random 이번 프로젝트는 random모듈을 이용하므로 rand.. 2021. 12. 20.
WIL(1주차) 험난한 1주일이 지났다. HTML,CSS 아주아주 기초적인것만 배웠던 기억을 떠올리면서 겨우겨우 정보를 꾸겨넣었지만, 아직도 완전히 내 것이 되기엔 멀었다. 앞으로의 개인 프로젝트를 진행할 수 있을까 걱정이 반이상인 지금 어떻게든 해보자라는 다짐으로 버텨보고 있다. 요 며칠 매니저님, 튜터님한테 글도 남겨보고, 처음보는 다른조 팀원에게 도움도 받아보고 낯을가리는 나에겐 너무나도 많은 일이 일어난 것 같은 느낌. 하지만 나의 두 번째 도메인과 (첫 번째 도메인은 개인사업 운영차 만들었다.) 처음으로 내 손으로 만들어본 웹페이지의 결과물이 나를 설레게 만들었다. 비록 보고 따라만들었지만 첫주차니깐 그리고 내 스스로 답을 찾으려는 노력을 틈틈히 해보았다. 자기주도적 학습이라는 것이 정말 쉬운 일은 아니다. 여.. 2021. 12. 20.
5주차(2) 웹개발 강의: 도메인연결, og이미지 *도메인연결 -우선 nohup으로 서버를 연결해놓는다. (nohup python app.py // 이때 키페어입력 후 경로확인해볼것!) -가비아에서 https://dns.gabia.com/ 구매한 도메인 체크, DNS설정 체크 -호스트'@', IP주소:인스턴스주소(숫자만넣기 123.345.56.78), 상태확인, 저장 >>세팅완료팝업 -이제 구매한 도메인으로 서버접속 가능 *OG이미지 카톡같은 곳에서 링크공유할때 보이는 미리보기이미지 설정 og태그(og:image, og:title, og:description) 카카오톡 같은곳에선 og이미지가 안바뀔때가 있는데, 이것은 한번 저장한것을 계속 띄우는 시스템이라서 초기화를 해줘야한다. 강의자료 참고할것.. 2021. 12. 18.
5주차(1) 웹개발 강의: 프로젝트 서버에 올리기 다들 쉽게 서버를 연결한 것 같은데, 나는 강의자료와 다르게 갔던 것 같아서 조금 애를 먹었다. (너무 기초 개념이 안 잡혀있어서 질문하기도 상당히 애매한 수준...) 클라우드 환경을 활용하여 웹서비스에 접근할 수 있도록 만든다. -AWS서버구매 후 연결 *GitBash에서 세팅하기 GitBash에서는 AWS EC2에서 구매한 가상의 컴퓨터(클라우드 같은 개념)를 연결한다. 가상의 컴퓨터, 리눅스는 마우스가 없어서 명령어를 입력하여 사용한다. GitBash를 시작하기 전에 우선 키페어를 준비해야한다. 그리고 여러 명령어가 등장하는데, 굳이 다 기억할 필요는 없고, 잘 기록해두고 붙여써도 될 듯하다. *GitBash로 컴퓨터에 원격접속 -GitBash로 키페어등록하기(나는 윈도우를 사용하기 때문에 윈도우기.. 2021. 12. 18.
5주차(1) 웹개발 강의: 파일질라, 가비아 / 버킷리스트 만들기 -파일질라(Filezilla): 파일을 보내는 프로그램 -가비아: 도메인구매 이제 코딩 준비 끝! *프로젝트세팅 -bucket프로젝트생성, Venv확인, 파이썬버전확인 -디렉토리(static, templates)생성, app.py생성, templates안에 index.html생성 -설정에서 패키지설치: pymongo, dnspython, flask, BS4, requests -MongDB Atlas 준비하기 *POST연습(기록하기) -API만들어사용하기(기록API/POST) -요청정보: URL=/bucket, -요청방식: POST -클라이언트(Ajax) >> 서버(Flask): bucket을 보내면 -서버(Flask) >> 클라이언트(Ajax): ('기록완료!')의 메시지를 보낸다. //리스트의 번호를 .. 2021. 12. 17.
4주차 웹개발 강의: 팬명록만들기 예제(개발일지) * 항상 DB(MongoDB사용)를 준비한다. * 새 프로젝트를 열고, static 과 templates 디렉토리 생성 * app.py생성, templates 안에 index.html 생성 * 패키지설치: flask, BS4, dnspython, pymongo, requests POST연결 1. 요청정보: URL=/homework, 요청방식=POST2. 클라이언트(Ajax) >> 서버(Flask): name, comment3. 서버(Flask) >> 클라이언트(Ajax): 메시지보냄(입력완료) GET연결 1. 요청정보: URL=/homework, 요청방식=GET2. 클라이언트(Ajax)>>서버(Flask): 없음3. 서버(Flask)>>클라이언트(Ajax): 전체데이터보내주기 -서버 만들기: 여러개 찾기.. 2021. 12. 17.
2주차(3) 웹개발 강의: Ajax * API란? :서버에서 클라이언트가 요청을 할 때 필요한 창구 역할 API에는 'GET'방식과 'POST'방식이 있다. -GET방식: 데이터를 조회를 요청할 때 (예시: 우리가 무언가를 검색할 때) -POST방식: 데이터를 생성, 변경, 삭제를 요청할 때 (예시:회워가입, 탈퇴, 비밀번호 수정 등) * JSON(JavaScript Object Notation) Json은 클라이언트가 서버로부터 받는 데이터 형식 key:value로 이루어져 딕셔너리와 리스트의 조합의 형식으로 보인다. 복잡한 데이터가 json뷰를 다운 받으면 정리된 모습으로 데이터를 보여준다. JSON형식0 { }: 객체(딕셔너리) [ ]: 배열 " ": 문자열 문자열 외: 숫자 [{ }]: 객체의 배열 -Jsonview(크롬에 설치) .. 2021. 12. 17.
2주차(2) 웹개발 강의: JQuery연습예제 #1. 빈칸 체크 함수 만들기 function q1() { } // 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게! // 2. 만약 입력값이 빈칸이면 if(입력값=='') // 3. alert('입력하세요!') 띄우기 // 4. alert(입력값) 띄우기 다음 문제에 대한 답과 해석(입력값을 입력할 때 $,#표시와 명령이 끝났을 때 ;세미콜론을 잊지말자) function q1(){ >>q1에 JQuery를 적용시킬건데, let value = $(#'input-q1').val(); >>input-q1의 이름을 가진 input을 이제 'value'라고 하자 if (value == ''){ >>만약에 'value'값이 공백과 같다면 alert('입력하세요'); >> ale.. 2021. 12. 17.
2주차(1) 웹개발 강의: JQuery *JQuery란? : HTML요소를 조작하는 편리한 Javascript를 미리 작성해 모아둔 것, 라이브러리 역할 JQuery는 Javascript의 코드보다 훨씬 심플하다. JQuery를 사용하기 위해서는 첨부된 링크에서 코드를 찾아 입력해야한다. - JQuery링크찾기: https://www.w3schools.com/jquery/jquery_get_started.asp jQuery Get Started W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL.. 2021. 12. 17.
1주차(4) 웹개발 강의: 자바스크립트(javascript) 자바스크립트(javascript)는 브라우저가 알아듣는 프로그래밍 언어이다. 안에 를 만들어 그 안에 자바스크립트를 작성한다. 브라우저에서 검사를 눌렀을 때 뜨는 console과 동일하다 **자바스크립트 기초문법 자바스크립트 기초문법에는 변수, 자료형(숫자,문자), 함수, 조건문(if, else), 반복문(repeat)등이 있다. 기본적으로 변수가 있고 여러 함수에 대입을 하여 사용할 수 있다. * let 변수선언 :'~라고 하자!' 라고 변수를 선언하는 코드이다.(변할 수 있는 값) let 다음 a=2라고 했을 때 a를 물어보면 2로 대답을 하는 원리. 변수들은 사칙연산(+,-,*,/,%...), 문자열 더하기가 가능하다. 문자열이 들어갈 때는 '~'또는 "~" 따옴표로 감싸준다.(String형식) l.. 2021. 12. 17.
1주차(3) 웹개발 강의: 부트스트랩 부트스트랩(Bootstrap): 예쁜 CSS모음집이다. CSS분리처럼, 인터넷에서 완성된 CSS를 끌어와서 사용한다는 장점이 있다. 예를 들면, 색이라던가, 기능등을 내가 굳이 수정하지 않아도 마음에 드는 CSS를 골라 사용할 수 있다. 아래의 html템플릿을 넣으면 부트스트랩을 시작할 수 있다. 부트스트랩 링크: https://getbootstrap.com/docs/5.0/components/buttons/ 이걸로 시작해보죠! 2021. 12. 16.
1주차(2) 웹개발 강의: 구글웹폰트/주석달기/CSS파일분리 구글웹폰트 활용하기 아래 링크를 클릭하면 사용할 수 있는 웹폰트가 나온다. 원하는 폰트를 클릭하고 'select this style'을 선택하고 모음아이콘을 선택하면 내가 선택한 폰트 목록이 뜬다. 여기서 태그는 사이에, 해당하는 폰트의 CSS는 사이 *{ 구글웹폰트CSS} 붙여준다. https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 주석달기 사용하고 싶지 않은 태그를 숨겨둘 때, 또는 설명을 붙여둘 때 Ctrl + / 를 눌러 비활성화 시킨다. 다시 풀 때도 똑같이 누른다. 을 비활성화 시키면 * CSS.. 2021. 12. 16.
1주차(1) 웹개발 강의: HTML, CSS HTML, CSS HTML: 뼈대 / CSS: 꾸미기 / Javascript: 움직임 구현 HTML은 안에 을 넣어서 사용한다. css를 적용할 html 태그에 이름을 붙여주고 class="이름", 에서 .클래스이름{ } 안에 CSS를 넣어 사용한다. 자주 쓰이는 CSS *꼭 외워서 사용하지 않아도 구글링해서 찾아써도 된다. 하지만 많이 쓰이는 것들은 외워두면 좋다. CSS입력이 끝나면 ;(세미콜론)을 붙여준다. 배경관련CSS background-color background-image background-size background-position display: flex; flex-direction: column or row; justify-content: center; align-items: cen.. 2021. 12. 16.
파이참) 소스코드 정리하기 단축키 알아두면 좋은 파이참 단축키 Ctrl+L >> 소스코드 전체 정리 Ctrl+I >> 줄단위 정리 2021. 12. 16.
파이썬 크롤링하기(웹스크래핑) 3주차 과제 지니뮤직사이트 순위/제목/가수 스크래핑하기 뷰티풀숩을 이용해 셀렉트하고 카피를 해두면 편리하다. 스크래핑할 내용 한 개 찾기 .select_one() 여러개 찾기 .select data = requests.get('https://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701',headers=headers) soup = BeautifulSoup(data.text, 'html.parser') #body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.number #body-content > div.newest-list > div > table > tbody > tr:nth-chi.. 2021. 12. 15.

티스토리툴바