[React] useEffect
2023. 1. 27. 20:38
프로그래밍/React
useEffect useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말해줌 componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps의 역할을 수행 useEffect 예시1 const App = () => { const sayHello = () => console.log("hello"); useEffect(() => { sayHello(); }); const [number, setNumber] = useState(0); const [anotherNumber, setAnotherNumber] = useState(0); return ( Hello set..
[React] React Hooks (3) - useTabs
2023. 1. 26. 20:55
프로그래밍/React
useTabs 버튼에 따라 노출되는 내용을 변화시킬 수 있는 custom hook useTabs 사용 예시 import React, { useState } from "react"; import ReactDOM from "react-dom"; const content = [ { tab: "Secton 1", content: "I'm the content of the Section 1" }, { tab: "Secton 2", content: "I'm the content of the Section 2" }, ]; const useTabs = (initialTab, allTabs) => { if(!allTabs || Array.isArray(allTabs)) { return; } const [currentIn..
[React] React Hooks (2) - useInput
2023. 1. 25. 20:21
프로그래밍/React
useInput useInput은 기본적으로 input을 업데이트함 useInput 사용 예시 import React, { useState } from "react"; import ReactDOM from "react-dom"; const useInput = initialValue => { const [value, setValue] = useState(initialValue); const onChange = event => { const { target: { value } } = event; setValue(value); }; return { value, onChange }; }; const App = () => { const name = useInput("Mr."); return ( Hello ); }..
[React] React Hooks (1) - useState
2023. 1. 20. 20:10
프로그래밍/React
Hooks를 사용하여 증가, 감소 버튼 만들기 hooks를 사용한 예시(함수형 컴포넌트) import React, { useState } from "react"; import ReactDOM from "react-dom"; const App = () => { const [item, setItem] = useState(1); const incrementItem = () => setItem(item + 1); const decrementItem = () => setItem(item - 1); return ( Hooks test {item} Press the button Increment Decrement ); }; const rootElement = document.getElementById("root");..
[React] Hooks란?
2023. 1. 19. 20:57
프로그래밍/React
Hooks React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리 hook은 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있기에 클래스형 컴포넌트에서만 가능하던 상태관리를 더 손쉽게 할 수 있도록 함 결론적으로 functional component에서 state를 가질 수 있게 해줌 class component state 예시 class App extends Component { state = { count: 0 }; modify = n => { this.setState({ count: n }); }; render() { const { count } = this.state; return ( {count} ..
React Native와 Flutter 비교
2023. 1. 18. 20:04
프로그래밍/React Native
React Native와 Flutter 비교 대표적인 크로스 플랫폼 개발 프레임 워크인 React Native와 Flutter를 비교해보자 React Native vs Flutter 언어 React Native는 React를 사용. React는 JavaScript기반의 React문법을 사용함 Flutter는 JS를 대신하기 위하여 구글에서 개발한 Dart라는 언어를 사용 React Native Flutter JavaScript 기반 React 문법 Dart 개발 Tool React Native와 Flutter 모두 Android Studio를 사용하여 개발이 가능 React Native는 XCode로도 사용이 가능하지만, Flutter는 구글에서 만들었기 때문에 그런지 XCode는 지원하지 않음 그외 다..
[Windows] taskkill error 프로세스를 종료할 수 없습니다 해결
2023. 1. 17. 20:56
OS/Windows
포트를 죽이려고 할때 액세스가 거부되어 종료 할 수 없는 경우 해결 CMD 실행 시 관리자 모드로 실행하기 관리자 모드로 실행했는데도 위와 같은 오류 메시지가 뜬다면 안전모드로 부팅하면 됨 사실 이것 때문에 블로그를 작성하게 됐음 안전모드로 부팅하는 방법 1. windows키 + R 로 실행창 열기 2. msconfig 입력 3. 부팅 탭 클릭 > 부팅 옵션의 안전 부팅 체크 > 확인 안전모드로 부팅한 후 다시 안전 부팅 옵션을 없애주고 부팅해주기 부팅 후 포트 확인을 해보면 포트가 죽어있거나 pid가 바뀌어 있을 것임 (포트 확인 방법) 포트가 죽지 않고 바뀐 pid가 있다면 taskkill /f /pid pid번호 명령을 통해 포트를 죽일 수 있음 포트 확인 방법 또는 taskkill 방법이 궁금하다..
[JavaScript] 자바스크립트 !! 연산자
2023. 1. 16. 20:02
프로그래밍/JavaScript
!! 연산자 다른 타입의 데이터를 boolean 타입으로 명시적으로 형 변환하기 위해 사용 조건문 예시 if("test")// true if(!"test")// false if(!!"test")// true if("")// false if(!"")// true if(!!"")// false if(null)// false if(!null)// true if(!!null)// false if(true)// true if(!true)// false if(!!true)// true 자바스크립트는 조건문에서 비교 시 자동으로 boolean 타입으로 변환을 해주기에 예시에서 보듯 !! 연산자가 조건문에서는 큰 의미가 없음
[JavaScript] JSON.stringify()
2023. 1. 13. 20:55
프로그래밍/JavaScript
JSON.stringify() JavaScript 값이나 객체를 JSON 문자열로 변환함 console.log(JSON.stringify({ x: 5, y: 6 })); // expected output: "{"x":5,"y":6}" console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)])); // expected output: "[3,"false",false]" console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] })); // expected output: "{"x":[10,null,null,null]}" console.log(J..
[JavaScript] JSON.parse()
2023. 1. 12. 20:42
프로그래밍/JavaScript
JSON.parse() JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성함 const json = '{"result":true, "count":42}'; const obj = JSON.parse(json); console.log(obj.count); // expected output: 42 console.log(obj.result); // expected output: true 매개변수 JSON으로 변환할 문자열 반환 값 JSON 문자열에 대응하는 Object 예제 JSON.parse('{}'); // {} JSON.parse('true'); // true JSON.parse('"foo"'); // "foo" JSON.parse('[1, 5, "false"]'); /..