javascript

공공데이터포털의 사업자등록 상태조회 API를 활용하였다.그런데 아래와 같은 에러가 떴다. 1. 에러 로그 및 문제점Uncaught (in promise) Error: AxiosError: Request failed with status code 500 at businessman_status (sign_up_api.js:67:1) at async validateRegNumber (Sign_up_page_company.jsx:170:1) https://api.odcloud.kr/api/nts-businessman/v1/status?serviceKey=비밀키{ "message": "Method Not Allowed"}Method를 허용할 수 없다는 500 에러가 떴다. sign_up_api...

사진을 업로드 한 후, 사용자가 업로드한 사진이 화면에 바로 반영되는 기능을 구현해보았다.아래는 파일 업로드 컴포넌트 코드이다.tailwind css와 일반 css가 혼재되어 있어서 깔끔하지 않음 주의import React, { useState } from "react";const Profile_picture = ({ onchange }) => { const [imagePreview, setImagePreview] = useState(null); const handleImageChange = (event) => { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.o..

JavaScript만 사용하며 개발을 진행하던 나날이 이어졌는데TypeScript를 쓰시는 분을 보고, TypeScript와 JavaScript와의 차이점이 궁금해졌다.따라서 둘의 차이점을 작성하고,앞으로 상황에 맞는 언어를 쓰기 위해 이 글을 작성한다.  차이점가장 큰 차이는 이름에서도 유추할 수 있듯이 type의 유무이다.Java를 예로 들자면 변수 선언 시 변수 앞에 붙는 char int long String 같은 게JavaScript는 없고, TypeScript는 있다는 것이다.코드를 보면서 이해해보자. // JavaScriptvar a = 1var b = 2var c = a + b위처럼 JavaScript는 변수를 선언할 때 자료형을 명시하지 않는다.// TypeScriptvar a: numbe..

messageHandler.js은 서버에 보내는 요청을 처리하는 역할을 한다. 작성된 코드는 아래와 같다. messageHandler function에서 매개변수로 사용된 data는 WebSocket으로부터 수신된 메시지를 나타낸다. 일반적으로 data는 JSON 형식으로 전송되며, 문자열로 표현된다. 함수 내에서는 이 문자열을 JSON 객체로 변환하여 실제 데이터에 접근하고 처리한다. import { Chat_log, Message } from '../chat_log.js'; // 실시간 Socket event 처리 파일 function initialize() { const host = 'localhost'; const port = 8080; const chat_log = new Chat_log(hos..

html 파일 내에서 style 태그와 script 태그를 사용할 수 있다. 하지만 그렇게 되면 코드가 너무 길어지므로 스타일과 관련된 것은 css 파일로, 자바스크립트 코드를 js 파일로 분리해서 사용하는 경우가 많다. css, js 파일 html에 불러와 적용 별도의 css 파일에 있는 스타일을 html 파일에 적용하는 방법? html 파일의 head 태그 내에 위와 같이 작성해주면 된다. 경로라고 적어둔 부분에 css 파일이 있는 경로를 작성해주면 된다. 별도의 js 파일에 있는 스크립트를 html 파일에 적용하는 방법? html 파일의 head 태그 내에 위와 같이 작성해주면 된다. 경로라고 적어둔 부분에 js 파일이 있는 경로를 작성해주면 된다. 경로 경로에는 크게 절대경로와 상대경로가 있다. ..

1. 문서 객체 선택이란? 문서 객체를 선택한다는 것은? 👉 이미 존재하는 HTML 태그를 자바스크립트에서 문서 객체로 변환하는 것 2. 문서 객체 선택 메서드 종류 🩶 1개를 선택하는 메서드 🩶 document.getElementyById(아이디) : 아이디로 1개 선택 document.querySelector(선택자) : 선택자로 1개 선택 👉 이름이 같은 선택자가 여러 개라면 가장 먼저 등장하는 것을 선택함 🩶 여러 개를 선택하는 메서드 🩶 document.getElementyByName(이름) : name 속성으로 여러 개 선택 document.getElementByClassName(클래스) : class 속성으로 여러 개 선택 document.querySelectorAll(선택자) : 선택자로 ..

1. 문서 객체 모델 기본 용어 문서 객체란? 👉 HTML 태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것. 문서 객체를 조작한다 = 태그를 조작한다 웹 브라우저는 HTML 페이지를 읽으면서 태그의 포함 관계에 따라 문서 객체를 트리 형태로 만든다. 노드: 각 트리의 각 요소 요소 노드: 요소를 생성하는 노드 예) h1 태그, script 태그 텍스트 노드: 화면에 출력되는 문자열 더보기 텍스트 노드를 갖지 않는 태그들 문서 객체 생성 방법 정적 생성: 웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는 것 동적 생성: 웹 페이지 실행 중에 자바스크립트를 사용해 문서 객체를 생성하는 것 문서 객체 모델이란? 👉 DOM(Document Object Model). 웹 브라우저가 H..

객체는 자료형 여러 개를 한 번에 저장한다. 1. 객체 개요 💚 배열과 객체의 차이점 💚 👉 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키를 사용한다. 💚 객체 생성 예 💚 키 속성 제품명 7D 건조 망고 유형 당절임 성분 망고, 설탕, 메타중아황산나트륨, 치자황색소 원산지 필리핀 💚 객체 속성 접근 방법 💚 1) 대괄호 사용 product['제품명']//7D 건조 망고 product['유형']//당절임 product['성분']//망고, 설탕, 메타중아황산나트륨, 치자황색소 product['원산지']//필리핀 2) Object.속성 👈 사용 빈도 높음 product.제품명 product.유형 product.성분 product.원산지 💚 객체 순환 방법 💚 for (var 키 in 객체) { 문..

1. 선언과 호출 방법 정의 표현 익명 함수 이름을 입력하지 않고 만드는 함수 function ( ) { } 선언적 함수 이름을 입력해서 만드는 함수 function 함수( ) { } 함수 실행을 함수를 호출한다고 표현한다. 호출방법은 아래와 같다. 함수(); 2. 실행 우선순위 함수도 변수이므로 가장 마지막에 입력된 값이 저장된다. 선언적 함수와 익명 함수를 함께 사용할 때는 실행 순서가 다르다. 자바스크립트는 모든 코드를 읽기 전에 선언적 함수를 먼저 읽는다. 👉 선언적 함수가 익명 함수 뒤에 있지만 먼저 읽으므로 아래 코드를 실행하면 나중에 읽은 익명 함수를 실행한다.

1. 정의 함수에 파라미터로 들어가는 함수 2. 용도 순차적으로 실행하고 싶을 때 쓴다. 3. 특징 다른 데에서 만든 함수도 콜백함수로 넣을 수 있다. 콜백함수에 함수명을 작명할 수도 있다. 콜백함수가 필요한 함수들에만 콜백함수를 사용할 수 있다. 4. 원리 first() 함수 다음에 second() 함수 실행하고 싶으면? Q. first(); second(); 이렇게 코드를 작성해도 first 함수가 실행된 후에 second 함수가 실행되는데, 콜백함수는 의미가 없는 거 아닌가요? A. 👉 내가 first라는 함수를 만들었는데, 팀원들이 이것을 자주 쓴다면 콜백함수가 의미가 있다. 예) 팀원1: first() 후에 console.log(2) 바로 하고 싶은데요? 팀원2: 저도 first() 후에 con..