OS & Network56 안드로이드 - ADB 로 웹모바일뷰 디버깅 하기(USB연결) QA 하다가 막상 웹 브라우저에서 확인할 때와는 달리 휴대폰에서만 제대로 적용되지 않는 속성들을 발견했다. 하필 나의 갤럭시 A9 은 10 이었기 때문에(폰밍아웃) 무선기능이 되지 않아(11 이후 가능) USB 디버깅만 가능한 상태였다. 하지만 포기하려는 찰나 CTO님의 도우심으로 세팅을 무사히 끝내게 되었다 좋은 건 같이봐야하기 때문에 이 포스팅을 기록해본다 안드로이드 - ADB 로 웹모바일뷰 디버깅 하기 0. 휴대폰에서 개발자 도구 활성화하기 이건 이미 다른 블로그들에서 친절하게 설명이 잘 나와있다. 구글링으로 얼른 갤럭시 개발자도구 키고 돌아오시라 1. ADB 다운받기 (Mac용) https://developer.android.com/studio/releases/platform-tools SDK 플.. 2022. 6. 17. Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom) updated 01/12/24 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 포스팅 한 포스팅 쌓아가다보면 지식이 쌓이지 않을지 기대해본다. 다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 devbirdfeet.tistory.c.. 2022. 6. 6. Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 포스팅 한 포스팅 쌓아가다보면 지식이 쌓이지 않을지 기대해본다. 다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 devbirdfeet.tistory.com 2. 브라우저 렌더링 이해.. 2022. 6. 5. Vim - 간단한 단축키 정리 내가 보려고 정리한 Vim 단축키 포스팅이다. 가끔 터미널에서 config 파일 등의 코드들을 간단히 수정해줘야 할일이 있다. 보통의 코드들은 vscode 를 통해 수정하지만, 설정관련 코드들은 포트 넘버 등의 간단한 세팅만 수정하고 저장하기 때문에 간단한 조작방법을 기억하기 위해 이 포스팅을 작성해보았다. Updated 12/08/23 Vim - 간단한 단축키 정리 Move the cursor h move one character left j move one row down k move one row up l move one character right Basic word movements (w / b / e) w move to beginning of next word (다음 단어의 첫 글자) b mo.. 2022. 6. 3. Mac - Karabiner 설치하고 맥 한영키 변경하기 주말을 맞아 개발팀 팀원님의 추천으로 Karabiner 라는 앱을 사용해보려고 한다. 이 아이는 키매핑을 위한 앱이다. 한마디로 내가 사용하고 싶은 기능을 원하는 키로 설정할 수 있다. (맥북의 장점인 사용자 최적화와도 맞물려있다👍) 원래는 키보드를 마우스처럼 사용하기 위해 이앱을 선택했지만, 일단 한국 유저들사이에서 가장 유명한 기능인 한영키를 변경해보려고 한다. Mac - Karabiner 설치하고 맥 한영키 변경하기 설치하기 설치 1. 공식 웹사이트에서 일단 다운받자 https://karabiner-elements.pqrs.org/ 설치 2. 다운받은 파일을 실행해준다. 그럼 application 에서 아이콘 확인가능 하다. Karabiner-Element 를 클릭 해보자 설치 3. 그리고 Syst.. 2022. 5. 14. Cookie(쿠키) / Cache(캐시) / Session(세션) / Token(토큰) 세션 / 쿠키 / 캐시 / 토큰 기술면접과 정처기의 단골문제 였던 녀석들 😎 하지만 정작 일하다 마주치면 순간 햇갈려서 다시 블로그를 찾아보게 만들었던 녀석들이다. 이번에야 말로 확실하게 정리를 해보자. (아래 글은 제가 이해한 방식대로 정리해본 포스팅입니다. 혹시 잘못된 정보가 있다면 알려주세요!) Cookie(쿠키) / Cache(캐시) / Session(세션) / Token(토큰) (이들의 공통 키워드는 데이터를 "임시저장" 이라는 개념에 사용되는 아이들이다. 개인적으로 유저 정보 등의 임시 데이터들은 매번 서버를 찔러서 가져오기 힘드니 잠시 브라우저나 웹서버 내에서 hold(저장)하는 느낌이었다.) 내 예상이 얼추 맞았다. 이론적으로 알아보니 http 프로토콜은 통신 후, 클라이언트랑 칼같이 연을.. 2022. 4. 13. VScode - 탭간격 설정하기 코드를 작성할 때 개인적으로 2줄 들여쓰기를 선호하는 편이다. 하지만 기본값이 4칸 들여쓰기가 되있는 바람에 항상 새 파일을 만들 때마다 귀찮음을 극복하고 설정해줘야만 했다. 이제 귀찮음이 극에 달했다. 아예 기본값을 바꿔보도록 하자. So, now it's time to set tap-size up ! 설정하러 가즈아 VScode - 탭간격 설정하기 1. [File] - [Preference] - [Settings] 로 들어가자 2. 스크롤 굴려 내려가면 Tab Size 가 보인다. 숫자를 변경해주자 ! 그럼 끝 (바로 적용 안되면 vscode 껏다 켜보자) ** Hoxy 탭 키로 들여쓰기 하고 싶다면? 스크롤 좀만 더 내려서 요것도 같이 체크해주기 2022. 2. 26. MAC 에서 포트 죽이기 어느날 오후, 프로젝트를 실행하기 위해 npm start 를 힘차게 눌렀더니 이미 사용중인 포트라는 메시지가 뜬다면? 죽여보자 (어감이 좀 이상하지만 🥲) MAC 에서 포트 죽이기 1. 현재 사용중인 포트의 PID를 획득하러 가보자 $ lsof -i :3000 2. 획득한 PID 를 죽여보자 $ kill -9 PID번호 // 입력 후 엔터를 누르면 아무흔적도 없이 해결 2022. 2. 9. VScode - extension 으로 MySQL DB 연결하기 프론트도 DB를 확인하며 작업을 하기 때문에 지금까지는 터미널에서 직접 들어가 확인하였다. (허나 가시성이 전 ~혀 없어 매우 불편했는데... 🥲 ) 왜 이걸 몰랐을까 mysql 용 vscode extension 이 있다는 사실을 알게 되었다. 이로써 아주 간편하게 DB를 확인할 수 있게 되었다. VScode extension 으로 MySQL DB 연결하기 자, 그렇다면 visual studio code 에서 MySql DB 를 연결해서 사용해보자 1. extension tab을 열어 MySQL을 install 한다. 2. 설치 후 왼쪽 메뉴바에서 mySQL 아이콘 클릭하면 아래와 같은 화면이 펼쳐진다. 상단의 [+] 버튼을 누른 후 빨간박스 안의 정보를 임력해주자. [connect] 버튼을 누르면 DB.. 2022. 1. 5. 이전 1 2 3 4 5 6 7 다음 반응형
