포스트

웹 기초 및 JavaScript 기초

웹 기초 및 JavaScript 기초

🔴 시작하면서.. IT 기사 읽기

[[사이트]요즘 IT 비개발자가 본선 진출해 본 ‘AI TOP 100’ 참가기]https://yozm.wishket.com/magazine/detail/3539/?h=T077921MXB9&utm_source=slack&utm_medium=bot&utm_campaign=T077921MXB9

AI를 잘 쓴다 라는 것은 무엇인가?
당신은 AI를 사용중인가, 의존중인가 에 대한 질문을 던지는 기사처럼 느껴졌다.

내가 생각하는 AI에 의존한다는 문제를 생각하지도 않고 바로 해줘 느낌으로 모든 사고를 맡기는 행위를 말한다.
반대로 AI를 사용한다는, 문제를 해결하는 데에 이정표를 제시해주거나 생각하게 도와주는 영역에서 그친다면 AI에 의존했다고만 보긴 어려울거다.

개발자로서 AI활용능력이 주목받는 요즘, 의존과 사용의 경계선에 있을 것이다.
그 부분에서 AI활용능력, 특히

  • AI를 활용하더라도 각자 더 활용능력이 뛰어난 AI에게 업무를 분산할 줄 알아야한다.

🔴 웹 기초

클라이언트와 서버라는 말을 굉장히 많이 듣게된다.
클라이언트는 서비스를 요청하는 쪽을 말한다.
보통은 데스크톱을 통한 웹이나 모바일 웹 혹은 앱 등이 있겠다.

서버로는, 요청을 받아서 처리하고 데이터나 결과를 돌려주는 쪽이다.
여기에는 위치나 형태에 따라 로컬 서버 및 클라우드 서버가 있겠다.
이 사이의 징검다리 역할,
클라이언트와 서버 사이의 데이터를 주고받게 하는 것을 가능하게 하는게 네트워크(인터넷)이다.

웹은 항상 요청과 응답의 반복이다.

🔴 기본 개념

IP 주소
Internet Protocol address
인터넷 환경에서 각 기기가 서로를 구분하기 위해 사용하는 인터넷의 주소이다.
숫자로 나타나져 있음 (ex.192.168.1.1)

도메인
인터넷 상에서 특정 웹 사이트를 찾기 쉽게 만든 이름.
본래, 흔히 들어가는 네이버 또한 고유의 IP 주소가 존재한다.
현재의 naver.com 으로 접속이 가능한 이유가 바로 도메인을 사용했기 때문.

매번 IP주소로 웹사이트를 찾아가기에 불편함을 느낀 사람들이 보다 알기 쉽게 찾아갈 수 있도록 만든 이정표에 가깝다.

DNS 서버 Domain Name Server
도메인을 IP 주소로 바꿔주는 역할
이정표는 이정표라서, 실제로는 도메인을 IP주소로 변환해주는 역할을 하는 듯 하다.

HTTP / HTTPS
HTTP는 웹사이트에 접속할 때 주고 받는 데이터를 처리하는 기본적인 규칙의 개념이다.
데이터를 암호화하지 않고 주고 받기에 해킹 등의 위험에 쉽게 노출 된다.

이를 보완하고자 나온 보안(SSL/TLS) 기능이 추가된게 HTTPS.
요즘 웹사이트는 모두 HTTPS가 기본이다.

WWW World Wide Web
최초의 웹은 과학자들끼리 그들 만의 웹 페이지를 공유하기 위해 개발

🔴 웹 아키텍처

웹 컨텐츠는 - HTML + CSS + JavaScript으로 이루어진다.
HTML : 마크업 언어, 시멘틱 정보, 컨텐츠 레이아웃
CSS : 꾸미는 언어에 가까움
JS : 동작, 논리적 제어, 사용자 상호작용 등. ( HTML / CSS 를 움직이게 한다. )

🔴 시맨틱 태그 (Semantic Tag)

  • 태그만 보고도 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그
  • header, nav, section, article, aside, iframe, footer, address, div 등이 있음

section 콘텐츠를 주제별로 묶을 때 사용, section 태그 안에 또다른 section 태그를 선언가능.

article와 section의 차이 및 asdie / iframe
article 태그는 말 그대로 신문의 한 기사, section 태그는 그 기사 안의 소제목 단락들을 말한다.
aside : 필수 요소가 아니기 때문에 문서의 메인 내용에 영향을 미치지 않는 내용
iframe : 웹 문서 안에 외부 문서를 삽입하기 위해 사용

🟠 JavaScript?

자바스크립트, 줄여서 JS는 뭐하는 친구일까?
JS는 프로그래밍 언어이긴 하지만, 좀 더 깊게는 스크립트 언어에 속한다.
스크립트 언어는 기존의 소프트웨어를 제어하기 위한 용도로 쓰이는 언어라 생각하면 된다.

여기서 제어하는 소프트웨어는 바로 웹사이트에 해당한다.
흔히들, 웹사이트의 3대장인 HTML, CSS, JavaScript 라고들 한다.
HTML은 사람의 뼈대,
CSS는 사람의 피부, ( 정확히는 살을 붙인다? 같은 표현이다 )
JS는 사람의 근육, 또는 두뇌라고 표현하는 곳도 있음, 웹사이트에 동적인 이벤트 전반을 담당한다고 본다.

그 이외에는…

  • 자바스크립트로 작성한 코드는 스크립트 코드라고 부른다.
  • 컴파일 언어가 아닌, 인터프리터 언어이다.

실제 HTML 상에서도 JS는 script에서 코드를 작성한다. 인터프리터 언어는 한 줄씩 바로바로 실행하는 구조를 말함.

🟡 특징

  • 동적 프로토타입 기반 객체 지향 언어 클래스가 아닌 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어 객체를 생성한 후에도 프로퍼티와 메소드를 동적으로 추가하거나 삭제할 수 있음

  • 동적 타입 언어 변수 타입이 없어서 프로그램 실행 도중 변수에 저장되는 데이터 타입이 동적으로 바뀔 수 있음

🟠 호이스팅 ( hoisting )

선언한 변수 및 함수가 선언 범위의 최상단으로 올라가 작동하는 JS의 행동

  • 자바스크립트만의 고유한 특징
  • ( 단, 선언과 동시에 대입하는 코드는 끌어올리지 않는다 )

🟠 변수 이름 규칙

  • 대소문자 알파벳, 숫자, 밑줄 가능하나 첫 글자로 숫자 불가
  • 예약어 사용 불가 ( import 같은 이미 사용중인 JS 내장함수 등을 가리킨다. )

🟠 데이터 표현

  • undefined : 정의는 되었지만 값이 할당되지 않은 상태
  • null : 값이 비어있음. 고유의 값 null

🟠 비교 연산자에 대한 설명

논리 / 제어 / 반복문에 대한 설명 ( for, if )

이중 for문 도 배웠었나봄

while 문 그다음

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.