_app.jsx(tsx) _app.jsx(tsx) 내의 컴포넌트는 모든 페이지를 렌더할 때 항상 호출됩니다. 그래서 모든 페이지에 필요한 공통 로직의 경우 App 컴포넌트에 추가할 수 있습니다. _app.jsx(tsx) 필요한경우 페이지 이동할 때마다 유지해야 하는 스타일이나 레이아웃 적용 페이지 이동할 때 유지해야할 state 관리 componentDidCatch 라이프사이클로 공통 에러 처리 페이지에 공통 로직을 통해 데이터를 주입해야하는 경우 모든 페이지에 필요한 css를 적용하는 경우 _app.jsx(tsx)의 site title tag site의 title 또한 _app.tsx에서 추가하는데 아래와 같이 next/head에서 Head 컴포넌트를 import해서 사용하면 됩니다. 동적 title이 필요할 때는 pages 폴더 하위에 개별 컴포넌트마다 title 태그를 추가하면 overwrite 됩니다. _document.jsx(tsx) Next.js에는 SPA에서 하나의 h…

웹팩 웹팩은 이다! 즉, 웹팩을 이해하기 위서는 “모듈”을 먼저 알아야한다. 모듈패턴과 필요성 자바스크립트의 소스를 모듈 단위로 관리하거나 라이브러리 등을 만들 때 사용 전역 변수의 사용을 최소화 하기 위함 변수 scope을 지정해서 사용하기 위함 Reusablility, Isolation, Organization 모듈 단위로 소스를 개발하면 각 모듈 간의 의존성을 최소화하거나 의존성 파악하기 쉬움 모듈(module) A module is one of the separate parts. 자바스크립트에서의 모듈이란 기능이 구현된 “자바스크립트 개별 파일”이라고 생각하면 됩니다. 잘 만든 모듈패턴은 하나의 파일이 하나의 모듈이 되며, 하나의 파일은 하나의 scope이 되도록 구현해야 합니다. 그래야 파일 내에서 변수도 자유롭게 선언할 수 있고, 관련 기능만 하나의 파일에 구현해서 다른 파일의 방해를 받지 않을 수 있게 됩니다. 바닐라 자바스크립트에서의 모듈패턴은 scope 개념을 활용…

Static Website(정적인 웹사이트) 화면에 보이는 컨텐츠 그대로 html 파일에 작성되어있어서, 서버에 저장된 html 파일 그대로 브라우저에 보이는 것. 주로사용자 및 시간에 따라 항상 똑같은 내용을 보여주는 사이트는 static website로 만드는게 적합하다. ex) 회사 소개 페이지, 반복이 없는 포트폴리오 페이지, gatsby 블로그 등 Dynamic Website 서버에 저장된 html 파일이 그대로 브라우저에 그려지는 것이 아니라, 다이나믹하게(=동적으로) html 파일이 만들어지는 것이다. 요즘 대부분의 웹사이트가 dynamic website이다. dynamic-website 예를 들어, airbnb 사이트에서 어제 접속하고, 오늘 접속할 때마다 추천 숙소 목록이 바뀐다. 목록 디자인은 그대로인데, 숙소 목록 데이터가 바뀌는 것은 Dynamic Website이기 때문이다. SPA (Single Page Application) spa 하나의 파일로 전체 사이…

