본문 바로가기

전체 글92

2025 타오바오 계정 동결 해결 방법 우선 우리집 고양이 보고 가세요:) 오랜만에 타오바오 계정을 켰습니다.핸드폰 번호를 인증하고 로그인을 하려는데 이게 무슨일이야.알 수 없는 안내문이 나왔고, 스크린샷 캡처를 하여 바로 구글 번역기에 돌려보았어요. 계정이 제한되었다는데. 그렇다면 해결을 해보겠습니다. 우선 준비물이 있습니다.중국 사이트에 여권 등록을 할 강인한 마음과여권, 그리고 알리페이 앱. 1. 알리페이 앱을 다운받는다.2. +82로 설정 후 인증번호를 받아 로그인한다.3. 마이 -> 상단 프로필 사진 터치 -> 신분 정보4. 증명서 정보 입력 : 여권을 준비해서 여권 인증하기5. 초록색 글씨로 Verified 나오면 완료된 것! 그리고 다시 타오바오 앱으로 넘어갑니다. 다시 보이는 계정 제한 화면.주황색 버튼을 누르면 다음 화면으로.. 2025. 9. 25.
[React] 이벤트핸들링 Event Handling- event : 웹 내부에서 발생하는 사용자의 행동 ex)스크롤, 클릭, 창 열고 닫기, 메세지 입력, 마우스 이동 등- 이벤트 핸들링이란 이벤트가 발생했을 때 그것을 처리하는 것 ex) 버튼 클릭시 경고창 노출 or 콘솔에 메세지 출력 등 예시를 위해 뮤직플레이어 예제를 다시 가지고 오겠습니다.import { useState } from "react";const MusicPlayer = () => { const [isPlaying, setIsPlaying] = useState(false); const togglePlay = () => { setIsPlaying((prev) => !prev); }; return ( 🎵Music Player .. 2025. 7. 31.
[React] State와 렌더링 - 뮤직플레이어 예제와 함께 State 란 현재 가지고 있는 형태나 모양을 정의하며 변화할 수 있는 동적인 값 state는 컴포넌트의 현재 상태를 보관하는 변수입니다.그러므로 state를 갖는 컴포넌트들은 현재의 상태인 state의 값에 따라서 각각 다른 ui를 화면에 렌더링합니다. 뮤직 플레이어를 예로 들어봅시다.음악이 정지된 상태에서는 재생을, 음악이 재생중인 상태에서는 일시정지를 누르는 버튼을 가정해봅시다. state의 값이 재생중이면 "재생중입니다"를 렌더링하고, state의 값이 '재생중'에서 '정지상태'로 state가 변화하게 되면 react는 이 변화를 감지하여 자동으로 컴포넌트를 다시 렌더링 시켜주며, ui를 다시 렌더링하여 "정지 상태입니다"를 렌더링 하게 됩니다.이렇게 다시 렌더링되는 상황을 렌더링 혹은 리렌더라고.. 2025. 7. 31.
[React] 컴포넌트, props - 햄버거 키오스크 예제와 함께 1. 컴포넌트컴포넌트란 화면을 구성하는 레고 조각 같은 것이다.햄버거 키오스크에는 어떤 레고 조각이 있어야 할까?일단 메뉴와 장바구니가 있어야한다. App- Menu- Cart 예제의 구조를 이정도로만 짜보면최상단에 있는 App이 부모 컴포넌트가 되고아래에 있는 Menu와 Cart가 자식 컴포넌트가 된다. 2. Props부모 컴포넌트가 자식 컴포넌트에게 값을 전달하는게 가능한데이 때 컴포넌트에 전달된 값들을 'Props'라고 한다. 다음은 App.jsx의 코드이다.import "./App.css";import Cart from "./components/Cart";import Menu from "./components/Menu";import { useState } from "react";const men.. 2025. 7. 26.
[Javascript] 구조분해할당 1. 구조분해할당 (디스트럭처링 할당 desctructuring assignment) 이란?배열이나 객체와 같은 구조화된 데이터를 분해하여 개별 변수에 할당하는 기능 2. 배열 구조분해할당let arr = [1, 2, 3]; 배열 arr의 데이터를 각각 one, two, three라는 변수에 할당하고 싶으면 아래와 같이 하면 된다.let one = arr[0];let two = arr[1];let three = arr[2]; 구조분해할당을 이용하면 다음과 같이 할당할 수 있다.let [one, two, three] = arr; Q. 만약 아래와 같이 구조분해할당을 할 때 배열의 길이보다 더 많은 변수를 선언한다면 어떻게 될까?let [one, two, three, four] = arr; 콘솔에 로그를 .. 2025. 7. 22.
[CSS] CSS box-sizing(박스 사이징) box-sizing : content-box 와 border-box 차이 예시 박스 세 개를 생성해줍니다.그리고 스타일 태그에 아래의 코드를 입력하여box1 과 box2에 패딩과 보더 값을 설정해줍니다. .box1, .box2 { padding: 20px; border: 5px solid black; } 패딩과 보더 값이 더해져 box1, box2 의 크기가 box3보다 커졌습니다.이 때 box2의 너비와 높이를 box3와 동일하게 유지하면서 보더와 패딩 값을 주려면 어떻게 해야할까요?box2를 border-box로 지정해주면 됩니다. (box-sizing의 디폴트 값은 content-box 입니다.).box2 { .. 2025. 7. 8.