고슴도치의 IT여행

과거의 터미널과 현재의 터미널 개념이 사뭇 다르다. 과거 과거에는 "컴퓨터에 접속하기 위한 Text 기반 장치"로서 터미널을 정의했다. 현재 현재는 과거에 터미널이라고 불렸던 단말 장치를 SW로 구현하여 터미널을 이용하고 있다. 위와 같은 CLI 프로그램을 터미널 또는 콘솔이라고 한다. Terminator​ 터미널 에뮬리이터 중 Terminator라는 툴을 이용하기 위해 리눅스에서 sudo apt install terminator 명령어를 입력해준다. sudo apt install terminator Terminator은 화면 분할(다중 창)이 간편해서 많은 리눅스 개발자들이 사용한다고 한다.

Vue 컴포넌트 라이프사이클 Vuejs 프레임워크 데이터바인딩 유지보수 created mounted 컴포넌트 Vue.js는 컴포넌트 기반의 프레임워크다. Vue.js의 최대 장점은 컴포넌트라고 생각한다...! 컴포넌트에는 단순 html / css 역할 뿐만아니라 기능 호출, 데이터 바인딩등의 요소가 합쳐져있다. 하나의 독립된 개체이기 때문에 어디서든 똑같이 동작하고, 재사용성이 높다. 유지보수성과 가독성도 높다. 실제 개발에서는 각 구역 / 구성별로 컴포넌트를 생성하는 방식으로 활용한다. 라이프사이클 vue.js의 라이프사이클에는 크게 생성, 부착, 수정, 삭제가 있다. 각 컴포넌트별로 특정 시점에 동작해야할 경우들이 발생한다. 그때, 라이프사이클을 이용한다. 라이프 사이클 활용 예시 - created ..

MVVM 패턴 / 디자인패턴 / MVVM 동작과정 / MVC / MVP / Vuejs 디자인패턴 MVC는 들어봤는데 MVVM은 무엇일까? 기회가 된다면 다음에 MVC, MVP, MVVM 을 공부하여 포스팅하겠다. 디자인 패턴이 뭐지? 프로그램 개발시 자주 나타나는 문제를 해결하기 위한 방법이나 규약을 묶어 이름을 붙인것. 특정 디자인 패턴의 규칙대로 개발을하면 협업하기 수월하며 유지보수하기 좋다. Vue.js로 웹을 개발하는 방식이 MVVM 디자인 패턴이다! MVVM 패턴 세가지로 역할을 구분하여 웹 개발을 수행한다. Model : 데이터 처리 코드 View : 화면상 보여지는 UI 코드 ViewModel : View 와 Model을 잇는 코드 여기서 Vue.js는 ViewModel 부분을 담당한다. M..

Vuejs / Virtual Dom / 가상돔 / Vuejs DOM 방식 / 가상돔 개념 / 가상돔 필요성 / 가상돔 동작방식 / 렌더링 최소화 Virtual DOM의 필요성 일반적인 DOM에서 변경 발생시에 Render Tree 생성 > Layout 계산 > Painting 과정이 이루어져 브라우저에 보여진다. 이 일련의 과정들이 DOM을 제어할때마다 일어난다면, 클라이언트에게 부담이 될것이고, 속도 저하가 일어날 것이다. 예를 들어, 10개의 DOM을 순차적으로 변경할 경우, 총 10번의 렌더링을 해야만 한다. Virtual DOM 동작 방식 모든 DOM 제어가 끝난 이후 최종적으로 한번의 렌더링을 수행하도록 하여 속도 저하를 예방할 수 있다. 1. 진짜 DOM 트리를 기반으로, Virtual DOM..

Vuejs / 데이터바인딩 / 단방향 데이터바인딩 / 양방향 데이터바인딩 / 바인딩 / 데이터 상호작용 / Vue 데이터 전달 / Vue 실시간 데이터 전달 데이터 바인딩 (Data Binding) 데이터 바인딩은 사용자와 데이터를 간편하게 상호작용 할 수 있도록 하는 것이다. UI로 보여지는 데이터와 실제 데이터가 직접 연결되어있는 것이다. 예시 코드와 실행 결과를 통해 더 자세히 알아보자. 코드 {{ message }} 클릭해서 데이터 바인딩하기 실행결과 Vue Instance의 값을 수정하면 즉시 {{message}} 위치에 값이 반영된다. 이런 방법을 '선언적 렌더링' 이라고도 한다. 단방향 데이터 바인딩 (v-bind) HTML Form의 값을 바꾸면, Vue 변수에 값이 변경된다. v-bind..

