본문 바로가기

전체 글

React ? 웹의 발전 1세대 웹 HTML을 중심으로 한 정적인 화면을 구현하는 데 그쳐 있었다 야후가 대표적인 사이트이며 온라인 방명록 같은 게 있을 수 있다 2세대 웹 웹 1.0(1세대)는 인터넷을 통해 일방적인 정보를 보여주었다면, 웹 2.0(2세대)는 사용자가 직접 콘텐츠를 생산하여 쌍방향으로 소통할 수 있다. 게시판, 댓글, 블로그, UCC, 지식백과 등이 있다 3세대 웹 우리가 HTML을 배울 때 먼저 듣게 되는 말인 시멘틱 웹 기술을 사용하고 내용을 이해하며 맞춤형 정보를 제공하는 지능형 웹 기술을 도입한 게 3세대 웹이다 읽기 쓰기를 넘은 소유라는 개념이 생기기 시작하였고 데이터를 동적으로 처리하고 사이트를 다이내믹하게 구성하는 요소들이 많이 생겨나면서 나오기 시작한 프레임워크와 라이브러리 중 하나가 .. 더보기
인스타그램 클론코딩 로그인 페이지 부트캠프 수강 중 진행한 인스타그램 클론 코딩을 다시 봅니다 완성 여기서는 로그인 버튼 활성화와 비활성화, 그리고 아이디 유효성 검사를 하였습니다 const idInput = document.querySelector('.inputId'); const passwordInput = document.querySelector('.inputPassword'); const disabledButton = document.querySelector('.mainBtn'); 먼저 각각 ID input, Password input button에 변수를 담아줬습니다 ID input idInput.addEventListener('input', () => { if ((idInput.value !== "") && (idInput.v.. 더보기
Git Git은? 많은 형상 관리 도구(Configuration Management Tool) 중 하나입니다. Git의 장점 1. 여러 명이 동시에 작업하는 병렬 개발이 가능합니다 2. Git을 통해 버전 관리를 하면 체계적인 개발이 가능해지고, 프로그램이나 패치를 배포하는 과정이 간단해집니다 (pull을 통한 업데이트, patch 파일 배포) 3. 많이 사용하는 대중성이 있습니다 프로젝트를 진행하면서 소스코드를 USB나 메일로 주고받는 건 낭비와 동시에 보안상 위험한 작업입니다 그렇기 때문에 형상 관리 도구(Git)를 사용하며 또 형상 관리 도구(Git)을 사용하면 작업물의 변경을 쉽게 돌릴 수 도 있습니다 git 웹 호스팅 시스템 협업하고 있는 코드를 저장할 서버가 필요합니다 push, pull reques.. 더보기
[JS] createElement(), appedChild(), innerHTML() createElement() JS에는 createElement()라는 게 있습니다 HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. MDN 정의이고 간단하게 알아보겠습니다 let element = document.createElement('p'); "문서에 p태그를 추가하겠다" 입니다 function test() { let p = document.createElement('p'); console.log(p); } test(); 함수에 먼저 담아 test 해보겠습니다 콘솔에 잘 들어와 있는 걸 확인할 수 있습니다 아무런 위치도 정해 주지 않고 요소를 생성만 했기 때문에 이걸 사용하려면 appedChild()가 필요합니다 ap.. 더보기
[JS] function(함수)문제 데이터 반환하기 문제) getTotal 함수는 가격을 2개 받아서 calculateTotal 호출 반환 값을 더해서 리턴하는 함수입니다. getTotal이라는 이름의 함수를 만들어주세요. 가격정보 2개를 인자로 받습니다. 인자 이름은 원하는 대로 지어주셔도 됩니다. getTotal 함수에서 인자로 받은 가격으로 각각 calculateTotal 함수를 호출해주세요. 그리고 그 결괏값을 더해서 반환해주세요. 참고사항 getTax 함수는 가격의 tax를 구하는 함수입니다. calculateTotal 함수는 상품의 가격에 tax를 더한 값을 구하는 함수입니다. getTotal 함수는 두 상품의 가격을 더해서 반환하는 함수입니다 function getTax(price) { return price * 0.1; } function .. 더보기
OS(operating system) 운영체제를 알고 계신가요? 난 아니에요 운영체제(operating system) 사용자에게 편리한 인터페이스 환경을 제공하고 컴퓨터 시스템의 자원을 효율적으로 관리하는 소프트웨어 흔히 아는 컴퓨터 전원을 켜면 바로 나오는 소프트웨어를 말합니다 대표적인 것들은 Window, Mac OS, Linux, Unix 모바일은 IOS, Android가 있습니다 운영체제(OS)의 역할 사용자와 컴퓨터 사이 예를 들어 사람은 컴퓨터의 언어를 할 수 없습니다, 반대로 컴퓨터도 사람의 언어를 할 수 없습니다 사람(사용자)과 컴퓨터 사이를 소통할 수 있게 해주는 중재자 역할을 하는 것도 운영체제의 역할 중 하나입니다 컴퓨터 하드웨어의 효율적인 관리 정확히는 컴퓨터의 시스템 자원 관리라고 생각하면 됩니다 흔히 말하는 컴퓨터 시스템 자원은 하드웨어라 이.. 더보기
[JS] javascript DOM이란? DOM이란 문서 객체 모델(The Document Object Model, 이하 DOM) 프로그래밍 인터페이스이다 자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다 - 자바스크립트는 새로운 HTML 요소나 속성을 추가 - 자바스크립트는 존재하는 HTML 요소나 속성을 제거 - 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경 - 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경 - 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경 - 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가 - 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응 우리가 보고 있는 웹페이지는 일종의 문서(document)이다 DOM 은 프로그래밍 언어는 아니지만 DO.. 더보기
[JS] javascript 자바스크립트 버튼 클릭 시 페이지 이동 window.location.href = "경로" addEventListener 사용 시 ex) loginButton.addEventListener('click', () => { window.location.href = "경로" }) 더보기

티스토리툴바