뭘 배웠지?

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

리액트를 구성하는 모든것들은 컴포넌트(Component)이다. 1. 컴포넌트를 만드는 2가지 방법 첫 번째: 자바스크립트 함수 이용 이 방법으로 'stateless functional component' 라는 컴포넌트를 생성한다. 데이터를 받고, 렌더 할 수 있지만 데이터를 관리할 수 없다. 만드는 방법 자바스크립트 함수를 만드는 방법과 같고, JSX 나 null 을 리턴(return) 해주면 된다. 주의할점은 컴포넌트 이름의 첫 글자는 대문자로 만들어주어야 한다. const MyComponent = function() { return ( Hello React! ) } return 뒤에 괄호는 옵션* 두 번째: ES6 class 이용 React.Component 를 extends 해서 사용한다. 이로인..

리액트 (React)는 페이스북이 만든 오픈소스 자바스크립트 라이브러리다. 모던한 유저 인터페이스 (User Interface: UI)를 만들기 위한 도구이다. 리액트는 HTML과 자바스크립트를 함수적으로 합쳐서 마크업 언어 JSX를 만든다. 자바스크립트에서 확장된 JSX HTML을 직접 자바스크립트에 사용할 수 있게해준다. JSX는 HTML과 사용법이 비슷하다. 자바스크립트를 직접 JSX에 사용할 수 있다. {'이렇게 중괄호안에 넣으면 자바스크립트로 사용된다'} JSX는 자바스크립트가 아니라 꼭 컴파일되어야 된다, 'The transpiler Babel'이 해준다. JSX 규칙 꼭 하나의 엘리먼트가 리턴되어야 된다. 사용 O const JSX = 가나다 라마바 사아자 사용 X const JSX = 가나..

숫자를 문자를 만드는데 사용하는 fromCharCode() 각 숫자에는 UTF-16 코드에 정해진 문자가 있다. FromCharCode()를 사용하면 해당 숫자에 맞는 문자가 나오는 것 사용법은 이렇게 간단하다 console.log(String.fromCharCode(102, 117, 110)); // expected output: fun 102는 f 117은 u 110은 n 그래서 fun 문자가 만들어진다.

함수의 이름도 없고, 부르지도 않았도 바로 실행되는 형태 IIFE (Imediately Invoked Function Expression) 사용법은 간단한다 두개의 괄호()() 만 더 있으면 된다. (function () { console.log("A cozy nest is ready"); })(); 하나는 함수 전체를 감싸고, 하나는 함수 뒤에 붙여주면 완료!

closure 의 뜻은 폐쇠, 종료를 가지고 있다. 자바스크립트를 배우며 closure를 알아야 한다고 듣곤 했다. 그럼 closure란 무엇일까? 정의는 이렇다 '함수(function)는 항상 자신 안의 프로퍼티(property), 메소드(method), 변수 등에 접근할 수 있다' function Bird() { let hatchedEgg = 10; // 밖에서 접근할 수 없는 변수(private variable) /* 공개된 메소드 */ this.getHatchedEggCount = function() { return hatchedEgg; }; } let ducky = new Bird(); ducky.getHatchedEggCount(); // 출력값 10 이러식으로 밖에서 접근할 수 없는 것(바꾸..

웹 개발에 유용한 CSS 툴 Shape Divider App 원하는 모양을 선택하고 -> 구름모양(Get Code) 클릭 -> HTML, CSS 복사 후 붙여넣기 https://www.shapedivider.app/ Shape Divider App Create fully responsive shape dividers for your next web project shapedivider.app

둘 다 영어 사이트, 아는 사이트가 있으면 알려주세요 :) 1. Git Explorer 필요한 커맨드를 선택하면 나온다 https://gitexplorer.com/ GitExplorer GitExplorer: Find the right git commands you need without digging through the web gitexplorer.com 2. Git Immersion 깃허브 설치부터, 사용까지 가이드 투어를 하듯이 알려준다 https://gitimmersion.com/index.html Git Immersion Git Immersion A guided tour that walks through the fundamentals of Git, inspired by the premise t..

외국의 프론트엔트 개발자 Pratham이 추천한 폰트 1. Helvetica 가독성이 좋은 폰트로, body에 사용 2. Ronney 브랜드 이름에 사용 3. Tangerine, Sacramento 핸드라이팅 폰드들로 유저의 관심을 끌 때 사용 4. Futura 캐주얼할 때, 진지할 때 모두 사용 5. Quicksand 작은 스크린에 사용 Pratham의 트위터에서 발췌 It is most important to choose the right FONT for you website. 1️⃣ Helvetica (Use this for body it has high readability). 2️⃣ Ronney (Use this for brand name). 3️⃣ Tangerine, Sacramento (Ha..

출처: 개발자 로드맵을 알려주는 사이트 https://roadmap.sh/ 아직 볼줄도 모르겠다