硏錄 YEON_log

지난 시간에 이어 이번에는 JavaScript 코드 작성에 대한 이야기로 포스팅을 이어보려고 한다. 작성된 코드에 대한 설명이 주된 내용이므로, 관심이 있거나 필요한 부분만 골라서 보면 될 것 같다. (혹시나 포스팅 내용에 오류가 있다면 제발 꼭 좀 알려줬으면 좋겠다..) 1. 뼈대를 완성하자 (HTML 마크업) To Do List 입력 What I Have To Do? COPYRIGHT 2022. JAENY, All rights reserved 가장 집중한 부분은 semantic 태그를 최대한 잘 사용해보자 하는 것이었고, 기본적으로 필요한 태그나 내용을 최대한 빠뜨리지 말자는 것이었다. 아래 내용을 펼쳐서 확인하면, 각 태그 사용에 대한 의도를 간략하게 서술하였다. 태그 내부 더보기 HTML 문자열 ..

기본기가 너무 많이 부족한 상황이다. 그래서 간단하지만 새로운 프로젝트를 진행하기로 했다. React 없이 JavaScript로만 To Do List를 만드는 것이다. 먼저 개발환경을 세팅해주었다. 폴더를 만들고 README를 생성한 후에, npm init명령어를 통해 package.json을 생성하고 필요한 패키지를 아주 조금 설치해주었다. 다음으로는 src 폴더를 생성해서 index.html ToDoList.js index.scss 를 만들고 기본적인 html 코딩 및 전역 폰트를 설정해주었다. GitHub에서 Repository를 생성한 후에 local에서 git init 이후 git add remote를 통해 연결을 해주었고, 기본적인 세팅과 코딩이후 commit 및 push를 진행하였다. 패키지..

자바스크립트의 탄생 1995년 넷스케이프 커뮤니케이션즈에서 정적인 HTML을 동적으로 표현하기 위해 경량의 프로그래밍 언어를 도입하고자 하면서 브랜던 아이크(Brendan Eich)가 개발한 자바스크립트를 도입하게 되었다. 1996년 3월 처음 "Mocha"라는 이름을 통해 Netscape Navigator2 웹 브라우저에 탑재되었고, 9월에 "LiveScript"로 이름이 변경되었고, 12월에는 "JavaScript"로 명명되었다. 자바스크립트의 파편화와 표준화 1996년에는 마이크로소프트에서 자바스크립트이 파생 버전인 "JScript"를 IE(인터넷 익스플로러)3.0에 탑재하였는데 JScript와 자바스크립트가 표준화 되지 못한 상태에서 각 브라우저에서만 동작하는 기능들을 경쟁적으로 추가하면서 브라우..

문서 형식 정의 태그(Document Type Definition Tag) 출력할 웹 페이지의 형식을 브라우저에게 전달하는 태그 대소문자를 구별하지 않으며 html 버전 등에 따라 작성하는 방법이 다르다. HTML 태그 모든 요소의 부모 요소이며, 웹 페이지에 단 하나만 존재할 수 있다. 따라서 모든 요소는 내부에서 기술되어야 한다. (은 예외) 또한 Global Attribute를 지원한다. 가장 많이 사용되는 것에는 lang 정도가 있다. 화면에 표시할 모든 콘텐츠는 이곳에 기술한다. HEAD 태그 head 요소는 metadata를 포함하기 위한 요소로, 웹 페이지에 단 하나만 존재할 수 있다. 화면에 표시되지 않는 meta, title, style, link, script 등을 포함하고 있으며 이 ..

Semantic Tag (시맨틱 태그) 대부분의 인터넷 사용자들이 정보를 취득하기 위해 검색엔진을 사용한다. 현 시대에서 그만큼 검색엔진에 최적화 된 웹 사이트를 만드는 것은 중요하다고 할 수 있다. 검색엔진 최적화(SEO)를 위해서는 검색엔진이 웹사이트 정보를 수집하는 방법에 대해서 이해할 필요가 있는데, 검색엔진은 로봇이라는 프로그램을 이용하여 웹사이트의 HTML 코드를 수집하게 된다. 이 때, 검색엔진은 HTML 코드만으로 그 의미를 인지하여야 하고 HTML 코드 중에서도 의미론적 요소 즉, 시맨틱한 요소(Element)를 해석하게 된다 이 의미론적인 요소를 충족하기 위해서 필요한 것이 바로, 시맨틱 태그이다. 아래의 코드 두 줄을 확인해보자. Hello Hello 이 코드를 실행시킨 결과(화면)를..

