All'alba vincerò

At dawn, I will win!

전체보기 282

state 값 변경하기 / onClick / 좋아요 버튼 UI 만들기

state 값 변경하기 / onClick / 좋아요 버튼 UI 만들기 state 값 변경하기 - state변경 함수(새로운 state 값) * 기존의 state == 새로운 state가 같을 경우 변경 안해줌 ❌ * - 등호로 변경 금지 ❌ (좋아요 = 좋아요 + 1) - useState의 두 번째 인자는 state 변경용 함수→ 변경 함수를 사용해야 html 재렌더링이 잘 됨 let [인사, 인사변경] = useState('안녕'); // 인사변경 -> state 변경용 함수 {제목[0]} {인사변경('반가워')} }>👍 {좋아요} array, object의 state 값 변경하기 기존 데이터 복사 - array/object 다룰 때는 원본을 보존하는 것이 좋다 spread로 [괄호] 벗기기 - 원본 ..

React/Coding Apple 2024.03.13

state

state : 자료 저장 - 자료값이 바뀌면 (html이 자동 재렌더링되어) 변경한 값이 html에 자동으로 반영된다. (변수는 X) - 변경될 여지가 있는 값에 사용하기! - Destructuring 문법 https://tensdiary.tistory.com/53 let num = [1, 2]; let a = num[0]; let c = num[1]; => let [a, c] = [1, 2]; 저장 & 사용 - let [작명1, set작명2] = useState('보관할 값') 작명1 = 자료값 작명2 = state 변경을 도와주는 함수 - state 변경 함수명 → set을 붙여서 짓는다! let [제목, b] = useState('여자 코드 추천') let [글, a] = useState(['남자 ..

React/Coding Apple 2024.03.13

레이아웃 만들 때 쓰는 JSX 문법

JSX (Javascript Syntax eXtension) : React에서 html의 요소를 생성 .js 파일에서 사용하는 html 대용품 CSS 파일 연결하기 - 상단에 import 추가 import './파일명'; class 설정하기 - className 변수에 있는 데이터를 html에 넣기 - { 변수명 } - 데이터 바인딩 - id, class에도 사용 가능 ('작은 따옴표' 사용 X) let post = '강남 우동 맛집'; // 서버에서 가져온 실제 데이터 블로그 { post } style 속성 설정하기 - style={ { 스타일명 : '값', 스타일명 : '값 } } - {중괄호} 안에 object 형식으로 사용 - font-size는 fontSize (뺄셈 (-) 사용 X) 블로그 출..

React/Coding Apple 2024.03.13

React 시작하기 (설치 및 셋팅)

