전체 글502 29. 스레드(Thread) - 교착(Deadlock)과 기아(Starvation)상태 1. 개요 - 스레드 동기화 문제를 해결하기 위해서, 임계영역에 접근하는 순서를 프로그래밍한다. - 잘못된 로직을 작성하면 모든 스레드가 대기상태에 걸리거나, 특정 스레드가 아예 접근 기회를 얻지 못하게 된다. - 교착 상태와 기아 상태의 형태는 이론적으로 존재하지만, 특정한 해결 방안은 존재하지 않는다. - 그 이유는 프로그램 구조에 따라 해결방법이 천차만별 다르기 때문이다. - 그러므로, 본 포스팅에서는 Deadlock과 Starvation의 개념과 원인에 대해 작성한다. 2. Deadlock(교착 상태) - Deadlock은 무한 대기 상태를 의미한다. - 즉, 대기중인 두개 이상의 스레드가 서로의 작업이 완료되기를 기다리는 상황을 의미한다. [Thread A] a = "임계자원" lock.acqu.. 2021. 7. 5. 28. 스레드(Thread) - 세마포어(Semaphore) - 이전 포스팅에서 동기화 이슈에 관해 그 문제점과 해결책에 대해서 알아보았다. - 이번 포스팅에서는 동기화 이슈에 관련된 내용을 간략하게 정리하고 전반적인 해결방법에 대해 알아보자. 1. 동기화(Synchronization) 이슈란? - 여러 스레드가 동일한 자원(데이터)에 접근하여 동시 수정을 하는 경우 발생하는 문제 - 연산 누락, 변수값의 변경 등 계산 결과에 오류를 만든다. * 알고 가자!!! - 동기화 문제는 다중 쓰레드, 다중 프로세스 사용 시 발생하는 문제이다. - 아래의 설명에 나온 해결방안이 꼭 다중 쓰레드를 대상으로만 사용되는 것은 아니다. - 다중 프로세스 사용 시 동기화 문제를 해결하는 방법이기도 하다. 2. 동기화 이슈의 해결방법 - 비동기(= 순차적) 작업처리 - 즉, 스레드 .. 2021. 7. 5. Vue3 - 영화 검색 사이트 코드분석 - 본 포스팅은 아래의 프로젝트를 기반으로 다뤄진 내용입니다. https://devraphy.tistory.com/235 Vue3 - 영화 검색 사이트 1. 개요 - Vue 공부를 위한 클론 코딩 - 본 프로젝트는 패스트캠퍼스의 프론트엔드 초격차 패키지의 Vue 파트 강의 내용을 따라 만든 것입니다. 2. 사이트 소개 https://silly-banach-bd5250.netlify.app/#/ Hell.. devraphy.tistory.com 1. 개요 - 본 프로젝트는 Vue3 강의에서 진행한 내용을 그대로 클론코딩한 프로젝트이다. - 강의내용을 따라서 프로젝트를 만들다 보니, 코드와 데이터 흐름에 대한 이해가 부족함을 느꼈다. - 이와 같은 이유로 해당 프로젝트의 핵심 기능을 분석해보려고 한다. 2... 2021. 6. 30. 7. webpack에 대한 이해(사용목적, 기본개념) - Vue 프로젝트 클론코딩을 완료한 이후, Vue와 webpack에 대한 기본적인 개념적 이해가 궁금했다. - 그러므로 본 포스팅에서 webpack을 왜 사용하는지와 webpack의 기본구조에 대한 이야기를 해보려고 한다. 1. webpack을 사용하는 이유 프론트 개발의 영역이 넓어지면서 JavaScript를 이용한 다양한 기술적 풀이가 생겨났다. 하나의 웹 페이지에 연결된 JS파일이 많아지면서 관리에 있어 한계가 발생했고, 웹사이트의 로딩속도가 길어지고 그만큼 더 많은 요청이 발생하여 네트워크 비용이 증가했다. 더불어, JS파일이 많아지면서 서로의 scope를 침범하여 변수간의 충돌을 일으킬 위험성이 증가했다. 이를 해결하기 위해, JS의 즉시호출함수(IIFE) 기능을 이용한 CommonJS, AM.. 2021. 6. 25. 42. Vue - 포트 수정 및 배포 - 본 포스팅은 이전 포스팅과 이어지는 내용임을 알려드립니다. 1. 개요 - 지금까지 Netlify를 이용하여 프로젝트를 관리하고 배포하는 설정을 했다. - 마지막으로 설정해야 하는 부분이 있다면 포트번호를 수정하는 일이다. 2. 명령어(스크립트) 변경 - 위의 사진은 package.json의 일부분이다. - 현재 Netlify의 serverless 함수를 사용하기 위해 개발환경으로 프로젝트를 빌드를 할때 다음과 같은 명령어를 사용한다. - npm run dev:netlify - webpack 서버를 이용하는 개발환경 빌드는 더이상 사용하지 않기 때문에 이 부분을 변경시켜주고 - netlify 서버를 이용한 개발환경 빌드 명령문을 기본 개발환경 명령어로 변경한다. 3. netlify.toml 수정 - 조.. 2021. 6. 24. 41. Vue - 로컬 및 서버의 환경변수 구성 - 본 포스팅은 이전 포스팅에서 사용한 프로젝트와 이어지는 내용입니다. 1. 개요 - 이전 포스팅에서 Netlify serverless 함수를 사용하여 중요한 API key가 사용자측 브라우저에 노출되는 것을 막는 방법을 알아 보았다. - 해당 프로젝트는 git이라는 공개 플랫폼에 소스코드가 공유되어 있다. - 이 경우, 소스코드를 통해서 API key가 노출되는 문제점이 발생한다. - 이를 해결하기 위해 환경변수라는 것을 이용하여 API key를 감추는 방법을 알아보자. 2. 환경변수 설정 - 환경변수를 사용하기 위해서는 하나의 패키지를 설치해야한다. 터미널 입력: npm i -D dotenv-webpack a) webpack.config.js - 새로운 패키지를 설치했으니 환경구성을 해줘야 한다. -.. 2021. 6. 24. 40. Vue - netlify serverless function 설정 1. 사용 프로젝트 https://github.com/akaRaphael/vue3-movie-app.git akaRaphael/vue3-movie-app movie app made of Vue 3. Contribute to akaRaphael/vue3-movie-app development by creating an account on GitHub. github.com 2. 사용 목적 - 위의 프로젝트는 netlify 무료 호스팅 서비스를 이용하여 실제로 빌드를 해놓았다. - 아래의 링크를 통해 확인할 수 있다. https://silly-banach-bd5250.netlify.app/#/ Hello Vue Project! silly-banach-bd5250.netlify.app - 위의 프로젝트에는 한가.. 2021. 6. 23. Vue3 - 영화 검색 사이트 1. 개요 - Vue 공부를 위한 클론 코딩 - 본 프로젝트는 패스트캠퍼스의 프론트엔드 초격차 패키지의 Vue 파트 강의 내용을 따라 만든 것입니다. 2. 사이트 소개 https://silly-banach-bd5250.netlify.app/#/ Hello Vue Project! silly-banach-bd5250.netlify.app - OMDbAPI를 사용하여 영화 검색 사이트 기능 구현 - Vue3를 사용하여 프론트 작업 진행 3. 사용기술 Vue3 BootStrap Webpack ESLint 4. Github https://github.com/devraphy/vue3-movie-app GitHub - devraphy/vue3-movie-app: movie app made of Vue 3 movie .. 2021. 6. 22. 39. Vue - router 개념 정리 1. 페이지가 변경되면 해당 페이지의 컴포넌트가 출력되는 부분이자 컴포넌트 2. 페이지 이동을 위한 링크 컴포넌트 3. $route 페이지의 정보를 갖고 있는 객체 페이지가 가지고 있는 여러가지 속성값 들을 조회하는 용도 ex) route 객체를 통해 fullPath, params와 같은 페이지 정보를 확인할 수 있다. 4. $router 페이지를 조작하기 위해서 사용하는 객체 페이지를 조작하기 위해, 페이지를 router 객체가 갖는 여러가지 메소드를 사용하여 조작하는 용도 ex) RouterLink 대신 router객체의 push()메소드를 사용해서 페이지 이동을 구현할 수 있다. 5. URL 구조분석 a. fullpath란? - 페이지의 경로와 해당 페이지가 갖는 정보를 표현하는 부분 - $rout.. 2021. 6. 21. 38. Vue - vuex 개념 정리 1. Store 각 vue 컴포넌트에서 사용하는 데이터를 다른 컴포넌트와 공유하여 사용하기 위해서 store라는 하나의 데이터 창고를 형성하여 각 컴포넌트의 데이터를 보관한다. 2. Store module 모듈이라는 분리된 저장공간을 만들어, 각 컴포넌트의 데이터를 따로 정리하여 보관할 수 있다. 3. Store의 속성(option)개념 namespaced: 스토어 모듈임을 명시하는 속성, boolean state: 뷰 컴포넌트에서 사용되는 데이터 getters: 뷰 컴포넌트의 computed()와 동일한 기능을 작성하는 부분 , 일방통행 - state 데이터를 읽기만 가능 mutations: 뷰 컴포넌트의 methods()와 동일한 기능을 작성하는 부분, 쌍방통행 - state 값 변경 가능 actio.. 2021. 6. 21. 37. Vue - vuex helper 1. Vuex Helper 이전 포스팅에서 Store 개념을 사용하기 위해 Vuex를 설치하고 사용법을 익혀보았다. 이번 포스팅에서는 Vuex를 사용하여 반복되는 코드를 줄이고 코드의 효율성 및 재활용을 높이는 방법을 알아보자. a. mapState https://next.vuex.vuejs.org/guide/state.html#the-mapstate-helper State | Vuex State Single State Tree Vuex uses a single state tree - that is, this single object contains all your application level state and serves as the "single source of truth." This also .. 2021. 6. 21. 36. Vue - 컴포넌트 전역 스타일 1. Sass loader 일반적으로 부트스트랩을 사용하게 되면 사용하는 컴포넌트의 script 태그에 매번 @import 키워드를 통하여 부트스트랩을 가져오게 된다. 하지만, 이러한 방식은 코드를 반복적으로 사용하게 되어 코드의 효율이 떨어지게 된다. 계속해서 컴포넌트를 로드할 때마다 해당 부트스트랩 파일을 읽어야 하기 때문이다. 그렇다면 한번에 스타일을 읽어올 수 있다면 더 효율적이지 않을까? 그러한 방법은 없을까? 이를 해결해주는 오픈소스가 Sass-loader 이다. 2. 설치 https://github.com/webpack-contrib/sass-loader webpack-contrib/sass-loader Compiles Sass to CSS. Contribute to webpack-contr.. 2021. 6. 21. 이전 1 ··· 23 24 25 26 27 28 29 ··· 42 다음
