DalpangLOG

MDN WEB DOCS Getting started with the web https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web Getting started with the web - Learn web development | MDN Getting started with the web is a concise series introducing you to the practicalities of web development. You'll set up the tools you need to construct a simple webpage and publish your own simple code. developer.mozilla..

개발공부/개발공부 2022. 12. 9. 23:58

I/O Redirection Standard Input : 키보드로 입력받는 기본 입력 방식도 있지만 "" 문자를 통해 입력 한 파일을 처리한 후, 출력할 수 있음. (출력 리다이렉션) 리다이렉션 연산자의 순서는 중요하지 않음. 단, "" 옵션은 명령어의 다른 옵션 및 인자들 이후에 사용해야 한다. Pipelines I/O 리다이렉션을 통해 여러 명령어의 조합 즉, 파이프라인 형성 가능. ls -l | less 위의 커맨드를 사용하면 ls 명령어의 결과물이 less 커맨드의 인자로 입력된다. 다른 예제 Command 기능 ls -lt | head Displays the 10 newest files in the current directory. du | sort -nr Displays a list of d..

개발공부/개발공부 2022. 12. 6. 17:28

Linux Command linuxcommand.org -> Learning the Shell "Shell"이란 무엇인가? Shell - 키보드로부터 명령을 입력받아 운영시스템에 전달하는 프로그램. 명령어 해석기. 완전한 프로그램언어임(변수정의, 조건문, 반복문, 산술연산등 모두 가능) Shell program for Linux : bash, ksh, tcsh, zsh. Terminal? - Terminal emulator. shell과 상호작용 할 수 있도록 창구를 열어주는 프로그램. example of terminal emulator : gnome-terminal, konsole, xterm, rxvt, kvt, nxterm, eterm, etc. 더보기 emulator - 〔컴퓨터〕 어떤 기종용(機..

개발공부/개발공부 2022. 12. 6. 14:16

Computed Properties. 코드의 재사용성을 높이기 위해 Computed Properties를 사용 할 수 있는데, 여기서 Computed Properties는 바로 컴퓨터가 우리 대신 연산을 해서 값을 리턴해주는것을 뜻한다. 예제를 보자. computed Properties를 사용하지 않을 경우. - index.html ... {{ brand + ' ' + product }} ... - Main.js const app = Vue.createApp ({ data(){ return { cart:0, product: 'Socks', brand:'Vue Mastery', ... } } }) 위와 같이 코드를 작성했을 경우 h2태그 내에 우리가 지정해준 뷰앱 속성값이 치환되어 웹페이지에 출력되게 된다..

Programming/FrontEnd 2022. 11. 10. 16:05

Amazon RDS Amazon Relational Database Service -> 데이터베이스를 아마존이 설치 및 대신 관리해줌. 관리를 해주는만큼 비싸지만, 데이터를 중요시하는 기업에서는 위험성 줄이기 위해 비용을 지불하면서 사용하는 경우가 많음. Amazon RDS로 이동하여 인스턴스 생성을 통해 데이터 베이스 생성 가능. 데이터베이스 관리 시스템 | 관계형 RDS | Amazon Web Services aws.amazon.com 다중 AZ? 하나 이상의 Availability Zone 즉, 가용성 지역에 데이터를 저장해놔 한곳의 데이터가 유실 되어도 다른 가용성 지역의 데이터를 사용하므로써 데이터 유실이나 서비스 중지를 막는것. 단, 스토리지를 두개 사용하는만큼 비용이 두배로 들기 때문에 잘 ..

개발공부/Cloud 2022. 11. 5. 09:17

Git-branch 사용을 위해 SourceTree 프로그램을 사용하려는데 기존에 내가 만든 리포는 나오지만 회사 Repository가 나오지 않는 문제가 있었다. 깃허브 OAuth 인증을 통해 로그인했는데, 자동으로 SSH등록이 안되어 수동으로 등록해야한다는 팝업이 떴다. SSH 수동 등록하러 이동! 깃허브 웹 사이트에 들어가서 settings -> Access -> SSH and GPG keys 선택 SSH keys에 새로운 SSH Key를 추가. 이때, SSH Key는 깃허브 연결 시에 나오는 복사 가능한 SSH key가 있고 그 밑에 Copy to Clipboard라는 버튼을 통해 복사해 사용한다. New SSH Key 버튼 클릭 후 나오는 팝업창 맨 위 SSH Keys이름은 자기가 알아보기 좋게..

개발공부/개발공부 2022. 11. 4. 19:34

CloudFront -> Web Server와 클라이언트 사이에 존재하여, 클라이언트단에서 좀 더 빠르게 요청된 데이터를 보여줄 수 있게 캐싱 데이터를 보내주는 CDN 서비스. AWS 서비스에서 Networking & Content Delivery -> CloudFront 선택 Create Distribution -> Domain명, Http Port 제대로 입력 후 Create Distribution 클릭. (추가 세팅이 필요하다면 다른 설정 자세히 살펴볼 것) Status가 Deployed로 바뀐 뒤 이름 클릭 -> Domain Name 주소로 접속 가능. 접속 시 원래 웹서버에 있던 내용과 동일하게 작동한다. 장단점? 클라우드 프런트로 로딩 시, 캐싱된 데이터를 보내주기 때문에 빠르게 로딩되는 장점..

개발공부/Cloud 2022. 11. 4. 10:50

AWS Amazon S3 (Simple Storage Service) 구성요소 - Bucket : 프로젝트 단위, 폴더들이 담김. - Folder : 파일이 담긴 단위 - Object : 파일의 단위 Object = 파일 + S3에서 요구하는 정보들. Bucket 생성 생성 시 버전 관리 옵션 설정 가능. 권한 설정을 통해 퍼블릭하게 내 파일이 보이게 할지 여부에 따라 선택할 것. Bucket 이름은 다른 사용자들이 생성하지 않은 이름으로만 생성 가능. Bucket 속성 수정 및 삭제는 s3사이트 내에서 UI를 통해 가능. Bucket내에 Directory(Folder) 만들기 버킷 명 클릭 -> 폴더 만들기 -> 폴더명 지정 -> 저장. 권한 설정 업로드된 파일이 웹 브라우저를 통해 다른 사람들도 확인..

개발공부/Cloud 2022. 11. 3. 18:27

AWS 보안 AWS 서비스 중 IAM(Identity and Access Management)를 통해 보안 설정 확인 가능. 추천 방법 MFA (Multi-Factor Authentication) -> Google OTP를 사용해 2중 인증으로 로그인 보안 가능. 계정 닫기 내계정 -> close Account로 이동시 계정 닫기 가능. 90일 내에는 다시 계정을 열 수 있지만 그 이후에는 불가능하고, 가입했다가 계정을 닫은 이메일로는 다시 계정 생성이 불가능하다. 다시 사용하지 않을 경우에는 혹시 모를 과금을 막기 위해 계정을 닫는 것도 좋은 방법.

개발공부/Cloud 2022. 11. 3. 16:54

EC2 인스턴스 접속하기 AWS EC2 인스턴스 리스트에서 열려는 인스턴스를 우클릭 -> '연결' 선택 인스턴스에 연결 이라는 팝업이 뜨게 되면 '원격 데스크톱 파일 다운로드' 선택. -> 파일이 다운받아진다. 원격 데스크톱 접속을 위해 Mac Appstore에서 'Microsoft Remote Desktop mac'을 선택하여 다운로드한다. 다운로드한 파일 우클릭 -> open with 'Microsoft Remote Desktop'선택 비밀번호 입력 창이 뜰 경우, AWS의 팝업창에 있는 암호 가져오기를 통해 이전에 다운로드한 암호 파일을 열고, 이내 활성화된 비밀 번호를 복사하여 'Microsoft Remote Desktop'에 붙여 넣기 하면 원격 접속 가능! 윈도의 경우는 그냥 파일을 다운로드하..

개발공부/Cloud 2022. 11. 3. 12:25

AWS EC2 인스턴스 설정 Step 3: Configure Instances에서 설정하는 것들. : 추가 network setting, 운영체제에서 shutdown 시킬 경우 stop 또는 instance terminate(즉, 인스턴스 자체 제거) 옵션 설정. -> enable termination protection : 인스턴스를 의도치 않게 삭제하는 것을 막기 위해 protect 걸어놓기. * VPC: Virtual Private Cloud Step 4. Add Storage. 무료로는 Size 30 GiB까지 사용 가능, 추가 시 과금. Volume Type : SSD(General, Provisioned), Magnetic. * provisioned ssd : 속도 지정 가능. 속도 빠를수록 ..

개발공부/Cloud 2022. 11. 3. 11:43

AWS 지역? Region : 실제 인프라가 설치된 위치. 제공하는 서비스의 주요 사용자가 많이 위치한 곳의 지역(region)을 선택하는 것이 속도면에서 이득. 각각 지역에 따라 책정 요금 다를 수 있음. EC2 ->Region을 설정하면 해당 Region에 실질적으로 위치한 컴퓨터들을 임대받아 사용하는 개념. Instances -> 컴퓨터 하나를 인스턴스 하나라고 볼 수 있다. Instance Type - Choose an Amazon Macnine Image(AMI) Linux, Window 타입 제공. (with SQL Server 설치되지 않은 경우 대부분 1년간 무료 사용가능) https://www.youtube.com/watch?v=Xm4ADDYvO8w&list=PLuHgQVnccGMC5AY..

개발공부/Cloud 2022. 11. 3. 10:55

다음의 내용은 Amazon Web Services (이하, AWS)에서 제공하는 강의 중 '클라우드 기반 앱 현대화를 위한 다섯가지 경로'에 대한 강의 노트이다. Legacy Application? -> 과거의 기술이나 플랫폼을 이용해 작성된 애플리케이션. 엔터프라이즈 클라우드 마이그레이션 - 7R 전략 - Refactor : 새롭게 새로 개발하여 클라우드에서 서비스 - Re-Platform : 클라우드 기반의 새로운 플랫폼으로 이전, - Repurchase : 클라우드 기반의 SaaS 플랫폼을 구매하여 사용, 클라우드화 시키는 과정, - Rehost, Relocate : Lift & Shift 즉, 그대로 가져다가 옮기는 것. - Retain, Retire : 더 이상 운영하기 힘든 레거시를 폐기 또는..

카테고리 없음 2022. 11. 2. 16:37

지난 시간 green, blue로 출력된 글 자위에 mouseover 하면 해당 색상의 이미지가 출력되는 것을 확인했다. 이번 시간에는 이 글자 대신 실제 색상이 출력되게끔 코드를 변경할 것. 전 {{ variant.color }} 후 위의 html파일에서 연결해준 class="color-circle"은 css파일의 다음 코드와 html 파일을 연결해준다. css 파일 확인하기. .color-circle { width: 50px; height: 50px; margin-top: 8px; border: 2px solid #d8d8d8; border-radius: 50%; } 실제 실행시 다음과 같이 작동. VUE 스타일 바인딩 사용하기 index.html HTML 파일에서 아래와 같이 css 스타일 바인딩을..

Programming/FrontEnd 2022. 10. 15. 02:04

이번 튜토리얼을 끝내면 다음과 같이 이벤트를 처리할 수 있는 버튼을 생성할 수 있다. 깃헙에서 L6-start 브랜치를 체크아웃하면 index.html 파일에서 다음 코드를 확인할 수 있다. Cart({{ cart }}) ... Add to Cart index.html 파일의 cart변수는 main.js의 cart 속성을 출력하게 된다. 소스코드에는 app이 return하는 객체 내부에 cart 속성으로 지정되어 있음. 이벤트 리스닝 속성 추가 button 태그가 이벤트를 인식할 수 있도록 하기 위해 vue는 v-on속성을 제공한다. 위의 사진을 보면, v-on속성 뒤에 ':'콜론과 함께 어떤 이벤트를 리스닝해야 하는지 지정해주고, 그 값으로 어떤 행위가 수행되어야 하는지 지정해 줄 수 있다. 하지만 보..

Programming/FrontEnd 2022. 10. 13. 04:11

Vue를 사용하여 리스트에 접근하기 위해서는 v-for 옵션을 사용하게 된다. main.js 파일의 소스코드를 보면, details라는 리스트를 생성해놨다. const app = Vue.createApp({ data() { return { product: 'Socks', image: './assets/images/socks_blue.jpg', inStock: true, details: ['50% cotton', '30% wool', '20% polyester'] } } }) 이 리스트 내부 요소를 출력하기 위해 html파일 ul, li 태그에 v-for 옵션을 추가해 다음의 라인을 추가하면, 바로 밑의 실행 사진과 같이 for 루프를 돌면서 내부 요소를 출력해준다. {{ detail }} v-for에 옵..

Programming/FrontEnd 2022. 10. 13. 03:10