검색 크롤러 기본 방식 웹페이지를 방문하여 모든 링크를 찾은다음, 그 링크를 목록화 한다. 그 다음 이 링크들을 이전에 방문한 적이 있는지 확인하고, 방문해본 적이 없으면 그 링크를 타고 웹페이지를 방문한다. 그런 다음 그 페이지에서 앞에서 진행한 과정을 반복한다. 현재의 검색 알고리즘 하나가 아닌 여러 개의 알고리즘으로 구성되어있다. 모든 웹페이지의 수 많은 검색어, 모든 링크를 다 합친 것이 페이지랭크가 된다. 실제로 링크를 누가 얼마나 클릭하는지도 중요하다 크롤러가 웹페이지를 찾으면 Google 시스템에서는 브라우저와 마찬가지로 해당 페이지의 콘텐츠를 렌더링한다. 이때 키워드 및 웹사이트 최신 정보에 이르는 주요 신호를 기록하며 검색 색인에서 모든 주요 신호를 추적한다. 키워드 검색과 웹페이지에 담긴 텍스트 비교, 반복성, 서체크기, 대문자, 키워드의 위치 등 여러가지 전통적인 정보검색기술과 결합한다. 여기서 전통적인 판단 요소를 시그널(signal) 이라고하고 검색품질에 대…

counter 예제를 통해 에서의 를 사용해보자.. 이 글은 을 기준으로 작성되었습니다. 참고자료 / 실습코드 MobX란? 전역 상태 라이브러리이다. 모든 상태변화를 일어나는 부분을 런타임에 자동으로 추적해주고, 의존 트리를 만듭니다. 이를 통해 필요한 경우에만 연산이 진행되고 최적화 작업을 할 필요가 없습니다. React 뿐만 아니라, Angular, Vue, Flutter, Dart등에서도 사용이 가능하다 UI 프레임워크 밖에서 애플리케이션 상태를 관리를 할 수 있다. 따라서 코드 분리가 쉽고 다른 곳에서 사용하기 유용하며 무엇보다 쉽게 테스트 할 수 있다. MobX의 러닝커브는 낮은편으로 초기에 작성해야하는 코드가 거의 없으며, redux와 달리 state의 불변성도 걱정하지 않아도 된다. MobX 주요 용어 및 개념 : 추적 및 관찰 가능한 state(상태) 정의 : state를 변경하는 메소드 : state에서 더 이상의 상호작용 없이 파생될 수 있는 모든 것 EX) 사용…

emotion 기본 개념 emotion.js 이란? CSS-in-JS의 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해준다. emotion.js는 주로 Framework Agnostic(프레임워크를 사용하지 않는 것)과 React 두 가지 방식으로 사용된다. emotion css props emotion composition emotion styled-components emotion object style emotion child selector emotion global styles emotion theme provider emotion reset Next.js에 emotion 설치하기 emotion 필요 패키지 설치하기 .babelrc 설정하기 emotion 기본 개념 emotion.js 이란? emotion css props emotion composition emotion styled-components emotion object style emot…

Next.js 공식 getting-started 1. Next.js 프로젝트 설치 프로젝트 설치하기 설치 성공 Next js설치성공 2. Next.js 폴더구조 package.json Next.js에서는 또는, 로 프로젝트 개발을 시작할 수 있습니다. 명령어로 .next 폴더가 생성됩니다! 개발이 모두 끝난 후, production 용으로 빌드할 때! 명령어로 .next 빌드 폴더를 실행할 server가 시작됩니다. production 용으로 웹 서버를 띄울 때! 개발할 때는 만 실행하면 된다. 나머지 명령어는 배포할 시점에 사용한다. pages 🧑🏻‍🏫 pages 폴더에 있는 있는 파일이나 폴더는 곧 프로젝트의 라우트가 됩니다. ✔️ 라우트 설정 예를 들어 pages/mypage.tsx는 사이트 도메인에 /mypage 경로를 붙여서 접근할 수 있다. 동적 라우팅을 구현하고 싶을 때는 [대괄호]를 사용하면 되는데 pages/restaurant/[id].tsx로 파일을 생…

