본문 바로가기

분류 전체보기

(204)
프로세스, 스레드, 데드락? 프로세스란? 단순히 실행 중인 프로그램 사용자가 작성한 프로그램이 운영체제에 의해 메모리 공간을 할당 받아 실행 중인 것 이러한 프로세스는 프로그램에 사용되는 데이터와 메모리, 스레드로 구성된다. 스레드란? 프로세스 내에서 실제로 작업을 하는 주체 모든 프로세스에는 한개 이상의 스레드가 존재하여 작업을 수행한다. 스레드별로 각각 자신만의 스택과 레지스터를 가진다 데드락이란? 프로세스가 자원을 얻지 못해서 다음 처리를 못하는 상태, 교착상태 한정된 자원을 여러곳에서 사용하려고 할때 발생 서로 같은 자원을 무한정 대기
WASM이란? (웹어셈블리란?) 원래 브라우저는 html, css, js 만 읽을 줄 알았음 그런데 2017년 부터 "웹어셈블리 (WebAssembly=WASM) 파일도 지원할게" 선언함 웹어셈블리란? 브라우저에서 실행할 수 있는 새로운 파일 형식 .wasm 평소에 짜던 프로그래밍 언어들을 .wasm으로 컴파일 -> 브라우저에 보냄 -> 브라우저 해석 [장점] 1) js말고 다른 언어들도 브라우저에서도 돌릴 수 있게됨(확장성) 2) js보다 빠름 왜 빠르니? 브라우저에서 js구동순서와 .wasm구동 순서 비교
SSR/CSR (+ SEO, SPA, TTV, TTI) 웹 렌더링의 발전 순서에 따른 웹 랜더링 방식의 발전 순서 static sites 서버에 이미 배포되어있는 html 을 받아와서 그대로 보여줌 문서내에서 또다른 문서를 가져올 수 있는 iframe의 등장 페이지 내에서 부분적으로 업데이트 가능해짐 xmlHttpRequest 태그로 html문서 전체가 아니라 서버에서 json같은 형식으로 데이터만 받아올 수 있게 된다 그 데이터를 받아서 js가 동적으로 html을 생성하여 페이지를 업데이트 하는 방식 AJAX - SPA 위 방식이 정식적인 이름을 달고 등장 웹사이트에서도 사용성 올라감 Angular, React, Vue 프레임워크의 등장 CSR 등장 서버에서 index.html 을 보내주면, 필요한 js를 서버로부터 다운로드 받는다. (어플리케이션 로직 & 소스코드 등 사이즈가 큼) 추..
PWA란? 모바일 어플리케이션 구현형태 (네이티브앱, 웹앱,하이브리드앱, 크로스플랫폼앱, PWA) SPA : Single Page Application 하나의 페이지로 구성된 앱 필요한 부분만 갈아 끼운다 MPA : Multi Page Application 여러개의 페이지로 구성된 앱 페이지별로 html, css, js를 받아와서 화면을 그린다. 페이지의 이동 Nativa APP : 각각의 OS에 맞게 개발된 앱 (안드로이드-코틀린, IOS-스위프트) 내부파일시스템, 카메라 등 스마트폰 자체 기능 모두 사용가능 구글스토어, 앱스토어에 등록 아이콘으로 추가하여 사용 (단) 개발에 드는 인력/시간 (안드/애플 각각 개발해야함) (단) 각각의 스토어에서 배포 거절될 수도 있다. Mobile Web : 스마트폰 사용자를 대상으로한 웹사이트 스마트폰에서 보기 편하게 레이아웃 모바일웹 = 웹앱 OS 구분없이 개..
웹팩을 쓰는 이유 웹팩이란? 모듈 번들러 html, css, js, image등을 각각의 모듈로 보고 조합해서 병합된 하나의 결과물을 만드는 도구 모듈이란? 비슷한 성격의 기능들을 하나의 의미 있는 파일로 관리 html모듈, css모듈, js모듈.... 웹팩이 필요한 이유? - 기능별로 js 파일을 나누고 html에서 js를 불러와서 사용할 때, 의도치않게 변수들이 겹쳐서 문제가 발생할 수 있다. 파일단위로 변수를 관리할 수 있게 하여 이런 문제를 해결 - 배포시 압축 작업들을 자동화 - 서비스가 복잡해지면서 속도의 중요성이 대두, 웹팩을 사용하여, 최소통신으로 필요한 파일만 로딩 node.js 는 사실 그냥 자바스크립트를 실행시킬 수 있는 엔진, 브라우저가 갖고있는 엔진을 브라우저 밖에서도 실행 시킬 수 있도록 만든 환..
[Javascript] mutable(변화기쉬운) 객체 & immutable(안변하는) 객체 1. mutable 객체 1) Array // mutable 객체 let fruits = ['banana', 'apple', 'melon'] let clonefruits = fruits; clonefruits.push('plum'); console.log('clonefruits', clonefruits) console.log('fruits', fruits) 2) Object let myInfo = { age : 18, email : 'sal10@gmail.com' } let cloneMyInfo = myInfo cloneMyInfo.age = cloneMyInfo.age + 1 console.log('cloneMyInfo', cloneMyInfo); console.log('myInfo', myInfo) ..
github actions & pages로 Vue.js 프로젝트 build 하고 호스팅하기 (CI/CD 맛보기) CI Continuous Integration CD Continuous Deploy github action 컨테이너를 띄워서 일련의 작업들을 할 수 있도록 해줌, 그 외 여러가지도 가능 github pages github에서 제공하는 호스팅 TODO : vue.js를 스터디한 내용을 github에 push 하고, github action과 github pages를 사용하여 호스팅을 해보려 한다. 1. github push 생략 (add-commit-push) 2. github action 1) 폴더만들고 그안에 main.yaml 생성 폴더 트리 구조와 파일명을 준수해야한다 .github/workflows/main.yaml 2) main.yaml 파일내용 주의점은 [main] -> 배포할 브랜치를 명시,..
[React] react-router-dom으로 레이아웃 구현, 네비게이션 바로 라우팅 구현, useParams로 파라미터 받 TODO Router 아무 path 없을 때는 layout 구현, 그 안에 Route 구현 notFound 페이지 예외 처리 예정 Layout 에서 NavLink로 링크 구현 Outlet으로 랜더할 내용 받아줌 useParams로 parameter 받기 1. 사용할 페이지 간략 내용 views들 생성 /views/About.js /views/About.js /views/NotFound.js /views/UserDetail.js /views/Users.js Layout은 조금 이따가 2. 레이아웃 담당할 Layout.js 작성 react-router-dom이 제공하는 NavLink, Outlet 사용 NavLink는 a태그 역할 링크 역할 Outlet은 Content가 담길 곳 명시하는 것 (react-r..
[Javascript] 실행 컨텍스트 실행하는 환경 실행되는 환경 실행되는 공간 컨텍스트의 원칙 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생깁니다. 컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성됩니다. 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾습니다. 함수 실행이 마무리되면 해당 컨텍스트는 사라집니다.(클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라집니다. '컨텍스트': { 변수객체: { arguments: [{ word : 'hello' }], variable: null, }, scopeChain: ['wow 변수객체', '전역 변수객체'], this: wi..
[Javascript] 스코프(Scope), 스코프체인, 렉시컬스코프 스코프 : 범위, 함수를 선언할 때 만들어진다. 전역변수 / 지역변수 스코프체인 : 찾는 변수가 내부에 없으면 외부로 -> 전역으로 이어서 찾아가는 것 내부에선 외부로 참조 가능, 외부에서 내부는 참조 불가 var globalName = 'globalName'; // 전역변수 function outer() { console.log('외부에서 전역호출', globalName);// 외부에서 전역호출 var outName = 'outName'; function inner() { console.log('내부에서 전역호출', globalName); //내부에서 전역호출 console.log('내부에서 외부호출', outName); var inName = 'inName'; } inner(); } outer(); ..