Duknock의 개발새발

자바스크립트는 싱글스레드 환경에서 실행된다. 즉, 하나의 호출 스택을 통해 함수 호출을 처리하기 때문에, 한번에 하나의 작업만 처리할 수 있다. 하지만 우리는 이미 비동기 함수라는 것을 많이 사용하고 있다.(setTimeout, ajax(fetch), 웹 워커 등) 비동기 함수를 사용하면 여러개의 작업을 순차적으로 기다리지 않고 한번에 병렬적으로 처리 가능하다.엥? 한번에 하나의 작업만 처리 가능하다면서 어떻게 비동기 작업을 처리함? 왜냐하면 자바스크립트에서는 비동기적인 작업은 메인스레드가 아닌 백그라운드 스레드로 보내서 처리시키기 때문이다.(다른 놈[브라우저]한테 짬때리는 거다) 📢 이 때 주의할 점 하나는, 비동기 함수 자체를 백그라운드 스레드로 보내는 것이 아니다!백그라운드 스레드로 보내는 것은 ..

티스토리 안 들어온지 어느새 1년이 다 되어간다. 작년만 해도 "나도 개발자다! 히히!" 하면서 장황하게 새로 알게 된 지식들을 블로그에 싸질러 놨었는데 지금 다시 내가 썼던 글을 읽어보니 아주 창피하기 짝이 없네^^ 물론 지금도 아무고토 모르는 주니어 개발자이지만, 적어도 작년보다는 아는게 많아지긴 했다. (이제는 상태관리 정도는 할 줄 알아요..... 아니 구라야 몰라. 모른다 해야 나중에 안 쪽팔려.) 그래서 1년 간 나름대로 쌓인 나의 조그마한... 지식들로 다시 포스팅을 시작해야겠음. 안 써놓으면 다 까먹더라; 나도 가끔 내가 써놓은 글 참고해서 다시 코드 작성할 때 많다ㅋㅋ 후... 이제 취직하고 2년 반이 다 되어 가는데, 이제서야 프롤로그를 끝내는 느낌이다. 중간중간 나름 제대로 공부해보겠..

Intersection Observer Intersection Observer는 웹 브라우저에서 제공하는 API 중 하나로, 요소가 다른 요소나 브라우저 viewport와 교차하는지 여부를 감지하는 기능을 제공한다. 예를 들어, 스크롤을 내렸을 때 화면에 보이는 이미지나 다른 요소를 로드하기 전에 Intersection Observer를 사용하여 해당 요소가 브라우저 viewport 안에 있는지 감지하고, 그 후에 해당 요소를 로드할 수 있다. 이를 통해 불필요한 리소스 로드를 줄일 수 있으며, 페이지 로딩 속도를 향상시킬 수 있다. Intersection Observer는 요소의 가시성 여부를 지속적으로 감시하고, 이벤트를 발생시킨다. 이벤트는 요소가 viewport에 나타날 때, 사라질 때, 일부분만..

보통 브라우저 화면에 타이머 같은것을 띄울 때, setInterval 함수를 사용한다. 타이머 0초 시작 정지 이런식으로 1초 (1000ms) 마다 함수를 실행하여 HTML 요소를 업데이트하는 방식으로 렌더링하게 되는데 고작 타이머 하나 보여주려고 백그라운드에서 계속 돌아가는 setinterval 함수를 사용하는 것은 아래와 같은 문제점들이 있다. 1. 정확한 실행 시간 보장 불가능: setInterval 함수는 일정한 시간 간격으로 코드를 실행하는 것이 아니라, 이벤트 루프에서 실행 대기열에 추가된 시점부터 일정 시간이 지난 후 실행됩니다. 따라서, 코드 실행이 지연될 가능성이 있습니다. 2. 코드 충돌 가능성: setInterval 함수를 사용하면서, 두 개 이상의 코드가 동시에 실행될 가능성이 있습..

Chat GPT를 써본 사람은 알겠지만 이자식 사람보다 코딩을 잘한다. 심지어 코딩뿐만 아니라 모든 방면에서 지식이 사람보다 뛰어나다. 그래서 요즘 코드를 짜는 방식이 좀 변했는데, 내가 먼저 코드를 짜보고 GPT한테 내 코드를 보여주며 코드리뷰를 해달라고 한다. 그럼 코딩 외길인생 개발의 달인(경력 30년) 양쪽 뺨 싸다구를 후려 갈길 정도로 리뷰를 잘써준다. 근데 매번 Open AI 페이지 들어가서 코드 복붙해서 리뷰해달라고 하기가 너무 귀찮으니 VS code 안에서 바로 Chat GPT를 사용할 수 있는 방법을 찾아봤는데 역시나 누군가 벌써 플러그인을 만들어놓았다. (심지어 한국인인듯) 이번엔 VS code에서 Chat GPT를 사용하는 방법을 알아보자. 우선 VS Code 에서 AICodeHelp..

