본문 바로가기

분류 전체보기102

20230326 프로젝트 데일리 로그 오늘 정리할 내용 - git fetch / git merge / git pull ( fetch + pull) -> pull 실행 시, 원격 저장소의 내용을 가져와 자동으로 merge 작업을 실행함. 단순히 원격 저장소의 내용을 확인만 하고 로컬 데이터와 merge 하고 싶지 않은 경우에는 fetch 명령어를 사용하면 된다. -> fetch 실행 시, 원격 저장소의 최신 이력을 확인할 수 있다. 이때 가져온 최신 커밋 이력은 이름 없는 브랜치로 로컬에 가져오게 된다. - Recoil 사용법 -> 거래 내역 GET 요청의 URL에 로그인 된 멤버의 memberId가 필요했다. 따라서, 로그인할 때 Recoil로 전역상태 관리를 해주는 userInfo에서 해당 memberId를 가져오려고 한다. - Atoms.. 2023. 3. 26.
Bundling / Webpack Basic concepts 번들링의 필요성 - 개발을 하다보면, 아래의 왼쪽과 같이 다양한 형태의 파일들이 생성된다. 페이지를 로딩할 때, 많은 파일들이 다운로드되며, 이는 고스란히 서버 측의 네트워크 코스트가 된다. 또한, 서버와의 접촉이 많을수록 애플리케이션이 느리게 로딩되어 사용자 경험도 저하된다. 개발자의 입장에서는 서로 다른 패키지들에서 같은 이름의 변수나 함수를 사용해 충돌하는 일이 벌어질수 있다는 위험성도 존재한다. 이때, 의존성을 가지는 여러 파일을 묶어주는 번들러를 통해 파일들을 번들링해 제공한다면 (위 사진의 오른쪽!) 위와 같은 문제들을 해결할 수 있다. 예시로, 브라우저 네트워크 탭에서 여러개의 html, js 파일을 다운로드하여 화면을 렌더링한다는것을 볼 수 있다. (번들링 전) 번들링 후에는 이렇게 번들링.. 2023. 1. 18.
자바스크립트 14 ES6 문법-spread/rest 문법 1. spread 문법 (전개 구문) -> 함수 호출, 배열 리터럴과 문자열, 객체 리터럴 : 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소를 넣을 때에 사용함 function sum(x,y,z) { return x+y+z; } const numbers = [1,2,3]; sum(...numbers) // 6 // sum(1,2,3)과 동일함 2. rest 문법 (나머지 매개변수) -> 함수의 마지막 매개변수 앞에 ...를 붙이면, 모든 후속 매개변수를 배열에 넣도록 지정함. 마지막 매개변수만 나머지 매개변수로 설정할 수 있음. -> Array 인스턴스이므로, sort, map, forEach, pop 등의 메서드를 직접 적용할 수 있음. -> .length 속성도 사용 가능함. : .. 2023. 1. 11.
CDD / CSS in JS / Styled Components 1. CDD 란? Component Driven Development, 컴포넌트 주도 개발. 레고처럼 조립해나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어나가는 개발 방법론. Bottom-up 방식 2. CSS in JS 태블릿, 데스크탑, 모바일 등 다양한 디바이스 환경에서 인터넷을 사용하기 시작하면서, CSS 작성 방식도 꾸준히 변화하고 있다. 프로젝트 규모와 복잡도가 커지고, 디바이스 환경이 다양해지면서 효율적인 CSS 작업을 위해 CSS 구조화에 대한 필요성이 대두되었다. 다양한 방법론이 있지만, 중요한 지향점은 코드의 재사용 코드의 간결화 (유지 보수 용이) 코드의 확장성 코드의 예측성 (클래스 명으로 의미 예측) 이정도로 정리해볼 수 있다. 이러한 방법론들을 거쳐 캡슐화하여 컴포넌트 기반으로.. 2023. 1. 3.