반응형

웹 개인공부 10

Vue.js

디렉티브Vue.js는 HTML 표준속성 이외의 독자적으로 정의한 속성을 추가해서이 속성값 표현식의 변화에 따라 DOM을 조작한다.Vue에서 독자적으로 정의한 속성을 디렉티브라고 정의한다.속성은 v- 로 시작한다. 디렉티브 이름v-if지정한 뷰 데이터 값의 참, 거짓 여부에 따라 HTML 태그를 화면에 표시 여부 지정v-for지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력v-show데이터의 진위 여부에 따라 해당 HTML태그를 화면에 표시여부 지정v-bindHTML태그의 기본 속성과 뷰 데이터 속성을 연결v-on화면 요소의 이벤트를 감지하여 처리할 때 사용. 메서드를 불러온다.v-modelform에 입력한 값을 뷰 인스턴스에 데이터와 즉시 동기화 시킬 때 사용, , 태그에서만 사용 이외에도 ..

웹 개인공부 2024.02.29

Spring - 구조

스프링의 구조 각 계층이 양 옆의 계층과 통신하는 구조 *계층 역할과 책임이 있는 소프트웨어의 구성 요소. 각 계층은 서로 소통할 수 있지만 다른 계층에 직접 영향을 미치진 않는다. 프레젠테이션 계층 Controller. HTTP요청을 받고, 이 요청을 비즈니스 계층으로 전송. 비즈니스 계층 Service. 프로세스 구현을 위한 비즈니스 로직을 처리. 퍼시스턴스 계층 Repository. 데이터베이스 관련 로직 처리. DAO객체 사용. 계층 : 개념 컨트롤러, 서비스, 리포지터리 : 실제 구현 스프링 부트의 프로젝트 디렉터리 구조 정해져 있는 구조는 없지만 추천 구조는 있다. 다들 이렇게 주로 하니까 이렇게 하셈. main 실제 코드 작성하는 공간. 소스 코드, 리소스 파일 등 test 소스 코드를 테스..

웹 개인공부 2024.02.29

비동기처리

Promise는 비동기처리를 추상화한 객체이다. 비동기 처리를 조작하는 방법을 제공 상태정보(Promise는 3가지 상태 중 하나의 상태로 존재) FullFilled : 작업이 성공했을때 Rejected : 작업이 실패한 경우, 에러를 반환 Pending : 작업이 아직 진행중인 경우 Promise 생성자 사용법 var promise = new Promise(functino(resolve, rejeect){...}); resolve 함수에 먼저 접근시 --> then reject 함수에 먼저 접근시 --> catch

웹 개인공부 2024.02.27

JavaScript - Symbol타입, 화살표 함수, for of 문, map컬렉션

Symbol 자기 자신을 제외한 그 어떤 값과도 다른, 유일무이한 값 const LINE = Symbol(); const RECTANGLE = Symbol(); LINE !== RECTANGLE 인수로 전달 가능(할당가능) const LINE = Symbol("line"); const RECTANGLE = Symbol("rectangle"); 요렇게 말이죠. 화살표 함수 //화살표 함수 표현식 작성 const f = function(){return "100"}; console.log(f()); const af = () => {return "100"}; console.log(af()); //이렇게도 할 수 있다. 매개변수가 하나 일 때는 괄호 생략 가능하다. 2개 이상일 때는 괄호 생략하면 안된다~ con..

웹 개인공부 2024.02.27

JavaScript - 선언자&에러

var 선언 변수 중복 선언 가능 호이스팅 발생 변수 및 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상 선언문은 끌어올려져서 최상단에 위치해서 작용하는데, 초기화문은 그위치 그대로 남는다. let 선언자 변수의 중복선언 불가 호이스팅 발생하지 않는다.->선언하기전엔 사용불가, 블록안에서 선언한건 외부에서 사용불가 등등.. const선언자 상수를 선언함 상수는 선언과 초기화를 동시에 해야한다. const num; num = 10; 요딴식으로 쓰는거 안됨. const num = 10; 요렇게 하세요. 그리고 상수는 초기값 설정 후 재할당 불가. 값 변경할 수 없다. 당연하죠?

