목록대학교 (252)
SW
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/lr7ZS/btqF7uHvmUQ/GYwF9VjTk3VKV3BIAFY3b1/img.png)
1. 도커(Docker) Docker는 컨테이너 기반의 오픈소스 가상화 플랫폼이다. Docker는 environment disparity 문제를 해결해준다. environment disparity가 무엇이냐? 예를 들어, 어제 저녁에 개발을 하고 있었고 서버에 올리기만 하면 되는 일이었다. 근데 올린게 작동을 잘 안했다. 그 이유는 내 컴퓨터는 윈도우고 서버는 리눅스 였기 때문이다. 이러한 것이 environment disparity이다. Docker가 그것을 해결해준다. 위 문제를 해결하기 위해 윈도우와 서버에 docker를 둘다 설치한다. 거기에 내가 설치하고 싶은 우분투, 파이썬, 깃 등등을 설치한다. 이 파일을 서버와 윈도우 둘에게 주고 Docker는 해당 설정 환경과 같은 버츄얼 컨테이너를 컴퓨..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bYrTMB/btqF6Ew5gGV/rNnKGKD6HAFWLuM5RwChR0/img.jpg)
MSA(Micro Service Architecture) 클라이언트 개발자보다는 서버 개발자가 더 관심을 가지는 내용 마이크로 서비스는 최근에 나온 아키텍쳐가 아니고 옛날부터 존재했던 아키텍쳐이다. 다만 최신 개발 트렌드로 많이 언급되는 주제이다. MSA가 절대적으로 좋은 것이 아니라 자신이 속해 있는 팀과 개발, 배포 방식에 맞는 아키텍쳐를 적용하는 것이 유리하다. MSA이전의 아키텍처라고 할 수 있는 가장 기본적인 형태의 아키텍처인 모놀리틱 아키텍처를 먼저 보겠다. 모놀리틱 아키텍처 모놀리틱 아키텍처는 최근 서비스 구성의 관점에서보면 단점이 있다. 쉽게 말하자면, 서버 한 대에 DB나 API를 둔 뒤에 서버 한대로 배포를 진행하는 방식이라고 볼 수 있다. 그렇기 때문에 예를 들면 서비스가 약간 크다고..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bCHoVU/btqFQKSijIS/Y1iBL0ekJKrfCE4cJGlJq0/img.png)
1. Error yarn과 npm으로 graphql을 중복 설치하여 생긴 문제 Error: Cannot use GraphQLSchema "[object GraphQLSchema]" from another module or realm. Ensure that there is only one instance of "graphql" in the node_modules directory. If different versions of "graphql" are the dependencies of other relied on modules, use "resolutions" to ensure only one version is installed. https://yarnpkg.com/en/docs/selective-ver..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cnM91W/btqFT8RM5t4/3KbtkQx8qAmyKiuxCeNbk1/img.png)
1. npm error npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! gql-apollo-react@1.0.0 start: `nodemon src/index.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the gql-apollo-react@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\KFL202007_2\AppData..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dkEO78/btqFS0OaF2a/8fEFXPjrGDrgTSrx2KTV31/img.jpg)
1. Error Spread Operator인 ... 에서 Unexpected token 에러가 떴다. 2. Solution .babelrc 파일에 문제가 있었다. npm instal babel-preset-stage-3 실행 후 다음과 같이 "stage-3"을 추가 해결됨.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Cxm9l/btqDnxHC0dt/s1YUri3JOMw9uolShPSBk0/img.jpg)
0. Setup 리액트 네이티브 앱, 리액트 웹 어플리케이션이 있고, css 코드를 공유하고 싶을 때 사용한다. 왜냐하면 리액트 네이티브에 작업한 css코드는 사실 css가 아닌 JS object이기 때문이다. 이 포스팅에서는 SASS코드를 SASS설치 없이 사용하고, css파일 없이 css코드를 짤 수 있도록 해보겠다. 먼저 다음과 같이 디렉토리 구조 세팅을 하고 시작하겠다. 세팅 완료 후 다음과 같이 작성한다. 결과화면은 다음과 같다. 색상은 이 사이트에서 참고하였다. https://flatuicolors.com/ Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨 280 handpicked colors ready for COPY & PASTE flatuicol..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/8Wfk7/btqDuqm9MAp/GBC7V4iac0Z0yBVFW2bXK0/img.png)
0. DBMS의 발전 배경 DBMS DataBase Management System 데이터베이스를 관리해주는 소프트웨어 화일 중심 데이터 처리 시스템(System) 각 응용 프로그램이 논리적 화일 구조를 정의하고 직접 물리적 화일구조로 표현 각 응용 프로그램이 물리적 데이터 구조에 대한 접근 방법을 구현 각 사용자가 데이터와 이를 처리하는 프로그램을 모두 관리 유지 응용 간의 데이터 공용이 불가능 화일 시스템에서 응용 프로그램과 화일과의 관계 1:1 관계 => 데이터의 종속성(dependency)와 중복성(redundancy)을 야기 문제점 : 주소, 사원번호, 이름과 같은 것이 각 화일에 공통으로 들어가 있을 수 있음. 만약 하나의 프로그램에서 어떤 직원의 주소를 바꾸면 다른 부서에서 봤을 때 바뀐 주..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/qaRPq/btqDp2OtnJu/oa6UPJvQOrLMrbtJl6F2d0/img.png)
0. Database란? "한 조직(enterprise)의 여러 응용 시스템들이 공유(shared)하기 위해 통합(integrated), 저장(stored)한 운영 데이터(operaional data)의 집합 공용 데이터(shared data) 한 조직의 여러 응용 시스템들이 공동으로 소유, 유지, 이용하는 데이터 통합 데이터(integrated data) 최소의 중복(minimal redundancy) 통제된 중복(controlled redundancy) 수강신청 시 필요한 정보들이 학생정보처리과, 수업정보처리과, 00과에 중복되어 있으면 효율성이 떨어지므로 한곳에 데이터들을 모아두고 갖다 쓴다. 저장 데이터(stored data) 컴퓨터가 접근 가능한 저장 매체에 저장 플래시 메모리, 하드디스크, 클..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cnfXKy/btqDgykYXlQ/yp1VK0r7nhWCeFoSx9LJP1/img.png)
0. useEffect useEffect는 componentWillUnmount, componentDidMount, componentWillUpdate와 비슷하다. 이 모든 것과 동일한 function이다. react hooks로 작업할 때 중요하다. 다음 예시를 보자. useEffect는 ComponentDidMount, componentDidUpdate의 역할을 하기 때문에 시작하거나 버튼을 클릭할 때 콘솔에 hello가 찍힌다. useEffect의 첫번째 인자는 function으로서의 effect가 된다. 두번째 인자는 dependency이다. 만약 dependency(deps)가 있다면 effect는 (deps)리스트에 있는 값일 때만 값이 변하도록 활성화 될 것이다. 다음 dependency를 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c3JHcH/btqDgxToYqV/gQCO4Fsi6bFnzvu9NIl3j1/img.jpg)
0. 네이버 API 사용 방법 1) 아래 url에서 API 키를 발급 받는다. https://developers.naver.com NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음성인식, 음성합성 등이 있습니다. developers.naver.com 2) Products -> 서비스 API -> 검색 3) API 키를 발급 받기 위해 오픈 API 이용 신청 버튼을 클릭한다. 4) 정보 입력 (비로그인 오픈 API 서비스 환경 -> WEB 설정) 5) Client ID / Client Server 발급 완료 1. 활용 예시..