redux 우리가 관리하고 싶은 전역 state는 modal을 켰다 끌 수 있는 상태라고 하자. Redux 구성 요소 - Action 사용자의 입력이나 UI 조작, 웹 요청 완료같이 어떠한 상태 변화를 일으킬 수 있는 현상. 즉, 어떤 조작인지 정보를 갖고 있는 자바스크립트 객체이다. Action의 생김새 action 객체는 아래와 같이 생겼다. 조작하고 싶은 정보는 type 프로퍼티에 지정한다. Action 특징 action은 객체이다. action은 반드시 type 프로퍼티가 있어야 하고, 일반적으로 type은 어떤 행동을 설명하는(조작하고 싶은 내용) 문자열이다. type 이외에 다른 프로퍼티를 가져도 되고, 주로 해당 action에 필요한 부가적인 데이터를 전달하고 싶을 때 사용한다. Action 정의 react 프로젝트에서 사용할 action은 객체 리터럴로 바로 정의하는 것이 아니라, action을 만들어주는 함수를 통해 만든다. 이러한 함수를 Action Creator…

React Life Cycle lifecycle1 lifecycle2 Mount : 컴포넌트의 생성자 메서드, 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드 : props를 state에 넣고 싶을때 사용 앞에  필요 안에서  조회 할 수 X 특정 객체를 반환 ⇒ 설정 O, 반환 ⇒ 설정 X render : 컴포넌트 렌더링 : 컴포넌트 첫번째 렌더링 후 호출 메서드 컴포넌트 화면에 나타난 상태 DOM 속성 읽거나 변경하는 작업, DOM 사용 외부 라이브러리 연동, , 등 요청 등 Update : 컴포넌트 결정 메서드, 할 때 사용 메서드 : 컴포넌트 변화 일어나기 전의 DOM 상태 가져와 특정 값 반환 : 리렌더링 후 호출 메서드 3번째 파라미터로 에서 반환한 값 조회 할 수 있다 Unmount componentWillUnmount : 컴포넌트가 화면에 사라지기 직전 호출 React Life Cycle Mount Update Unmount

왜 Redux를 쓸까? 앱에서 전체적으로 사용할 데이터 관리 필요 React.js 는 단순 UI 라이브러리이기 때문에 데이터 관리를 고려하고 있지 않음 로컬스토리지에 데이터를 저장하고 불러오는 로직 대신 Redux! 하나의 state(데이터)를 여러 컴포넌트에서 필요한 경우가 있다. 페이지를 reload 해도 api 호출 없이 유지해야 할 데이터가 있다. 페이지의 레이아웃에 영향 받지 않는 modal, toast, alert 같은 전역 UI 컴포넌트의 상태 관리도 필요하다. Why_Redux 멀리 떨어진 컴포넌트끼리 상태값을 교환할 때 복잡해지는 데이터 흐름이 전역 스토어를 통해 간결해짐 Redux? Redux는 Flux 패턴을 근본으로한 데이터 관리 라이브러리이다. React 뿐 아니라 다른 UI 라이브러리에서도 사용할 수 있다. Redux : Application의 전체 state는 store라고 불리는 곳에서 관리된다. store는 redux의 상태값(state)를 갖는 객체…

MVC Pattern 관심사의 분리(SoC, separation of concern)에서부터 나온 패턴 관심사 분리로 코드의 단순화 및 유지보수의 더 높은 수준의 자유가 생긴다. 관심사가 잘 분리될 때 독립적인 개발과 업그레이드 외에도 모듈 재사용을 위한 더 높은 자유가 있다. 모듈이 인터페이스 뒤에서 이러한 관심사의 세세한 부분을 숨기기 때문에 자유도가 높아짐으로써 다른 부분의 세세한 사항을 모르더라도, 또 해당 부분들에 상응하는 변경을 취하지 않더라도 하나의 관심사의 코드 부분을 개선 및 수정할 수 있다. MVC Model 데이터. json 또는 데이터 모델 정의. 일반적으로 데이터를 처리하는 로직과 함께! View 화면, html, 레이아웃 이라고 생각하면 된다. Controller 이벤트 핸들러와 이벤트를 처리하는 로직이 있는 곳. 데이터랑 뷰 이어주는 역할. 요청이(이벤트 발생) 오면 모델에 적절한 로직을 실행하도록 한다. 대표적인 MVC Pattern FrameWork …

