hooney.log

jQuery에 대해서 이어서 알아보자 1. 선택자(Selector)선택자는 HTML 요소를 찾아서 조작할 수 있게 해주는 중요한 부분이다. jQuery에서는 CSS 선택자와 비슷한 방식으로 요소를 선택할 수 있다. 예시 ID 선택자: $("#id") 해당 ID를 가진 요소를 선택.$("#myDiv") // ... 선택 클래스 선택자: $(".class") 해당 클래스를 가진 모든 요소를 선택.$(".myClass") // ... 선택 태그 선택자: $("tag") 해당 태그를 가진 모든 요소를 선택.$("p") // 모든 태그 선택 자식 선택자: $("parent child") 부모 요소 아래에 있는 특정 자식 요소를 선택.$("ul li") // 모든 내부의 요..

1. jQuery란?jQuery는 자바스크립트(JavaScript) 라이브러리 중 하나다. 2006년에 John Resig가 만들었고, "더 적은 코드로 더 많은 것을 하자"는 슬로건 아래, 자바스크립트를 쉽고 간결하게 쓸 수 있게 도와주는 도구다. 2. 핵심 기능들1. DOM 조작 HTML 요소를 선택하고, 변경하거나 추가/삭제하는 작업을 간편하게 할 수 있다. 예:$("#title").text("Hello jQuery!"); 2. 이벤트 처리 클릭, 키보드 입력 같은 이벤트를 쉽게 다룰 수 있다. 예:$("#btn").click(function() { alert("버튼 클릭됨!");}); 3. AJAX 요청 비동기 통신도 간단하게 할 수 있다. 예:$.get("/data", f..

제목 어그로 통했나요? GPT의 작품입니다.  간단하게 next & typescript로 프로젝트 생성 알아보겠습니다.   1. 프로젝트 생성 명령어npx create-next-app@latest --ts next-study  이렇게 하면 최신 버전의 nextjs와 typescript를 이용해서 프로젝트가 생성됩니다.    2. 취향 정하기 위 명령어를 입력하면 몇 가지 질문을 합니다.하나씩 알아보면- Would you like to use ESLint? ... No / YesESLint를 사용할거야? - YES! - Would you like to use Tailwind CSS? ... No / YesTailwind CSS 사용할거야? - YES! - Would you like your code ins..

Expo FCM 푸시알림 구현하기!  설정은 여기서![RN] Expo FCM 푸시알림 구현하기 (1) (tistory.com) { const fcmToken = await messagi" data-og-host="devhooney.tistory.com" data-og-source-url="https://devhooney.tistory.com/315" data-og-url="https://devhooney.tistory.com/315" data-og-image="https://scrap.kakaocdn.net/dn/bMAZ1K/hyWg0oeflY/VmbYNkmYu3YeV5Jo4IJip0/img.jpg?width=500&height=500&face=0_0_500_500,https://scrap.kakaocd..

vite로 React 프로젝트를 생성해보면 알아서 잘 해주기 때문에 너무 간단하다.       npm create vite@latestyarn create vite  둘 중에 편한거로 만들면, vanilla, react 등등이 뜨는데 react를 선택. 그리고 typescript, javascript, remix 할 건지 뜨는데 편한거 선택. 보기중에 +swc 라는 것이 있는데,swc는 Speedy Web Compiler로 Rust로 개발되어 속도가 빠르다.babel의 대체재이다. 선택하면,프로젝트 폴더로 이동하여 npm i, npm run dev를 실행하면  이런 화면을 볼 수 있다. 기존에 사용하던 webpack과의 차이는  웹팩(Webpack)과 바이트(Vite)는 모두 현대적인 자바스크립트 프로젝..

리액트에서 상태 변화는 useState로 진행하는데, 이게 많을 경우 코드가 길어지고, 유지보수 하는데 불편하다. 이를 좀더 편하게 하기 위해 useReduce()를 통해 개선할 수 있다. 먼저, 리액트에서 CRUD를 작업한다고 하면 const Main = () => { const [data, setData] = useState([]); const [name, setName] = useState(""); const onCreate = () => { ...생략 } const onRead = () => { ...생략 } const onUpdate = () => { ...생략 } const onDelete = () => { ...생략 } } 생략된 코드들이 복잡하고 길 가능성이 있다. 이를 개선하면, Main..

1. useMemo() 리액트 Hook 에서 useEffect()와 비슷하게 불필요한 동작을 막기 위해 useMemo()라는 것을 사용한다. 예를 들면, Lifecycle이 시작될 때 배열을 서버로부터 받아와서 useState()로 데이터를 상태를 유지한다고 하면, const [data, setData] = useState([]); const getData = async () => { const response = await fetch("url") .then((res) => res.json()); setData(response); } useEffect(() => { getData(); }, []) 이런 코드를 작성할 수 있다. 여기서 Data 안에 있는 내용을 화면에 보여준다고 하면, const getD..

리액트를 함수형 컴포넌트를 사용하면서 unMount는 어떻게 잡는지 제대로 알지 못했는데, 이번에 공부하면서 알게 되었다. 먼저 Lifecycle이란 화면에 있는 컴포넌트들이 생성될 때 발생하는 과정을 말한다. 이런 과정 제어하는데, Hooks를 사용하면서 클래스형보다 좀 더 편하고 안전하게 사용할 수 있게 됐다. 간단하게 생성 수정 제거 3단계로 나눠서 생성은 화면에 나타나는 것 - Mount 수정은 말 그대로 업데이트(re-render) - Update 제거는 화면에서 사라지는 것 - UnMount 이를 코드로 나타내면 // 생성 & 제거 useEffect(() => { console.log("Mount!"); return () => { console.log("UnMount!"); } }, []); ..

리액트를 사용하면서 DOM에 접근할 땐 useRef()를 사용한다. const nameInput = useRef(); const [state, setState] = useState({ name: "", email: "", password: "", }); const dataSubmit = () => { if (state.name.length < 1) { alert("빈값이면 안돼요."); return nameInput.current.focus(); } } return ( ... 제출 ) nameInput을 console.log로 확인해보면 jQuery나 바닐라JS 사용할 때 보던 화면을 보게 된다. 위에서 만든 nameInput 안에 current가 있고, 그 안에 value, style 등등이 있다. 리..

리액트를 사용하면서 state가 여러개 일 때 각각 해줬었는데, 왜 공통화할 생각을 한번도 안했는지 반성했다. 내가 평소 사용하던 코드 const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); return ( { setName(e.target.value); }} /> ... ) 이렇게 해왔는데, 이러한 코드를 공통화 하면, // const [name, setName] = useState(""); // const [email, setEmail] = useState(""); // const [password, setPassword] = useSt..