본문 바로가기

분류 전체보기365

[1주차] git branch 1월 15일 자 학습 내용 정리입니다. ✅ branch 버전 관리 시스템에서 branch는 독립적으로 어떤 작업을 진행하기 위한 개념이다. 개발을 하다 보면 코드를 여러 개로 복사해야 하는 일이 자주 생기는데 이때 브랜치를 이용해 코드를 통째로 복사하고 나서 원래 코드와는 상관없이 독립적으로 개발을 진행할 수 있다. 그 이유는 git이 데이터를 일련의 스냅샷으로 기록하기 때문이다. 어떤 파일을 커밋하면 git은 현재 Staging Area에 있는 데이터의 스냅샷에 대한 포인터, 메타데이터, 이전 커밋에 대한 포인터 등을 포함하는 commit object를 만들어 저장한다. 이때 데이터의 스냅샷에 대한 포인터와 이전 커밋에 대한 포인터를 저장한다는 점을 유의깊게 봐야 한다. 커밋을 한다는 점은 새로운 체크.. 2022. 1. 17.
[1주차] git 명령어 1월 15일 자 학습 내용 정리입니다. ✅ git 설치 git 설치는 다음 url에서 가능하다. https://git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp git-scm.com 위 url에서 해당하는 os를 고른 뒤 알맞은 버전의.. 2022. 1. 17.
[1주차] git 1월 15일 자 학습 내용 정리입니다. ✅ git git은 버전 관리 도구이다. 버전 관리 시스템은 파일의 변화를 시간에 따라 기록했다가 나중에 특정 시점의 버전을 다시 꺼내올 수 있는 시스템이다. 버전 관리 시스템(VCS, Version Control System)을 사용하면 각 파일을 이전 상태로 되돌릴 수 있고 파일 단위가 아닌 프로젝트 전체를 이전 상태로 되돌리는 것도 가능하다. 또한 시간에 따른 수정 내용을 비교해 볼 수 있고 발생한 에러를 추적할 수도 있으며 잘못된 파일을 복구시킬 수도 있다. git은 협업 도구이다. git은 효율적인 협업이 가능하도록 한다. 효율적인 협업이 가능한 이유는 git의 특징에서 자세히 알 수 있다. git의 특징은 다음과 같다. 1. 가지치기와 병합이 가능하다. .. 2022. 1. 17.
[1주차] 미디어쿼리 1월 13일 자 학습 내용 정리입니다. ✅ 미디어쿼리 기존의 웹사이트들은 pc에 맞추어 만들어지는 것이 기본적이다. 하지만 최근 휴대폰, 태블릿 등 pc보다 작은 모바일 기기들이 많이 사용되고 있는 시점에서 각 모바일 기기들에 맞추어 화면을 보여주는 것이 필요해졌다. 따라서 pc 뿐만 아니라 모바일, 태블릿 등에서도 대응되는 반응형, 적응형 웹 사이트들을 만들기 위해 미디어 쿼리의 개념이 필요해졌다. 미디어쿼리는 여러 기기에 맞추어 웹 사이트를 만들기 위해 사용하는 css 구문으로 해당 기기의 화면 크기에 맞추어 요소들의 크기, 위치 등을 조절할 때 쓰인다. 미디어 쿼리의 구문은 아래와 같다. @media (min-width) and (max-width) { ... } min-width와 max-widt.. 2022. 1. 13.
[1주차] transform, transition, animation 1월 13일 자 학습 내용 정리입니다. ✅ tramsform 특정 영역에서 object를 회전시키거나 위치 이동, 크기 변경이 필요할 때 사용한다. rotate transform: rotate(각도) object에 대해 평면적인 회전을 할 때 사용한다. 음수와 양수 모두 가능하며 양수이면 시계방향, 음수이면 반시계방향으로 회전한다. scale transform: scale(width 비율, height 비율) object의 크기를 조절할 때 사용한다. 2를 입력하면 object 기본 크기의 2배, 0.5를 입력하면 object 기본 크기의 0.5배가 된다. skew transform: skew(x축, y축) object에 대해 입체적인 회전을 할 때 사용한다. translate transform: tra.. 2022. 1. 13.
[FP&ES6+] go, pipe, reduce에서 비동기 제어 함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다. ✅ go, pipe, reduce에서 비동기 제어 const go = (...args) => reduce((a, f) => f(a), args); const pipe = (f, ...fs) => (...as) => go(f(...as), ...fs); const reduce = curry((f, acc, iter) => { if (!iter) { iter = acc[Symbol.iterator](); acc = iter.next().value; } else iter = iter[Symbol.iterator](); let cur; while(!(cur = iter.next()).done) { const a = cur.value.. 2022. 1. 8.
[FP&ES6+] Klesli Composition 관점에서의 Promise 함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다. ✅ Klesli Composition 관점에서의 Promise Promise는 Klesli Composition을 지원하는 도구이다. Klesli Composition은 오류가 있을 수 있는 상황에서 함수 합성을 안전하게 하기 위한 하나의 규칙이다. 오류가 있을 수 있는 상황은 여러 가지가 있는데 들어오는 인자가 잘못된 값이라 함수에서 오류가 나는 상황과 정확한 인자가 들어왔더라도 함수가 의존하고 있는 외부의 상태에 따라 결과를 정확히 전달할 수 없는 상황이 대표적이다. Klesli Composition은 위와 같은 상황을 안전하게 해결하기 위해 존재한다. f(g(x)) = f(g(x)) f·g에 대해 수학적으로 위의 식은 .. 2022. 1. 5.
[FP&ES6+] 합성 관점에서의 Promise와 Monad 함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다. ✅ 합성 관점에서의 Promise 결론부터 이야기하자면 Promise는 비동기 상황에서 함수 합성을 안전하게 하기 위한 도구이자 모나드이다. 함수 합성이란 f · g을 말하며 g 함수를 먼저 적용한 결괏값에 f 함수를 적용하는 것이다. x라는 값이 있다고 할 때 f · g는 f(g(x))와 같다. 연속적으로 함수가 실행되고 함수 합성을 할 때 상황에 따라 안전하게 합성할 수 있게 하기 위해 모나드라는 개념이 필요하다. 그리고 그 구현체 중 비동기 상황을 안전하게 합성하기 위해 Promise를 사용한다. 즉, Promise는 모나드의 일종이다. ✅ Monad 모나드(Monad)는 값을 담는 컨테이너의 일종이며 Functor를 .. 2022. 1. 5.
[FP&ES6+] 일급 값으로의 Promise 활용 함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다. ✏️ 예제 const go1 = (a, f) => f(a); const add5 = (a) => a + 5; console.log(go1(10, add5)); // output // 15 go1 함수는 값과 함수를 인자로 받아 함수에 값을 적용한 결과를 단순 리턴하는 함수이다. go1 함수가 제대로 동작하려면 다음과 같은 전제 조건이 필요하다. 인자로 주어지는 함수 f가 동기적으로 동작해야 한다. 인자로 주어지는 값 a가 동기적으로 바로 값을 알 수 있는 값이어야 한다. 즉, go1 함수의 인자로 비동기 상황이 일어난 값이 아닌(Promise가 아닌) 값이 들어와야 정상적으로 원하는 결과를 얻을 수 있다. console.lo.. 2022. 1. 3.

티스토리툴바