Daisy's IT Blog

1. JavaScript 1) parcel parcel 파일명 2) forEach - forEach 메서드는 배열의 각 요소마다 한 번씩 함수를 호출. See the Pen forEach by Sujin Lee (@sujinlee_910616) on CodePen. 2. Bootstrap 1) alert-danger - alert 새 창이 아니라 기존 창에 뜨는 UI. 3. .기타 - .gitignore 파일의 위치: .git 폴더와 동일한 위치에!

jQuery와 JavaScript를 이용해서 클래스를 제어하는 방법을 비교해보자. 1. 클래스 추가 $('#element').addClass('class1'); // 1개 추가 $('#element').addClass('class1 class2'); // 여러개 추가 2. 클래스 제거 $('#element').removeClass('class1'); // 1개 제거 $('#element').removeClass('class1 class2'); // 여러개 제거 3. 클래스 교체: 기존 클래스 제거 후 새로운 클래스 추가 $().switchClass('oldClass', 'newClass'); $('#element').removeClass('oldClass').add('newClass') 4. 클래스 새로..

1. Vanilla JavaScript 1) form 관련 이벤트 (1) submit: form의 정보를 서버로 전송하는 submit 시에 발생 (2) change: 폼 컨트롤의 값이 변경되었을 때 발생 (3) focus: 엘리먼트에 포커스가 생겼을 때 발생 (4) blur: 엘리먼트에 포커스가 사라졌을 때 발생 2) DOM 이벤트 https://www.w3schools.com/jsref/dom_obj_event.asp 3) blur vs focusout - blur : 해당 엘리먼트에 포커스가 해제되었을 때 발생. 버블링(X) focusout : 해당 엘리먼트에 포커스가 해제되었을 때 발생. 버블링 (O) - focusout과 blur 모두 엘리먼트에 포커스가 해제될 때 발생하는 이벤트인데, 둘의 차이..

1. gh pages - github.io 페이지를 이렇게 build 할 수 있구나 - deploy: build 폴더를 업로드 - npm run build하면 build 폴더를 얻는다 - deploy를 호출하면, predeploy가 deploy보다 먼저 자동적으로 실행된다. - npm run build npm run deploy 2. [JS] 33 Concepts of JavaScript - 개념 다시 다지고 있음. - JS는 형변환이 참... 헷갈리기 쉬운 것 같다. 실수하기 쉬울듯. - 블로그에 정리해야겠다.

1. [React] - 트랜스파일러 (혹은 트랜스포머 라고 불리기도) : 리액트 코드를 자바스크립트 코드로 바꿔주는 툴. Ex) 웹팩 - props : props를 통해 데이터를 전달. : 부모 컴포넌트가 자식 컴포넌트에게 주는 값. react는 props를 가져간다. : 자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수는 없다. - propTypes : 타입 체크할 때 사용. 내가 지정한 타입이 아닌 다른 타입의 prop이 들어오면 콘솔에 경고문 떠서 알 수 있다. - 람다식 => - 여러 컴포넌트들: https://reactjs.org/docs/react-component.html 2. 기타 - React로 영화 앱을 만들고 있다. - 지금 절반쯤 한 것 같은데....

로컬 저장소와 원격 저장소를 연결하는 데는 아래와 같은 두 가지 방법이 있다. 1. Github에 원격저장소를 만든 후, 로컬(내 컴퓨터)에 원격저장소를 복제(clone)하는 방법 - 1) 새로운 저장소를 생성하거나, 또는 2) 원격저장소에 이미 많은 작업이 이루어졌고 내 로컬에는 작업이 없는 경우에 적합하다. 2. 로컬(내 컴퓨터)에서 git을 시작하겠다고 선언한 다음 원격저장소를 연결하는 방법 - 1) 새로운 저장소를 생성하거나, 또는 2) 내 로컬에 이미 많은 작업이 이루어졌고 이 작업들을 새로운 원격저장소를 만들어서 올려야 할 경우에 적합하다. 나는 거의 항상 1번 방법을 사용했는데, 하루는 어쩌다보니 원격저장소를 새로 만들고 로컬에 clone 하지 않은 상태에서 이미 로컬에 작업을 잔뜩 해버렸다..

1. [JS] 1) 템플릿 리터럴 : https://flik.tistory.com/53 - `(backtick) 을 사용해서 문자열을 표현한 것. - (1) 줄바꿈을 쉽게 할 수 있고 (2) 문자열 내부에 표현식을 포함할 수 있게 된다. - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 2) createElement(), createTextNode(), appendChild() - createElement() : 요소(element)를 만든다. - createTextNode() : 선택한 element에 text 추가 - appendChild() : 선택한 element에 자식 element 추가 ht..

1. [js] 1) var, let, const 차이 - var : 예전부터 있던 변수. 같은 이름의 변수를 여러번 선언해도 에러가 안 남. function scope - let, const : ES6 이후부터 나온 변수 선언 방식. var와 달리 같은 이름의 변수 재선언 불가. block scope. - let : 변수 재선언 불가, 변수에 재할당 가능. - const : 변수 재선언 불가, 변수 재할당 불가. 2) - setInterval(함수명, 함수실행시간) (시간단위: ms) - localStorage.setItem(key, value) - Math.floor(Math.random()*(n+1)) : 0~n까지의 난수 생성 ex) Math.floor(Math.random()*11) : 0~10까..

1. 2차 프로젝트 프론트 작업 - 기존에 만들어놨던 회원가입 UI가, label 한 줄 input 한 줄 방식으로 했더니 너무 길어져서, label과 input을 한 줄에 만드는 방식으로 UI를 변경하고 있다. 1) 카카오 주소 적용 - 간단하다 key 발급 받을 필요도 없네 - 금요일에는 카카오맵 적용시켰었는데 둘 다 예상했던 것보다 간단했다. 역시 겁먹지 말고 계속 코딩해보는 게 중요한 것 같다. 2) jQuery Datepicker - 얘도 간단한데 커밋하고 나니 생년월일에서 년도 찾는게 너무 번거로워서 yearRange를 변경해줬다. 3) radio 버튼 옆 텍스트를 눌러도 radio 버튼이 클릭되게 하는 법 남성 - 위와 같이 label의 for 속성 값으로 input의 id를 넣는다. 4) ..

# 블록 요소 vs 인라인 요소 - 포함 : 모든 인라인 요소 포함 가능, 다른 블록 요소도 일부 포함 가능 - 넓이 : ★가로폭 전체★의 넓이를 가지는 직사각형 형태. ★한 줄 다 차지★ - 레이아웃 : width, height, margin, padding 등을 사용해서 크기나 위치 지정 가능 → width/height/margin/padding 등 사용해서 크기나 위치를 지정하려면 블록 요소여야 한다. - 줄바꿈 : (O). 블록요소 다음에는 줄바꿈됨 - inline으로 변경하는 방법 : CSS에서 display : inline; - 블록요소 종류 : , , , , , 등 (1) 영역 잡는 애들 (2) 테이블, 리스트 (3) 데이터 입력 (4) 기타 : description list : descri..