Web System Development History 1세대 웹 서비스 - 전통적인 Web System Architecture. 정적 웹. traditional_web_architecture 웹 서버가 모든 내용이 담긴 HTML 페이지를 클라이언트(ex. Web browser)에게 전송 초창기 웹사이트/서비스에 적합했던 시스템 초창기 웹사이트는 단순한 정보 제공 위주 특별히 기능이 X, User Interaction 이 많이 요구되지 X 1세대 웹이 정적인 이유? HTML, CSS 자체가 정적 : 링크로 연결된 문서 : “이렇게 보여줘라” 에 대한 지시 : 웹페이지의 내용을 브라우저에게 어떻게 렌더링(rendering) 해주라고 마크업 해주는 것 어떻게 보여지는가에 대한 것이기 때문에 로직(동적)이 없다. 정적 2세대 웹 서비스 - User Interaction 증가. 동적 웹 (JavaScript). first_version_of_spa_ajax 웹서비스들이 점점 발전함에…

Context API 란? React에서는 공식적으로 Context API를 활용하여 전역상태를 관리할 수 있다. Redux, react-router, Styled-components 오픈소스를 보시면 Context API를 사용하고 있는 것을 볼 수 있다. 이 전역 상태 값은 함수일수도 있고, 어떤 외부 라이브러리 인스턴스일수도 있고 DOM 일 수도 있다. Context / Provider / Conumer context-api Context는 크게 Provider와 Consumer로 나뉩니다. Provider는 전역 상태를 정의하고, 전역 상태를 update하는 로직이 있습니다. 즉, Provider는 context를 구독(Consumer)하는 컴포넌트들에게 context의 변화를 알린다. Provider 하위에 있으면 value가 업데이트 될 때마다 오로지 context.Consumer 부분만 rerender 된다. Consumer로 전역 상태를 사용할 수 있습니다. Cont…

기존 MVC의 문제점 mvc 프로젝트 규모가 커질수록 빠르게 복잡해진다. feature 추가될 때마다 모델과 뷰를 연결하는 복잡성이 증가한다. 데이터 간의 의존성과 연쇄적인 갱신은 뒤얽힌 데이터 흐름을 만들고 예측할 수 없는 결과로 이끌게 된다. 새로온 개발자가 합류하면, 너무 복잡해서 코드만 보고 해석이 힘들다. (유지비용 증가) 복잡성이 증가할 수록 예측 불가능해지고 안정성이 떨어진다. (어디서 버그가 터져나올지 테스트도 어렵다.) 이 프로젝트는 파생되는 데이터를 올바르게 다루기 위해 시작되었다. 예를 들면 현재 뷰에서 읽지 않은 메시지가 강조되어 있으면서도 읽지 않은 메시지 수를 상단 바에 표시하고 싶었다. 이런 부분은 MVC에서 다루기 어려운데 메시지를 읽기 위한 단일 스레드에서 메시지 스레드 모델을 갱신해야하고 동시에 읽지 않은 메시지 수 모델을 갱신 해야하기 때문이다. Flux Flux는 Facebook에서 소개한 아키텍쳐입니다. 전통적인 MVC 패턴을 버리고, 개발이 …

반응형 웹이란, 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하는 웹 페이지를 의미합니다. 오늘날에는 IT 기기의 종류가 더욱 다양해짐에 따라 디스플레이의 크기에 맞게 유동적으로 반응하는 반응형 웹을 구현하는 것이 더욱 중요하다. 일반적인 Breakpoint responsive desktop 스타일링: 1920 ~ 1024px ipad 스타일링: 1024 ~ 768px phone 스타일링: 768 ~ 0px 보통 2개(1024 / 768)를 이용한다 관리를 편하게 하려면 1개(768)를 이용한다 CSS 반응형 Media Query : media 쿼리를 시작 : 어떤 디바이스에서 적용하는지 알려줍니다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 됩니다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용됩니다. : 이건 media fe…

