아 그거 뭐였지

회원가입 페이지처럼 input 창이 여러개인 페이지에서 사용할수있는 방법이다. 기존에 많이 사용하는방법인 객체로 만들어서 input태그에 name값이나 해당 input이 무엇인지 판별한 값을 준다음 useState로 값을 변경하는 방식을 많이 사용하는듯 하다. 이러한 방식은 코드 관리차원에서는 깔끔하고 좋아보이나 각 input값들이 변경될때마다 재 렌더링 된다는 단점이있다. 해당 방식에서 영감을 얻어서 이를 useRef로 바꿔보도록하자. function Regist() { const [inputs,serInputs] = useState({ userId: "", password: "", email: "", phone: "" });; const {userId, password, email, phone} = ..

전 작업자분이 퇴사해서 인수인계받은 리눅스서버가 하나있는데, 서버가 갑자기 다운되던 일이 발생하였다. 이유를 찾기위해 리눅스서버 접속해서 로그를 확인해보려고 경로를 입력하던중 tab키를 누르면 자동완성이 안되고 'No space left on device' 라는 오류가 나왔다. 저번에도 비슷한경우가있었는데 서버 용량이 꽉차면 이런 오류가 나왔었다. dh -h 명령어로 메모리를 확인해보니 아니나 다를까 Use%가 100%로 용량이 꽉차있었었다. (아래사진은 로그 관리해주고 난 후) 원인은 pm2 로그파일이 쌓이고 쌓여서 파일하나당 몇기가씩 잡아먹고있던거였고, 이로인해 용량이 꽉차서 pm2를 실행시킬 용량이 없어서 다운됐던것이였다. 이를 해결하기위해 pm2-logrotate를 사용하였고 로그는 하루에 한개씩..

서론이 좀 깁니다. 사용법을 바로 보고싶으신분은 스크롤해서 밑으로 내려주시길 바랍니다. 앵귤러를 사용했었을때는 비동기 요청의 상태를 변수로 선언해서 관리하였었다. 예로들면 가져오는데 시간이 걸리는 getBigData라는 함수가 있다고 가정하겠다. isRequstingData라는 flag변수를 하나 두고 해당 변수가 true이면 아직 api요청중이므로 해당 api를 다시 콜해도 실행되지않고 return된다. 이 isRequsting의 true false값으로 현재 데이터를 요청중인지 아니면, 요청이 다 됐는지를 판단해서 아직 요청중이라면 로딩화면을, 요청이 완료되면 데이터를 보여주었었다. isRequestingData = false; async getBigData(){ if(isRequestingData)..

위와같은 구조를가진 A 라는 컴포넌트에 변수 num이 존재하고 해당 num을 자식 컴포넌트인 Component G에서 값을 바꾸기 위해서는 Component A에서 props로 B로 전달하고 그 props를 C로 전달 D로전달.... 하면서 G까지 전달해야 할것이다. 이렇게만 봐서도 끔찍한 구조인데 극단적으로 만약 컴포넌트의 깊이가 100개이상이라면? props를 타이핑하다가 하루가 끝날것이다. 이러한 문제점을 Props Drilling 이라고 하며 이를 해결하기위해 props.children을 사용하거나 전역상태관리 라이브러리인 Recoil, Redux, Mobx 혹은 React 훅 useContext 를 사용하여 해결할수있다. 이중에 하나인 Recoil을 사용해서 상태관리를 해볼것이다. Recoil ..

const auth = { login() { console.log('로그인함수'); }, logout() { console.log('로그아웃 함수'); }, regist(){ console.log('회원가입 함수'); } } auth.login(); auth.logout(); auth.regist(); 인증에 관한것, 게시글에 관한것 등등 역할로 묶어서 안에 관련된 함수들을 작성하면 나중에 사용하기에 용이할것같다. export를 해서 다른 컴포넌트에서도 사용할수있게끔한다면 괜찮을듯싶다.

코드작성중에 if문을 작성한뒤 컴파일하니까 Not all code paths return a value.라는 오류가났다. Not all code paths return a value. : 모든 코드 경로가 값을 반환하지않는다. if문을 사용시 모든케이스에 관해서 조건검사를 하지않았을경우 발생하는 오류이다. if(num===1) return true 이렇게 작성하면 num===1일경우에만 값을 반환하므로 해당 경우가아닌 나머지 경우에서의 처리를 해달라는것이다. if(num===1) return true else return false 이렇게 else문을 넣어주면 해결이된다.

갑자기 제이쿼리? 회사에서 크롤링하는 업무를 맡았는데 (맡았다고 쓰고 떠넘겨졌다고 읽는다.) cheer.io가 제이쿼리 기반이라 어쩔수없이 사용해보았다. 제이쿼리보단 바닐라 자바스크립트가 편한듯하다. $('클래스네임')하면 나온다는데 하나만나온다. 본인은 동일한 클래스이름을 가진 요소가 하나가 아니였고 여러개였기때문에 기대하는 결과값이 아니였다. 이렇게 A라는 클래스명을 가진 div가 5개라면 5개전부를 가져오는게 원하는 결과값이다. 스택오버플로우에서 해답을 찾아서 올린다. //찾고자하는 클래스이름을 each함수로 돌린다. $('클래스명').each(function(){ //해당하는 클래스이름을 가진 html태그가 쭉나온다. $(this).html() }) 본인은 해당 클래스이름을 가진 html태그의 i..

Memoization? 동일한 계산을 반복해야 할때 한번 계산한 결과값을 메모리에 저장해두었다가 계산을 다시하지않고 메모리에서 꺼내서 사용하는것이다. 이를 사용해서 얻는 이점은 동일한 계산을 반복하지않아도 되므로 계산에 사용할 자원을 아낄수있다. useCallBack? 인자로 전달받은 콜백함수를 memoization하여 해당 함수가 변경되었을 경우에만 재 렌더링 한다. 그렇다면 왜 memoization이 필요한가? state를 변경할때마다 컴포넌트는 재 렌더링된다. 이때 컴포넌트가 재 렌더링되면 함수 내부가 다 초기화된다. 함수 내부가 초기화된다는 것은 선언한 변수뿐만 아니라 함수도 초기화된다. 코드로 알아본다면 function App () { const [count,setCount] = useState..