전체 글
-
객체지향 Class 문법 공부하기 : 자바스크립트 jsJavascript/JS 문법 2023. 2. 18. 18:41
📌 Object 를 여러개 많이 만들어야 할때 class 를 이용하면 빠르게 생성할 수 있다. //아래가 객체지향 class 함수이다. function Circle (r) { this.지름 = 2*3.14*r this.넓이 = r*r*3.14 } const circle1 = new Circle(4) const circle2 = new Circle(8) console.log(circle1) //Circle { '지름': 25.12, '넓이': 50.24 } console.log(circle2) //Circle { '지름': 50.24, '넓이': 200.96 } //ES6 부터는 아래와 같이 만든다 class Square { constructor(n){ this.둘레 = 4 * n this.넓이 = n *..
-
타입스크립트로 리액트 시작하기 + 기본 문법React/React+TypeScript 2023. 2. 18. 17:31
📌 리액트로 타입스크립트 시작하기 npx create-react-app 내 앱 이름 --template typescript npm i --save-dev @types/styled-components npm i styled-components 📌 Typescript 사용법 1. node 설치 후 터미널에 npm install -g typescript 2. tsconfig.json 파일을 만들고 { "compilerOptions" : { "target": "es6", "module": "commonjs", "lib": [ "es6" ] } } 를 붙여넣는다 3. ts 파일을 js 파일로 변환하기 위해 tsc -w 라는 명령어를 터미널에 쳐놓는다. // 1. 변수의 타입을 설정할 수 있다. let name: ..
-
useEffect 에서 return 문을 왜 쓰이는걸까?React/React 2023. 2. 14. 17:40
✔️ useEffect 는 html 이 모두 렌더링 된 후 실행된다. ✔️ useEffect는 기본적으로 매 렌더링마다 실행되며. 만약에 dependency가 없다면 컴포넌트가 마운트되고, 업데이트될때마다 useEffect()가 실행된다. 따라서 두번째 인자로 [ ] 를 적어주면 해당 부분이 랜더링 될때만 useEffect 가 실행된다. useEffect(() => { document.addEventListener("mouseleave", handle); return ()=> document.removeEventListener("mouseleave", handle) }, []); 📌 그렇다면 useEffect 속 return 문은 무엇일까? ❗️useEffect에서 return 의 의미는 useEffec..
-
window.getEventListeners 를 통해 현재 걸려 있는 이벤트 확인하기Javascript/웹브라우저 다루기 2023. 2. 14. 17:13
📌 : PreventLeave 를 공부하면서 이벤트가 추가되었는지 삭제되었는지 확인할 필요가 생겼다. 처음에는 아래 코드처럼 코드 내에서 window.getEventListeners(window) 를 통해 확인하려고 했다. 그러나 해당 명령은 (크롬의 경우) 콘솔창에서만 작동한다는 것을 알았다. const usePreventLeave = () => { const listener = (event) => { event.preventDefault(); event.returnValue = ""; }; const enablePrevent = () => { window.addEventListener("beforeunload", listener); console.log("protect"); // window.getE..
-
Javascript 화살표 함수 4가지 표현 방식Javascript/JS 문법 2023. 2. 13. 20:45
// 1. 로직을 중괄호로 감싸주면 "return"을 써주며 주로 로직이 여러줄일때 사용한다. const add = (x, y) => { return x + y; } // 2. 화살표 함수 내부에 return문 밖에 없는 경우에는 return문 생략가능하며 X+Y가 리턴된다. const addV2 = (x, y) => x + y // 2번과 동일하게 작동하며 로직을 소괄호로 묶을 수 있다. const addV3 = (x, y) => (x + y) // 4. 매개변수가 한 개라면 매개변수를 소괄호로 묶지 않아도 된다. const flip = x => !x
-
React 조건에 따라 component 렌더링 시 가독성 좋은 두 가지 방법React/React 2023. 2. 7. 23:54
1. && 연산자로 if 문 대신하기 왼쪽 조건식이 true이면 오른쪽 jsx가 렌더링 됩니다. false이면 오른쪽 jsx가 렌더링되지 않습니다. function Component() { const [mode , setMode] = useState("list") return ( { list === list && } { Edit === Edit && } ) } 2. {{}}[ ] 문법 이용하기 [mode] 의 값에 따라 해당 jsx가 렌더링됩니다. function Component() { const [mode , setMode] = useState("list") return ( { { list : , edit : , }[mode] } ) }
-
git revert : 잘못 merge 한 pull request 를 분리하여 다시 커밋한다.git & Github 2023. 2. 4. 18:04
😥 협업을 하다 문제가 생겼다. 📌 GitHub 에서 dev branch 로 PR을 열고 merge 를 했어야 했는데....... main 에 해버렸다. 🔥 해결방법 : GitHub revert 기능을 사용하였다. 1. 내가 Merge 해버린 PR로 들어가면 Revert 라는 버튼이 있다. 2. Revert 버튼을 누르면 PR이 다시 열리는데... 이 PR은 내가 Merge 한 파일들을 분리한 후 브랜치를 커밋하겠다는 것이다. 즉, 정리하면 Merge 하기 전으로 커밋을 되돌리는 것이 아니라 (해당 기능은 reset 이라고 한다.) Merge한 파일을 분리하여 커밋하는 방식이다. (즉 내가 Merge 했던 커밋기록이 사라지는게 아니다.) 3. 어찌 되었건 Confirm merge 버튼을 누르게 되면 Me..
-
onClick으로 전달되는 함수형태에 따른 차이React/React 2023. 2. 1. 02:34
📌 첫번째 방식이 show 라는 함수를 재사용할 수 있기 때문에 좋은 방식이다. 📌 두번째 방식은 button 이 렌더링 되면서 show라는 함수가 실행(show())되어버린다. 📌 세번째 방식은 ()=>{} 익명함수에 넣어쓰는 방식인데 {} 중괄호 안에 코드가 한두줄일때 가볍게 넣는다. 그러나 jsx안에 넣는 방식은 코드의 재사용이 힘들어지기 때문에 그리 추천하지 않는다. 🔥 결론 첫번째 방식으로 하자! const Buttons = () => { let num = 0 const show = () => { console.log(`show ${num}`); ++num }; return // 1. 첫번째 방식 show //클릭시 num 이 1씩 증가하면서 출력된다 // show 0 // show 1 // s..