개발/자바스크립트 및 프론트25 HTML 새 창으로 띄우기(환경설정X) onClick="window.open( ..... );" : width, height를 꼭 기입해줘야 창으로 띄워짐 (미 작성 시 새탭으로 띄어짐) 설문조사 2022. 5. 11. CSS 이미지 크기 화면에 맞게 자동 설정 가로/세로 비율을 살리면서 자동 설정 img { max-width: 100%; height: auto; } 2022. 5. 9. VS code에 리액트 설치하기 1. Node JS 설치 (https://nodejs.org/ko/) npm 툴을 사용하기 위해 NodeJS를 일단 다운로드 Create React App을 쉽게 설치하기 위해 npm 다운 2. VS Code 설치(https://code.visualstudio.com/) 3. React에서 사용 할 폴더 생성 Vscode 실행 후 좌측 상단 file - open folder - 선택 후 3번에 React에서 사용할 폴더 선택 4. 하단 터미널 명령어 입력하여 React 다운로드 npx create-react-app blog 4.1 만약 설치 에러 나면 재부팅 후 다시 시도 5. 다운 완료 되면 아래와 같이 blog 폴더가 하나 생성됨 6. VS Code 실행 후 '파일' - '폴더 열기' 에 다운받아진 .. 2022. 4. 4. 단방향 / 양방향 바인딩 양방향바인딩 JS HTML 간의 양방향으로 데이터를 일치시킴 양방향 바인딩의 경우, 사용자의 입력값이 곧바로 코드 상의 변수에 바인딩 단방향바인딩 JS -> HTML 로만 단방향으로 데이터를 일치시킴 단방향 바인딩의 경우, 적절한 Event를 통해서만 코드 상 변수에 데이터 값이 담긴다. 2022. 1. 24. 번들러 (bundler) 번들러 (bundler) 의존성 있는 '모듈 코드/파일' 들을 하나로 묶어서 관리가 가능하다. 추가 개념 1. Babel - Babel은 ES6이상 문법을 ES5문법으로 번역해 준다. 근데 ES5 자체에 존재하는 않는 함수들은 번역 자체가 불가능하니 이걸 메꾸기 위해 polyfill을 사용(Map, Promiss, Set 등을 사용 가능한 객체로 만든다.) 2. polyfill - ES5 자체에 존재하지 않는 함수들, 브라우저에서 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 것이다. - 하위 자바스크립트의 코드를 사용해 최신 기능과 똑같이 구현하는 방식을 뜻한다. Bundler의 장점 1. 여러 이유가 있겠지만, HTTP는 단방향 통신이기에 요청 할 파일이 많으면 계속 요청을 해야하니 번들링.. 2022. 1. 20. div, span 태그 태그 어떠한 의미도 기능도 없지만 div 태그가 들어가면 특정 부분을 CSS / 자바스크립트로 작업하고 싶은 경우 div태그로 감싼 후 사용함, 줄 바꿈 자동 적용 태그 div 와 같은 용도 인데 줄 바꿈 미 적용 2022. 1. 19. CSS 선택자 선택자 2022. 1. 19. HTML 에서 빈도수가 가장 높은 태그 HTML에서는 현재 150개 이상의 태그가 존재 현재 많은 사이트가 총 32개의 HTML 태그로 이루어짐 (22년 1월 16일 기준) 참고 https://www.advancedwebranking.com/seo/html-study/#faq 2022. 1. 16. Dom(Document Object Model), Virtual DOM DOM(Document Object Model)은 HTML, XML문서를 나타내는 실체로 나타내는 API Document = 문서를 뜻함(HTML, XML) Object = 객체 Model = 모델 돔 구조 DOM은 부모 자식 관계 처럼 Tree 구조로 되어있다. 각각의 요소(Element)들을 node라고 표현 한다. 추상 클래스처럼 부모 트리 node로 부터 기능과 속성을 상속 받는다 DOM과 문서객체 DOM은 HTML 요소(Element)들이 모여서 설계된 웹페이지가 브라우저에 의해 해석되고 이벤트에 반응하고 값을 입력받는 등 기능들을 수행할 객체들로 실체화 된 웹페이지가 DOM이라 부른다 문서객체는 브라우저에 의해 해석된 요소(Element)들을 문서객체라 칭한다. ex) , , 등 HTML 태그.. 2021. 12. 29. React, Vue.js, Angular, JQuery, Svelte 자바스크립트를 쉽게 사용할 수 있도록 '도와주는' 라이브러리 자바스크립트는 넷스케이프 개발자가 단 '10일' 만에 만들었기에, 설계도 부족했고 현재 이해하기 힘든 부분이 많다고 함. 이러한 자바스크립트를 좀 더 효율적이게 사용할 수 있도록 도와줌 React 페이스북이 지원 리액트의 핵심 개념은 상태가 바뀌었을 때, 상태에 따라 DOM을 어떻게 업데이트 할 규칙을 정하는게 아니라, 싹다 날리고 새로운 걸 보여주는 개념 (Vue, Angular와 다른 개념) 다 날리고 새로운 것을 만들면 속도가 너무 느릴텐데, Virtual Dom을 사용해서 이를 가능케 했음. * Virtual dom 설명 : https://dlckdgml.tistory.com/28 웹 뿐만 아니라 앱 개발에서도 사용 (=React Nat.. 2021. 12. 29. 이전 1 2 다음 반응형
