Front-end study
-
node modules 폴더 Copy & Past 금지Front-end study/React & Vue 2023. 12. 9. 07:42
# 기존에 작성한 프로젝트 파일을 다른 컴퓨터로 옮길 경우 node_modules 폴더를 copy하여 가져가는 경우가 있는데 용량이 제법되는 폴더라 가져갈 때 시간이 많이 걸린다. # package.json 파일만 있다면 node_modules 폴더는 얼마든지 재생성가능하다. 해당 프로젝트 폴더안에서 npm install 이라 입력하고 엔터! 위 처럼 필요한 라이브러리를 가져와서 node_module 폴더를 꽉 채워준다 ~ The end !
-
Javascript blur 이벤트로 이메일 입력 후 형식 체크 (jquery 활용)Front-end study/Javascript 2023. 11. 10. 15:47
#1 HTML 코드 원하는 대로 작성한다. 기본적으로 input 태그만 사용해도 된다. /50 #2 javascript 코드 입력한 텍스트가 총 몇 자인지 실시간으로 보여주고 싶다면 textMaxLengthCheck 함수를 함께 사용하고 이런 기능이 필요없다면 메일 체크 코드만 사용하면 된다. ================================================================ ================================================================ ================================================================ //email validation check function emai..
-
Javascript keyup 이벤트 시 전화번호에 실시간 하이픈 입력 (jquery 활용)Front-end study/Javascript 2023. 11. 10. 15:05
#1 HTML 코드 원하는 대로 작성한다. 기본적으로 input 태그만 사용해도 된다. /13 #2 javascript 코드 자신이 입력한 텍스트가 총 몇 자인지 실시간으로 보여주고 싶다면 textMaxLengthCheck 함수를 함께 사용하고 이런 기능이 필요없다면 전화번호 세팅 코드만 사용하면 된다. /** * 최대 글자수 실시간 체크 후 dispalyId 에 글자수 표시 * @param str targetId(체크 대상) * @param int maxLength(최대 글자수) * @param str dispalyId(표시 대상) * 사용 안해도 됨 */ function textMaxLengthCheck (targetId, maxLength, dispalyId) { let thisTxt = $(tar..
-
CSS 기초 이론 정리Front-end study/HTML & CSS 2023. 7. 22. 18:23
#1. 의미, 정의 - Cascading Style Sheet #2. 선택자 - Selectors 1) * => 모든 tag의 색을 남색으로 * { color: navy; } 2) Tag => li 라고 적으면 태그에 적용 li { color: brown; } 3) #id => #input_password 라고 적으면 해당 id를 가진 태그에 적용 #input_password { color: red } 4) .class => .red 라고 적으면 해당 class 명을 사용하고 있는 태그에 적용 .red { width: 120px; height: 80px; background: red; } 5) Tag : state => button : hover 라고 적으면 버튼 위로 마우스를 hover 한 상태인 경우..
-
Javascript 에 Module 알아요?Front-end study/Javascript 2023. 3. 13. 19:16
# Do you know module in javascript? Javascript 와 Typescript 에서 사용할 수 있는 module은 파일 안의 코드를 모듈화 하는 것이다. Module 을 알면 React, Typescript 코드를 볼 때 어색하지 않다. 한 모듈은 한 파일 안에 작성된 코드를 말한다. 따로 모듈화하지 않으면 작성된 코드는 모두 global scope에 들어간다. 만약 2 ~ 3개의 파일에서 같은 이름의 함수를 구현한다면 test_script_01.js getName() { ... } test_script_02.js getName() { ... } test_script_03.js getName() { ... } getName 은 이름 충돌이 일어날 확률이 높고 앞으로 가져올 라..
-
Javascript Prototype : 상속을 위해Front-end study/Javascript 2023. 3. 9. 18:48
# 모든 객체들의 조상 object Javascript 에서 protype 은 모든 객체들의 조상 object 다. Java 의 Object 객체와 같은 개념이다 Javascript 에서 interface나 generic 같은 개념은 없지만 Protype 이란 개념이 있어서 Javascript 에서 객체지향프로그래밍을 가능하게 한다. 결국 상속을 하기 위해 쓰이고 코드를 재사용하기 위해 쓰인다. //Object 객체에서 상속을 위한 javascript 코드 DelonghiEspCoffeeMachine.prototype = Object.create(CoffeeMachine.prototype); Typescript 에서 class 를 작성하고 상속하는 코드를 작성한 후 ES5 버전의 Javascript 에서..