Port Fowarding 포트 포워딩은 인터넷에 연결된 장치(예: 컴퓨터, 라우터, 모뎀 등)가 외부에서 접속하는 요청을 내부 네트워크의 특정 장치로 전달하는 과정을 말한다. 일반적으로 인터넷에서 특정 서비스(예: 웹 서버, FTP 서버, 게임 서버 등)를 제공하려면 해당 서비스에 할당된 포트 번호를 외부에서 접속 가능하게 열어야 한다. 이를 위해서는 먼저 라우터나 모뎀과 같은 게이트웨이 장치에게 해당 포트 번호로 들어오는 요청을 내부 네트워크의 서버나 컴퓨터로 전달하도록 설정해야 하는데, 이 설정 과정을 포트포워딩이라고 한다. 예를 들어, 인터넷에서 접속 가능한 웹 서버를 구축하려면 웹 서버에 할당된 포트 번호(일반적으로 80번 포트)를 외부에서 접속 가능하게 열고, 해당 포트로 들어오는 요청을 라우..

하 이건 진짜 하기 싫었는데 정리하긴 해야지... 게시판 같은거 보면 아래에 페이지 버튼이 있다. 얘는 페이지네이션 (Pagination)이라고 하는데 콘텐츠를 여러 페이지로 나누어 다음 또는 이전 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소이다. 오늘은 얘를 만들어볼건데 이게 보기엔 별거아닌거 같은데 은근히 만들기 귀찮은 녀석이다. 이유는 아래에 보면 나온다. 이번엔 자바스크립트의 Class 문법을 사용하여 만들어보겠다. 설계 1. 페이지 버튼을 누르면 해당 페이지가 URL 파라미터에 추가되며 페이지를 갱신한다. - (2 페이지를 클릭했을 경우 : duknock.tistory.com -> duknock.tistory.com?page=2) 2. URL에 ?page=3 이런식으로 파라미터가 들어..

회사에서 진행중인 프로젝트에 웹페이지에서 리눅스 서버로 명령어를 보내는 프롬프트 창을 만드는 과제가 생겼다. 세상에 하다하다 웹페이지에서 리눅스서버로 명령어를 보내는것도 만들어야하다니... 그냥 직접 리눅스에서 하면 안되나? 아무튼 까라면 까야하니까 어떻게든 내 방식대로 만들어보았다. 일단 내가 생각한 프로세스는 이렇다. 1. 웹페이지에서 Node.js 웹서버로 커맨드와 서버 url, 포트번호등을 담은 POST 요청을 보낸다. 2. Node.js 웹서버가 ssh 접속 요청이 들어오면 따로 정의해둔 라우터로 라우팅한다. (다른 api 요청도 처리해야해서 분리함) 3. 라우터에서 node-ssh 모듈을 이용하여 리눅스 서버와 연결 후 커맨드를 입력한다. 4. 리눅스 서버가 응답을 보내면 그대로 웹서버로 전달..

자바스크립트로 새 창을 띄우는 방법에는 window.open() 메서드가 있다. window.open(url, name, specs, replace) 이런 문법으로 쓰게 되는데, 구체적으로 예시를 들자면 let url = 'https://duknock.tistory.com'; let name = 'popup'; let specs = 'width=720, height=500, top=100, left=200'; let replace = false; window.open(url, name, specs, replace); 이런식이다. return 새로 열린 창 객체가 반환된다. 그래서 변수에 할당할 수 있다. let newWindow = window.open(url, name, specs, replace); ..

https://duknock.tistory.com/page.html?type=post#top Protocol://Host/Path?QueryString#Fragment 주소창의 URL을 보면 이런식으로 되어있다. 1. 프로토콜 2. 호스트:포트번호 3. 경로 4. 쿼리스트링 5. 프래그먼트(앵커) 프로토콜 https://duknock.tistory.com/page.html?type=post#top 프로토콜은 컴퓨터끼리 네트워크 통신을 하기 위한 규약이다. 우리가 웹 페이지의 주소를 표현할 때는 http (HyperText Transfer Protocol)를 사용한다. http에 보안이 추가된 https도 있다. https나 http나 동일한 규격임ㅇㅇ http, https 외에도 ftp(파일서버 접속)나..