HTML5 요약 정보 2014. 10. 28에 확정된 차세대 웹 표준안으로 지금까지 사용중이다 (버전업은 계속 되고 있지만 버전 변경은 되지 않았다. 현재 표준은 하나로 합쳐져서 이쪽에서 확인할 수 있다. 하나로 합쳐지면서 HTML5라는 말보다 HTML이라고 그냥 부르게 된 듯 하다.) 추가된 기능들 (출처 - poimaweb) HTML 기본 문법 Element (요소) 시작 태그와 종료 태그, 그 사이에 위치한 content로 구성된 것. HTML 문서는 Element의 집합으로 이루어진다 Nested Element (요소 중첩) Element 내에 다른 Element를 포함할 수 있고, 이 때부터 부모자식관계가 성립된다 이 관계를 시각적으로 파악하기 쉽도록 들여쓰기(indent)를 활용한다. 안녕하세..

HTML(Hyper Text Markup Language) 이란? 웹 문서를 작성하는 데에 사용하는 언어로서, 프로그래밍 언어(JavaScript, Java, C 등)들과는 다른 것이다 H가 내포한 Hyper Text라는 말에서 알 수 있듯이 다양한 자료들을 참조하고 연결할 수 있는 문서를 작성하는 언어이다. 언어이기는 하나 태그 등을 이용하여 문서와 데이터의 구조 정도만을 명기하고 있기에 일반적인 프로그래밍 언어들과는 구별된다. HTML의 역사 (첫 개발부터 HTML4 까지) 1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고 공유하기 위한 체계였다. (HTML이 개발되기 시작한 이..

우선 이런 글을 쓰게 된 경위(?)에 대해서 말해본다. 나는 흔히 말하는 국비학원 출신의 비전공 개발자 루트를 가진 사람으로써, 코딩의 입문부터 지금까지 막연한 느낌과 구름같은 정보들만 가지고 개발자로서의 커리어를 쌓아왔다. 그렇기 때문에, 무언가 막연한 것이 답답했던 나와 같은 사람이 시행착오를 겪지 않기를 바라는 마음에서 적어본다 사실 나는 아직도 막연한 게 많은데, 그냥 생각을 정리하자는 차원에서 이러한 글을 적는것도 있다 들어가기에 앞서, 이 글이 매우 길어질 것 같음에 독자가 될 여러분에게 주의를 요하는 바이다. 그리고 이 글이 도움이 되거나 수정되어야 할 부분이 있다면(?) 댓글을 반드시 남겨주기를 바란다! 우선, 코딩이라는 것을 처음 접했던 때로 돌아가본다. 사실 처음에는 개발자가 되고 싶다..

1. 논리 연산자(Logical Operator) 두 개 이상의 명제(논리결과)에 대한 비교를 하는 연산자 크게 AND, OR, NOT으로 나뉘며 사용방법은 예제 코드를 통해 알아보자 예제) public class LogicalOperatorApp { public static void main(String[] args) { System.out.println(1 == 1); //AND System.out.println(true && true); // true System.out.println(true && false); // false System.out.println(false && true); // false System.out.println(false && false); // false // OR S..

동등 비교 연산자는 크게 == 과 equals 명령어 두 가지가 있다 어떤 경우에 어떤 연산자를 사용해야 하는지가 다르기 때문에 해당 내용을 꼭 알고 사용해야 한다 1. 원시 데이터 타입(Primitive Data) / 참조 데이터 타입 더 이상 쪼갤 수 없는 데이터 타입을 가리키는 말 Java에서는 boolean, int, byte, short, long, double, float, char이 있다 Boolean : 논리자료형 (True / False) Int(Integer) : 숫자자료형 (정수 - 소수점X) Byte : 숫자자료형 (정수 - 소수점X) Short : 숫자자료형 (정수 - 소수점X) Long : 숫자자료형 (정수 - 소수점X) Double : 숫자자료형 (실수 - 소수점O) Float..