일반적으로 this는 클래스(class)에서만 사용하며, class로 생성한 인스턴스 객체를 의미하나, JavaScript에서는 그렇지 않고 this가 가르키는 대상이 항상 달라집니다. 함수와 메서드 함수와 메서드는 모두 function 키워드로 함수를 정의한 것을 의미 메서드는 객체의 프로퍼티로 함수가 정의되어야 한다. 중요한건 객체가 함수를 호출해야 메서드이다!!! this this란? this가 바라보고 있는 객체인데, 상황에 따라 대상이 달라진다. this는 실행컨텍스트가 생성될 때 결정된다. 실행컨텍스트는 함수를 호출할 때 생성되므로, this는 함수를 호출할 때 결정된다. this의 동작 방식 전역 공간에서 this client(브라우저)에서는 window Node.js에서는 global 메서드로 호출될 때 this (암시적 binding) 객체의 프로퍼티에 할당된 함수를 호출하면, this는 해당 객체를 바라본다 물론 객체가 메서드로 호출해야 함 arrow functi…

Closure 함수를 선언할 때 만들어진 scope가 사라진 후에도 호출할 수 있는 함수 함수가 선언됐을 때가 중요. scope가 끝난 외부 함수의 변수를 참조할 수 있다. 일급 객체 함수의 개념을 이용하여 스코프에 묶인 변수를 바인딩 하기 위한 일종의 기술 함수를 일급 객체로 취급하는 여러 함수형 프로그래밍 언어에서 사용되는 보편적인 특성 일급 객체 함수 란? 다른 객체 및 함수 들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체 및 함수를 가리킨다. 일극 객체 함수의 조건 변수에 할당 할 수 있다 다른 함수를 인자로 전달 받을 수 있다 다른 함수의 결과로서 return 될 수 있다. Closure 예제 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상 에서 함수 B자체를 반환 실행했으므로 A의 실행컨텍스트는 종료됨 변수는 이제 를 바라보고 있음 outer를 호출하면, 즉…

Scope란? Scope : 변수가 유효한범위 Scope 종류 Global Scope var로 선언한 변수는 전역 객체에 속하게 된다.(프로퍼티가 된다) client(브라우저)의 전역 객체는 , Node.js에서는 Local Scope JavaScipt는 다른 언어와 달리 scope의 범위가 함수 블록 내이다. 즉, ( ), { } 블록과 상관이 없고, 함수에 의해서만 scope가 생성된다. ⚠️ JavaScipt에서 let, const로 변수를 선언할 때의 scope은 블록({}) 단위이다. Scope Chain 변수가 해당 scope에서 유효하지 않을 때, 안에서부터 바깥으로 차례로 검색해 나가는 것 Scope 예제 Scope란? Scope 종류 Global Scope Local Scope Scope Chain Scope 예제

함수 선언문과 함수 표현식 함수 선언문(function declaration) function 정의만 존재하고 별도의 할당 명령이 없다. 함수 표현식(function expression) function 키워드로 정의한 함수를 변수에 할당하는 것을 말한다. Hoisting 변수의 선언을 끌어올리는 것을 말한다. 선언부는 끌어올리고, 할당은 코드가 실행되는 시점에 진행된다. 변수의 Hoisting 전 변수 Hoisting 후 함수 Hoisting 함수 선언식 함수 표현식 let, const의 Hoisting Hoisting이 되지 않는것 처럼 보인다. Temporal Dead Zone(TDZ) let, const 역시 마찬가지로 LexicalEnvironment에 변수 정보를 미리 수집한다 (hoisting의 개념으로 알고 있는 동작) let, const는 실행되기 전까지 액세스 할 수 없고, 이 단계(공간)를 TDZ라고 함 Hoisting 예제 이런 느낌으로 environmentR…

