Web15 자바스크립트 개념정리 개요 자바스크립트는 프로토타입 기반의 스크립트 프로그래밍 언어로 객체지향 개념을 지원하며 대부분의 javaScipt Engine은 ECMAScript 표준을 지원한다. 특징 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍언어 컴파일 작업을 수행하지 않는 인터프리터 언어 인터프리터와 컴파일러의 장점을 결합하여 비교적 처리속도가 느린 인터프리터의 단점을 해결 사용법 사용방법으로는 HTML에서 JavaScript를 사용하려면 script 테그 사용 테그를 사용하는 방법으로는 html문서안에 포함시키는 방법과 따로 자바스크립트파일을 만들어 연결하는 방법이 있습니다. 테그위치를 고려해야하는이유 헤드테그안에 위치한 자바스크립트는 브라우저의 각종 입출력발생 이전에 초기화되므로 브라우저가 먼저.. 2022. 6. 8. Vue cli eslint+prettier 탭이나 간격 오류 발생시 위 사진 처럼 prettier + eslint 사용시 텝이 잡혀있지 않지만 오류가 굉장히 많이 발생하는데 설정으로 tabWidth 80이나 tabsize 2로 설정해도 오류가 발생됩니다. 이런상태에서 아래 코드를 eslint설정 파일에 rull 아래 객체로 넣어주면 오류가 해결됩니다. 굉장히 많은 사람들의 해결법을 봤지만 이처럼 해결되는것 못봐서 글 작성 해봅니다 ㅜㅜ.. "prettier/prettier": [ "error", { singleQuote: false, semi: true, tabWidth: 2, trailingComma: "all", printWidth: 80, bracketSpacing: true, arrowParens: "always", endOfLine: "auto", useTabs.. 2022. 5. 17. Vue computed속성 vs watch속성 Vue computed속성 vs watch속성 computed속성 특정 데이터의 변경사항을 실시간으로 처리 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환 setter와 getter를 직접 지정할 수 있음 작성은 method 형태로 작성하지만 Vue에서 proxy처리하여 property처럼 사용 Vue watch Vue Instance의 특정 property가 변경될 때 실행할 콜백 함수 설정 computed는 종속된 데이터가 변경되었을 경우 그 데이터를 다시 계산하여 캐싱한다. watch의 경우 data가 변경되었을 경우 다른 data를 변경하는 작업을 한다. 2022. 5. 16. Vue 디렉티브 Vue 디렉티브 디렉티브는 v-접두사가 있는 특수 속성 디렉티브 속성 값은 단일 javaScript표현식이 된다 디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용 v-once 데이터 변경 시 업데이트 되지 않은 일회성 보간을 수행 ex) 다시는 변경되지 않음{{msg}} v-text innerText 속성에 연결 태그 문자열을 html 인코딩하여 나타내기 떄문에 화면에는 태그 문자열이 그대로 나타남 v-html 이중 중괄호는 html이 아닌 일반 텍스트로 데이터를 해석 실제 html 출력하려면 v-html 디렉티브를 사용 XSS 공격에 취약하여 꼭 필요한 경우가 아니라면 v-text를 사용 추천 ex 데이터안 html태그 자동으로 변환 v-model 양방향 바인딩 처리를.. 2022. 5. 16. Vue Life Cycle 간단정리 Vue Life Cycle 라이프 사이클은 크게 나누면 생성, 부착, 갱신, 소멸의 4단계로 이루어짐 life cycle 속성 1. beforeCreate Vue Instance가 생성되고 각 정보의 설정 전에 호출 DOM과 같은 화면요소에 접근 불가 2. Created Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출 Instance가 화면에 부착하기 전이기 때문에 template 속성에 정의된 DOM요소는 접근 불가. 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다(게시판 글목록 페이지 접근시 글정보) 3.beforeMount 마운트가 시작되기 전에 호출 4.mounted 지정된 element에 Vue Instance 데이터가 마운트 된 후에 호출 template 속성에 정.. 2022. 5. 16. Vue instance 속성 간단정리 Vue instance 속성 el Vue가 적용될 요소 지정. data Vue에서 사용되는 정보 저장. 객체 또는 함수 형태 template 화면에 표시할 html,css등 마크업 요소를 정의하는 속성 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다. methods 화면 로직 제어와 관계된 method를 정의하는 속성 마우스 클릭이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가 created 뷰 인스턴스가 생성되자 마자 실행할 로직을 정의 2022. 5. 16. 스프링에서 JSP 사용 시 의존성 추가 SPA나 vue 같은 프론트엔드 프레임워크에 대해 공부가 부족해서 스프링에서 Jsp를 사용하려고 보니 기본적으로 지원을 하지 않았다. 이 부분을 pom.xml에 추가해야만 가능하더라 javax.servlet jstl org.apache.tomcat.embed tomcat-embed-jasper 이렇게 의존성 추가하고 src/main/webapp/WEB-INF/views 2022. 5. 2. Spring MVC 패턴 실행 순서 간단정리 Spring MVC 실행 순서 1. DispatcherServlet이 요청을 수신 2. DispatcherServlet은 Handler Mappin에 어느 Controller를 사용할 것인지 확인 3. DispatcherServlet은 요청을 해당 Controller에 전송하고 서비스 요청의 처리결과를 리턴받음 4. ModelAndView Object에 수행결과가 포함되어 DispatcherServlet에 리턴 5. ModelAndView는 실제 JSP정보를 갖고있지 않으며 ViewResolver가 논리적 이름을 실제 JSP이름으로 변환(postfix prefis) 6. View는 결과정보를 사용에 화면 표현 2022. 5. 2. 스프링의 삼각형 IoC/DI ,AOP,PSA,POJO 간단 개념정리 1. POJO Plain Old Java Object POJO 특정 환경이나 기술에 종속적이지 않은 객체지향 원리에 충실한 자바객체 테스트하기 용이하며 객체지향 설계를 자유롭게 적용할 수 있다. 특정 프레임워크나 기술에 의존적이지 않은 자바 객체 특정 기술에 종속적이지 않기 때문에 생상성, 이식성 향상 Plain -> component interface를 상속받지 않는 특징 ex) 서블릿+JSP 웹에서 컨트롤러를 하나 만들다라고 가정했을때 request나 response를 사용하기 위해서는 HttpServlet과 같은 부모로 부터 상속을 받아야 사용가능해서 특정 기술에 종속적이게 됨 Old -> EJB 이전의 java class를 의미 2. PSA Portable Service Abstraction 환경.. 2022. 5. 2. 스프링의 삼각형 첫 번째 POJO - Plain Old Java Object 개념정리 Servlet과 Jsp 공부하면서 다들 Spring을 사용한다고 하길레 뭐 때문일까 생각했다. 요즘 Spring으로 웹을 만들면서 엄청 편하다라고 느끼는 중인데 스프링의 삼각형 중 하나인 POJO 부분을 간단히 정리해보려고 한다. POJO 1. POJO - Plain Old Java Object POJO 특정 환경이나 기술에 종속적이지 않은 객체지향 원리에 충실한 자바객체 테스트하기 용이하며 객체지향 설계를 자유롭게 적용할 수 있다. 특정 프레임워크나 기술에 의존적이지 않은 자바 객체 특정 기술에 종속적이지 않기 때문에 생상성, 이식성 향상 Plain -> component interface를 상속받지 않는 특징 ex) 서블릿+JSP 웹에서 컨트롤러를 하나 만들다라고 가정했을때 request나 respo.. 2022. 5. 1. html css js jQuery 시험정리 MVC 모델 뷰 컨트롤 html css js FORM과 이벤트 사용자에게 입력받을 항목을 정의 폼테그 내부에 여러 개의 컨트롤요소를 포함 서버에 전송하기위해서는 폼테그 하위에 위치해야함 필드셋으로 하나로 묶음 레이블을 통해 문자열 연결 for -> id placeholder 회색으로 표시 value 값으로 표시 search 검색상자는 x표시가 있어 지우기 용이 라디오버튼은 name 속성이 모두 같아야함 속성이 같은 것중 하나 선택 체크박스는 name과 상관없이 다중 선택이 가능 셀렉트 옵션 드롭다운으로 표시 value값은 각 항목 값을 지정하기 위해 사용 optgroup를 사용해 레이블 가능 데이타리스트 인풋과 함께 쓰임 설명이 같이 표시가능함 여러줄입력할수있는 box textarea disabled 지.. 2022. 4. 7. MVC Model1 vs Model2 차이 간단 정리 모델 1 모델 2 차이 로직처리와 뷰에 대한 처리 모두 수행하느냐 안하느냐 Model1 JSP페이지 하나에 view와 logic을 처리하는 구조를 말한다 장점 구조가 단순하며 직관적이기 때문에 배우기 쉽다 개발시간이 비교적 짧기 떄문에 개발비용이 감소 단점 디자이너와 개발자가 협업하는 느낌 확장성이 나쁘다 프로젝트 규모가 커지게 되면 코드가 복잡해지므로 유지보수가 힘들어짐 Model2 MVC 패턴을 웹개발에 도입한 구조이며 완전히 같은 형태를 보인다 Dao or JavaBeans 모델 JSP 뷰 Servlet 컨트롤러 장점 확장성이 뛰어남 기능에 따라 코드가 분리 되었기떄문에 유지보수가 쉬워짐 출력을위한 view 코드와 로직처리를 위한 코드가 분리되었기떄문에 JSP는 모델1에 비해 코드가 복잡하지 않다... 2022. 4. 7. 이전 1 2 다음
