프론트엔드 개발

타입스크립트는 자바스크립트와 거의 동일한 데이터 타입을 지원하며, 기본 타입은 다음과 같다. Boolean Number String Array Tuple Enum Any Void Null and Undefined Never Object 불리언 ( Boolean ) const isExist: booolean = true; 숫자( Number ) const myAge: number = 29; 문자열 ( String ) const firstName: string = "Kim"; const lastName: string = "Taenam"; const fullName: string = `${firstName} ${lastName}` 배열 ( Array ) 배열 타입은 두 가지 방법으로 쓸 수 있다. 첫 번째 방..

세줄 이상 넘어갈 때 위와 같이 글자가 겹치거나 의도치 않는 상황이 있는데, 이를 해결하기 위해서는 .example { height: 100px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } -webkit-line-clamp 몇 줄로 표시할 것인가 하는 옵션. 예제에서는 2줄로 설정하였다. -webkit-box-orient 방향을 어떻게 설정할지. 값으로는, horizontal | vertical | inline-axis | block-axis 이 있다. -text-overflow ellipsis로 설정하게 된다면, 설정한 높이값을 넘게 된다면,..

디버깅이란? 디버깅 또는 컴퓨터 프로그램 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산(버그)을 찾아내고 그 원인을 밝히고 수정하는 작업 과정을 뜻합니다! 기존에는 console.log를 넣고 매번 수동적으로 컴파일을 하고 나서 확인하는 방법이었는데... 이번 시간에는 코드 에디터를 사용하여 디버깅을 할 수 있는 Debugger에 대해서 알아볼 거예요. 저는 드림코딩 엘리님의 유튜브를 보면서 따라 해 보았습니다. 여기서 말하는 Debuugger는 주로 원하는 코드에 중단점(Break Point)을 지정하여 프로그램 실행을 정지하고, 메모리에 저장된 값을 살펴보며, 실행을 재개하거나, 코드를 단계적으로 실행하는 등의 동작을 하는 것을 말합니다! 다양한 개발툴(브라우저, 인텔리 제이, 비쥬..

자바스크립트를 써왔지만, 타입 스크립트를 써야 하는 이유가 무엇일까? 에러의 사전 방지 타입 스크립트는 프로그래머가 타입을 지정해준 타입이 아닌, 다른 타입을 할당하게 된다면, 컴파일 때, 오류 메시지를 준다. 자바스크립트는 Runtime 때, 타입이 결정된다. 이 말은 즉 프로그래머가 변수에 어떤 데이터, 어떤 타입을 갖는지 명확하지 않은 단점이 있다. 개발 생산성 향상 프론트엔드 개발자들이 사용하는 코드 에디터 중 하나인 Visual Studio Code는 툴의 내부가 타입 스크립트로 작성되어 있어 타입 스크립트 개발에 최적화되어있다. 또한, 객체지향 프로그래밍을 이용하여 고 퀄리티의 코드를 만들고, 객체 위주로 모듈성 있는 코드를 작성할 수 있다. 크로스 플랫폼 지원 자바스크립트가 실행되는 모든 플..

React 프로젝트를 Bitbucket pipeline 이용하여 AWS S3에 배포하기 1. pipeline 클릭 2. pipeline select 3. Configure => 템플릿 설정 4. bitbucket-pipelines.yml # This is an example Starter pipeline configuration # Use a skeleton to build, test and deploy using manual and parallel steps # ----- # You can specify a custom docker image from Docker Hub as your build environment. image: node:10.15.3 pipelines: branches: master..

비쥬얼 스튜디오 코드 터미널에서 npm install -g ts-node npm을 이용하여 설치하고 ts-node main.ts 다시 터미널에서 위와 같은 코드를 입력했을 때, 이와같이 오류가 나타나는데, 스크립트 실행 권한이 제한되어 있는 상태이기 때문이다. 이를 해결하려면 Window PowerShell을 관리자 권한으로 실행하고, 권한 설정을 바꿔줘야 한다. Window10 기준: 시작에서 windows PowerShell을 검색해서 관리자로 실행 Set-ExecutionPolicy RemoteSigned 으로 정책 설정 RemoteSigned : 로컬 컴튜퍼에서 본인이 생성한 스크립트만 실행 가능 또는 인터넷에서 다운로드 받은 스크립트는 신뢰된 배포자에 의해 서명된 것만 실행 가능한 정책 이후 정..

타입스크립트란? JavaScript and More TypeScript는 세계에서 가장 많이 사용되는 도구 중 하나 인 JavaScript를 기반으로하여 정적 타입 정의를 더한 오픈 소스 언어입니다. 타입은 객체의 모양을 설명하는 방법을 제공하고 더 나은 문서를 제공하며 TypeScript가 코드가 올바르게 작동하는지 확인할 수 있도록합니다. TypeScript에서 타입 작성은 선택 사항 일 수 있습니다. 타입 추론을 사용하면 추가 코드를 작성하지 않고도 많은 이점을 얻을 수 있기 때문입니다. A Result You Can Trust 유효한 JavaScript 코드는 모두 TypeScript 코드입니다. 타입 검사 오류가 발생할 수 있지만 결과 JavaScript 실행이 중단되지는 않습니다. 더 엄격한 ..

local에서 작업하였던 것을 AWS에 연결하여, 배포 서버에서 build하는 방식을 지양하려고 하고 있다 서버의 메모리 부족으로 인해, client가 몰릴때 서버에서 build를 한다면, 터져서 다른 시스템이 다운되는 현상이 발생 pm2란? Node.js용 Process manager pm2 사용이유 Node.js를 활용한 실제 서비스를 무중단으로 운영하기 위해 Node.js의 클러스터 모듈을 사용해서 원하는 수 만큼 프로세스를 쉽게 늘리고 줄일 수 있게 하기 위해 pm2 설치 방법 npm install pm2 -g 이외에 pm2를 자세하게 보고 싶다면 공식문서나 이곳을 참고하세요 로컬에서 build 하는 방식 Tools: ftp(fileZila) Solution 1. sftp 이용, 공인키 인증하는 ..