전체 글 527

패키지와 패키지 매니저

Achievement Goals 패키지와 패키지 매니저 필요성을 이해할 수 있다. 각 운영체제에 맞는 패키지 매니저를 사용할 수 있다. MacOS 운영체제에서 터미널을 통해 Homebrew 패키지 매니저를 설치하고 패키지를 관리하는 명령어를 사용할 수 있다. brew update: 패키지의 업데이트 여부 확인 brew outdated: 업데이트 필요한 파일 조회 brew upgrade: 프로그램 업그레이드 brew info: 프로그램의 정보 확인 brew install: 프로그램 설치 brew list: 설치된 프로그램 목록 보기 brew uninstall: 프로그램 삭제 Linux Ubuntu 운영체제에서 사용하는 apt 패키지 매니저에 대해 알고, 명령어를 통해 패키지를 관리할 수 있다. apt up..

관리자 권한과 경로

cd ./hi # 현재 폴더 아래의 hi 폴더로 진입하는 명령 pwd ls 절대 경로와 상대 경로 절대경로 Ubuntu /home/[username]/helloWorld/hello/ 라는 예시를 보면 helloWorld라는 파일 내에 hello라는 파일 내부로 들어가는 절대경로입니다. 상대경로 상대 경로는 특정 폴더 또는 파일의 위치를 현재 위치를 기준점으로 나타내고 현재 위치한 폴더는 점(.)으로 표현하고, 상위 폴더는 두 개의 점(..)으로 표현합니다. sudo: 관리자 권한을 획득하는 명령어 명령어 sudo는 사용자 환경에서, 관리자 권한을 획득하는 명령어입니다.

기본적인 명령어(2)

rm: 폴더나 파일 삭제하기 명령어 rm은 폴더나 파일을 삭제할 때 사용합니다. rm bye.txt ls [커맨드] rm 명령어를 통해 bye.txt를 삭제합니다. 명령어 rm은 단일 파일을 삭제할 수 있습니다. 만약 폴더를 삭제하려면 옵션을 이용해야 합니다. rm -rf bye ls # 아무것도 출력되지 않습니다. [커맨드] 옵션 -rf를 사용해 폴더를 삭제합니다. r은 "recursive"를 뜻하고 폴더를 지울 떄 사용하고, 옵션 f는 "force"를 뜻하고 질문을 받지 않고 지울떄 사용합니다. mv: 폴더나 파일의 이름을 변경, 또는 폴더나 파일의 위치 옮기기 mv는 move의 약자로, 폴더나 파일을 이동할 때 사용합니다. 명령어 mv를 통해 파일 "bye.txt"를 폴더 "bye"로 옮깁니다. 다..

기본 명령어

📌 Achievement Goals 리눅스 터미널을 실행할 수 있다. CLI를 이용한 작업과 GUI를 이용한 작업이 동일함을 이해할 수 있다. GUI의 변경사항을 CLI로 확인할 수 있다. CLI의 변경사항을 GUI로 확인할 수 있다. 리눅스 터미널에서 기본적인 명령어를 사용할 수 있다. pwd: 현재 위치를 확인하는 명령어 mkdir: 새로운 폴더를 생성하는 명령어 ls: 폴더나 파일의 목록을 출력하는 명령어 nautilus (Ubuntu), open (macOS): 현재 폴더를 파일 탐색기로 여는 명령어 cd: 폴더에 진입하는 명령어 touch: 새로운 파일을 생성하는 명령어 cat: 파일의 내용을 터미널에 출력하는 명령어 rm: 폴더나 파일을 삭제하는 명령어 mv: 폴더나 파일의 위치를 이동하거나,..

CSS(box-sizing : border-box)

처음 레이아웃 디자인을 할 때 가장 많이하는 실수가 있습니다. 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우입니다. 박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있습니다. 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만듭니다. 레이아웃 디자인을 조금 더 쉽게하는 방법이 있습니다. 여백과 테두리 두께를 포함한 박스 계산 법입니다. *은 모든 요소를 선택하는 셀렉터입니다. 모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가합니다.

TypeScript란?

TypeScript는 Statically Typed로 코딩을 할 때 결정이 되는 언어로 즉각적으로 타입 에러를 받아볼 수 있는 언어입니다. 컴파일러: 프로그램이 동작하는 환경에서 이해할 수 있는 언어나 바이너리 형태로 변환해주는 작업 컴파일러 시간에 타입이 결정되고 확인할 수 있으면 Statically Typed 런타임 환경때 타입이 결정되고 확인되는 것을 dynamically type이라고 합니다. 두번째: 강력한 객체 지향 프로그래밍이 가능하기 때문 OOP(Object-Oriented Programming)는 객체 위주로 모듈성 있는 코드를 작성할 수 있고 재사용성이 높고 확장성도 높고 유지 보수성이 좋습니다.

async / await

async & await 프로미스 체이닝을 계속 하다보면 코드의 가독성이 떨어짐 async 와 await는 Promise를 간결/간편하고 동기적으로 실행되는것 처럼 보이게 만들어주는 API async 와 await는 새로운 것이 추가 된게 아니라, 기존에 존재하는 Promise 위에 조금 더 간편한 API를 제공함 이런 것을 syntactic sugar 라고 한다 (Class도 마찬가지..) 비동기 처리를 반드시 해야하는 이유 JS 엔진은 블록({})안에 코드를 동기적으로 실행(처리) 함 시간이 오래 걸리는 코드를 비동기 처리를 전혀 하지 않으면, 다음 코드에 문제가 발생할 수 있음 예를 들어 서버에서 data를 받아와서 웹페이지에 출력하는 시나리오가 있다 data를 받아 오는데 10초가 걸림, 근데 비..

Promise

Promise 프로미스는 JS에서 제공하는 비동기 코드를 간편하게 처리할 수 있도록 도와주는 object 이다. 프로미스는 어떤 기능을 실행하고 나서 정상적으로 동작하면, 성공의 메세지와 함께 처리된 결과값을 전달해줌, 그러나 기능을 수행하다 예상치 못한 문제가 발생하면 error를 전달해 준다. State: pending(보류) → fulfilled(이행) or rejected(거부) Produce vs Consumer 1. Producer (생산자) 새 Promise가 생성되면 executor라는 콜백함수가 자동으로 실행됩니다. (코딩 할 때 조심!!) const promise = new Promise((resolve, reject) => { // 시간이 오래 걸리는 무거운 처리 (network, r..

Callback 지옥

1. 동기와 비동기 Javascript는 synchronous(동기적)이다 hoisting이 된 이후부터, 코드가 작성한 순서대로 실행됨 hoisting: var, function 선언 들이 코드 맨 위로 자동으로 올라가는 것 console.log(`1`); setTimeout(() => console.log(`2`), 1000); console.log(`3`); // Synchronous(동기식) callback function printImmediately(print) { print(); } printImmediately(() => console.log(`hello`)); // Asynchronous(비동기식) callback function printWithDelay(print, timeout) {..