김기지의 코딩노트

◎ 변수 : 데이터를 담는 메모리(보관함)의 이름 변수를 통해 메모리에 들어있는 데이터를 사용한다. 어떻게? 더보기 1. 보관함 확보하기 → 변수 선언(declaration) 2. 보관함에 데이터 저장하기 → 변수에 값을 할당(assignment) 3. 데이터 사용하기 1) 변수의 선언과 할당 1. 변수 선언 - 특정 데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보하고 그 메모리 공간에 이름을 부여하는 것 - 변수를 선언하는 키워드 사용 변수를 선언하는 키워드는 세 가지가 있다. 1. var : 변수 중복선언 허용(에러 발생 X), 함수 레벨 스코프, 변수 Hoisting 2. let : 변수 중복선언 금지, 블록 레벨 스코프, 변수 Hoisting이 발생하지 않는 것처럼 동작 3. const :..

◎Type(타입) :값(value)의 종류 우리는 평소 여러가지 표현으로 정보를 전달한다. '오늘은 2022년 12월 18일 입니다.' , '아메리카노 5000원' , 100 > 24 등등 말이나 글로써 정보를 표현한다. 위 정보에서 2022, 12 등을 문자가 아닌 숫자로 표현한 이유는 뭘까? 정보를 전달받는 사람의 가독성을 높여주기 위함이다. 때문에 숫자나 부등호 기호를 문자열이 아닌 숫자, 기호 그 자체로 분류하고 표현하게 된다. javascript에서도 정보를 전달하기 위해 값을 사용한다. 여기서도 자주 쓰이는 값은 분류를 하게 되고, 분류된 각 타입은 고유한 속성과 메서드를 갖게된다. ● 타입의 종류 - 원시타입 : 변경 불가능한 값 ▶ 종류 ① Number ② String ③ Boolean ④..

오늘은 바로 코드스테이츠 프론트엔드 부드캠프 첫 날!!!!!!! 8시에 일어나서 청소하고 씻고..난리난리... 오랜만에 일찍 일어나서인가 머리가 아파서 점심시간에 누워있다 바로 수업듣기..ㅋ 오늘은 첫 날이라 ot위주로 지나갔지만 바로 내일부터 페어 프로그래밍 시작이라니!!!! 전 아직 준비가...(ㄷㄷㄷㄷ) 여러 갈래길을 돌다 코드스테이츠로 온 만큼 열심히 해보자!!!!! ◎ 나의 목표 - 부트캠프를 통해서.. 오늘의 집 같은 가구 관련 회사에 취업하기 이왕이면 부트캠프가 끝나기 전에,,(6월부터 너무 덥잖아요.. 재택이면..좋겠지만..) ◎ 앞으로의 계획표 아, 물론 주중 계획표입니다만,,? 킄 이와중에 코난은 포기 못하지... 이상적인 계획표이지만 사람일은 모르는 것. 눈오는 날엔 산책을 못가고....

◎ 임베디드 요소 (외부의 소스를 불러와 페이지에 삽입) 1. 이미지 ○ : 이미지 삽입 요소(빈요소). 내부에 코드 입력이 아닌 속성으로 이미지 형태를 정의. ● 웹에서 사용하는 이미지 유형 브라우저마다 지원하는 형식이 다르기때문에 이미지가 안나오는 경우도 있음. 약어 MIME타입 파일 확장자 요약 래스터이미지 JPEG image/ jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp 정지 이미지의 손실 압축에 적합(압축률이 좋을수록 로딩이 빠름) PNG image/ png .png 원본 이미지를 보다 정확하게 보여주거나 투명도가 필요한경우(아이콘, 제품사진 등) JPEG보다 선호됨 GIF image/ gif .gif 여러장의 이미지로 이루어진 애니메이션 표현 가능. 사용되는 컬러는 제한..

◎ 구조를 타나내는 요소 1. 컨테이너 ○ : 컨텐츠 분할요소. css로 꾸며주기 전에는 컨텐츠나 레이아웃에 어떠한 영향도 주지 않음. 순수 컨테이너로 아무 의미도 갖지 않음. 블럭레벨로 작동함. ○ : 구문 컨텐츠를 위한 통용 인라인 컨테이너. 2. 시멘틱 웹 (Semantic web) ● 시멘틱 : 의미의, 의미론적인 ↔ non-semantic ● 요소의 의미를 고려하여 구조를 설계하고 코드를 작성 로 구역을 나눈다면 해당 구역이 의미하는 바가 잘 보이지 않음. → 시멘틱 태그로 나타내기 ▶ 의미론적인 마크업 사용시 이점 검색엔진은 의미론적 마크업을 분석하여 중요한 키워드로 간주하기 때문에 필요한 정보를 바로 찾을 수 있음 스크린 리더로 페이지를 탐색할 때, 의미론적 마크업을 푯말로 사용하므로 웹 접..

