일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 내일배움캠프 최종 프로젝트
- js
- 내일배움캠프 프로젝트
- 타입스크립트 리액트
- 프로그래머스
- tanstack query
- 파이썬 for
- React Hooks
- useState
- 파이썬 replace
- 리액트
- 코딩테스트
- JavaScript
- 리액트 팀 프로젝트
- 리액트 프로젝트
- 파이썬 for in
- 파이썬 list
- typeScript
- 파이썬 반복문
- 타입스크립트 props
- 자바스크립트
- REACT
- 내배캠 프로젝트
- 타입스크립트
- 한글 공부 사이트
- 파이썬 slice
- Next 팀 프로젝트
- 파이썬 enumerate
- 내일배움캠프
- 리액트 훅
- Today
- Total
목록전체 글 (210)
aotoyae
💡 리액트 훅들에 알아보자 💡 useEffect : 렌더링 시 특정한 작업을 해야할 때 설정하는 훅- 컴포넌트가 화면에 보여졌을 때- 컴포넌트가 화면에서 사라졌을 때(return)import "./App.css";import { useEffect } from "react";function App() { useEffect(() => { console.log("hello"); {/*콘솔에 hello 출력*/} }); return useEffect;}export default App; 화면이 렌더링될 때 콘솔에 값이 출력된다. import "./App.css";import { useEffect, useState } from "react";function App() { const [value,..
💡 useState 의 기존 업데이트와 함수형 업데이트의 차이를 알아보자 💡 기존 업데이트import "./App.css";import { useState } from "react";function App() { const [number, setNumber] = useState(0); return ( Number State : {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }} > + );}export default App..
💡 태그별로 기본적으로 적용되는 css 초기화 reset.css 파일을 만들고, 적용할 파일에 import 한다. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th,..
💅 스타일드 컴포넌트를 사용해보자먼저 styled components 플러그인을 설치하고,터미널에 npm add styled-components 를 입력한다.그럼 세팅 끝! import "./App.css";import styled from "styled-components"; {/*style 를 임포트 해온다.*/}const StContainer = styled.div` {/*div 에 스타일 적용*/} display: flex;`;const StBodx = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; {/*props 를 받아올 수 있음*/} margin: 10px;`;co..
📝 문제 두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환하는 함수, solution을 완성해 보세요. 배열의 맨 앞에 최대공약수, 그다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 두 수 3, 12의 최대공약수는 3, 최소공배수는 12이므로 solution(3, 12)는 [3, 12]를 반환해야 합니다. 🫠 나의 풀이 function solution(n, m) { const gcd = (a, b) => (a % b === 0 ? b : gcd(b, a % b)); const lcm = (a, b) => (a * b) / gcd(a, b); return [gcd(n, m), lcm(n, m)]; } 유클리드 호제법 n > m 일 때, n 을 m 으로 나눈 나머지를 r 이라 한다. gcd(n, ..
[JS] 데이터의 불변성 : 원시 데이터, 참조형 데이터 💡 데이터의 불변성에 대해 알아보자 원시 데이터 : 숫자, 문자, 불리언.. 원시 데이터들은 같은 값을 저장하면 그 값의 같은 주소를 적어둔다. number1 = @111 ➡️ @111 = 1 number2 = @111 ➡️ @111 = 1 참 aotoyae.tistory.com 데이터 불변성 때문에 생기는 문제..! import { useState } from "react"; function App() { const [obj, setObj] = useState({ name: "미나토", age: 20, }); const reName = () => { obj.name = "요리"; setObj(obj); {/*setObj 에 새 값을 할당*/} c..
💡 데이터의 불변성에 대해 알아보자 원시 데이터 : 숫자, 문자, 불리언.. 원시 데이터들은 같은 값을 저장하면 그 값의 같은 주소를 적어둔다. number1 = @111 ➡️ @111 = 1 number2 = @111 ➡️ @111 = 1 참조형 데이터 : 배열, 객체, 함수.. 참조형 데이터들은 같은 값을 저장해도 각각의 다른 주소를 적어둔다. 그리고 그 주소들은 같은 값을 바라보는 같은 주소에 다시 연결된다. obj1 = @222 ➡️ @222 = @333 ➡️ @333 = name: 1 obj2 = @777 ➡️ @777 = @333 ➡️ @333 = name: 1 💡 데이터를 수정해보자 원시 데이터는 값이 바뀌면 바로 연결된 주소를 바꾼다. number1 = @444 ➡️ @444 = 2 num..
state 잘 쓰는 그날까지.. 🥲 💡 카운트를 세보자 import { useState } from "react"; function App() { const [count, setCount] = useState(0); const countFunction = () => { setCount(count + 1); }; return ( {count} Click ); } export default App; setCount 의 초기값을 0 으로 설정하고, 버튼 클릭 시 count 에 + 1 한 값을 set 해준다. ❗️리액트는 state 가 바뀌어야 화면을 다시 렌더링 한다. count 가 아니라 setCount 를 바꿔야 한다!!! count 아무리 바꿔도 안되고 🎀 setCount 🎀를 바꿔야 한다!!! 💡 이름..