웹 프로그래밍 (17) 썸네일형 리스트형 [React] useRef는 unmount 되어도 유지될까? 최근에 캐시된 이미지를 사용하기 위해 useRef에 캐시되어야 할 id를 저장하고 캐시여부를 판단해야 하는 상황이 있었습니다..! 관련해서 오늘은 useRef와 관련된 사실을 알아보겠습니다! 먼저 내가 원했던 동작은 useRef를 선언한 컴포넌트가 unmount 되어도 그 값이 유지되어서 다음에 컴포넌트가 mount되어도 동일한 useRef 값을 사용하고 싶었습니다! 다음 코드를 살펴보자 //App.js function App() { const [isOpen, setIsOpen] = useState(false); return ( { setIsOpen(!isOpen); }} > click {isOpen && } ); } 먼저 App.js에 state를 바꾸는 버튼을 하나 만들어주고, 버튼이 클릭될때마다 U.. [React] useState? useRef? (feat.단축키 추가) 최근에 업무를 진행할 때 리액트로 만들어진 웹사이트에 전역 단축키 이벤트를 추가해야하는 경우가 있었습니다. 이때 겪었던 문제 상황과 해결 방법에 대해 간단하게 소개하고 관련 내용을 추가 학습하여 정리해보았습니다. 상황을 자세히 설명하자면 리액트로 만들어진 프로젝트에 전역 단축키 기능을 추가해야하고, 로직을 추가할 때 컴포넌트 안의 업데이트 된 state 값을 사용해야하는 상황이었습니다. 상황을 간단한 코드로 재현해보면 다음과 같습니다.(코드는 App.js에 중요한 부분만 간단하게 요약하였습니다.) //App.js function App() { const [count, setCount] = useState(0); useEffect(() => { //컴포넌트가 렌더링 될 때 전역 단축키 이벤트를 설정한다. .. [SQL] 쿼리 튜닝이란?(+기본 개념) 최근 쿼리 튜닝을 통해 성능을 향상시키는 것에 흥미가 생겨 오랜만에 기록을 남깁니다..! *MsSQL관련 내용을 기반으로 정리하였으나 최대한 MySQL과 중복되는 부분만을 공유합니다! *따라서 MsSQL의 내용이 섞일 수 있습니다..! 그보다 쿼리튜닝이 뭐지? 관계형 데이터베이스에서의 쿼리튜닝이란 SQL문을 최적화해 원하는 결과를 좀 더 빠르게 하는것을 뜻한다. 그럼 쿼리 튜닝을 왜 해야 할까? 빠른 데이터 조회를 통해 사용자가 더 빠르게 원하는 결과를 받을 수 있게 된다! 그러면 사용자 경험 즉, UX가 향상되어 웹사이트에 더 오래 머무르게 되고 이는 수익으로 직결 될수도 있다! 그렇다면 쿼리 튜닝을 어떻게 해야할까? 쿼리튜닝을 하기 전에 알아두어야 할것들이 몇가지 있다. 오늘은 짧게 용어와 쿼리 튜닝.. [Docker] Docker란? 오늘은 Docker에 대해 알아보겠습니다. 보통 웹개발을 하게 되면 아래와 같이 OS 위에 웹 서버,데이터베이스 등을 올려놓는 방식으로 개발 환경을 설정한다. 다들 개발 환경 설정할 때 삽질 했던 경험이 많지 않나요? 왜 안 되는지 모르겠고, 또 왜 되는지 모르는!! 생각만 해도 머리가 지끈 거리네요! 또 개발 환경 설정을 성공했다고 해도 다음에 비슷한 개발 환경이 필요하게 되면? 보통은 삽질을 기억하지 못하고 다시 삽질을 반복하게 되죠.. 악순환의 연속..! 이럴때 다음과 같은 생각이 떠오른다. 전문가가 나 대신 해줬으면 좋겠다.. 하지만 우리집에 와서 키보드를 두드려 주지 않는 이상 불가능 하다.. 또 아래와 같이 나의 앱과 웹 서버, 데이테베이스를 각각 다른 OS에서 설치해 관리하고 싶다! 하지만 .. [Express] pm2로 로컬에서 배포하기 express를 사용해 서버를 돌릴때 나는 nodemon을 자주 이용했었다. 하지만 pm2라는 것을 알고 난 뒤 이것만 쓰게 되었다!! 그렇다면 pm2는 뭘까? Process Manager의 약어로 Node.js의 프로세스를 관리해주는 역할을 하는 녀석이다. 쉽게 말해 프로세스들이 계속 실행될 수 있는 환경을 제공해준다!! 또한 예외가 발생해 스레드가 죽었을때 어플리케이션도 같이 죽는 것을 방지해준다. 프로세스 매니저라는 이름에 맞게 관리자의 역할을 톡톡히 한다. 지금부터 pm2를 이용해 로컬에서 ncloud로 배포하는 과정을 설명할 것이다. https://pm2.keymetrics.io/docs/usage/deployment/ PM2 - Deployment Advanced process manager .. [Express, nodejs] SPA에서 socket.io로 채팅 구현하기 프로젝트를 진행하면서 SPA로 웹페이지를 만들고 그 안에 채팅기능을 넣는 경험을 해보았다. 저번 Websocket vs socket.io의 비교에 이어서 오늘은 구현을 짧게 정리해보려고 한다. * 백엔드와 프론트 부분으로 나누어서 코드를 설명할 예정이다. 먼저 백엔드부분 express-generator를 사용하면 자동으로 폴더 구조가 만들어질 것이다. 그중에서 실행되는 파일인 bin/www파일에 socket.io를 연결해 줄 것이다. /bin/www let server = http.createServer(app); 이렇게 www파일 내부를 보면 서버를 만들어 주는 부분이 있을것이다. 만들어진 서버를 socket.io에 연결해 사용할 것이다. let io = require('socket.io')(serve.. [네트워크] Websocket과 socket.io 채팅 기능을 구현하다 보면 Websocket과 socket.io를 많이 들어봤을 것이다. 일단 저거를 써서 채팅 기능을 구현하는건 알겠는데 도대체 뭐지? 라는 생각이 든다. Websocket이란? 일단 Websocket이 나오게 된 배경 부터 알아보자 맨 처음에 웹이라는 것이 나왔을때 브라우저의 렌더링 방식은 HTTP요청에 대하나 응답을 받아서 화면을 새로 만들어주는 방식이었다. 이를 stateless방식이라고 하는데 클라이언트에서 요청을 보내면 서버는 요청 받은것에 대한 응답을 건네주고 연결을 끊어버리는 식이다. 왜 서버와의 연결을 계속 유지하지 않지? 클라이언트가 10억이라고 치면 서버에서 그 많은 연결을 유지하게 되면 과부하가 걸려 다운된다. 왜 stateless상태를 채택했는지 알 수 있다. 이렇.. [Backend] OAuth란?(+ 동작방법) 프로젝트를 진행하면서 OAuth라는 것을 알게 되었다. OAutt는 간단히 말하면 무슨 토큰 같은거로 로그인을 대신한다 생각하면 되는데 굳이? 라는 생각이 들었다. 그렇다면 OAuth는 왜 생겨 났을까? 만약 내가 서비스 하나를 만들었다고 치자 이 서비스에서 네이버에 등록된 유저의 정보가 필요 하다면? 예전에는 사용자로부터 아이디와 비밀번호를 받은 다음에 이걸 가지고 네이버에 로그인을 했었다. 하지만 이렇게 되면 무슨 문제가 있을까? 개인의 서비스들은 기업에 비해 보안이 너무 취약하다... 누군가가 우리 서비스에 있는 고객의 아이디와 비밀번호를 탈취한다면? 고대로 털리는 것이다.. 심지어 네이버입장에서도 고객의 정보가 유출되는 셈이다. 그러면 어떻게 아이디와 비밀번호를 우리 서비스에 안넘기고 네이버에 접.. 이전 1 2 3 다음
