코딩 기록들

- Node(Element)를 간편하게 컨트롤하기 위한 라이브러리 (즉, 이벤트를 관리하기 위함) jQuery는 아래작업들을 편하게 만들어준다 HTML 문서에서 Element 찾기 HTML Content 변경하기 사용자의 Action 에 반응하기 ex)마우스, 키보드 웹 페이지의 내용을 애니메이션 하기 -> 애니메이션은 css가 더 효율적 네트워크에서 새로운 컨텐츠 받아오기 jQuery로 처리할 수 있는 Element들의기능들 - css, event, animation, create, modify, delete 등을 처리 Network - 비동기통신을 간편하게 처리함 - HTML문서는 DOM(Document Object Model = 노드들의 집합)의 집합 - 모든 브라우저에서 자바스크립트가 동일하게 보..

MVC Pattern 을 통해 요청과 응답에 대한 전반적인 처리를 지원 M: Model -애플리케이션의 정보 (데이터) V: View - 사용자에게 제공할 화면 (Presentation Logic) C: Controller - Model과 View 사이의 상호 작용을 관리 + 기존 Servlet의 역할을 수행 - 소프트웨어 공학에서 사용되는 아키텍처 패턴 - mvc 패턴의 주 목적: Business Logic과 Presentation Logic을 분리하기 위함 → 업무 처리 로직과 화면 로직이 분리되면서 협업의 효율성이 증가( model2방식 ) 스프링은 MVC패턴을 어떻게 제공하고 있나? MVC 동작방식 - (web browser을 제외한)색이 없는 박스 : 스프링 내부의 요소 - 노랑박스 : 우리가 ..

스프링Spring 프레임워크 - 엔터프라이즈 개발을 편하게해주는 오픈소스 경량급(?) 애플리케이션 프레임워크 애플리케이션 프레임워크 - 특정 계층이나 기술, 업무 분야에 국한되지 않고, 애플리케이션의 전 영역을 포괄하는 범용적인 프레임워크 경량급 프레임워크 - Spring이 제공하는 다양한 기능들을 Module로 쪼개어 놓음 - 필요한 Module만 Load해 개발할 수 있으므로 단순한 웹 컨테이너에서(ex.톰캣)도 엔터프라이즈의 고급기술을 대부분 사용 가능 엔터프라이즈 개발 용이 - 개발자는 설정에 관여하지 않고 Biz Logic 개발에 전념할 수 있도록 해준다. - 설정은 Spring Framework에서 대부분 처리. 오픈소스 - Open Source의 장점(빠른 지원, 빠른 버그픽스 등)을 충분히..

함수 일반 함수 - 반환타입이 없음(꼭 반환타입을 줘야하는게 아님) - 반환을 시킨다면 : 반환함수, 반환을안시키면 일반함수 함수의 사용 예 function sayHello() { console.log(“안녕하세요?”); } sayHello(); 작업단위를 정하고, 일부를 분리시켜 관리함 (특히, 반복적으로 사용될 수 있다면 더욱 분리시킬 필요가 있다.) function calcAndPrintNumbers() { console.log( “ 안녕하세요? “ ); console.log( “ 간단한 계산기 입니다. “ ); console.log( “ 이제 숫자를 더해 보겠습니다! “ ); var numberOne = 10; var numberTwo = 20; var result = numberOne + num..

JavaScript? Browser (Client) 에서 동작하는 Client-Side Language 이벤트 기반의 동작 언어 웹 페이지에서 없어서는 안될 언어 페이지가 하나밖에 존재하지 않는 SPA(Single Page Application)를 만들때도 Javascript는 필수(리액트, 뷰, 앰뷸러 ..) 현재는 Server-Side 에서도 Javascript가 사용됨(MongoDB, Node.js) JavaScript는 Compile언어가 아니다. Interpreter언어임(=html, css등과 마찬가지) -> 컴파일을 하지 않고, 타입이 없음 ECMA Script 5 가 현재까지 가장 많이 쓰이는 언어(표준을 의미함) 변수의 선언방법 - var 키워드 사용 - 세미클론으로 끝냄 var 변수명 ..

기기 / 브라우저별로 세팅해놓은 값들 Size & Unit 엘리먼트에 사용할 수 있는 단위들 position에 fixed가 할당되면 부모는 바로 viewport가 된다!! min-width | max-width & min-height | max-height - 최대 / 최소 사이즈를 지정할 수 있다 - element에 min/max width/height를 지정하면 -> viewport가 줄어들거나, 부모 element의 크기가 줄어들때 최대/최소 크기는 항상 유지된다 em / rem - font-size를 %로 지정하거나 em, rem 등으로 지정할 경우, 브라우저의 기본 텍스트 크기를 기준으로 계산하게 됨 (font-size, width, height, padding, margin 등은 브라우저 사용..

Grid 레이아웃을 만드는 property - Flex는 1차원 레이아웃 (가로 아니면 세로) - Grid는 2차원 레이아웃 (가로와 세로) - Flex 보다 복잡한 레이아웃을 간편하게 만들 수 있다. 그리드 형태 정의1 (pixel) .container { display: grid; grid-template-columns: 200px 200px 500px; grid-template-rows: 200px 200px 500px; } 그리드 형태 정의2 (비율, fraction) .container { height: 500px; display: grid; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 1fr 1fr 2fr; } 그리드형태 정의3(pixel..

용어정리 TAG : HTML에 작성하는 TAG ELEMENT : 브라우저에 보이는 요소(쓸때는 TAG, 브라우저에 보일땐 ELEMENT라고 부름) -> 브라우저에서 TAG를 분석하고 브라우저에 노출시키는 요소 DOM : ELEMENT의 집합 DOM, ELEMENT : 브라우저가 직접 관리함 TAG: 우리가 직접 사용하는것 !important - Cascading & Specificity 를 모두 무시하고 스타일을 덮어씀 - 다른 모든 선언보다 우선됨 https://developer.mozilla.org/ko/docs/Web/CSS/Specificity#!important_%EC%98%88%EC%99%B8 - 사용가능한 경우 : 명시도가 적용된 Style을 별도의 스타일로 표현할 수 없을 때 덮어쓸 용도로..