뭘 배웠지?

개츠비 설치와 기본 프로젝트 생성방법은 전 포스트를 참고하세요-> 보통 HTML에서 페이지를 연결할 때 태그를 이용한다. 이렇게 소개 페이지 Link 사용하기 개츠비에는 Link라는 리액트 컴포넌트를 사용할 수 있다. Link는 내부 페이지간의 이동시 좋은 점을 가지고 있다. 가장 돋보이는 점은 누르는 즉시 이동되는 점이다. 어떻게 사용할까? 우선 Link를 개츠비 모듈에서 가져와야한다. import { Link } from 'gatsby' 그런다음 Link를 HTML태그를 사용하듯이 사용하면된다. 소개 페이지 끝!

0. 사전작업 개츠비를 설치하기 위해서 Node.js를 먼저 깔자. Node.js 공식사이트에서 다운 받으면 된다. nodejs.org/ 1. Node.js 터미널 실행 2. 개츠비 설치 npm install -g gatsby-cli 위의 입력하면 개츠비 설치가 시작된다. 3. 프로젝트 생성 cd "원하는 폴더 루트" 우선 프로젝트가 설치되기 원하는 폴더로 이동 gatsby new gatsby-bootcamp https://github.com/gatsbyjs/gatsby-starter-hello-world 이렇게 입력하면 프로젝트(폴더)와 필요한 파일들으 생성한다. 4. 생성된 프로젝트 불러오기 저는 에디터로 VSCode를 사용합니다. code.visualstudio.com/ 에디터에서 폴더 열기 5. ..

트위터에서 Laura 라는 친구가 공유한 방법 (원문: https://twitter.com/lauracharvey/status/1309524321812054018?s=20) 보자마자 Vscode를 키고 시험해보고 깜짝 놀랐다. 백그라운드 이미지 투명도를 조정할 때 지금까지는 :after와 같이 이미지를 덮어씌우는 방법을 써왔다. 이제부터는 linear-gradient를 사용하려고 한다. background-image: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ), url("backgroundImg.jpg"); 코딩하는분들 모두 화이팅 😁

santa 변수가 true면 '산타는 존재한다'가 콘솔에 출력하고, 아니면 아무것도 출력하지 않는 간단한 if문이 있다. if(santa === true){ console.log("산타는 존재한다") } else { null } 이것을 ternary(삼항연산자?)로 바꾸면 이렇게 된다. 한 줄에 깔끔하게 쫙 santa === true ? console.log("산타는 존재한다") : null; 이 포스트는 더 줄일 수 있는 &&에 대해 적어두려고 시작했다. &&은 모두를 만족시키는 조건문을 만들때 사용하곤 한다. 작동원리를 살펴보면 신기하다. true && false 이처럼 앞에 true가 있으면 바로 &&에 오른쪽에 있는 것을 리턴한다. 이 경우에는 false가 리턴된다. 그래서 false가 나오는것이..

DOM 끝장내기 코스 1번째 & 2번째 - HTML tag, class, id 등 잡아오는 기본 방법 1번째 https://www.youtube.com/watch?v=0ik6X4DJKCc 2번째 https://www.youtube.com/watch?v=mPd2aJXCZ2g&t=415s 3번째 - 이벤트처리 (addEventListener) youtu.be/wK2cBMcDTss 4번째 - 프로젝트, 메모장과 검색기능 만들기 youtu.be/i37KVt_IcXw

앞에서부터 원하는 폰트를 지정해서 적어둔다. 링크 https://www.w3schools.com/cssref/css_websafe_fonts.asp

자바스크립트 면접시 가장 많이 물어본 20가지 문답 머신러닝과 웹개발 전문가 Mayank에게 감사합니다. 본문 (트위터: https://twitter.com/nlognco/status/1282888619917627393?s=20) ※영어주의※ ->구글번역기 1. What's the difference between undefined and null? "undefined" is the default value of a variable that has not been assigned a specific value and "null" is a value that represents no value. 2. What does the && operator do? The && or Logical AND operato..

state 관리 프레임워크 리덕스 리덕스는 스테이트 관리 프레임워크(state management framework). 리액트를 포함해 여러 웹테크에서 사용할 수 있다. 하나의 스테이트가 앱의 모든 스테이트를 책임진다. 예를들어 리액트 앱에 10개의 컴포넌트가 각각 로컬 스테이트를 가지고 있더라도, 모두 리덕스의 '스토어(store)'에 있는 하나의 스테이트에 정의된다(키포인트) 이 말은 앱을 업데이트 할 때 반드시 리덕스 스토어를 거쳐야 된다. 이런 일방통행 방식은 앱 관리를 편하게 해준다. 리덕스 스토어 만들기 스토어는 리듀서(reducer) 함수를 필수로 받는다. 밑의 예는 리듀서의 스테이트가 5를 가진다. 그리고 만들어진 리덕스의 스토어에 들어간다. const reducer = (state = 5..

HTML과 React의 구문은 조금씩 다르다. 헷깔리지 않도록 정리해보자 div에 class 주기 HTML에서 에 클래스를 주려면 class를 사용한다. JSX에서는 className을 사용한다. HTML React class Colorextends React.Component { render() { return ( Big Red ); } }; Inline style, HTML에서 style 속성을 사용할 때 다른점 1. HTML은 kebab-case (예: font-size) React는 camelCase를 사용한다 (예: fontSize) 2. React에서 style 속성을 사용할 때 object처럼 사용한다. 3. React에서 width, height, fontSize 같은 크기를 지정할 때 픽..

반응형웹을 위한 플렉스(Flex) 플렉스(flex)는 크기가 다른 스크린에서도 왠만하면 정돈되서 보여준다. 반응형 웹을 만들기위해 기본이 되는 요소인것 같다. 사용법 display: flex; flex-direction 정렬 방향을 정하자 - row (기본값): 높이가 꽉차고 옆으로 정렬된다 - row-reverse: 마찬가지로 높이가 꽉차고, 반대 순서로 정렬된다. - column: 양옆넓이가 꽉차고 위에서 위아래로 정렬된다. - column-reverse: column에서 반대방향으로 정렬 예) display: flex; flex-direction: row-reverse; justify-content 플렉스 안에 콘텐츠 정렬 방법을 전하자 - flex-start: (기본값) 왼쪽에서(정렬방향이 col..