분류 전체보기
-
[React] 이미지 넣는 법 세 가지📗TIL/React 2022. 10. 20. 00:15
index.css 파일에 넣기 .main-bg{ height: 300px; background-image: url(./img/bg.png); background-size: cover; background-position: center; } 일반적인 css background-image 넣는 것처럼 넣어주되 맨 앞에 ./를 붙여준다. html코드에 바로 넣기 import bg from "./img/bg.png"; function App() { return ( )} 컴포넌트 바깥에 이미지 경로를 import시켜준 뒤, 태그 안에 변수 형태로 넣어주면 된다. 단점) 이미지를 사용할 때마다 import 시켜줘야돼서 비효율적이다. public폴더 안에 있는 이미지 사용하기 /이미지경로 사용해주면 된다. (css파..
-
[React] 모달창 만들기📗TIL/React 2022. 10. 12. 23:30
게시글 제목 클릭 시 모달창 보이게 만들기 function App() { let [modal, setModal] = useState(false); //모달창의 처음 상태 return ( { setModal(true) }}>내용 //클릭하면 state가 true로 바뀌어서 화면에 보임 {modal == true ? : null} //if문을 사용할 수 없어서 삼항조건연산자 사용 ); } const Modal = () => { return( 제목 날짜 상세내용 ) } 게시글 제목 클릭 시 모달창 보이게 만들기 if문을 태그 안에 바로 넣기 { if (modal == true) {setModal(false)} else {setModal(true)} }}>내용 함수를 따로 선언한 뒤 함수 이름만 넣어주기 con..
-
[React] 리액트 컴포넌트 문법 사용하기📗TIL/React 2022. 10. 12. 19:57
React 컴포넌트 문법 리액트에서는 html이 지저분해져서 가독성이 떨어지는것을 방지하기 위해 반복되는 코드나 내용이 자주 변경되는 것을 똑 떼서 컴포넌트로 만들 수 있다. (다른 페이지를 만들 때, 협업을 위해 분리작업할 때 등에도 쓰임) function App() { return ( //혹은 그냥 ); } const Modal = () => { return( 제목 날짜 상세내용 ) } (저 App()도 하나의 컴포넌트이다.) 함수를 하나 만들어두고 return안에 html코드 작성, 다른 컴포넌트에서 함수의 이름을 html태그처럼 사용할 수 있다. 주의사항 const Modal = () => { return( ) } //안된다 const Modal = () => { return( ) } 보통 이름 ..
-
[React] 배열의 내용을 수정해도 state가 변경되지 않는 이유는? - state 변경함수 동작 원리📕Think 2022. 10. 11. 00:50
let [title, titleCng] = useState(["리액트","블로그 만들기","리액트 공부"]); let [like, likecount] = useState(0); return ( {logo} { let copy = title; copy[0] = 'React'; titleCng(copy); } }>글수정 {title[0]} { likecount(like+1) } }>👍 { like } useState를 사용하면 html도 같이 바뀐다고 배웠다. 근데 안 바뀐다. 왜일까? state 변경 함수 동작 원리 state 변경함수를 쓸 때 기존state === 신규state 먼저 검사를 해서 같으면 변경이 되지 않는다. copy 랑 title이 같아서 변경되지 않음. 하지만 우린 copy[0] = '..
-
JS기초 12 - 제이쿼리 기초 애니메이션📗TIL/JavaScript 2022. 10. 2. 16:11
click $(document).ready(function () { // $('.box').mouseenter(function () { // $(this).animate( // { // left: '700px', // top: '400px', // width: '100px', // height: '100px', // }, // 2000 // ); // }); $('.box').click(function () { $(this).addClass('change'); }); // document.getElementById('아이디명').classList.add('클래스명', '클래스명') : 클래스명 추가 여러개가능 // document.getElementById('아이디명').classList.replace(..
-
JS기초 10 - DOM 접근해서 배경색 바꾸기, 리스트 만들기 기초📗TIL/JavaScript 2022. 10. 2. 14:46
DOM 접근해서 배경색 바꾸기 아이디로 부를때 document.getElementById('id') document.querySelector('#id') 클래스로 부를때[i]몇번째 인지 document.getElementsByClassName('class')[n] document.querySelectorAll('.class')[n] 태그명으로 부를때 document.getElementsByTagName()[n] document.querySelectorAll('div')[n] //버튼 클릭할 때마다 바뀌는 배경색 만들기 var colors = ['tomato','pink', 'powderblue', 'yellow','aquamarine', 'ivory'] //바꿀 색상이름 저장 var i = 0; func..
-
JS기초 9 - 배열 요소 응용하기(추가, 삭제, 자르기 등)📗TIL/JavaScript 2022. 10. 2. 01:50
contact() 배열과 배열을 연결(배열 자체 변화x) push() 배열 끝에 요소 추가, 배열의 크기 리턴 unshift() 배열 앞에 요소 추가, 배열의 크기 리턴 join() 배열을 출력할 때 요소 사이에 괄호 안의 것을 넣어줌 pop() 배열의 첫 번째 요소를 삭제, 삭제된 요소 리턴 shift() 배열의 마지막 요소를 삭제, 삭제된 요소 리턴 slice(start, end) 원하는 위치의 요소를 삭제 or 추가해서 리턴(배열 변화x) reverse() 배열 요소 순서를 반전 splice(start, deleteCount, el,el,el...) 원하는 위치의 요소를 삭제 or 추가 /*concat() : 배열을 연결할 때 사용*/ let nums =[1,2,3,4,5]; let char = [..