👉🏻 JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있습니다. 이벤트 루프 event-loop 힙: 단순히 메모리 영역을 지칭하는 용어. 메모리 할당이 이루어지는 곳으로 변수 등의 정보 저장. (콜스택의 최상단에 있는 실행 컨텍스트가 실행되면서 참조되는 객체들이 저장되어 있는 메모리 공간) 콜스택: 실행하는 코드를 순서대로 실행하는 곳 (실행 컨텍스트가 추가되거나 제거되며 코드의 실행순서를 관리) 콜백큐: 처리할 메시지의 대기열 (비동기 함수의 콜백함수 또는 이벤트 핸들러가 일시적으로 대기) 예제로 콜스택 내부 확인하기 call-stack 이벤트루프 작동 확인하기 greet 호출 => respond 호출 gif1 Web API인 setTimout 호출, setTimeout의 cb 전달 gif2 cb는 1초뒤에 콜백큐로 전달 gif3 콜스택 비어있을 때, 콜백큐에 있던 대기 작업 하나씩 전달 gif…

Promise란? Promise는 비동기 동작을 처리하기 위해 ES6에 도입되었다. Promise는 클래스이고, Promise 클래스를 인스턴스화 해서 promise 객체를 만든다. 반환된 promise로 원하는 비동기 동작을 처리한다. Promise는 와 , 함수를 이해해야 된다. Promise 기본 형태 구현하기 promise 3가지 상태(State) Pending(대기) 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행) 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) 비동기 처리가 실패하거나 오류가 발생한 상태 resolve, reject 이해하기 resolve 비동기 로직이 성공했을 때 실행할 함수 reject 비동기 로직이 실패했을 때 실행할 함수 resolve 호출시 전달되는 인자 → then 콜백함수의 매개변수로 받는다. 에러 처리 - reject 두 번째 인자로 에러처리 로직을 작성하시거나, 아래와 같이 catc…

콜백 함수란? 함수의 매개변수가 함수일 때, 매개변수로 받은 함수를 콜백함수르고 부른다. 고차 함수(Higher Order Function)란? 매개변수를 함수로 받은 함수. 즉, 외부에서 콜백함수를 전달받은 함수 고차 컴포넌트 (Higher Order Component(HOC))란? 컴포넌트를 매개변수로받아서, 컴포넌트를 반환하는 컴포넌트 일급함수란? 함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현합니다. 예를 들어, 일급 함수를 가진 언어에서는 함수를 다른 함수에 인수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있습니다. 일급함수의 특징 함수를 변수에 할당 가능 함수를 또 다른 함수 인자로 전달 가능 함수의 반환값으로 함수 전달 가능 함수형 프로그래밍 특징 중의 하나가 바로 일급함수 입니다. 콜백함수 사용하기 콜백함수라고 해서 꼭 비동기 동작에 쓰이는 것이 아닙니다. 콜백 함수란? 고차 함수(Higher Order Function)…

동기(Synchronouse) 동기란? 현재 실행 중인 코드가 끝나야 다음 코드를 실행하는 방식 동기의 장/단점 장점: 코드를 순서대로 하나씩 실행하기 때문에, 실행 순서가 보장된다. 단점: 현재 실행중인 task가 종료될 때까지 다음 task가 실행이 안 된다는 문제 (task blocking) 전형적인 동기 task blocking 예제 비동기(Asynchronouse) 비동기란? 현재 실행 중인 코드가 완료되지 않아도, 다음 코드로 넘어감. 즉, 비동기 task(코드)는 실행하라고 브라우저에 맡겨놓고, 다음 task(코드)로 넘어감 비동기의 장/단점 장점: 현재 실행중인 task가 완료되지 않아도, 다음 task를 실행하기 때문에 블로킹이 발생 X 단점: task의 실행 순서가 보장되지 않는다. 비동기 처리가 필요한 이유 자바스크립트 엔진은 한 번에 하나의 task만 실행할 수 있는 Single Thread. Single Thread는처리에 시간이 걸리는 task를 실행하는 …

