지코딩

1. 증감연산자(++,--): " 피연산자를 증가(1을 더함)하고 값을 반환합니다. " 자기 자신의 값을 증가(감소)시키는 연산자이다. 연산자의 위치가 중요하다. 항상 1을 더한다는 사실도 기억해야 한다. let x = 3 const y = ++x 일 때 x = 4, y = 4 ++가 앞에 위치할 때는 y는 증가한 값을 받고( y + x ), 피연산자도 증가한다. let x = 3 const y = x++ 일 때 x = 4, y = 3 ++가 뒤에 위치할 때는 y는 피연산자의 값만 받고(y = x ), 피연산자만 1을 더한다. 2. 대입(할당)연산자: 선언(값을 변수에 할당) 할 때 쓰인 = 도 대입연산자의 일종이다. 즉, 대입연산자는 ~이다 라는 선언의 의미를 가지고 있다. a = b : a 는 b이다..

1. 템플릿리터럴 (` `) 을 사용하면 문자열을 간결하게 표현할 수 있다. (가독성이 좋다) const animal = '원숭이' console.log('나는'+animal+'입니다.') console.log(`나는 ${animal}입니다.`) 2. 템플릿리터럴 안에서 `(백틱)문자를 쓰고 싶다면? 백틱앞에 백슬래시를 넣는다. `＼`` = ` 로 출력된다. 3. 템플릿리터럴은 (` `) 안의 내용을 그대로 반영한다. (줄바꿈까지!) console.log("string text line 1\n"+ "string text line 2"); console.log(`string text line 1 string text line 2`); console.log(`string text line 1 string t..

처음 코딩을 시작할 때 부터 오늘까지, (비록 얼마되지 않은 짧은 시간이지만) 집요하게 나를 괴롭히는 개념이 있다. 바로 HTML의 inline 과 block 인데 두 개념이 헷갈리니 여백이나 정렬에서도 계속 헷갈리는 부분이 나온다. 그래서 먼저 둘을 정확하게 구분하고 관련된 개념들도 다시 정리하려 한다. 1. inline 태그에 할당된 공간만 차지하는 요소이다. (새로운 줄을 만들지 않는다.) 다른 인라인 요소는 포함할 수 있지만, 블록 요소는 포함할 수 없다. display 속성을 사용해 인라인을 블록 요소처럼 다룰 수 있다. width, height, 상하의 margin 및 padding은 무시되고, 좌우의 margin 및 padding만 반영된다. 인라인 요소 , , , , , , , , , , ..

1. margin, padding (1개 수치만 입력하면 전체, 2개는 위아래와 좌우, 4개는 위-오른쪽-아래-왼쪽 순서로 적용) margin border를 경계로 바깥 쪽 여백 magin auto: 가운데를 기준으로 상하와 좌우를 같게 하는 것이다. margin auto는 블록일 때는 위아래, 좌우에 적용되지만, 인라인 일때는 좌우에만 적용된다. 두 개 요소의 margin이 겹치면 둘 중 큰 값이 적용된다. (여백 상쇄) padding border를 경계로 안 쪽 여백 2. display: display: inline display: inline이 지정된 요소는 앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다. width, height, 상하의 margin 및 padding은 무시되고, 좌우의..

정신없는 이틀이었다. 처음으로 미니프로젝트에 참여해 아무것도 모르지만 어떻게든 뭘 만들어보려고 애썼다. 만들면서도 '이렇게 만들어도 되나?' 싶기도 하고 별 기능이 없어 초라해 보이지만 어쨌든 뭔가를 만들긴 한 것 같다. (아직 완성은 아니지만) 정말 많은 새로운 문법을 써보고 아직도 이해가 안되는 부분이 많았는데 막상 TIL에 적으려니 도무지 기억이 나질 않아 틈틈이 생각나는대로 적어보려 한다. 그 중에 프로젝트 내내 가장 많이 들었던 생각은 '정리가 굉장히 중요하다'는 점이었다. 여러 사람이 각자 방식으로 작업을 하다보니 처음 코드를 만들 때 보다 각자의 결과물을 합치는데 시간이 더 걸리고 더 스트레스를 받았다. 그 동안 나는 모든 코드를 index.html과 app.py에 작업했는데 이번 작업을 통..

