목록전체 글 (143)

코딩,해볼까

[REACT] state

컴포넌트에서 동적인 값. (함수 = useState) ⚛️ 셋팅 1) import {useState} from 'react'; 2) const [state,setState] = useState() ⚛️ useState() 설명 state 함수는 array를 반환한다. - const [초기값을 담고있는 state 변수 , 초기값을 업데이트 해주는 set함수] = useState(초기값) ⚛️ state 변경 방법 setState(변경하고자 하는 값) ⚛️ state, 이것만은 꼭 기억하자! 1. state의 값은 업데이트가 되는데 한박자가 늦다. (한박자 이전의 값이다.) 실행해야 하는 모든 값을 모은다. 순서대로 실행된다. 함수가 끝날 때 까지 기다렸다가 처리한다. = 비동기적이다 2. state 값이 ..
Front 2022. 11. 9. 12:42
[REACT] 이게 왜 돼?? (1) / 옵셔널체이닝

{SLIDE[num].des} {SLIDE[num]?.des} // 둘의 차이점은 무엇인가? 📂 오늘의 실습 파일 : hd_react_test state는 immutable(불변성)을 유지해야하기 때문입니다. 컴포넌트는 현재의 this.state와 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출하는데, state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있습니다. 상태 변경을 추적하고 변경에 따라 구성요소를 다시 렌더링하려면 setState를 사용해야 합니다. setState는 비동기적으로 동작하기 때문에 state가 직접 수정되어 여러번 상태를 업데이트 하는 경우, 이전 업데이트 내용이 다음 업데이트 ..
Front 2022. 9. 8. 16:14
[jQuery] 🍪 팝업창 띄우기, 팝업창 쿠키 / jQuery cookie

jQuery 🍪 site 제이쿼리에서 제공하는 쿠키 API 우리가 홈페이지를 들어가면 만나게되는 팝업창, '하루동안 보지않기' 라는 문구를 많이 봤을 것이다. 우리가 실제로 페이지를 제작할 때 이런 팝업창은 어떻게 만드는걸까? jQuery cookie 라는 api 를 이용하면 쉽게 팝업창 제작이 가능하다고 한다. var getCookie = $.cookie('popup'); console.log(getCookie) if (!getCookie) { $('.popup').show(); } $('.popup input').on('change', function () { $.cookie('popup', '팝업쿠키', { expires: 1 }); $('.popup').hide(); }); 이렇게 작업을 한 쿠키..
Front 2022. 8. 31. 16:47
[CSS] 내가 보려고 만든 각종 요소들 정렬하는 방법

display: flex 에서 정렬할 때 https://studiomeal.com/archives/197 1) justify-content (수평방향) - flex-start (기본값) : 아이템들을 시작점으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위. - flex-end : 아이템들을 끝점으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래. - center : 아이템들을 가운데로 정렬합니다. - space-between : 아이템들의 “사이(between)”에 균일한 간격 - space-around : 아이템들의 “둘레(around)”에 균일한 간격 - space-e..
Front 2022. 7. 13. 17:28
[Git] github와 내 컴퓨터 폴더 연동 하는 방법

**처음에 메인 폴더에 .git 폴더가 있었기 때문에 문제가 있었다. git 연결할 때는 메인 폴더 아래 하위폴더들 각각 생성해주자~!
Front 2022. 7. 5. 10:37
[HTML] 텍스트 태그 (p, strong, em, span, u)

내가 찾아보려고 정리하는 HTML 텍스트 태그 1. p 태그 paragraph (문장) 을 뜻하며 문장 또는 어떤 텍스트를 쓸 때 사용합니다. p 태그는 '블록 요소' 입니다. * 텍스트 : 글, 숫자, 특수문자. 2. span 태그 span 태그는 '인라인 요소' 입니다. (줄바꿈이 되지 않습니다.) 문장 전체 또는 부분을 강조하거나 밑줄을 칠 때 사용할 수 있는 태그 3. strong 태그 중요한 부분을 강조하는 태그 스크린리더(시각장애가 있는 분들이 사용하는 프로그램)가 가능한 중요한 태그 4. em 태그 텍스트를 기울인다. 문장 전체 또는 부분을 강조할 때 사용한다. 5. br 태그 또는 줄바꿈 이외에도 텍스트 굵게, 기울임 태그(현재 아이콘을 넣을 때 사용됨), 텍스트에 밑줄 칠 때 같은 태그들..
Front 2022. 6. 2. 17:46
[CSS] 네이밍 규칙과 선택자 / id, class / div, span

1. 네이밍 규칙 naming methodology : Case Styles / 사람들이 여러 용어들로 정리하고 있어서.. 1) kebab case (케밥 케이스) : wrap-container 대시, 하이픈( - )을 사용한다. 원칙 2) pascal case (파스칼 케이스) : Wrap 첫 문자를 대문자로 표현한다. 3) snake case (스네이크 케이스) : wrap_container 언더바, 언더스코어( _ ) 를 사용한다. 4) camel case (카멜 케이스) : wrapContainer 첫 문자를 제외하고 단어 첫글을 대문자로 표기한다. 5) BEM (Blcok, Element, Modifier) : .header__navigation—navi-text 이름에서 볼 수있는 요소 3가지..
Front 2022. 6. 1. 00:33
이전 Prev 1 ··· 15 16 17 18 Next 다음