styled-components 설치 styled-components는 각기 다른 컴포넌트들에게 스타일링의 영향을 주지 않기 위해 Local로 동작 styled-components 기본 예제 styled-components props 예제 Circle 컴포넌트에  props 값을 설정해줬으면 해당 값을 배경색으로 설정하고, 그렇지 않으면 검정색. styled-components 상속 styled-components As 속성 만약 Button 컴포넌트의 스타일은 그대로 쓰고싶지만, 태그의 종류를 button이 아닌 a 태그로 바꾸고 싶을땐 ‘as’ 속성을 사용 styled-components Attributes 삽입하기 styled-components css 예제 여러 줄의 CSS 코드를 조건부로 보여주고 싶다면 를 사용한다. 를 불러와서 사용을 해야 그 스타일 내부에서도 다른 를 조회 할 수 있다. styled-components 애니메이션 styled-components The…

Sass(Syntactically Awesome Style Sheets) 는  로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재 활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게해줍니다. 란? 를 확장하는 스크립팅 언어로서, 컴파일러를 통하여 브라우저에서 사용 할 수 있는 일반 문법 형태로 변환됩니다. Sass / Scss React에서 사용법 Comment (주석) 의 주석이 CSS 와 다른점은 ****이 추가되었다는 점 입니다. 은 표기하며,   컴파일 되었을 때 나타나지 않습니다 은 와 동일하며 로 컴파일 되었을 때 나타납니다. Variable (변수) 는 에  개념을 도입한다. 변수가 가능한 형태 : , , , , , , 변수를 사용 할 때에는  문자를 사용합니다. 변수를 만들어도, 사용하지 않으면 컴파일된 파일에는 아무것도 나타나지 않습니다. Variable Scope 변수를 에서 선언 ⇒ 접근가능 Global Vari…

Git 기본 구조 코드는 세 단계에 걸쳐 저장 : ⇒ ⇒ 으로 파일을 상태에 넣는다. 으로 상태에 있는 모든 변경사항을 한다. 여기까지가 에서 작업이다. ⇒ local repository의 내용을 remote repository로 업로드한다 Git 주요 명령어 저장소 생성 원격 저장소로부터 복제, zip 파일로 받으면 .git 폴더가 없다는 것이 차이점 변경 사항 체크 working directory의 변경된 작업 파일을 staging area로 추가 변경된 모든 파일 스테이징 staging area의 내용을 local repository에 확정 local repository의 내용을 remote repository로 업로드 원격저장소 추가 Remote Repo branch에서 데이터를 가져와 자동으로 local branch와 merge Commit 관련 Git 명령어 커밋 합치기 커밋 메세지 수정 간단한 commit방법 커밋 이력 확인 …

이란 ? 팀장의 저장소를 해서 팀원마다 각자 저장소를 가지고 프로젝트를 진행하는 방식이다. 팀원의 작업 내용은 를 통해 팀장의 확인 후 반영된다. 팀장 저장소의 권한은 만 가지고 있으면서 다른 사람의 을 프로젝트에 적용이 가능하다. 팀장이 코드를 확인하고 하기 때문에 안전하게 협업이 가능하다. 오픈소스프로젝트에서 많이 사용하는 방식이다. 하기 1. 하기 fork 타인 소유의(또는 공동 소유의) 프로젝트 소스와 commit 내역, branch 등 원본 Remote Repository의 구조를 그대로 복사하여 내 소유의 새로운 Remote Repository로 생성하는 기능이다. Fork한 저장소는 내 소유이므로 내 마음대로 Source를 수정할 수 있다. 이때 Fork 저장소의 내용을 아무리 수정해도 원본 저장소엔 영향을 주지 않는다.따라서 Fork 저장소를 이용하면 Git 기능을 마음껏 활용하여 소스를 수정해볼 수 있으면서도 원본 Source에 대한 무분별한 수정을 막을 수 있…

