본문 바로가기

전체 글72

AWS EC2 Ubuntu 초기세팅 + Nginx, NodeJS 설치 AWS EC2 인스턴스 생성 (Ubuntu) AWS 콘솔 접속 EC2 대시보드 접속 인스턴스 시작 이름 입력 app / os 이미지로 ubuntu 선택 인스턴스 유형 선택 (t2.micro) 키 페어 추가 후 pem키 저장&보관 네트워크 설정 인터넷에서 HTTP / HTTPS 트래픽 허용 체크 (선택) SSH 트래픽 허용 지정 AWS EC2 nginx 설치 # Ubuntu 이미지를 이용했을 경우 sudo apt-get install nginx # 다운로드가 완료되면 명령어를 통해 nginx 설치 폴더로 이동한다. cd /etc/nginx # nginx 실행 sudo service nginx start # nginx 실행 확인 ps -ef | grep nginx AWS EC2 Ubuntu Node.js 설.. 2022. 6. 8.
개발 포트폴리오 개발진척 업데이트 현재 완료된 항목 반응형 웹 디자인 SSR i18n 다국어 지원 (영어 - 한국어) 다크/라이트 컬러 테마 변경 Fake 터미널 구현 Vercel 배포 추가 예정 항목 과거 팀프로젝트 경험 소개 페이지 과거 개발한 UI 컴포넌트들 projects/gallery에 추가 Burger 프로젝트 애니메이션 추가 및 보완 three.js 사용, 3d오브젝트 및 로고 추가 이미지 최적화 2021. 12. 6.
HTML5 Canvas 성능저하 및 랙 이슈 해결 개요 현재 개발 중인 포트폴리오 사이트에 이전에 제작했던 토이 프로젝트인 Wave를 추가할 때 발생한 문제이다. 아래는 기존에 제작한 Wave 프로젝트의 간략한 설명이다. Wave HTML5 + Javascript App : canvas 생성, 메서드 생성, WaveGroup 생성 WaveGroup : 지정한 wave와 point 개수에 맞춰 파도 각각의 색상과 포인트 지정 후 Wave 생성 Wave : canvas context에 파도를 그린다. 화면 크기 변화 시 각 파도를 resize 한다. 기존 프로젝트의 경우 파도의 갯수와 파도의 높이를 결정하는 waveCount와 pointCount를 WaveGroup 내부에서 하드 코딩하여 미리 지정하고 생성하여, 처음 한 번 canvas를 그릴 때 Wave.. 2021. 11. 26.
JS33 - 30.상속, 다형성, 코드의 재사용성 클래스 상속 JS는 프로토타입과 프로토타입 체인 개념을 사용해 상속한다. Non JS Classical Inheritance non-JS의 클래스 상속은 보통 클래스를 확장할 때 부모 클래스와 자식 클래스가 별도의 엔티티 인 동작을 부모 클래스에서 자식으로 복사한다. 클래스에서 인스턴스 또는 객체를 만들 때 두 가지 동작의 또 다른 복사본이 발생하며 둘 다 별도의 Entity다. 자식 클래스가 상속된 이후엔 사본이기 때문에 연결되어 있지 않고, 따라서 둘은 별도의 개체다. 속성 및 동작이 아래로 흐른다. JS Prototypal Inheritance (Behavior delegation pattern) 상속된 객체는 __proto__로 연결되어 있다.(new키워드로 생성됨!) JavaScript에서 객체.. 2021. 11. 9.
JS33 - 29.알고리즘 알고리즘을 마스터하기 위해선 데이터 구조에 대한 명확한 이해가 필요하다. 일반적으로 고려해야 할 사항 필요한 변수 반복 횟수, 종류 사용가능한 빌트인 메서드 고려해야 할 에지 케이스 헬퍼 함수를 추출하거나 추상화할 수 있는가? 확장성이 있는가? input 크기가 커지면 어떻게 실행되는가? 캐싱 메커니즘이 필요한가? 성능 향상과 메모리 최적화 코드 리팩터링과 재사용 기회가 있는 코드를 작성하기 커링을 통한 파라미터 제거 정렬 알고리즘 버블소트 const bubbleSort = array => { let swapped; do { swapped = false; array.forEach((number, index) => { if (number > array[index + 1]) { [array[index], a.. 2021. 11. 9.
OSI 7계층, TCP/IP 4계층, TCP/IP updated 5계층 1. OSI 모형(Open Systems Interconnection Reference Model) 네트워크 통신에서 일어나는 과정을 단계 별로 파악하기 쉽게 7단계로 나눈 것 국제표준화기구(ISO)에서 개발한 모델로, 컴퓨터 네트워크 프로토콜 디자인과 통신을 계층으로 나누어 설명한 것이다. 일반적으로 OSI 7 계층이라고 한다. - wikipedia 이 모델은 프로토콜을 기능 별로 나눈 것이다. 각 계층은 하위 계층의 기능만을 이용하고, 상위 계층에게 기능을 제공한다. '프로토콜 스택' 혹은 '스택'은 이러한 계층들로 구성되는 프로토콜 시스템이 구현된 시스템을 가리키는데, 프로토콜 스택은 하드웨어나 소프트웨어 혹은 둘의 혼합으로 구현될 수 있다. 일반적으로 하위 계층들(물리, 데이터링크)은 하드웨어로,.. 2021. 11. 9.