Yoonmin

HTML (Hyper Text Markup Language) HTML 은 프로그래밍 언어가 아닙니다! 컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 요소로 이루어져 있습니다. 일단은 이 두가지만 알고 있어도 충분합니다! 📢Hyper Text 하이퍼 텍스트(Hyper Text) Hyper의 뜻은 '뛰어넘다', '초월하다'의 의미를 가지고 있습니다. Hyper Text라는 글자를 직역하면 'text를 뛰어넘다'의 의미를 가집니다. text를 뒤어 넘는 다라... 이해가 안 되니 추가 설명하도록 하겠습니다. 1. text 란? text는 상대에게 의미를 전달하는 목적으로 많이 사용합니다. (숫자, 알파벳, 기호 등으로 글 혹은 문서를 표현합니다.) 우리가 책을 읽는다 가정해봅시다. 책을 읽으며 왼쪽에..

최근 Javascript, react, typescript에 정신이 팔려서 모든 공부 시간을 투자하고 있었다. 늘 마음 한편에서 기본만 (정말 사용할 정도로) 익히고 넘어간 HTML과 CSS가 마음에 걸렸다. 몇몇 개발자들은 HTML,CSS는 언어로 대우 안 해준다는 여러 여담들도 있다. HTML, CSS는 정말 진입 장벽이 낮다. 쉽게 익혔고 쉽게 사용했다. 그래서 가볍게 여기고 공부했다. HTML, CSS가 있었기에 내가 지금까지 뻗어 나 갈 수 있기도 했다. 눈에 즉각적으로 보이는 요소들은 나의 흥미를 유도했기에, 다음날은 어떤 코드를 짜볼까 어떤 요소를 해결할 수 있을까 두근거렸다. 그렇게 나만의 간단한 포트폴리오 웹을 만들고 나서 자만에 빠져 javascript에 몰두했다. 애플 같은 다른 화려..