싸피 7기/싸피 임베디드반/싸피 전공자반/싸피 라즈베리파이/SSAFY embedded/SSAFY 7기/싸피 노트북 드디어 임베디드 과정이 시작된다..!!! 본격적인 임베과정을 위해 임베디드 키트를 보내주셨다..! (노트북도 주셨는데 사진은 생략) 프로님들이 하나씩 열심히 준비해주셨다.. 감동,, 아빠는 이걸 보고 로봇 만들기 직전이냐더라 ㅋㅋㅋㅋ 희희 넘나 기대되는 것!!!!! [SSAFY 7기] 합격 방법 : 에세이 작성법 & PT / 면접 준비 방법 SSAFY 합격 전략/에세이 작성 방법/자소서 기반 면접 준비/PT 면접 준비 방법/SSAFY 합격 후기/SSAFY 7기/SSAFY 비전공자/SSAFY 전공자/싸피 합격/싸피 준비/싸피 인터뷰 준비 일단 먼저 합격 사진부터 보 asdfmelody.tist..

서버사이드 렌더링과 클라이언트사이드 렌더링 비교 / SSR CSR 비교 / SEO / 검색엔진최적화 / SPA / 싱글페이지어플리케이션 / Single Page Application 서버사이드 렌더링 (SSR) - HTML을 만드는 곳이 서버다. - 서버에서 페이지를 구현 후 클라이언트로 넘긴다. 장점 1. 초기 로딩 속도가 빠르다. 2. SEO가 CSR보다 유리하다. 단점 1. 페이지 변화 발생시 서버로 다시 렌더링을 요청해야한다. 2. 새로고침이 발생하여 UX적으로 좋지 않다. 3. 서버에 부담이 될 수 있다. 클라이언트사이드 렌더링 (CSR) - HTML을 만드는 곳이 클라이언트이다. - 각 사용자 (클라이언트)에게 책임을 맡기는 방식이다. - 최초 접속시에 JS 코드가 포함된 전체 파일을 읽는다...

Vuejs / Vue 쓰는 이유 / Vue 장점 / Vue 개념 / SPA 프레임워크 / Progressive Javascript / 컴포넌트 / 가상돔 / 양방향 바인딩 왜 Vue.js 를 쓰는가? - SPA(Single Page Applicaton)이로 개발하여 새로고침 현상이 줄어든다. - Progressive JavaScript Framework로서, 점진적으로 수정해 나가면서 Vue.js를 적용시킬수 있다. - 컴포넌트를 이용하여 재사용성이 높아진다. - Virtual DOM 을 사용하여 일반적인 DOM 사용시보다 비교적 효율적이다. - 데이터 단방향 바인딩 뿐 아니라 양방향 바인딩도 가능하다. [Vue.js] 데이터 바인딩 : 단방향 & 양방향 개념과 사용방법 데이터 바인딩 (Data Bind..

그냥 sudo apt-get install nodejs 하면 버전이 너무 낮다. (버전 10으로 설치되는 문제) 높은 버전으로 깔기 위해 명령어 입력 : sudo curl -sL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh sudo bash nodesource_setup.sh sudo apt-get install nodejs 이렇게 하면 버전 16으로 설치된다.

! 주의 : vscode는 메모리 많이 잡아 먹을 수 있으니 주의가 필요하다 1. VSCode에서 Remote SSH 확장 다운로드 2. SSH Targets 추가 유저명@AWS 퍼블릭주소 입력 3. config 파일 수정 IdentityFile : key.pem 절대경로 추가하기 4. 호스트 연결 클릭 설정완료 후 호스트 연결 5. 비번 입력 새로 뜬 VSCode 창에 비밀번호 입력 6. 터미널 켜서 연결 됐는지 확인 7. 폴더 열기 -> /home/유저명 으로 이동 신뢰하기 -> 비번 입력 8. 테스트 폴더 생성 hello-world 폴더 생성 -> index.html 생성 아래와 같이 코드 입력 9. 기본 시작 주소 현재 경로로 변경 터미널에서 명령어 입력 cd /etc/nginx cd sites-..