웹페이지: HTML, CSS, JavaScript로 만든다. 서버: 1. 만들어둔 파일(HTML, CSS, JavaScript)을 클라이언트에게 제공 2. 클라이언트에서 입력한 새로 저장할 데이터를 가져옴 3. 데이터베이스에서 저장된 데이터를 클라이언트에게 제공 DB: 서버에서 받은 데이터를 보관하고 요청한 데이터를 서버에 제공 (은행) API: 필요한 데이터가 담긴 곳, 클라이언트가 서버에게 요청하는 주소(은행의 창구번호) 서버를 구동시킬 수 있는 코드의 모음 서버를 구동하기 위해 필요한 복잡한 것들을 쉽게 할 수 있도록 만든 프레임워크 - flask를 이용해 서버를 만들 때 항상 해야할 것: 프로젝트 폴더에 - static폴더 : 서버에 담을 css파일, 이미지 - templates폴더/~.html ..

크롤링(스크래핑)은 웹페이지의 여러 데이터 중 필요한 데이터만 가져오는 것 requests는 url을 넣어 데이터를 가져오는 라이브러리이다. - 자바스크립트 때 배운 Ajax같은 느낌이다. 사용법 또한 비슷하다. json형식의 경우 원하는 데이터를 찾기 쉽지만(리스트형식이라) 보통의 웹페이지는 json형식이 아닌 html이다. 그래서 BeautifulSoup이라는 라이브러리를 쓴다. BeautifulSoup은 가져온 html 더미를 텍스트 형태로 저장한다. BeautifulSoup의 개념이 이해가 안돼서 시간이 오래걸렸다. 이해한 내용대로 정리를 해보자면, .select()는 HTML더미에서 내가 찾는 부분을 찾아주는 코드이다. () 안에는 copy selector나 속성값을 넣어준다. (copy sel..

파이썬은 직관적인 언어이다. (딱 봐도 간결해 보이고, 잘 읽히는 느낌이다) 괄호가 많이 쓰이지 않아 들여쓰기가 중요하다. (한 번 들여쓰기해서 하위코드?라고 표시함) 기본적인 규칙은 자바스크립트와 비슷해 보인다. [] 는 리스트, {} 는 딕셔너리 - 반복문 for 단수 in 복수 형태가 많다. 왜? 잘 모르지만 직관적으로 알아듣기 쉬운듯 하다. 예) for fruit in fruits: fruits의 fruit을 반복해줘

Jquery는 라이브러리*의 한 종류로 Javascript로 작성했을 때 복잡한 코드를 비교적 간단하게 구현할 수 있도록 도와준다. 먼저 Jquery CDN을 안에 임포트한 후 작성할 수 있다. css처럼 에서 대상을 지정한 후 에서 원하는 동작을 명령한다.(?) 대상 지정은 id="" 로 할 수 있는데, class와 다르게 한 대상만 지정할 수 있다. $('#대상').val(); 값 가져오기 $('#대상').hide(); 숨기기 $('#대상').show(); 보이기 let temp_html = $('#대상').append(temp_html); 원하는 값을 html에 구현하기 Ajax는 서버로부터 데이터를 받아올 수 있도록 요청하는 라이브러리이다. 서버에 요청을 할 때는 API라는 고유주소(?)를 이용해..

JavaScript 관련 let a = 'text' 이제부터 text를 a라고 부르겠다는 뜻: 선언 a 는 변수라고 한다. 변수는 컴퓨터와 서로 약속했기 때문에 ''를 써주지 않아도 되지만 'text' 엔 반드시 ''가 필요하다. 단어나 숫자 같은 짧은 데이터(?)외에도 list/dict형 변수 등이 들어갈 수 있다. (뭐든 넣고 짧게 줄이는 용도인 것 같다.) let a_list['사과','배','딸기','수박'] list형 변수는 안에 몇 개의 데이터(?)가 담겨 있다. 0부터 세기 시작하며 갯수를 length라고 한다. let a_dict = {'name':'bob','age':27} dict형 변수는 {key:value}의 구조로 key값을 물어보면 value로 대답한다. 여러 형태의 변수들을 굉..