뭘 배웠지?

리액트를 구성하는 모든것들은 컴포넌트(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 = 가나..

신경 과학을 공부하는 학생이자, ness-labs의 창업자 Anne-Laure Le Cunff이 쓴 글을 조금 옮깁니다. 본문: https://nesslabs.com/fail-like-a-scientist 과학자처럼 실패하자 새로운 프로젝트를 하기, 새로운 기술을 배우기, 자신만의 안전지대에서 나와서 새로운 경험을 도전할 때 흥분과 두려움이 같이 밀려온다. 실패의 두려움은 많은 요소로 생겨날 수 있다. 고정관념과 타인의 판단도 그 중 하나이다. 그럼 이런 두려움을 어떻게 이겨낼 수 있을까? 과학자처럼 실패하는 방법을 배우자 "나는 10000번 실패하지 않았다. 한 번도 실패 안했다. 나는 10000가지의 안되는 방법을 증명하는데 성공했다." 토마스 에디슨 과학적 발견 프로세스 과학적 방법은 새로운 지식을..

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

본문: https://nesslabs.com/inspiration-to-idea-sex From inspiration to idea sex: how to generate ideas on demand Blank page syndrome, writer’s block—call it whatever you want, most creators have once faced this overwhelming lack of inspiration. If you do experience writer’s block from time to time, the best reaction is to go do something else: going for a walk, nesslabs.com 창작을 할 때 생각이 나지 않으면 계속 빈..

함수의 이름도 없고, 부르지도 않았도 바로 실행되는 형태 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..