hooney.log

JS의 클로저에 대해서 알아보자 ✅ 한 줄 정의클로저는 함수가 자신이 선언될 때의 스코프(변수 환경)를 기억하고, 그 외부 함수가 종료된 이후에도 그 변수들에 접근할 수 있는 함수. 📌 기본 예시 function outer() { let count = 0; // outer의 지역 변수 return function inner() { count++; console.log(count); };}const counter = outer(); // outer는 실행되고 종료됨, 하지만 inner는 리턴됨counter(); // 1counter(); // 2counter(); // 3 outer() 실행 시, count 변수와 함께 inner() 함수가 생성됨. inner()는 co..

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 푸시알림 구현하기!   1. 라이브러리 설치npm i expo-notificationsnpm i @react-native-firebase/messaging   2. FCM 토큰 받기 /** * FCM 토큰을 받습니다. */ const getFcmToken = async () => { const fcmToken = await messaging().getToken(); console.log('[+] FCM Token :: ', fcmToken); }; /** * FCM 메시지를 앱이 foreground 상태일 경우 메시지를 수신합니다. */ const subscribe = messaging().onMessage(async remoteMessage => { console.log('..

웹뷰와 웹브라우저 간 통신 방법 알아보기!        1. 웹뷰 -> 웹- RNconst webviewRef = useRef(null);// React Native에서 데이터를 웹뷰로 보내는 함수const sendDataToWebView = (data) => { console.log(data); const serializedData = JSON.stringify(data); // 객체를 문자열로 직렬화 webviewRef.current.postMessage(serializedData);};  - Web// 웹뷰에서 React Native로부터 데이터를 받는 함수window.addEventListener("message", (event) => { const receivedData = JSON.pa..

1. eas-cli 설치npm install -g eas-cli  2. expo 가입https://expo.dev/signup Sign Up — ExpoCreate an account for Expo here.expo.dev  3. eas 로그인npx eas login  4. eas 빌드npx eas build:configure  5. eas.json 수정- build 부분만 수정함 "build": { "development": { "android": { "buildType": "apk" }, "ios": { "simulator": true } }, "production": {} },  6. android 빌드eas buil..

리액트에서 상태 변화는 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!"); } }, []); ..