아싸지만 1일1글 하고싶어

목차 영상 캡처 프로그램 설치 없이 영상 캡처하는 법을 포스팅하려 한다! 키보드 좌측 하단의 윈도키와 G를 눌러주자 이렇게 창이 뜬다. 좌측 상단의 캡처 부분에서 동그라미 버튼(녹화버튼)을 눌러 녹화를 시작하자. 바로 밑에 어떤 프로그램이 캡처되는지 적혀있다. 여기서는 지금 브라우저 Brave의 글쓰기 탭을 촬영한다는 뜻이다. 버튼을 누르면 오른쪽 위에 캡처 도구가 뜬다. 파란색 버튼을 누르면 정지가 되면서 해당 캡처가 저장된다. 저장된 캡처를 보는 방법은 다시 Window + G를 눌러 창을 띄운 뒤, 좌측 상단의 캡 처창에서 모든 캡처 표시 버튼을 누르면 이렇게 창이 뜨는데 좌측 상단에 폴더 버튼을 누르면 저장 폴더가 띄어진다. 영상 자르기 영상을 캡처하면 앞뒤로 1~2초 자르고 싶어 질 때가 생기는..

목차 주말에는 Redux를 배워서 올려버릴꺼야아아아~ position position은 말 그대로 위치 설정값으로 콘텐츠의 위치를 설정할 수 있다. 오늘의 설명을 도와줄 박스 2개이다. *{ padding: 0; margin: 0; } div{ display: inline-block; width: 200px; height: 200px; } .box1{ background: #ffe3fe; position: relative; } .box2{ background: #b4aee8; } static position 기본값으로써, 문서 흐름순으로 배치되며, 추가 위치 설정이 안 된다. *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; } .box1{ b..

목차 어라... border-radius를 안 했었네...? 진짜로..? 내가 제일 자주 쓰는 건데 border-radius border-radius는 직역하면 경계선-반지름이다. 경계선에 반지름을 추가한다는 뜻으로써 쉽게 얘기하자면 영역 모서리에 반지름을 추가한다는 뜻이다. 즉 모서리가 동글동글해진다는 것! 코드 div{ width: 200px; height: 200px; background: #ffe3fe; } 일단 기본형인 사각형을 만들었다. 값 1개 이제 여기서 div{ border-radius: 30px; width: 200px; height: 200px; background: #ffe3fe; } 이렇게 border-radius 값을 하나 지정하면, 모서리 4개가 다 해당 값으로 변환된다. 값 ..

알고리즘 추천에 떠서 보게 되었는데, 옛날에 이 내용을 본 적 있다. 이것을 목표로 해야지!!라고 생각하고 한 건 아니고, 그저 사람이 좋아서 그런 거지만 그 좋아하는 사람이 떠났을 때 내 행동에는 이러한 가치가 남아있어! 라고 기운내기 위해 좋은 사실이다.

목차 spread spread는 es6부터 추가된 배열이나 오브젝트를 말그대로 나열해주는 도구이다. const array = ["b ", "c ", "d "]; 예로들어 b, c, d를 가진 배열 array이 있다고 하자. array 값들을 가진 array2를 하나 더 만들려고 할때, 나열을 모른다면 이렇게 해야 할 것이다. const array2 = ["a ", array[0], array[1], array[2], "e "]; 하지만 spread를 안다면 이렇게 표현 가능하다. const array2 = ["a ",...array, "e "]; 코드 export default function App () { const array = ["b ", "c ", "d "]; const array2 = ["a ..

목차 어우.. 저녁을 너무 많이먹어버렸따... 삼항 연산자 삼항 연산자는 if else를 다르게 표현한 코드이다. 으음.. 예로 들어 if( toggle == True) console.log("True!"); else console.log("False!"); toggle이 참이면 True를 출력하고 거짓이면 False를 출력하는 이 if문은 (toggle == true) ? ( console.log("True!"); ) : ( console.log("False!"); ) 이렇게 삼항 연산자로 변환 가능하다. 코드 import {useState} from 'react'; export default function App () { const [toggle, setToggle] = useState(false)..

목차 useMemo useMemo는 랜더링 성능을 최적화하기 위한 hook이다. React는 Virtual Dom이란 가상의 객체를 랜더링 하고 이전 랜더링 결과와 비교 후,달라진 곳만 랜더링 한다. React란 React의 장점!! 새로운 언어를 쓸 때에는 그 언어의 장점을 인지하며 내가 이렇게 근사한 언어를 구사한다~라는 느낌으로 프로젝트를 하면 뭔가 기분이 좋다. 그래서 적어보는 리엑트의 장점!! 효 sirong.tistory.com 이때 memo는 memo 내 설정값이(deps) 변하지 않는 이상 리랜더링을 할 때 달라진 부분이 있는지 확인하지 않고 그대로 사용하게 만들어 리랜더링을 최적화시킨다. 코드 // App.js import {useState} from 'react'; import CatI..

목차 어우.. 긴장이 풀려서 그런가 오늘은 진짜 몸도 사고도 안 따라줘서 잠시 useReducer 이해를 미래의 나에게 맡겼었다. 그리고 그 미래의 나가 지금의 나다 후.. 그래도 컨디션 좀 회복하니깐 이해가 쉽다. useReducer 쉽게 말하면 useState 집합이다. state 개수가 많아질 경우, 이 모든 걸 하나하나 useState로 정의하고, 반영하기에는 코드가 번잡해진다. 이때 useReducer를 쓰면 깔끔한 정리가 가능하다. 또한 컴포넌트 안에서 제한되는 useState와 달리 useReducer은 컴포넌트 밖이나, 다른 파일에서 독립해서 정의 가능하다. 코드 import React, { useReducer } from 'react' const resetUserInfo = { id: '..