본문 바로가기
728x90
반응형

개발자 전향 프로젝트89

웹 워커(Web Worker)란? 언제 쓰는 걸까? feat.타이머 브라우저가 인식할 수 있는 몇 안되는 언어인 자바스크립트는 놀랍게도 싱글 스레드이다. 싱글 스레드가 뭔지 모른다면 이전글을 참조하길 바란다. https://samori.tistory.com/86 싱글스레드 vs 멀티스레드 이 질문에 대답을 하기 전에 스레드가 뭔지를 알아야한다. 우리가 자주 쓰는 프로그램, 뭐 크롬이라는 브라우저를 예로 들어보자. 크롬은 사용자가 클릭해서 실행할 때 컴퓨터로부터 메모리라 samori.tistory.com 싱글 스레드 이기 때문에 몇가지 한계가 존재한다. 싱글 스레드의 한계 싱글 스레드의 경우 기본적으로 연산량이 많은 작업을 하는 경우, 그 작업이 완료되어야 다른 작업을 수행할 수 있다. 또 setInterval과 같은 함수로 반복 로직을 구현한 경우 브라우저의 정책으로 인.. 2024. 2. 16.
싱글스레드 vs 멀티스레드 이 질문에 대답을 하기 전에 스레드가 뭔지를 알아야한다. 우리가 자주 쓰는 프로그램, 뭐 크롬이라는 브라우저를 예로 들어보자. 크롬은 사용자가 클릭해서 실행할 때 컴퓨터로부터 메모리라는 자원을 할당받게 되고 그 메모리를 할당받았을 때 비로소 프로세스라고 부른다. 스레드는 이 프로세스의 실행단위이다. 브라우저는 보통 멀티스레드이기 때문에 동시에 다양한 작업을 할 수 있다. 예를 들어 한쪽에 유튜브에 영상을 틀어놓고 댓글을 쓰기등.. 여기에 더 나아가서 크롬의 경우에는 각 탭마다 프로세스이고 여러 탭을 사용하게 되면 이는 멀티 프로세스가 된다. 아무튼 이 실행단위가 하나인지, 여러개인지에 따라 각각 싱글, 멀티 스레드라고 부른다. 그렇다면, 실행단위가 싱글인것보다 멀티인것이 더 좋은거 아닐까? 다다익선이니까.. 2024. 2. 15.
React 입문 - React, JSX, Babel, 그리고 Webpack 이해하기 React 란? Facebook에서 만든 Javascript Library이다. UI Components 들을 만드는 도구이며 메모리에 가상 돔을 만든다. 그렇다면 이 가상돔 ( VIRTUAL DOM ) 은 무엇인가? VIRTUAL DOM은 DOM의 추상화이며 복사본인데 아주 가벼운 복사본이다. React의 경우는 브라우저의 돔을 직접 조작하기 보단 가상돔을 조작을 함으로써 실제 돔이 바뀌는 방법을 택한다. 그렇다면 그냥 돔을 바로 조작하면 되는데 굳이 번거롭게 VIRTUAL DOM을 쓰는 이유는 뭘까? 더 빠르고 효율적이기 때문이다.기존 DOM의 경우에는 호환성이 떨어져서 바닐라 자바스크립트로만 조작이 가능하다는 단점도 존재한다. JSX란? 이 React는 이 "가상돔"을 조작해서 html을 렌더링해야.. 2024. 2. 15.
Callback에 대한 의문과 Promise 와 Async/Await 를 쓰는 이유 (feat.비동기vs동기) 콜백이 무엇이고, 콜백을 사용해야하는 이유가 무엇인가? 콜백함수는 한마디로 비동기 작업을 처리할 때 순서를 보장해주는 함수이다. 자바스크립트에서 비동기 작업을 해야할 때가 생긴다. 그럴 때 제일 중요한 것은 순서이다. 예를 들어 토스트에 잼을 발라서 먹으려고 하는데 집에 잼은 있는데 빵이 없다. 그래서 이상적인 순서가 아래와 같다면 마트에서 빵을 사고 -> 빵을 굽고 -> 빵에 잼을 바르기 위 순서가 지켜져야지만 원하는 결과를 얻을 수 있을 것이다. 컴파일러는 기본적으로 위에서 아래로 코드를 읽고 컴파일하지만 비동기 작업은 순서가 보장되지 않기 때문이다. 그러면 그 순서를 보장해줘야 하는데 그때 쓰는게 콜백이다. 위 내용을 콜백함수를 쓰는 코드로 바꾸면 아래와 같을 것이다. function getBrea.. 2024. 1. 30.
ajax로 JSON 객체 배열 넘기기 (파이썬 장고) 아래는 JSON 객체 구조의 배열이다. JSON 구조는 아래와 같은 특징이 있다. 이름과 값의 쌍으로 이루어짐 예를 들어 아래와 같은 것이다. 이름: 홍길동 나이: 20 성별: 남자 파이썬의 Dictionary와도 비슷한데 차이점은 JSON 같은 경우 데이터를 담아서 전달하는데 그치지만 Dictionary는 실제로 메모리에 저장되는 객체이다. 아무튼 비즈니스에서는 종종 아래와 같이 JSON 구조의 객체배열을 넘겨줄 때가 있는데 let objArr = [ { sno: '1', paramCode: '0101', dateTime: '2023-12-07 11:46:57.000000' }, { sno: '2', paramCode: '0102', dateTime: '2023-12-07 11:47:00.000000'.. 2023. 12. 20.
ajax 로딩 시 로딩 중 표시하는 방법 (jQuery Loading Spinner) 아래 코드는 로딩중을 나타내기 위한 html 코드이다. 아래는 jQuery ajaxSetup을 통해 loading spinner 언제 보여주고 숨기는지 세팅해놓은 js 코드이다. jQuery.ajaxSetup({ beforeSend: function () { $('#loading_spinner').show(); }, complete: function () { $('#loading_spinner').hide(); } }); 아래는 css 코드로 기본적으로 loading spinner를 숨겨놓고 위치를 조정해주며 spinner가 뱅글뱅글 돌도록 만들어주는 코드이다. #loading_spinner{ display: none; position: absolute; left: 50%; top: 50%; z-inde.. 2023. 12. 20.
(파이썬 장고) CSV 를 Django를 이용해 DB에 집어넣기 사용할 DB는 코끼리..가 아니라 PostgreSQL이다 이전글인 https://samori.tistory.com/80 (파이썬 장고) DB 테이블 CSV 로 출력하기 views.py에 아래 함수를 집어넣고 def 함수명(request): response = HttpResponse(content_type='text/csv') response['Content-Disposition'] = 'attachment; filename="파일명.csv"' writer = csv.writer(response) writer.writerow(['칼럼1','칼럼2',. samori.tistory.com 과 반대로 오늘은 CSV를 DB에 입력하는 방법에 대해 알아보려고 한다. 가장 쉽게 줄인 코드는 아래와 같다. @trans.. 2023. 11. 19.
728x90
반응형