본문 바로가기

코딩

Promise와 async/await의 차이점 JavaScript에서 Promise와 async/await는 비동기 처리를 관리하는 방식이다.두 방식 모두 비동기 작업의 결과를 처리하는 데 사용되지만, 문법과 사용 방식에서 차이가 있다. PromisePromise는 비동기 작업이 완료되었을 때 결과를 처리하는 객체이며, Promise는 세 가지 상태를 가질 수 있다.Pending(대기): 비동기 작업이 아직 완료되지 않은 상태Fulfilled(이행): 비동기 작업이 성공적으로 완료된 상태Rejected(거부): 비동기 작업이 실패한 상태Promise를 사용할 때는 주로 .then(), .catch(), .finally() 메서드를 사용하여 비동기 작업이 완료되었을 때의 처리 로직을 작성한다.const myPromise = new Promise((re.. 더보기
HTML과 XHTML의 차이점 HTML(HyperText Markup Language)과 XHTML(eXtensible HyperText Markup Language)은 웹 페이지를 만들기 위해 사용되는 마크업 언어이다. 1. 문법 및 구조HTML:HTML은 비교적 유연한 문법을 가지고 있다.태그와 속성의 대소문자 구분이 없다.예: 와 는 동일하게 인식이나 같은 태그는 태그가 닫히지 않아도 사용할 수 있다.속성 값은 꼭 따옴표로 묶지 않아도 된다.예: XHTML:XHTML은 XML 기반이므로 엄격한 문법을 따른다.태그와 속성의 대소문자를 구분한다.예: 와 는 다르게 인식 .이나 같은 태그도 동일하게 태그가 닫혀야 한다.모든 속성 값은 반드시 따옴표로 묶여야 한다.예: . 2. 호환성 및 확장성HTML:브라우저가 잘못된 HTML도 .. 더보기
24.07.08 day20 Flexbox vs Grid, 포트폴리오 배경화면 Flexbox vs Gridhttps://moonmisae-cdpt.tistory.com/272 Flexbox와 GridFlexbox와 Grid는 CSS 레이아웃을 구성하는 주요 css로, 각각 다른 목적으로 사용한다.FlexboxFlexbox는 일차원 레이아웃 모델로, 주로 한 방향(행 또는 열)으로 아이템들을 정렬하는 데 사용된다.Flexbox는moonmisae-cdpt.tistory.com포트폴리오 배경화면맛깔난 배경화면을 찾다가 좋은걸 보게 되었다. 전체화면에 수많은 별이 움직이고 있었는데 배경이 맘에 들어서 vue방식으로 수정해줬다. 화면 자체를 모든 컴포넌트에 적용시켜야 하기 때문에 app.vue에 작성해 전역으로 코드를 적용시켰다. id가 app인 div안에 두 태그가 있.. 더보기
Flexbox와 Grid Flexbox와 Grid는 CSS 레이아웃을 구성하는 주요 css로, 각각 다른 목적으로 사용한다.FlexboxFlexbox는 일차원 레이아웃 모델로, 주로 한 방향(행 또는 열)으로 아이템들을 정렬하는 데 사용된다.Flexbox는 요소 간의 공간 분배와 정렬을 쉽게 할 수 있게 해준다.주요 개념 및 속성컨테이너와 아이템: Flexbox 레이아웃은 flex 컨테이너와 그 안에 포함된 flex 아이템으로 구성된다.주 축과 교차 축: 주 축(main axis)은 flex 아이템이 배치되는 기본 방향(수평 또는 수직)이며, 교차 축(cross axis)은 주 축과 수직인 방향이다.flex-direction: flex 아이템의 배치 방향을 설정한다.row (기본값): 수평으로 배치row-reverse: 수평으로.. 더보기
24.07.05 day19 코드트리 문제 풀기, mounted() ,vue.js 컴포넌트 주요 기능 점수대 파악하기100명 이하인 학생들의 점수가 주어지다가 0이 주어지면 그때까지 주어진 점수를 10점 단위로 구분하여 점수대별 학생 수를 출력하는 프로그램을 작성해보세요.입력 형식100명 이하 학생들의 점수가 공백을 사이에 두고 주어집니다.1 ≤ 점수 ≤ 100출력 형식각 줄에 "점수대별 - 학생 수"형식으로 출력합니다. 단, 10점 미만으로 맞은 학생 수는 세지 않습니다.예제1)입력:55 67 89 40 99 100 87 63 100 0 출력:100 - 2 90 - 1 80 - 2 70 - 0 60 - 2 50 - 1 40 - 1 30 - 0 20 - 0 10 - 0 arr = list(map(int, input().split()))arr2 = [0] * 10for i in range(len(arr)).. 더보기
vue 컴포넌트의 주요 기능 vue.js의 자바스크립트에서는 다양한 기능이 있어 컴포넌트를 구성하고, 데이터와 이벤트를 관리할 수 있다. vue 컴포넌트에서 사용할 수 있는 주요 기능1. data()컴포넌트의 상태(데이터)를 정의한다.이 함수는 객체를 반환하며, 반환된 객체는 컴포넌트 인스턴스의 데이터로 사용된다.data() { return { message: 'Hello, Vue!', count: 0 };}2. methods컴포넌트에서 사용할 메서드를 정의한다.메소드는 템플릿에서 호출하거나 다른 메소드 내에서 호출할 수 있다.methods: { increment() { this.count++; }}3. computed계산된 속성을 정의한다.계산된 속성은 종속된 데이터가 변경될 때 자동으로 다시 계산된다.co.. 더보기
mounted()란? mounted()mounted()는 Vue.js의 라이프사이클 훅 중 하나이며, 컴포넌트의 인스턴스가 DOM에 마운트된 후에 호출된다. mounted() 훅은 컴포넌트의 템플릿이 DOM에 삽입된 후 실행되기 때문에 DOM 요소에 접근할 수 있는 시점이다. 그래서 이 훅을 사용하면 DOM 조작이나 외부 라이브러리 초기화와 같은 작업을 안전하게 수행할 수 있다고 한다. 예시)  이 코드에서 mounted의 역할은 화면이 다 렌더링 된 후에 mounted() 함수가 실행이 된다. 즉, DOM으로 접근할 때 함수가 먼저 실행되는 것을 방지하기 때문에 접근 객체를 못 찾는 에러를 예방할 수 있다. 더보기
24.07.04 day18 코드트리 문제 풀기, vue.js parsing error 해결, vue.js Parsing Errorhttps://moonmisae-cdpt.tistory.com/268 Parsing error: No Babel config file detected for "경로". Either disable config file checking with requireConfigFile: false, or어제도 에러해결하고 정상작동하는 걸 확인했는데, 오늘은 갑자기 파싱 에러가 떴다.다행히 이건 바벨 세팅이 안되어있어 에러가 발생한다고 하는 문제였기 때문에 구글링하여 파일 세팅을 해moonmisae-cdpt.tistory.com 더보기

티스토리툴바