티스토리

Puft의 풀스택 도전기

검색하기

블로그 홈

Puft의 풀스택 도전기

pufrontend.tistory.com/m

Productive Use of Free Time

구독자: 0

방명록 방문하기

주요 글 목록

[JS] 유효성 검사 아이디와 비밀번호를 입력하는 인풋이 있다고 가정할 때생성 조건을 걸어서 유효성 검사를 할 수 있습니다.이번 시간에는 유효성 검사하는 로직을 구현해볼까 합니다. 먼저 form과 Input 뼈대를 만들어보겠습니다. form action = "ㅋㅋㅋ" name = "ff" onsubmit="return checkValid();">ID : input name = "idd" maxlength="10" autofocus> p>PW : input name = "pwpw" maxlength="10" autofocus> p>PW Check : input name = "pwchk" maxlength="10" autofocus> p>Foot Size : input name = "foot"> p>hr>button>입력butt.. 공감수 0 댓글수 0 2025. 1. 17.
[JS] 배열 배열은 순서가 있는 리스트를 말합니다.JS의 배열은 [ ] 대괄호로 표현합니다. let students = ["곽두팔", "이춘식", "김추호"]; 이런 식으로 대괄호 안에 요소를 집어 넣을 수 있습니다.이때 인덱스는 0부터 시작합니다.배열은 문자뿐만 아니라, 숫자, 객체, 함수를 전부 포함할 수 있습니다. let arr = ["비버", 3, false{name : "비붜",age : 7},function(){console.log('test');}] 배열의 예시입니다. 배열의 기능을 알아보겠습니다배열뒤에 .과 기능이름을 붙여서 사용할 수 있습니다. length : 배열의 길이를 나타냄push : 배열 끝에 요소 추가 (여러개 가능)pop : 배열 끝의 요소를 제거함shift, unshift : 배열의 .. 공감수 0 댓글수 0 2025. 1. 16.
[JS] 객체 JavaScript에서 객체는 객체는 중괄호를 표현하고중괄호 안에는 속성이 들어있는데쉼표로 구분 짓습니다. dog = {name : '마루',age : 5,}위처럼 속성은 key와 value로 구성되어 있으며마지막 속성에는 쉼표가 없어도 되지만,나중에 수정할 것을 생각하면쉼표를 적어 놓는 것도 좋은 선택입니다. 속성에 접근하는 방법은 총 2가지 방법으로 접근할 수 있습니다. 객체 이름.속성명 객체이름['속성명'] 객체에 속성을 추가하고 싶다면같은 접근 방식으로 수정하면 됩니다. 객체이름.속성명 = "바꿀이름";객체이름["속성명"] = "바꿀이름"; 으로 바꿀 수 있습니다.삭제는 delete 속성명.이름; 으로 삭제할 수 있습니다.찾는 속성이 있는지 확인할 수도 있는데이때는 in을 사용합니다. consol.. 공감수 1 댓글수 0 2025. 1. 16.
[JS] Arrow Function 저번 시간에 다뤘던function 함수명 () {} 이런 형태를 함수 선언문이라고합니다.그리고 함수 표현식 이라는 것이 있는데요.구조는 아래와 같습니다. let sayHello = function(){console.log("Hello");}sayHello(); 두 문법에는 어떤 차이가 있을까요?답은 호출하는 타이밍입니다.함수 선언문은 어디서든지 호출해서 사용할 수가 있는데 sayHello();function sayHello(){console.log("Hello");} 함수 선언문은 이런 식으로 함수가 실행문 아래에 와도실행이 가능합니다.프로그램 언어적 특성상 순서대로 코드가 실행 되어야 하는데위 동작이 어떻게 가능할까요?JS는 프로그램이 실행되기 전에 모든 '함수 선언문'을 찾아 모아서메모리에 저장하고 .. 공감수 0 댓글수 0 2025. 1. 16.
[JS] Function 같은 기능이 반복될 때매번 새롭게 만들지 말고 자주 사용하는 기능을하나로 묶어서 쓰는게 편리합니다.이 묶는 기능을 함수라고 하는데요.JavaScript에도 함수 기능이 있습니다.구조는 이렇습니다. function 함수명 (파라미터) {}이떄 파라미터는 생략될 수 있습니다. function showError(){alert("에러 발생 !!!!");}showError(); 파라미터가 없는 함수의 예시입니다.function sayHello(name){let msg = `hello, ${name}`;alert(msg);}sayHello("David"); 그리고 파라미터가 있는 함수입니다.이 함수에 파라미터를 넣지 않고 실행하면 어떻게 될까요? sayHello(); 이 경우에는 undefined가 출력됩니다.그래.. 공감수 0 댓글수 0 2025. 1. 16.
[JS] 테이블 만들기 JavaScript에서는 Java와 반복문의 형식이 같습니다.따라서 복습해본다고 생각하고 테이블을 만드는 기능을 만들어보겠습니다. h1>자동 테이블 생성기 + 자동 숫자 카운트h1>button onclick = "makeTable();">테이블 생성button> 테이블 생성 버튼을 누르면행과 열을 입력받고해당 행과 열 사이즈에 맞게테이블을 만드는 기능을 구현해보겠습니다.해당 작업은 html 파일 내에서 수행할 것이므로script태그 내에서 구현합니다.그리고 함수로 구현하겠습니다. //prompt로 행의 갯수, 열의 갯수를 입력하면//행 x 열의 테이블이 만들어지고,//각 td들에 숫자가 1부터 카운팅 되어서 값이 나오게 script type = "text/javascript"> function makeT.. 공감수 0 댓글수 0 2025. 1. 16.
[JS] 조건문 이전 언어에서도 조건문을 다뤄봤는데요.조건문은 어떤 조건에 따라서 이후에 실행이 달라지게하는 문법을 말합니다.조건문에는 if문, switch-case문 등이 있는데요.if문부터 구조를 살펴겠습니다. if문 (Java와 구조가 같음)if(조건 A){조건 A가 성립하면 해당 블록을실행 } else if (조건 B){조건 A가 아니고 조건 B가 성립하면해당 블록을 실행}else{위의 조건들에 모두 해당하지 않는 나머지의 경우 해당 블록을 실행} 다음은 switch-case문입니다.case가 다양할 때, if문보다 간결하게 나타낼 수 있다는 메리트가 있습니다.구조는 다음과 같습니다.변수의 값에 따라 해당 case문의 내용을 실행하고default로 기본값도 설정할 수 있습니다.switch (변수){case 값1:.. 공감수 1 댓글수 0 2025. 1. 16.
[JS] 연산자 JavaScript의 연산자에 대해서 알아보겠습니다.먼저 산술 연산자입니다.흔히 아는 사칙연산 + - * / 와 %(나머지)가 있습니다.그리고 거듭제곱이 있는데요. let a = 2**3; 곱하기를 두번하면 거듭 제곱이됩니다. 사칙 연산자의 우선순위는 다음과 같습니다. (*, /) > (+, -) 연산자를 줄여서 쓰는 것도 가능합니다. let num1 = 10;num1 += 5; 증감 연산자 또한 사용이 가능합니다. num1++; 증감 연산자에는 두 가지 종류가 있는데요. let result = num2++; 이렇게 +를 뒤에 붙이는 후위 증감 연산자와 let result = ++num2; +를 앞에 붙이는 전위 증감 연산자가 있습니다. 후위 증감 연산자는 변수의 현재값을 .. 공감수 1 댓글수 0 2025. 1. 15.
[JS] 형 변환 JavaScript에서도 자료형에 대하여 형 변환을 할 수 있는데요.JS에서는 숫자형이 아니더라도 표현식을 활용했을 때숫자형으로 변환할 수 있다면 자동으로 형 변환이 되어 계산됩니다.이를 자동 형 변환이라고 하는데요.하지만 원하는 답이 나오지 않을 때도 있기 때문에항상 의도를 가지고 원하는 타입(자료형) 으로변환해서 사용하는것이 필수입니다. 이를 위해 사용하는 것이 명시적 형 변환입니다. 사용 방법은 아래와 같습니다. String() => 문자형으로 변환Number() => 숫자형으로 변환Boolean() => 논리형으로 변환 Boolean() : B는 대문자여야 하고 괄호안의 값을 논리형으로 바꿔줍니다. Boolean 형 변환 시 false가 나오는 경우들을 알아보면 - 숫자 0- 빈 문자열("").. 공감수 0 댓글수 0 2025. 1. 15.
[JS] DialogBox Dialog Box에는 alert, prompt, confirm의 3가지가 존재합니다.먼저 살펴 볼 alert는 사용자에게 알려주기 위한일방적인 경고창을 띄워줍니다. 다음으로 prompt는 값을 입력 받을 수 있습니다. 이때 취소를 누르면 null값이 나오게 됩니다.prompt에는 default값도 넣을 수 있습니다.default를 이용하면 값을 넣을 때안내하거나 힌트를 주는 역할도 가능합니다.따라서 prompt는 2개의 파라미터를 가질 수 있는데 (보여줄 메시지, 입력받을 default 값) 을 가질 수 있습니다. let name = prompt('예약일을 입력하세요.', "2025-01-"); 이렇게 코드를 작성하게 되면 Default값이 input창에 들어가게 됩니다. 다음으로 confirm은.. 공감수 0 댓글수 0 2025. 1. 15.
[JS] Reduce Reduce는 '줄이다'라는 뜻을 가진 단어입니다.JS에도 Reduce라는 메소드가 있는데요.예시를 살펴보겠습니다. const totalSum = cards.reduce((total, card) => total + card.cost * card.quantity, 0); Reduce의 사용 방법은 이렇습니다. array.reduce((accumulator, currentValue, currentIndex, array) => { }, initialValue); accumulator: 누적값을 저장하는 변수(여기선 total).currentValue: 배열의 현재 요소(여기선 card).initialValue: 누적값의 초기값(여기선 0). cons.. 공감수 0 댓글수 0 2025. 1. 15.
[JS] 자료형 JavaScript의 자료형에 대해서 알아보겠습니다.먼저 문자열 String 방식이 있는데요.문자열을 표현하는 방법에는 3가지가 있습니다. let name = "beaver"; => 큰따옴표로 표현하는 방법 let name2 = 'beaver' ;' => 작은 따옴표로 표현하는 방법 let name3 = `beaver`; => backtick 표현 방법(물결 단축키) 이때 작은 따옴표 문자열 안에작은 따옴표를 문자로 사용하려면 역슬래시 넣어서작은 따옴 표를 문자로 인식하게 사용할 수 있습니다. let message = 'I'm a boy' => 에러 발생. let message = 'I\'m a boy' backtick은 보통 문자열 내부에 변수를 표현할 때 사용합니다.${변수명}을 넣어서 표현하는.. 공감수 2 댓글수 1 2025. 1. 15.
[JS] 변수(Variable) JavaScript의 변수 개념을 살펴보겠습니다.JavaScipt는 인터프리터 언어로 코드를 작성할 때마다 반영/오타 안나게 주의해야합니다. 먼저 변수를 살펴보겠습니다.변수는 데이터를 담는 그릇인데요.변수에 접근하는 방법은 3가지 정도가 있습니다. 1. alert() : 경고창을 띄워주는 함수2. console.log() : 로그를 띄워주는 함수=> 개발자 모드로 콘솔 도구를 사용하여 확인 가능3. document.write() : 웹페이지에 내용을 출력해주는 함수 name = "Beaver";age = 300; 이런 방식으로 변수를 선언할 수 있는데전역 변수이기 때문에 위험한 선언 방법입니다. 이걸 방지하기 위해서 변수 선언의 형태로 3가지 방법이 있는데var, let, const가 있습니다.va.. 공감수 0 댓글수 0 2025. 1. 15.
[JS] FileReader 다음 코드는 이미지를 읽고데이터를 URL로 변환하는 코드입니다.자세히 살펴봅시다.const [newProductImage, setNewProductImage] = useState(null);const handleImageChange = (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = () => { setNewProductImage(reader.result); }; reader.readAsDataURL(file); } };.. 공감수 1 댓글수 0 2025. 1. 15.
[JS] Filter Filter는 JavaScript의 배열 메소드로특정 조건을 만족하는 배열을 생성합니다.이때 기존 배열은 변경되지 않고 새로운 배열이 만들어지게 됩니다.사용법을 살펴보겠습니다. array.filter(callback(element, index, array), thisArg) callback: 각 요소에 대해 실행할 함수입니다. 이 함수는 다음 3가지 매개변수를 가질 수 있습니다:element: 현재 처리 중인 배열 요소index (선택 사항): 현재 요소의 인덱스array (선택 사항): filter가 호출된 원래 배열thisArg (선택 사항): callback 함수에서 사용될 this 값. 반환값조건을 만족하는 배열 요소들로 이루어진 새로운 배열. const cards = [ { id: 1, .. 공감수 0 댓글수 1 2025. 1. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.