본문 바로가기

전체 글

(12)
진법 변환을 알아보자 안녕하세요. 야생에서 등장한 하프입니다! 🌟 기초중에 기초인 진법 변환에 대해서 알아보겠습니다! 핵심만 딱!! 알려드리겠숩니다 이거 하나만 기억하고 갑시다. 8진수는 3개씩 16진수는 4개씩 꼭! 📝 목차 10진수 10진수 to 2진수 10진수에서 2진수로 변경하기 위해서는 2로 계속 나누면 됩니다. 2로 나눈 후 나머지 값들만 찾아서 작성해주시면 됩니다! 예시는 125를 통해 해보도록 하겠습니다. 125을 2로 나눈 후 몫은 62 나머지는 1 62을 2로 나눈 후 몫은 31 나머지는 0 31을 2로 나눈 후 몫은 15 나머지는 1 15을 2로 나눈 후 몫은 15 나머지는 1 7을 2로 나눈 후 몫은 3 나머지는 1 3을 2로 나눈 후 몫은 1 나머지는 1 1을 2로 나눈 후 몫은 0 나머지는 1 몫이 ..
자바스크립트 동작 원리 안녕하세요. 야생에서 등장한 하프 입니다 🫠 프론트엔드라면 꼭 중요한 자바스크립트의 원리에 대해서 짚고 넘어가겠습니다. 📝 목차 자바스크립트는 싱글 스레드? 1. 싱글 스레드 (Single-Thread) 싱글 스레드란 프로세스가 단일 스레드로 동작하는 방식입니다. 처리를 단일 스레드로 직렬 처리하는 프로그래밍 기법 입니다. 요약하면 하나씩 처리하겠다는 뜻 입니다. 자바스크립트 자체는 싱글 스레드가 맞지만 자바스크립트 런타임은 싱글 스레드가 아닙니다. 런타임은 또 뭐냐 이럴텐데 지금은 그냥 넘어갑시다. 2. 왜 싱글 스레드를 채택했을까? 자바스크립트는 원래 웹 페이지의 보조적인 기능을 수행하려고 만들어진 언어 입니다. 멀티 스레드인 자바는 다소 무거운 면이 있고, 동시성 문제가 존재하다보니 복잡한 시나리오..
리눅스(CentOS)에서 postgresql을 설치해보자! 안녕하세요. 야생에서 등장한 하프개발자 입니다 😊 미루고 미루던 postgresql 포스팅을 해보려 합니다 📝 목차 Yum으로 설치 1. postgresql 라이브러리 설치 yum으로 postgresql을 설치해주도록 합시다. yum install -y postgresql yum install -y postgresql-server 2. 계정명 확인 성공적으로 설치가 되었으면, 계정이 잘 생성되었는지 확인합시다! 자동으로 생성되니 따로 만들지 않아도 됩니다! id postgres 3. postgresSQL 실행 시 사용되는 계정정보 확인 ls -l /usr/lib/systemd/system/postgresql.service 4. postgreSQL 초기화 postgreSQL을 초기화 하기 위해서는 다음과 ..
Vue3 프린트 기능을 이용해보자! 안녕하십니까! 야생에서 등장한 하프 입니다 😊 이번에는 Vue3 로 프린트 기능을 사용하는 법을 알아보도록 하겠습니다 ~ 해당 기능은 vue3 를 기준으로 작성되었습니다 📝 목차 초기 디자인 1. 폴더 구조 폴더 구조는 간단하게 설정했습니다. 2. html, css 구성 초기 디자인 구성을 위해 디자인을 해주도록 합시다! 아래의 코드는 예시 코드이며, 원하시는걸로 제작 후 사용하셔도 됩니다 ! // src/components/printFunc.vue ${content} ` ); printWindow.document.close(); // 프린트 창이 닫힐 때 printWindow.onafterprint = () => { printWindow.close(); }; printWindow.print(); } [..
WSL을 사용해보자! 안녕하세요. 야생에서 등장한 하프 입니다. 😊 WSL을 사용할 수 있도록 설정하는걸 알아보겠습니다 📝 목차 WSL 설치 1. 자동 설치 이 방법은 Windows10 특정 버전 및 Windows11 이상에서만 가능합니다. 관리자 권한으로 cmd창을 실행시킵니다. 설치 명령어를 입력합니다. wsl --install 2. 수동 설치 만약 자동으로 설치가 잘 안되셨다면, 다음과 같은 방법을 시도해보시면 될 것 같습니다! 여기로 접속한 후 최신 패키지를 다운로드 합니다. 이전 버전 WSL의 수동 설치 단계 wsl install 명령을 사용하지 않고 이전 버전의 Windows에 WSL을 수동으로 설치하는 방법에 대한 단계별 지침입니다. learn.microsoft.com 3. 윈도우 기능 활성화 제어판 또는 검색에..
티스토리 물결(Wave)를 만들어보자! 안녕하십니까. 야생에서 출몰한 하프입니다. 🫠 블로그에 다음과 같이 아름다운 웨이브를 만들어보도록 합시다 별자리랑 웨이브가 있으니 정말 아름답네요 😊 📝 목차 웨이브 1. 사용 기술 이번에도 사용한건 Javascript Canvas 입니다. 찾아보니, hero Waves 라는것도 있고 svg 웨이브 마스크를 사용한 방법도 있더라구요. hero Waves : https://codepen.io/KrzysiekF/pen/oNNLwZq svg Wave : https://wsss.tistory.com/1520 기존에 있는건 식상하니! 만들어 보도록 합시다! 2. 기술 구상 우선 어떻게 만들지 정해야 겠지요! 저는 "인터렉티브 디벨로퍼 김종민"님의 영상을 참고 했습니다. 일단 동그라미를 여러개 그리고 생각해봅시다...
WSL에 대해 알아보도록 하자 안녕하십니까. 야생에서 온 하프 입니다 😊 다양한 환경들을 접하다 보면 볼 수 있는 WSL에 대해서 알아보도록 합시다! 📝 목차 WSL 1. WSL이 뭔데? WSL은 Linux용 Windows 하위 시스템이라고 하며 별도의 가상 머신 또는 이중 부팅 없이 Windows 컴퓨터에서 Linux 환경을 실행할 수 있는 WIndows 기능입니다. Windows와 Linux를 동시에 사용하려는 개발자들에게 원활하고 생산적인 환경을 제공할 수 있도록 설계되었다고 합니다! 즉, 윈도우에서 리눅스 시스템을 동작할 수 있도록 하겠다 입니다. 2. WSL의 아키텍처 & 등장배경 만약 나 자신이 윈도우 서버의 시스템 관리자라고 생각을 해보자! DB설치나 배포관련 가이드를 보게 되었을 때 리눅스로 되어 있는것이 대부분일 것 ..
브라우저의 동작 과정을 알아보자! 안녕하십니까, 야생에서 등장한 하프 입니다 🤔 개발자로 일을 하다보니, 브라우저는 어떻게 html, css, js를 인식하고 화면에 보여지는지 궁금해서 제가!!! 알아봤습니다! 너무 방대하고 글이 많다보니,, 요약을 좀 해서 알려드릴까 합니다! 📝 목차 브라우저 1. 서론 요약해서 말씀 드리면 브라우저(browser)는 단일 스레드 입니다. 즉, 다른 작업을 시작하기 전에 처음부터 끝까지 순차적으로 작업을 실행합니다. 스크롤, 터치와 같은 인터렉션을 보장하지요! 2. 탐색 탐색은 웹 페이지를 로드하는 단계라고 보시면 됩니다! 사용자가 주소 표시줄에 URL을 입력하거나 링크를 클릭, 제출양식(form)을 통해 요청을 할 때마다 발생하게 됩니다. 웹 성능의 목표 중 하나는 탐색하는 시간을 최소화를 목표로 한..