📌 문자열 포매팅 문자열 포매팅은 동일한 형태의 문자열 안에서 특정한 값을 변경할 때 사용한다. 즉, 문자열 안에 어떠한 값을 삽입하는 방법이다. 저는 28살 입니다. 저는 18살 입니다. 이렇게 동일한 형태의 문자열을 가지면서 특정 문자만 다르게 표현할 때 문자열 포매팅을 사용 📌 f-string 파이썬 3.6 버전부터 지원하는 문자열 포매팅 방법이다. format() 함수나 % 연산자는 사용법도 불편하고 무엇보다 가독성이 떨어지는 문제가 발생하는데 f-string을 사용함으로써 간결하고 읽기 편한 코드를 작성할 수 있다. 문자열 앞에 f 접두사를 붙이면 f-string 포매팅 기능을 사용할 수 있다. 간단한 사용법 예시 >>> name = 'Hanwoo' >>> age = 100 >>> f'My na..
분류 전체보기
📌 문자열 포매팅 문자열 포매팅은 동일한 형태의 문자열 안에서 특정한 값을 변경할 때 사용한다. 즉, 문자열안에 어떠한 값을 삽입하는 방법이다. 저는 28살 입니다. 저는 18살 입니다. 이렇게 동일한 형태의 문자열을 가지면서 특정 문자만 다를 때 문자열 포매팅을 사용 📌 format() 함수 문자열의 format() 함수를 사용해 입력한 값의 형식을 지정한다. 괄호 {}로 표시된 위치에 지정된 형식의 문자열을 대체 바로 대입하기 >>> "My name is {}".format('Hanwoo') 'My name is Hanwoo' 변수로 대입하기 >>> name = 'Hanwoo' >>> "My name is {}".format(name) 'My name is Hanwoo' ➡ 문자열 {} 항목이 nam..
리액트 클래스 컴포넌트를 사용할 경우에는 this를 신경 써서 작성해야 합니다. 생성자(constructor) 함수 안에서 state를 정의할 경우, 자식 컴포넌트로 전달한 props에 접근할 경우, 컴포넌트에서 선언한 메서드를 참조할 경우 등 this를 사용하고 있음을 확인할 수 있습니다. 이번 포스팅에서 클래스 컴포넌트의 이벤트 처리 시 this 바인딩이 어떤 식으로 되고 있는지 알아보겠습니다. this javascript의 this는 일반적으로 함수를 호출하는 객체에 대한 참조이다. (자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수) 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. this는 다음번에 자세히 알아보도록 하겠습..
📌 클래스 컴포넌트 정의 React의 클래스 컴포넌트 정의 방법은 2가지가 있다. 하나는 React.Component 다른 하나는 React.PureComponent 이 두 가지의 방식의 차이점은 shouldComponentUpdate() 라이프사이클을 다루는 방식이 다르다는 점이다. class Han extends React.Component { render() { return React.Component; } } class Woo extends React.PureComponent { render() { return React.PureComponent; } } React.PureComponent는 shouldComponentUpdate가 이미 구현되어 있는데, props와 state를 얕은 비교를 통해..
리액트 프로젝트 구성요소를 자세히 살펴보면 index.js에서 아래와 같은 코드를 볼 수 있다. ReactDOM.render(, document.getElementById("root")); 이것은 public폴더 index.html파일의 id = "root"인 요소의 자식으로 App 컴포넌트를 렌더링 하는 코드이다. 그런데 어떠한 이유로 부모 컴포넌트 바깥에서 자식 컴포넌트를 렌더링 하는 경우도 생기는데 예를 들면 모달 같은 경우가 있겠다. 📌 사용법 ReactDOM.render() 함수로 인해 root의 자식 요소로 배치되는데 외부에 존재하는 DOM 노드가 React App DOM의 계층 안에 존재하는 것처럼 컴포넌트를 연결해주는 포탈 기능을 제공한다. ReactDOM.createPortal(, 배치할..
📌 React 학습 가이드 리액트 영상 추천 영잘알 : 유데미 - 리액트의 아버지 한국어 : 인프런 - 리액트의 삼촌 책 추천 초보자 : 리액트를 다루는 기술 경험자: 실전 리액트 프로그래밍 📌 기업과제 Review 😀 좋은 케이스! 상수관리 (route) 더보기 class AppRouter extends Component { render() { return ( ); } } // src/constants/routesPath.js const ROUTES = { HOME: '/', RECENT_LIST: '/recentList', PRODUCT: '/product', }; export default ROUTES; route의 path도 상수다. 다른 페이지에서도 path를 사용할 수 있으니 상수로 처리! (..
들어가며 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용이 가능한데,리액트 v16.8 이후부터는 함수형 컴포넌트에서 hooks 개념이 도입되면서 라이프 사이클과 같은 작업을 처리할 수 있다. 그럼에도 불구하고 클래스형 컴포넌트에선 어떠한 라이프사이클 메소드가 있고 어떻게 사용하는지 알고 넘어가야 할 것 같아서 정리한다. 그리고 혹시나 회사의 레거시 코드가 클래스형 컴포넌트로 작성되어 있을 수도 있으니까 대비할겸..? 라이프사이클 리액트는 컴포넌트 기반의 view만을 신경쓰는, view 중심 라이브러리이기 때문에 각각의 컴포넌트에는 생명주기, 라이프사이클이 존재한다. 컴포넌트의 생명주기는 렌더링 되기 전 준비과정(mount)에서 시작해 페이지에서 사라질 때(unmount) 끝이난다. 마운트(mount) ..
📌 Team mission CRA 폴더 구조 CRA 폴더 구조에 대한 정답은 없다. 여러번 사용해보고 본인에게 적합한 구조를 사용하자. 그럴려면 다른 사람의 코드를 많이 봐야한다 (오픈 소스, 유명한 기업 레포) 적합한 방식을 찾기 위해 의견을 나누면서 합의점을 도출하자. (고집 ❌) 한 파일에 한 기능만 한다 (유지보수, 확장성) CSS 작성 방식 npm build시 파일이 번들링 되면서 관련 파일이 하나로 만들어진다. 이로 인해 CSS, SASS의 경우 각각 다른 파일에서 정의한 classname이 중첩되면 전역 스타일 오염이 발생한다. 때문에 styled-components가 나온 것 인데 이를 사용하면 유니크한 classname이 선언돼 이를 방지할 수 있다. SASS의 경우에도 SASS modu..
