꿈많은 DEVELOPER

🤷‍♂️ 도커란? HTML 삽입 미리보기할 수 없는 소스 (Docker)도커는 애플리케이션을 개발, 배포, 실행하도록 도와주는 오픈 소스 플랫폼이다. 컨테이너화 기술을 사용하여 애플리케이션과 관련된 파일들을 컨테이너안에 패키징해서 독립적으로 실행, 관리할 수 있도록 돕는다. 도커의 컨테이너화 기술은 안정적이며 효율적으로 애플리케이션을 관리할 수 있다. Docker Container (도커 컨테이너)란? 도커 컨테이너는 가상화된 공간을 생성하기 위해 리눅스 자체 기능인 chroot, 네임스페이스(namespace), cgroup을 사용함으로써 프로세스 단위의 격리 환경을 만들기 때문에 성능 손실이 거의 없습니다. 컨테이너에 필요한 커널을 공유해서 사용하고, 컨테이너 안에는 어플리케이션을 구동하는 데 필요한..

🤷‍♂️ 본론에 들어가기 앞서 React 프로젝트 중에 input 입력 후에 Enter or 등록 버튼 후에 모든 테스트를 선택해야 되는 기능을 만들어야 했다. 나는 자바스크립트에 addeventlistener 메소드를 활용해서 하려고 했지만 더 좋은 방법이 있기 때문에 기억보다는 기록으로 남겨본다. 🤷‍♂️ focue가 맞춰지면 React를 사용하여 입력 요소의 모든 텍스트를 선택 input 포커스가 되면 입력요소에 모든 텍스트를 선택하는 select() 요소를 활용해서 포커스가 있을 때 모든 텍스트를 선택하는 방법 select() 요소를 활용해서 input 요소에 모든 텍스트를 선택하는 이유는 똑같은 값을 사용하거나 전체 삭제를 효과적으로 사용할 수 있기 때문에 필요한 기능이다. EX: App() {..

🤷‍♂️ 본론에 들어가기 앞서 웹 개발을 하다 보면 B 위 HTML 문서는 브라우저에서 다음과 같이 순차적으로 처리가 됩니다. A가 화면에 출력됨 script.js 파일을 내려받아 자바스립트 코드가 실행됨 B 가 화면에 출력 * HTML은 동기식으로 한줄한줄 읽어나가는 특징을 가지고 있다. HTML 삽입 미리보기할 수 없는 소스 🤷‍♂️ defer vs async 속성? 전통적으로 script 요소를 head 요소 안에 넣도록 배우는 경우가 많지만 실제 프로젝트 or UI & UX 측면에서 body 요소 제일 마지막에 script를 넣어서 사용자에게 최적화된 웹페이지 경험을 줄 수 있다. 미리 HTML 그려주고 script를 렌더 하는 방식이다. Defer 속성 정의 요소에 defer 속성의 정의 def..

🤷‍♂️ 본론에 들어가기 앞서 코로나 이후로 IT 전공이 아니신 분들도 VPN, 네트워크 등등에 단어들을 많이 들어보고 사용했을 것이다. 코로나 이후로 재택근무가 활성화되면서 VPN을 이용하여 회사 네트워크에 접속해서 회사 업무를 처리했을 것이다. 나 또한 우리 회사의 자회사 데이터 센터에서 업무를 위해서 VPN을 접속해서 업무를 했던 경험이 있다. 그러면서 자연스럽게 VPN이 무엇이고 VPN의 개념에 대해서 궁금해졌다. 🤷‍♂️ VPN(Virtual Private Network) 이란? 사용자들은 인터넷에 접속하여 웹을 이용할때 ISP(KT, SKT, LG 같은 업체)의 통신망을 사용한다. 통신망을 사용하면 사용료를 지불하고 이따 사용하는 네트워크를 public network라고 한다. public n..

🤷‍♂️ React에서 동일한 파일 업로드 구현 프로젝트중에 PDF 파일 업로드 기능 구현 당시 동일한 파일을 업로드 하는 경우 input태그의 onChange 이벤트 핸들러 함수가 정상적으로 동작하지 않는 문제가 발생했다. 파일 업로드 과정 브라우저에서 PDF 업로드를 클릭하면 파일 탐색기 창이 열리고 파일을 선택후에 파일을 업로드한다. 여기서 오류는 동일한 파일을 두번 이상 업로드시 onChange 이벤트가 발생하지 않는 문제였다. 20230920001_00_40.pdf 파일을 업로드하고 다시 20230920001_00_40.pdf 파일을 업로드하면 onChange 이벤트가 발생하지 않는다. 정리: React에서 동일한 파일을 연속해서 선택했을 때 input 태그에 onChange 이벤트 핸들러 함수..

🤷‍♂️ 본론에 들어가기 앞서 javascript 이벤트와 이벤트 핸들러의 이해 자바스크립트는 이벤트 기반에 프로그램이며 자용자 또는 브라우저가 페이지를 클릭하거나 action을 통해서 이벤트가 발생한다. 이를 활용해 웹 페이지 요소를 동적으로 변경할 수 있으므로 이벤트는 중요한 역할을 맡고 있습니다. 예를 들어 브라우저가 document 로딩을 완료하면 load 이벤트가 발생하고 사용자가 버튼을 클릭하면 click 이벤트가 발생합니다. 이벤트는 한 번, 여러 번 또는 전혀 발생하지 않을 수 있습니다. 특히 사용자가 임의 생성한 이벤트는 언제 발생하는지 모를 수도 있습니다. 이와 같은 시나리오에서 이벤트 발생을 감지하기 위해 이벤트 핸들러가 필요합니다. 이를 통해 이벤트가 발생하는 즉시 반응하도록 코드를..