프론트엔드

2023.07.31 - [캠프/AI 웹개발 취업캠프] - [AI 웹개발 취업캠프] 11Day - Python(1) 조건문과 반복문 조건문 주어진 조건식의 결과에 따라 다른 명령을 수행하도록 프로그램의 흐름을 제어하는 명령문을 의미 if문 if 조건식: 조건식의 결과가 참(True)일 때만 실행되는 명령문 if 조건식: 조건식의 결과가 참(True)일 때만 실행되는 명령문 else: 조건식의 결과가 거짓(False)일 때만 실행되는 명령문 if 조건식1: 조건식1의 결과가 참(True)일 때만 실행되는 명령문 elif 조건식2: 조건식2의 결과가 참(True)일 때만 실행되는 명령문 else: 조건식1, 2의 결과가 모두 거짓(False)일 때만 실행되는 명령문 for문 어떤 조건을 만족시킬 때까지 특정 ..
0. pandas 설치 및 my_data.csv 불러오기 pip install pandas data = pd.read_csv('my_data.csv') 1. Unnamed:0라고 표기되는 열을 지운다. 단 Unnamed:0라 쓰지말고 새롭게 컬럼 이름을 만들어서 지운다. df.rename(columns={'before':'after'}) 이런식으로 변경할 컬럼의 기존이름과 변경할 이름을 입력하면 된다. data = data.rename(columns={'Unnamed: 0': 'columnTest'}) 열 삭제는 데이터프레임명.drop(['칼럼명'], axis=1) 으로 해당 열을 삭제한다. data = data.drop(['columnTest'], axis=1) 1번 과제 실행 후 결과 2. 0,1,2..
1. 숫자끼리 비교하는 연산과 문자끼리 비교하는 연산 중 왜 문자끼리 비교하는 연산이 상대적으로 불리한지 이유에 대해서 정리해보고 샘플 코드를 구현해서 제출하기 숫자끼리 비교하면 비교 연산으로 크기를 비교한다, 반면 문자열 비교 연산은 유니코드(unicode) 또는 아스키코드(ASCII) 값으로 비교한다. 그래서 문자열 비교 연산은 길이가 다양하기 때문에 비교 연산에 더 많은 리소스가 필요하고 원하지 않는 결과가 나온다. 결과값을 보게 되면 숫자와 문자열 비교값이 다르게 나온다 2. 파이썬으로 일부 중복되는 element를 저장하고 최소 element가 10개이상 되는 배열을 만든다. 그리고 set() 구문 없이 오로지 for in 문으로 배열의 중복된 값을 없애는 코드를 작성하기 코드 arr1 = [1..
2023.08.01 - [캠프/AI 웹개발 취업캠프] - [AI 웹개발 취업캠프] 12Day - Python(2) 파이썬 소개 파이썬(Python)이란 1989년 12월 네덜란드의 귀도 반 로섬 프로그래머가 크리스마스 이전에 회사가 7일 쉬어서 취미로 만들었대.. ??? 이름은 코미디 프로를 보다가 파이썬이라는 단어가 나와서..?? 파이썬은 문법이 어렵지 않고 쉽게 작성할 수 있다 인터프리터에서 바로 실행하여 그 결과를 확인할 수 있다. 생산성이 높아 개발 속도가 빠르다 자료형과 변수 문자형 자료형 문자열(string)은 문자로 이루어진 데이터의 타입, 파이썬에서는 다음과 같이 다양한 방법으로 문자열을 표현할 수 있다. 큰따옴표(" ")로 감싸기 작은따옴표(' ')로 감싸기 큰따옴표 3개(""" """)..
주제: webAPI의 dialog box인 alert(), confirm() 메소드는 window나 document 없이 바로 사용할 수 있는 이유 찾아보기 alert(), confirm() 등의 메소드는 명시적으로 참조 없이 사용할 수 있는 이유는 전역 객체의 속성으로 존재하기 때문이다. 전역 객체는 웹 브라우저에서 전체 페이지 접근 가능한 내용을 담고 있는 객체이다. (전역 범위에 항상 존재하는 객체) window 객체를 통해 전역 범위에 있는 변수와 함수에 접근할 수 있기 때문에, 전역 객체를 직접 명시하지 않아도 되는 것이고 웹 브라우저 환경에서 전역 객체가 window 객체인 이유는 브라우저에서 JS가 실행되는 동안 전역 범위에 있는 모든 변수와 함수는 window 객체의 프로퍼티가 되기 때문이..
노드 간의 관계를 이용하여 접근하는 방법 노드 리스트(node list) getElementsByTagName() 메소드나 childNodes 프로퍼티의 값으로 반환되는 객체 이 객체는 HTML 문서와 같은 순서로 문서 내의 모든 노드를 리스트 형태로 저장하고 있다. 리스트의 각 노드는 0부터 시작 노드를 추가하는 방법 특정 위치에 새로운 노드를 추가할 수 있다. appendChild() : 새로운 도느를 해당 노드의 자식 노드 리스트의 맨 마지막에 추가 insertBefore() : 새로운 노드를 특정 자식 노드 바로 앞에 추가 insertData() : 텍스트 노드의 텍스트 데이터에 새로운 덱스트를 추가 노드를 생성하는 방법 createElement() createAttribute() createTe..
주제.1 html 문서 앞에 참고 코드를 보면 head 다음에 js 코드가 작성되어 있다. 하지만 코드를 실행하고 개발자 도구를 열어보면 이것 처럼 요소가 안에 있는데 불어와져 있는걸 볼 수 있다.. 왜일까?? 브레이크 포인트를 걸어놓고 확인해 보자 새로 고침을 해보면 js 코드에서 브레이크를 걸어놔서 body가 안나온다 분명이 11번째 줄 지났을때 개발자 도구에서는 에 있는 요소들이 출력이 안된다 하지만 getElementsByTagName 메소드는 HTMLCollection 이다. 아래 참고 링크 처럼 HTMLCollection 는 실시간으로 반영된다. querySelector vs getElementsByClassName (NodeList vs HTMLCollection) For this blog ..
Web API의 Document 객체 Document 객체는 웹 페이지 그 자체를 의미합니다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작한다. (HTML 요소들은 다 document 안에 있기 때문에) Document 메소드 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다. HTML 요소의 선택 HTML 요소의 생성 HTML 이벤트 핸들러 추가 HTML 객체의 선택 HTML 요소의 선택 메소드 설명 document.getElementsByTagName 해당 태그 이름의 요소를 모두 선택함 document.getElementById 해당 아이디의 요소를 선택함 document.getElementsByClassName 해당 클래스에 속한 요..
강의 함수(Function) 지역 변수(local variable) 함수 내에서 선언된 변수 변수가 선언된 함수 내에서만 유효하고, 함수가 종료되면 메모리에서 사라진다. function printX() { let x = 10; console.log(x); // 10 } printX(); console.log(x); // ReferenceError: x is not defined 전역 변수(global variable) 함수의 외부에서 선언된 변수 프로그램의 어느 영역에서나 접근할 수 있고, 실행코드가 닫혀야만 메모리에서 사라진다. let x = 10; function printX() { console.log(x); // 10 } printX(); console.log(x) // 10 호이스팅(hoisti..
강의 연산자 (operator) 논리 연산자(logical operator) 논리 연산자 설명 && 모두 참이면 참(논리 AND 연산) || 하나라도 참이면 참(논리 OR 연산) ! 참이면 거짓, 거짓이면 참(논리 NOT 연산) 제어문 (Control Flow statements) 조건문 조건이 충족할떄만 특정 구문을 실행할때 사용 논리적인 로직을 표현할 때 가장 중심이 되는 구문이다 조건에 들어가는 값은 항상 불리언 연산이 적용된다. if문 if (조건) { 만약 조건(condition)이 참일 경우 실행할 코드 } if / else 문 x가 양수인 경우 "양", 음수인 경우 "음" 라는 메시지를 출력합니다. if / else 문은 조건이 참인 경우와 거짓인 경우 각각 다른 코드를 실행함 let x =..
강의 JavaScript 개요 JavaScript의 특징 객체 기반의 스크립트 언어 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어 Node.js와 같은 프레임워크를 사용하면 서버 프로그래밍으로 사용가능 인터프리터 언어 C언어와 같은 언어는 소스 파일를 컴파일하여 사용자가 실행할 수 있는 실행파일로 만들어 사용 하지만 인터프리터 언어는 이러한 컴파일 작업을 거치지 않는다. 자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 바로 실행해 줌 DOM(Document Objects Model) HTML, XML 와 같은 문서를 프로그래밍 언어를 이용해 표현, 저장, 조작 등.. 이러한 것들을 할 수 있도록 해주는 인터페이스 Node.js Chrome V8 JavaScr..
실시간 강의 2023.07.20 - [캠프/AI 웹개발 취업캠프] - [AI 웹개발 취업캠프] 4Day - css 꾸미기(1) [AI 웹개발 취업캠프] 4Day - css 꾸미기(1) 해야할 작업들. 스크롤 내렸을때 상단에 헤더가 고정 로고 좌측, 메뉴 우측 main 과 side 구분 및 아래 footer 부분까지 변경된 코드 내부 스타일 시트가 아닌 외부 스타일 시트 사용을 위해 헤드부분 gorangcodingstory.tistory.com 작업 내용 폰트 변경 (D2Coding 폰트 사용) 섹션 부분 헤더에 가려지지 않게 섹션에 마진 값 추가 웹 폰트 가져오기 @font-face { font-family: 'D2Coding'; src: url('https://cdn.jsdelivr.net/gh/pro..
고랑E
'프론트엔드' 태그의 글 목록 (4 Page)