◎ 실습환경세팅하기 메모장에서도 코딩은 가능하지만 왜 안할까? → 가독성이 떨어지기 때문 ○ 웹 에디터 (편집기) - HTML문법에 맞추어 편리하게 작성할 수 있도록 도와주는 편집기 - 문법에 따라 색, 들여쓰기 등을 구분할 수 있음 - 온라인 웹 에디터 : jsbin, replit, condepen 등 ○ 통합 개발 환경(IDE) - 개발을 할 때 필요한 여러가지 툴을 한 프로그램을 통해 사용할 수 있도록함 코드를 작성하기 위한 소스코드 편집기 작성한 코드에 문제가 없는지 체크해주는 디버거 추가적인 기능을 제공하는 플러그인 - Visual Studio Code, IntelliJ, X code, Eclipse 등 (실습에는 VScode를 사용) ○ VScode 확장 프로그램 있으면 유용한 확장 프로그램을..

◎ HTML : Hypertext Markup Language (웹페이지를 이루고 있는 마크업 언어) HTML은 웹을 이루는 가장 기초적인 구성 요소로, 요소의 구조를 나타내는 역할을 한다. ○ HTML작성법 웹 페이지를 구성하고 있는 요소(element) 하나하나를 "태그(tag)"라는 표기법으로 작성 태그를 통해 어떤 요소인지(제목, 본문, 이미지, 비디오 등) 명시 태그의 이름은 HTML5 웹 표준에 맞게 작성 ● 태그의 구성 여는 태그 (opening tag) : 닫는 태그(closing tag) : ( 요소의 이름은 여는 태그와 일치해야함) 내용(content) : 요소의 내용 → 브라우저에 표시됨 요소(element) : 여는 태그, 닫는 태그, 내용을 통틀어 요소라고 함 - 빈 요소(Empt..

◎ 버킷리스트 페이지 만들기 버킷리스트 페이지를 만들어보자. 뼈대코드는 코드스니펫을 이용한다. ● 기록하기 - POST 더보기 1. 요청 정보 : URL= /bucket , 요청 방식 = POST 2. 클라(ajax) → 서버(flask) : bucket 3. 서버(flack) → 클라(ajax) : 메세지 보내기(기록 완료!) + 서버에서는 버킷을 저장 할 때 번호를 만들어 넣어주어야한다 ▶ 업데이트시 완료된 것을 구분하기 위함 1) 클라이언트 서버 연결 확인하기 버튼에 동작이 걸려있다. function save_bucket(){ $.ajax({ type: "POST", url: "/bucket", data: {sample_give:'데이터전송'}, success: function (response) ..

◎ 영화 포스팅 페이지 만들기 http://spartacodingclub.shop/web/movie 스파르타 피디아 더 수어사이드 스쿼드 살고 싶다면 무조건 성공시켜라!최강 우주 빌런에 맞선, 자살특공대에게 맡겨진 ‘더’ 대책 없는 작전.... ⭐⭐⭐ spartacodingclub.shop 영화 포스팅 페이지를 만들어보자. 기본 폴더를 만들고 패키지 설치를 하자. 여기서는 requests와 bs4도 설치해준다. 왜? 영화 기록하기를 보면 url, 별점, 코멘트를 입력을 하게되면 포스팅박스에는 영화 이미지, 제목, 줄거리가 추가되어 나온다. 어디서 가져온걸까? 입력된 url에 저장되어있는 정보를 가져온것이다. url을 크롤링해서 db에 저장해야하기 때문에 두 패키지를 추가로 설치한것! ● 조각 기능 구현하..

◎ 화성땅 공동구매 페이지 만들기 화성땅 공동구매 페이지를 만들어보자. ● 폴더 구조잡기 필요한 폴더와 파일을 만든 후 패키지설치를 한다. ● 뼈대 준비하기 app.py와 index.html파일에 뼈대 코드를 넣어주자. (코드스니펫) (html은 생략) 우리가 구현해야 하는 기능은? → ① 주문하기 ② 주문 보여주기 주문하기 버튼을 클릭하면 ①이 실행되고 실행 후 로딩이 완료되면 ②가 실행되어야한다. ① 주문 저장하기 - POST 더보기 1. 요청 정보 : URL:/mars , 요청 방식 : POST 2. 클라(ajax) → 서버(flask) : name, address, size 전송 3. 서버(flask) → 클라(ajax) : 메세지 보냄( 주문 완료!) 1)서버 클라이언트 연결 확인하기 html을..