React 시작하기 프로젝트 생성 작업용 폴더 생성 폴더에 shift + 우클릭으로 powershell 열기 터미널에 아래 코드 입력 npx create-react-app 프로젝트명 프로젝트 오픈 VS-code → File → Open Folder → 프로젝트 폴더 선택 폴더명 꼭! 제대로 확인하고 코드 짜기 브라우저 미리보기 Terminal → New Terminal → npm start 입력 후 엔터 브라우저 자동으로 안뜨면 localhost:3000 이라고 크롬 브라우저 열고 직접 입력 파일 설명 node_modules - 프로젝트 구동에 필요한 모든 라이브러리의 소스 코드 보관함 public - static 파일 모아놓는 곳 (html, img 파일 보관) scr - 소스 코드 보관함 (코드 작성..

React 2024.03.12

정규표현식 / 전화번호 자동 하이픈(-) 만들기

정규표현식 (Regular expression, RegExp) 슬래시(/)와 슬래시(/) 사이에 검색할 문자열 패턴을 넣고, 슬래시가 끝나는 순서에 필요에 따라 플래그를 추가할 수 있다. /^hello-/d{2,3}$/g; 플래그 슬래시(/)가 끝난 뒤에 붙임 선택적으로 사용 가능 순서와 상관없이 하나 이상의 플래그를 동시에 설정 가능 플래그를 사용하지 않는 경우, 문자열 내 검색 대상이 1개 이상이더라도 첫번째 조건 대상만을 검색하고 종료 i (ignore case) : 대소문자를 구별하지 않고 검색 g (global) : 문자열 내의 모든 패턴을 검색 m (multi line) : 문자열의 행이 바뀌더라도 계속 검색 패턴 매칭하여 검색하고 싶은 문자열 일반 문자와 특수 문자 사용 가능 일반 문자 - ..

Javascript 2024.03.12

숫자 천 단위 콤마(,) 찍기 - toLocaleString()

숫자 천 단위 콤마(,) 찍기 toLocaleString() 날짜나 숫자를 문화권에 맞는 표기법의 문자열로 반환 number / date / array 에서 활용 number date array 3자리마다 콤마(,) 사용자의 문화권에 맞는 시간 표기법으로 년,월, 일, 시간 반환 array 내용을 문자열로 반환 const date = new Data(); date.toLocalString(); // "2024. 03. 12. 오후 15:45:45" const price = 20000; price.toLocalString(); // 20,000 const array = [1, 'a', 234, date]; array.toLocalString(); // "1,a,234,2024. 03. 12. 오후 15:4..

Javascript 2024.03.12

[HTML] 입력칸 안내 문구 / 엔터로 submit 하기 / 새로고침 버튼 / <footer> / <canvas>

input에 안내문구 넣기 placeholder : 텍스트 입력 칸에 안내 문구를 넣어 입력에 도움을 준다. 엔터로 submit 하기 이벤트 키 값이 13이면 searchList() 함수 실행 (엔터 키의 값은 13) 폼 안에 text 박스가 1개일 때만 가능 페이지를 새로고침하는 버튼 만들기 a 태그의 링크를 window.location.reload()로 설정하기 새로고침 태그 웹 페이지 하단의 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 나타내는 영역 © 2023 웹 페이지 제작자 contact@example.com role 속성의 값은 contentinfo * role 속성 – 장애를 가진 사용자들을 위한 향상된 웹 콘텐츠의 접근성 제공하는 도구 태그 width과 height 속성을 ..

HTML 2024.03.12

[Javascript] 장바구니 기능

장바구니 기능 : 상품 목록을 보여주고 담기 버튼 클릭 시 장바구니에 담기며, 담은 상품의 합계와 영수증을 보여주는 페이지 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 기능 구현 main.css - 전체 디자인 store.json - 데이터 파일 코드 구현 계획 1. 레이아웃 구성하기 (html, css) - 상품 카드 만들기 2. 상품 목록 데이터 끌어오기 - 데이터 갯수만큼 html 생성하기 3. 검색 기능 (1) 검색어 필터링 (2) 검색어가 없는 카드엔 hide 클래스 추가 / 있으면 제거 4. 상품 드래그 기능 5. 장바구니에 있는 상품 카드의 html 수정 - 수량 입력 칸 추가 () 7. 최종 가격 출력 8. 개인 정보 입력창 - ..

Toy Projects 2024.03.12

[Coding Apple] 상품 옵션(option) / forEach문 / JS로 HTML 다루기

상품 옵션(option) / forEach문 / JS로 HTML 다루기 태그 : 드롭다운 메뉴를 만드는 태그 태그 안에서 태그와 함께 사용 상품선택 모자 셔츠 - 자유로운 형식 / 직접 입력 vs - 제한적인 형식 / 선택 이벤트 : 입력값이 바뀔 때마다 발생하는 이벤트 입력칸에서 값을 변경할 때는 (마우스로 선택하는 입력칸이어도) 클릭(click) 이벤트가 아닌 input 이벤트를 사용해야 한다. document.querySelectorAll('.form-select')[0].addEventListener('input', function() { ... }); e.currentTarget : 이벤트(addEventListener)가 붙어 있는 타켓을 가리킨다. e.currentTarget == this ..