분류 전체보기101 [모던 딥다이브] 자바스크립트 2장 자바스크립트란? 2.1 자바스크립트의 탄생 1995년 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정했다. 이로 인해 탄생한 것이 브렌덴 아이크가 개발한 자바스크립트이다. 자바스크립트는 웹 브라우저인 넷스케이프 내비게이터2에 탑재되었고, 모카로 명명되었다. 그해에 라이브스크립트로 이름이 바뀌었었다가 그해 12월 자바스크립트라는 이름으로 최종 명명되었다. 자바스크립트가 탄생한 뒤 얼마 지나지 않아 자바스크립트 파생 버전인 JScript가 출시되어 자바스크립트는 위기를 맞는다. 2.2 자바스크립트의 표준화 1996년 마이크로소프트는 자바스크립트의 파생 버전인 “JScript”를 인터넷 익스프롤러3.0에 탑재했다. 하지만 JScript와 자바스크.. JavaScript/모던 자바스크립트 딥다이브 - 스터디 2022. 10. 22. [모던 딥다이브] 자바스크립트 1장 프로그래밍 1.1 프로그래밍이란? 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션 프로그래밍에 앞서 해결해야 할 요구사항을 명확히 이해한 후 적절한 해결 방안을 정의해야 한다. 이때, 요구되는 것이 문제 해결 능력이다. 대부분의 문제는 복잡하며 명확하지 않을 수 있기에 명확히 이해하는 것이 우선되어야 하며 복잡함을 단순하게 분해하고 자료를 정리하고 구분해야 하며 순서에 맞게 행위를 배열해야한다. 즉, 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이다. 해결 방안을 고려할 때, 컴퓨터의 입장에서 문제를 바라봐야 하는데, 이것을 컴퓨팅 사고이다. 컴퓨터는 상대적인 개념으로는 기준의 불명확하기 때문에, 좋다 등의 개념이 아닌, “현재의 높이보다 1px크게 조정하라, 50px로 조정하라” 등과 같.. JavaScript/모던 자바스크립트 딥다이브 - 스터디 2022. 10. 22. input form reset function 보호되어 있는 글 입니다. 2022. 10. 17. <section>과 <article>의 구분 일반적으로 연관성 있는 문서의 구획을 나누고자 할 때 사용한다. 독립적으로 구분하거나 재사용할 수 있는 구획을 나타낸다. 어떤 페이지에 붙여도 독립적으로 사용 가능하다면 article 요소를 고려해 볼 것 vs 오늘 수업에서 가장 충격적인 소식. 그동안 section을 나눌 때 div에 id 또는 class를 줬었는데 section, article, header, nav 모두 div로 대체할 수 없을 때 최후의 수단 으로 사용하는 것이었다. 앞으로는 section, article을 잘 구분해서 사용해야겠다. ✏️ section vs article section : 사이트 내 연관 콘텐츠 article : 독립적 콘텐츠 nav(네비게이션, 탐색)는 보통 메뉴에 사용된다. 네이버 다음 구글 보통 사이드바 혹.. HTML 2022. 10. 11. display - flex영역 display display 속성으로 Flex Container를 정의합니다. 보통 요소의 표시 방법을 display: block;, display: inline-block 혹은 display: none; 같이 사용하는 경우가 많죠. 같은 요소의 표시 방법으로 Block이나 Inline이 아닌 Flex(display: flex, display: inline-flex)로 정의합니다. 값의미기본값 flex Block 특성의 Flex Container를 정의 inline-flex Inline 특성의 Flex Container를 정의 flex와 inline-flex는 차이는 단순합니다. display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며, displ.. STYLESHEET/SCSS 2022. 10. 7. 세션과 쿠키의 차이점 세션과 쿠키의 차이점 쿠키 쿠키는 클라이언트에서 관리하는 기록정보 파일이다. 특정날짜에 만료되도록 유효기간을 설정하거나, 특정 도미엔, 경로에 제한되도록 설정할 수 있다.(특정 도메인에서만 쿠키를 제공하도록) 쿠키의 사용 쇼핑몰 장바구니, 자동로그인 등이 있음 세션 서버에서 클라이언트 상태정보를 저장하는 노리적 연결을 세션이라고 한다. 웹 서버에 정보를 저장하고 이를 구분할 수 있는 세션 아이디를 부여한다. 사용자의 정보를 서버에 저장하기 때문에, 쿠키보다는 보안이 좋지만, 유저가 늘어날수록, 서버 메모리 할당이 많아진다. 동접속자가 많은 사이트의 경우 서버에 무리를 줘 성능 저하의 요인이 된다. 세션의 사용 로그인 같이 보안상 중요한 작업을 수행할 때 사용 쿠키 VS 세션 구분 쿠키 세션 저장위치 브라.. 면접&취준 2022. 9. 19. 리그오브레전드(반응형X) 2022.7.7~7.15 / 2022.7.29~8.29 (총 21일) 리그오브레전드 주소https://jiwonch.github.io/leagueOfLegends_pf/ League of Legends jiwonch.github.io WireFrame Main - 게임소개Sub1 - 챔피언Sub2 - 유니버스Sub3 - 게임 시작Sub4 - 유니버스 소개 최적화 사이즈1500px * 900px 이상 문서 Portfolio/web 2022. 8. 14. count countUp / countDown See the Pen Untitled by JIWON CHOI (@jiwonch) on CodePen. JavaScript/vue 2022. 8. 9. Vue instance 생성 뷰 인스턴스 생성 뷰 인스턴스 new Vue(); var vm = new Vue(); console.log(vm); new Vue({ el: , //인스턴스 들어가는 곳 template: , // 화면에 표시할 요소(HTML, CSS) data: , // 뷰의 반응성이 반영된 데이터 속성 methods: , // 화면의 동작과 이벤트 로직을 제어하는 메서드 created: , // 뷰의 라이프 사이클과 관련된 속성 watch: , // data에서 정의한 속성이 변화했을 떄 추가 동작을 수행할 수 있게 정의하는 속성 }); Jiwon's develop moment JavaScript/vue 2022. 8. 9. Vue.js CDN / 설치(추후 추가) Vue.js https://kr.vuejs.org/v2/guide/installation.html 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org CDN 프로토 타이핑또는 학습 목적이라면, 아래 코드로 최신 버전을 사용할 수 있습니다. 프로덕션 환경인 경우 새 버전에서 예상치 못한 오류를 방지하려면 특정 버전의 빌드 파일을 추가하는것을 추천합니다. 기본 ES 모듈을 사용하는 경우 이를 지원 하는 ES 모듈 호환 빌드 파일도 있습니다. 다양한 데이터의 출력 {{ myText }} 숫자 {{ myNumber }} 부울형 {{ myBool }} 배열 {{myArray }} 오브젝트 {{ myObject }} {{ $data }} 위의 코드와 같이 안에 넣어준.. JavaScript/vue 2022. 8. 9. Vue.js Vue.js MVVM패턴의 뷰 모델 레이어에 해당하는 화면단 라이브러리 양방향 라이브러리 데이터 변화를 라이브러리에서 감지해서 화면에 그려줌 --> 반응형 지원 *MVVM - 모델, 뷰, 뷰모델로 이루어진 패펀 *MVC 모델, 뷰, 컨트롤러로 이루어진 패턴 *MVVM MVVM은 뷰모델을 지원하므로 뷰가 필요한 데이터와 커맨드 제공 컴포넌트(블럭 같은 것) 간의 통신이 Vue, Angular는 양방향, React는 단방향 - 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API를 지원하는데에 궁극적인 목적이 있음 - Angular에서 지원하는 양방향 데이터 바인딩을 동일하게 제공 - 다른 프레임워크와 비교했을 때 상대적으로 가볍고 빠름 - 문법이 단순하고 간결하여 초기 학습 비용이 낮고 누구.. JavaScript/vue 2022. 8. 9. MySQL 설치 MySQL 설치 방법 MySQL 설치 윈도우 설치 파일 중 용량이 큰 파일을 다운로드한다. 위에서 다운로드 버튼을 클릭하게 되면 이런 창으로 넘어가는데, No thanks, just start my download. 클릭하면 다운로드가 시작된다. 이 다음 창에서는 develop default 선택하고 넘어간다. Execute를 누르고 기다린다. 동의함을 체크해 준 후 설치 버튼을 클릭한다. 이후 C++ 설치가 완료 되면 Execute 버튼을 클릭한다. 필수조건이 모두 체크가 완료되면 Next 버튼을 클릭해서 남아있는 필요한 조건을 설치한다. 하나 또는 그 이상의 필수요건을 설치하거나 업데이트 할 것인지를 묻는데 Yes 버튼을 클릭하면 필요한 조건들이 모두 설치된다. execute 버튼을 클릭해서 프로그램.. 데이터베이스/SQL 2022. 8. 9. 이전 1 2 3 4 5 6 7 ··· 9 다음