Git 협업 준비하기 등록 및 초대하기 협업 할 git repository에서 Settings 클릭하기 왼쪽 메뉴에서 Collaborators 클릭하기 github password 입력하기 Manage access에서 Add people 클릭하기 협업 할 동료 초대하기 collaborator 등록하면 모든 협업 동료들은 & 권한을 획득한다. 초대 확인하기 github에 등록한 메일 주소로 초대 메일 확인하여 클릭하기 Git 협업하기 1. 하기 2. 생성 & 이동 3. 작업 후 git , , 하기 4. 에 병합 or 에 병합하기 는 최신 코드 & 용도로만 사용하는 것이 관리면에서 편하다. 이동할 때, 작업을 마무리하고 을 한 후 이동해야 한다. 즉, 에 작업 내용이 있으면 이동이 안된다. 에 병합하기 github repository에 가서 pull requests 작성하고 팀원들에게 피드백 받기 팀원들이 피드백 후 merge 하기 5. 최신 버전 가져오기 +…

BEM의 기본 구조 BEM은 Block, Element, Modifier를 뜻한다. BEM은 어떤 목적인가에 따라 이름을 만든다. Blcok, Element, Modifier은  _ _ 와 - - 로 구분한다. 이름을 연결할때에는 -를 사용한다. header는 Block, naviagtion은 Element, navi-text는 Modifier가 됩니다. Block 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트을 Block이라고 부른다. 또, Block은 Block으로 감쌀 수 있습니다. Element Element는 Block을 구성하는 단위이다. Block은 독립적인 형태인 반면, Element는 의존적인 형태이다. 자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭 안에서 떼어다 다른 데 쓸 수 없다. .search-form은 Block이, .search-form__input과 .search-form__button은 Element이다. Modifier Modifier는 …

1. 자바스크립트 완벽 가이드 자바스크립트_완벽_가이드 2. 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 프론트엔드_개발자를_위한_자바스크립트_프로그래밍 3. 모던 자바스크립트 Deep Dive 모던_자바스크립트_Deep_Dive 1. 자바스크립트 완벽 가이드 2. 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 3. 모던 자바스크립트 Deep Dive

👋 나만의 blog 만들기 gatsby 테마로 github blog 만들기 netlify로 zoomkoding-gatsby-blog 만들기 🏃‍♀️ 로컬 환경에 블로그를 실행하기 위 명령어가 문제 없이 실행됐다면 http://localhost:8000에서 블로그를 확인하실 수 있습니다. ⚙️ 블로그 정보 바꾸기 에 있는 여러값들을 변경해줍니다. 1. 블로그 기본 정보 설정하기 2. 댓글 설정 블로그 글들에 댓글을 달 수 있길 원하신다면 utterances를 통해서 이를 설정하실 수 있습니다. 🦄 utterances 사용방법은 링크를 참고해주세요! 3. 글쓴이 정보 author에 입력하신 정보는 홈페이지와 about 페이지 상단에 있는 글쓴이를 소개하는 섹션인 bio에서 사용됩니다. description에 자신을 설명하는 문구들을 넣으면 애니메이션으로 보여지게 됩니다. bio 이미지는 에 원하시는 파일을 추가하고 파일의 이름을 thumbnail에 넣어주시면 됩니다. (gif 지원) 🤖 위에…

1. Repository 생성하기 GitHub에 로그인 후 우측 상단에 있는 New Repository 버튼을 클릭하면 repository 생성하기 github-blog Import a repository 버튼을 클릭합니다 github-blog-1 생성할 respository 정보 입력하기 github-blog-2 Your old repository’s clone URL에 사용할 gatsby 테마가 있는 repository 주소를 넣기 제 블로그 테마는 https://github.com/zoomKoding/zoomkoding.com입니다. Repository Name을 [GitHubID].github.io로 설정하기 Begin Import 버튼을 클릭하기 최종 repository 생성 결과 github-blog-3 2. Repository 가져오기 및 블로그 배포 준비 Repository에서 초록색 Code 버튼을 클릭하면 링크가 나오게 되는데, 이 링크를 복사하기 github-…