웹 개인공부 2024.02.27

JavaScript - callback, 문서객체모델

let person = { //자바로 따지면 클래스 같은 역할 name: '윤여빈', //필드 같은 역할 eat: function(day, food){ //메소드 같은 역할 console.log(this.name+ '은' + day + '요일에' + food + '먹습니다') } } function food(day){ if(day ==='월'){ return '야채김밥' }else if(day === '화'){ return '참치김밥' } if(day ==='수'){ return '치즈김밥' }else if(day === '목'){ return '땡초김밥' } if(day ==='금'){ return '돈까스김밥' } } person.eat('월',food('월')); 음..... 콜백써서 무언가 만들어..

웹 개인공부 2024.02.23

JavaScript

언어 기본 문법 -자바 스크립트 용어 출력 (표현식, 문장, 키워드, 식별자, 주석) -자료형, 변수 -제어문(조건문, 반복문) ================================= -함수(실행우선순위, 선언, 호출, 매개변수) -객체(속성, 메서드) ================================= 표현식 값을 만들어내는 간단한 코드 문장 프로그래밍 언어에서 실행할 수 있는 코드의 최소 단위 키워드 특별한 의미가 있는 단어 식별자 변수나 함수 등에 이름을 붙일 때 사용하는 단어. 키워드 사용불가. 특수문자는 언더바(_), 달러(&)만 사용가능 공백 입력불가. - 클래스 외 생성자 함수 이름은 대문자로 시작 - 변수, 인스턴스, 함수, 메소드 이름은 소문자로 시작 - 여러 단어로 된 식..

웹 개인공부 2024.02.22

CSS - 레이아웃, 요소배치

레이아웃 정렬 수평정렬 중앙정렬 One True 레이아웃 요소 배치 중앙에 배치 고정 위치에 배치 수평정렬 레이아웃 ○자손에게 float, 부모의 overflow: hidden 걍 공식임 외웟 이런식으로 말이지. 이렇게 적용하면 문서의 레이아웃은 부모 overflow: hidden 을 안하면 이런식으로 말이지. overflow: hidden이 없는 상태면 html 문서의 레이아웃은 이따우로 나온단 말. ○clear: both 이걸로 할 수도 있다. 중앙정렬 레이아웃 ○중앙 정렬할 태그에 width 속성을 부여하고 margin을 '0 auto' 로 입력 이런식으로 말이지. 그러면 html문서의 레이아웃은 이런식으로. ○그리드 시스템 화면을 쪼개서 레이아웃을 구성한다. One True 레이아웃 국내 대부분의..

웹 개인공부 2024.02.22

CSS - 단위, 속성 / MDN 서칭

시작 전에 MDN 사이트를 참조하면 좋다 웹 개발을 위한 문서 저장소로, HTML, CSS, JavaScript 등의 기초나 코드, 상세 필드부터 WebAPI 등 폭넓은 소스를 제공한다. CSS에서 다루는 수많은 속성들도 이곳에서 검색하면 쉽고 빠르게 확인할 수 있다. 예제 코드는 퍼블릭도메인이라 코드들을 그냥 가져다 써도 문제가 없다고 한다. css 의 수많은 코드들을 머릿속에 숙지하고 있으면 그때그때 머릿속의 이미지를 그려나가기 쉽겠지만 그렇진 않다보니 mdn을 잘 활용하는 것도 똑똑한 방법일 것 같다. 글꼴 단위 rem 글꼴의 크기를 지정하는 단위 : 상대 단위. 해상도에 따라 유동적으로 변경 가능하다 px 절대적 단위. 페이지의 크기를 줄이든 키우든 같은 크기를 갖는다. overflow 속성 내용..

웹 개인공부 2024.02.21
반응형