뭘 배웠지?

Refactoring React Code: Overview를 보고 배운점 최근에 작업한 프로젝트 Affitalink(Github)를 리팩토링 하기로 마음먹고, 다른 사람들은 어떻게 리팩토링 하는지 찾아보다가 좋은 글을 발견했다. 정리(TLDR;) 1. 코드 포맷팅을 하자 2. 쓸모없는 제거 3. 이름 생각하기 4. 반복 그만(DRY: Don't Repeat Yourself) 5. 함수형 컴포넌트 O / 클래스 컴포넌트 X 6. 화살표 함수는 렌더 밖으로 7. 번들을 작게 만들자 이상적인 리팩토링은 리팩토링이 일어나지 않는 것이라고 한다. 좋은 코드를 작성해서 버그와 이슈 가능성을 줄이자. 정기적인 코드 리뷰가 도움이 될 듯 싶다! Technical Debt가 뭐지? '기술적인 부채'라고 번역되고 있다. ..

Next.js Crash Course를 보고 배운내용 Next.js 프론트엔드 + 백엔드 콤비네이션으로 Vercel이라는 회사가 만들었다 정적인 사이트도 가능하고, 서버사이드 렌더링 가능 중간이상의 리액트 프로젝트, 프로덕션 레벨의 앱을 만들면 Next.js로 만들고 싶을거라고 한다 장점 API Routes TypeScript나 Sass 사용하고 싶으면 그냥 확장자만 변경하면 된다 디플로이가 쉽다 Vercel, heroku 등으로 쉽게 푸시 ... 등 라우팅 라우팅 기능이 정말 쉽다 CRA에서 react-router-dom으로 했다면 여기서는 그냥 pages 폴더에 넣으면 끝이다 예를 들어 pages폴더 안에 about.js를 만들어주면 localhost:3000/about.js 이렇게 접속이 가능하다 ..

컴포넌트를 가져와서 색상을 바꾸거나, 마진을 주거나 스타일을 바꾸려고 styled-components 공식 문서를 보고 (=> https://styled-components.com/docs/basics#styling-any-component) className를 넣어주는 간단해 보이는 방식인데 안됐다.. 1시간에 걸친 검색, 실험을 했고 매우 작고, 치명적인 실수를 발견했다 밑의 예는 가져온 버튼 컴포넌트에 margin을 주고 싶었던 1시간의 고통 문제의 코드 StyledButton을 우선 만들어줬다 Button.style.s import 'styled' from 'styled-components' const StyledButton = styled.button` background: blue; color..

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 같은 크기를 지정할 때 픽..

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