Javascript는 객체지향 프로그래밍 언어이다. React를 공부하기 시작하며 Javscript 객체지향에 관한 지식이 부족함을 인지하고 공부한 내용을 기록한다. 해당 글은 기존의 글들과 비슷한 내용을 가진 부분들이 있다. 이 글은 최종 정리본에 가까우니 추가적으로 모르는 글들은 javascript section의 글들을 봐주면 감사하겠다. 😀 ✨JS 객체지향 프로그래밍 정리!(Object Oriented Programming, OOP) ! JavaScript OOP의 특징은 ES6이상의 브라우저에서만 동작하는 게 큰 특징이다. 🔹this var kim = { name:'kim', first:10, second:20, sum:function(){ return this.first+this.second;..

🤔JSX란? 쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것이 바로 JSX다! (JavaScript eXtension) 즉, JavaScript의 확장 버전으로 자바스크립트라고 보면된다. "React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다." [출처]나무위키 즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법이며 리액트 개발에 엄청난 도움을 주고 있다. React.js 는 일반 JavaScript 문법이 아닌 JSX 문법을..

📢 현재 추구하는 목표 현 목표하는 프로젝트는 기도제목 업로드 SNS이다. 기도제목을 업로드하고 인스타그램과 같이 좋아요 기능, 업로드 기능, 프로필 기능을 구현하기 위해 공부를 시작했고, 내가 만들고 싶은 프로젝트가 있고, 이를 웹 앱으로 만들고 싶었던 것이다. 유튜브에서 찾아보니 정말 방대한 양의 데이터가 쏟아져 나왔다. 그중 내가 선택해야 할 개발 언어는 JS(javascript)라는 것을 알게 되었고, react.js나 vue. js 같은 라이브러리를 사용하면 보다 크리에이티브하고 좋은 웹을 만들 수 있다 하기에 바로 공부에 들어갔다. 그전에 가장 중요한 것은 react,vue,angular와 같은 라이브러리의 뿌리인 바닐라 JS를 알고 갔어야 했다. 강의를 선택하는데 처음엔 너무 막막하기만했다...

https://paintbrushweb.y00nmin.repl.co/ Paint JS paintbrushweb.y00nmin.repl.co 노마드 코더 강사분 사이트에 올라온 무료 강의 바닐라 JS로 그림판 만들기 강좌를 수강 완료하였습니다. 한편으로 아쉬웠던 부분은 강의가 빠르게 흘러가서 제가 충분히 이해하고 넘어가는 시간보다는 따라서 치기 급급했던 모습이 아쉬운 점으로 남아있는 것 같습니다.... +) 보완해야 할 점 클론 코딩을 완료했으니 리액트를 고민해보거나 다른 JS요소를 채울 수 있는 강의를 통해 바닐라 JS실력을 높여서 제가 섹션을 구현해보는 걸 목표로 삼아야 하는 게 중요하다 생각합니다.

https://ToDoListWEB.y00nmin.repl.co Yoon To do List web nomadeu-keurom-aeb-mandeulgi.y00nmin.repl.co (상단) 직접 만든 웹 사이트 노마드코더 바닐라JS 크롬 웹 만들기 수강 후기 노마드 코더 선생님의 강의 바닐라 JS로 크롬 웹 만들기 강의를 듣고 웹 TO DO LIT 웹 만들어보았습니다 :) 생활 코딩 바닐라 JS 수업을 듣고 나서 수강하니 수월하게 흘러갔던 것 같은데, 기초지식 없이 무턱대고 시작하면 어려움을 많이 겪을 수 있는 수업이라 생각했습니다...! 기초 지식을 배운 후 배운다면 정말 큰 도움을 주는 수업이지 않았나 싶습니다! CSS관한 내용은 코코아톡? 강의를 통해 알 수 있다했는데, 이미 HTML,CSS는 약간..

표준 내장 객체란? 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다. 내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문이다. 결국 프로그래밍이라는 것은 언어와 호스트 환경에 제공하는 기능들을 통해서 새로운 소프트웨어를 만들어내는 것이기 때문에 내장 객체에 대한 이해는 프로그래밍의 기본이라고 할 수 있다. 자바스크립트는 아래와 같은 내장 객체를 가지고 있다. Object Function Array String Boolean Number Math Date RegExp [Regular Expression(정규표현식)] 따라서 표준 내장 객체와 상응되는 것은 사용자 정의 객체라 볼 수 있다 배열의 확장 첫번째 ..

상속이란? 객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있다. 상속은 객체의 로직을 그대로 물려받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 단순히 물려받는 것이라면 의미가 없을 것이다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해 준다. 쉽게 생각하기 위해 예제를 들어보자 객체는 하나의 컨테이너라 생각해 본다. 그 안에는 변수, 메소드가 포함되어 있다. 이때 객체의 특성을 통해 기존 객체를 물려받은 새로운 객체를 만들 수 있다. 이때 물려 받은 아들 객체(새로운 객체)는 부모 객체(원본 객체)와 동일한 기능을 가지게 된다. 아들 객체(새로운 객체)는 부모 객체(원본 객체)의 특정 기능은 제거, 추가하여 자신의 맥락에 맞게 재활용하게 된다.이러한 과정이 상..

❗CSS(Cascading Style Sheet) 🤔CSS란 무엇일까? HTML markup 내에 있는 정보(타이포그래픽, layout, img 등)의 시각적 요소를 분리하여 관리하기 위해 생긴 언어가 CSS이다! 🤔WEB은 왜 Document(HTML)와 Style(CSS)을 분리해서 관리해야 하나? HTML내에 CSS를 코드를 모두 입력해서 작성하게 된다면 유지보수가 어려우며 코드 가시성이 매우 떨어진다. 이러한 문제점을 해결하기 위해 W3C(World Wide Web Consortium)에서 웹 표준을 지정하였다. 이때, stylesheet전용 언어로 css가 사용되었다. 📝CSS 작성하는 방법 selector{ property: value; } ❗CSS는 크게 선택자와 선언부 2개의 파트로 나뉘어..