🌿Language 5

✏️ [React] setState

setState는 비동기입니다. 그래서 기존의 상태 값에 새로운 값을 추가하기 위해서는 다음과 같은 코드로 작성해야합니다. 틀린 예시 const [chat, setChat] = useState([]); socket.on('message', ({name, message}) => { setChat([...chat, {message, user}]) }) 위와 같이 작성할 경우, chat이 누적이 되지 않고 단순히 값만 변경되는 현상 발생 올바른 예시 const [chat, setChat] = useState([]); socket.on('message', ({name, message}) => { setChat(prev => [...prev, {name, message}]) })

Language/JavaScript 2021.10.19

✏️ [React] useEffect

처음으로 react를 사용하면서 삽질 중인데요, useEffect으로 인해서 문제가 생긴 경험을 공유하려고 합니다. useEffect란? useEffect는 기본적으로 몇 가지 조건에 의해 작동하게 됩니다. 1. 페이지가 처음 렌더링 되고 난 후, useEffect는 무조건 한 번 실행됩니다. 2. useEffect에 배열로 지정한 useState의 값이 변경되면 실행되게 됩니다. useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트를 해주는 함수입니다. useEffect는 콜백 함수를 부르게 되며, 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 또는 여러 개의 함수들을 동작시킬 수 있습니다. useEffect를 사용하는 여러 가지 방법 1. use..

Language/JavaScript 2021.10.19

✏️ vscode에서 python linter 활성화하기

최근에 node.js로 프로젝트를 진행하면서 prettier, ESlint의 간편함을 느꼈는데요~! 오랜만에 파이썬으로 개발을 진행하다가 vscode에서 파이참처럼 linter를 켤 수 없나? 싶어서 찾아봤습니다. 파이참의 경우 기본 설정에 linter가 존재해서 그런가 PEP-8을 잘 지키게끔 도와주는데용 vscode는 따로 설정을 해야하더라구용 설정하기 ctrl+shift+p를 누르면 설정 검색창이 나옵니다. 그럼 여기다가 python select linter를 눌러주시면 아래와 같이 뜹니다. 저걸 누르면 아래와 같이 뜨는데요 이 중에 원하시는 거 고르시면 됩니다. 참고로 pycodestyle가 PEP8에 명시된 스타일 가이드를 기반으로 파이썬 코드를 체크해서 알려준다구 합니다! 실제로 이 라이브러리..

Language/Python 2021.09.20

✏️ Number()와 parseInt() 차이

javascript에서 String을 Number type으로 바꾸는 방법에는 Number(), parseInt()가 있습니다. 하지만 두 가지 방법은 살짝 다릅니다. 다른 점에 대해 알아보러 가시죠~! parseInt()는 문자를 만나면 해당 문자 전까지만 Number type으로 변환하고, Number()는 전체 문자를 숫자로 변환합니다. parseInt()는 두 개의 인자를 받을 수 있습니다. 두 개의 인자를 받을 경우 두 번째 인자는 진수를 나타내게 됩니다. 즉, 두번째 인자를 밑으로 십진수로 변환한 Number type 값을 반환하게 됩니다. 말로 설명하면 어려운데, 예시를 보면 바로 이해가 됩니다요~! 이와 달리, Number()의 경우 인자를 하나만 받기 때문에, 두 개를 넣어도 parseI..

Language/JavaScript 2021.08.21