OS & Network63 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. Windows - AWS Session Manager 설치하기 윈도우에 맥 개발환경과 동일한 세팅을 위해 AWS Session Manager(SSM) 를 설치하려고 한다. 이를 위해 지난 시간에는 AWS CLI 설치를 하였다. 세팅이 반이니 반은 왔다. 차근차근 진행해보자. Windows - AWS Session Manager 설치하기 1. AWS 공식 웹사이트에서 윈도우용 패키지를 다운로드 받자 (옵션) AWS CLI용 Session Manager 플러그인 설치 - AWS Systems Manager (옵션) AWS CLI용 Session Manager 플러그인 설치 AWS Command Line Interface(AWS CLI)를 사용하여 관리형 인스턴스에 연결하는 세션을 시작 및 종료하려는 경우 먼저, 로컬 시스템에 Session Manager 플러그인을 설 .. 2021. 11. 22. Windows - AWS CLI 설치하기 (AWS Session Manager 구성) 윈도우에 맥 개발환경과 동일한 세팅을 위해 AWS Session Manager(SSM) 를 설치하려고 한다. 그러기 위해서는 AWS CLI 가 설치가 되어있어야 그 위에서 SSM 을 사용할 수 있다. 맥에서는 $ brew install awscli 만 치면 끝났을 일을, 윈도우에서는 번거롭기 그지없었다. 세팅이 반이다. 차근차근 진행해보자 AWS CLI 란 AWS Command Line Interface(AWS CLI)이다. 즉, AWS 용으로만 사용가능한 CLI 란 뜻이다. 쉽게 말해 터미널에서 $ aws 로 시작하는 명령어를 사용가능 하게 해주는 오픈소스이다. Linux - bash, zsh, tcsh 등 일반적인 쉘 프로그램을 사용하여 Linux 또는 macOS 에서 명령을 실행 Windows - .. 2021. 11. 21. 이전 1 2 3 4 5 6 7 다음 반응형
