daisylee

이슈 antd로 불러온 컴포넌트에 styled-components를 적용할 때, 이미 컴포넌트가 상단에 정의되어 있어서 동일한 변수명을 가진 styled-components를 만들 수 없어서 난감했습니다. 같은 이름을 쓰자니 상단에 있어서 중복되고, 다른 이름을 쓰자니 이미 정해져 있는 antd 컴포넌트명을 함부로 바꾸면 안 되는거 아닌가...? 라는 생각이 들었습니다. 해결 방법 해결 방법은 의외로 간단했는데, styled(컴포넌트) 처럼 사용해서 가져다써도 상관없었습니다! styled-component로 활용하는 방법으로는 1. 스타일링된 엘리먼트를 만들어서 가져다 쓰기 2. 이미 만들어진 컴포넌트를 스타일링해서 가져다 쓰기 로 나눠볼 수 있겠습니다. 1번 방법은 styled.태그명 처럼 작성하고, ..

강의를 듣거나 혼자 토이 프로젝트를 만들 때, 아무 생각 없이 습관적으로 CRA(Create React App)를 통해 개발을 시작하다보니 리액트가 동작하는 기본적인 원리를 지나치게 되는 것 같습니다. CRA 없이 index.html에 리액트를 적용하는 방법을 정리해보았습니다. 우선 대부분의 설정은 리액트 공식문서에 나와있으므로 공식 문서만 따라해도 잘 작동할 것입니다. 저는 제가 보기 쉽게 정리를 하고 싶어서 블로그에 적고있습니다😊 https://ko.reactjs.org/docs/add-react-to-a-website.html 웹사이트에 React 추가 – React A JavaScript library for building user interfaces ko.reactjs.org 1. 태그 안에 ..

컴포넌트와 props를 다시 배워보니... 복습할 겸 다시 공부를 해보니 렌더링 영역(최상단 부모 컴포넌트)에서는 실제로 보여지는 데이터를 props로 넘겨주는 역할, 컴포넌트(자식 컴포넌트) 정의 영역에서는 넘겨받은 데이터를 가공한다고 생각하니까 이해하기 쉬웠던 것 같습니다. 부모에서는 데이터를 넘겨주고, 정의된 자식 컴포넌트에서는 데이터를 처리한다! 스타일링은 그때그때 알맞게 사용하자 강의에서는 리액트 컴포넌트 스타일링에 대해 1. 인라인 스타일링 2. emotion 3. styled-components 4. tailwind(테일윈드) 이렇게 4가지에 대해 소개하고 있습니다. 이중에서 저는 인라인 스타일링과 styled-components를 사용해보았는데요. 최근에는 emotion을 많이 사용한다고 ..

프로그래머스로 코딩테스트를 풀어보는데 아주 간단한 문제가 있었습니다. 정수로 이루어진 문자열을 숫자형으로 바꿔주는 함수를 작성하는 문제였습니다. 당연히 문자열을 정수형으로 변환해주는 parseInt 메서드가 떠올라 코드를 작성하고 다른 사람의 풀이를 보는데, 눈에 띄는 풀이가 있었습니다. 그것도 아주아주 간단한 풀이. 아마 제가 본 문제중에 가장 간단한 풀이가 아닐까 싶습니다! 메서드를 사용하지 않고는 도저히 풀 수 없을 것이라고 생각했는데, 왜 맞는걸까요? 연잔사의 형변환을 기억하자 덧셈, 뺄셈, 곱셈, 나눗셈의 사칙연산 산술자에는 +, -, *, / 가 있습니다. 만약 숫자로 이루어진 문자열과 숫자형을 사칙연산하면 결과값의 타입은 어떻게 될까요? 덧셈을 제외한 뺄셈, 곱셈, 나눗셈은 숫자로 형변환이 ..

styled-components는 CSS in JS라는 기술을 사용하는 라이브러리입니다. CSS in JS는 말그대로 CSS 파일을 생성해 스타일링 관련 코드를 분리하는 대신에, JS 안에 CSS를 작성하는 것입니다. 이와 같이 CSS in JS를 적용하는 라이브러리들이 있는데, 가장 대표적인 것이 styled-components입니다. 저는 기초적인 사용법을 익히기 위해 아주 간간한 버튼을 컴포넌트화 한다음 styled-component를 적용해보았습니다. 공부하기 위해 다음과 같은 링크를 참고하여 정리했습니다. styled-component를 공부할 때 꼭 참고하시길 바랍니다😎 https://bit.ly/3mAfpIp [React] Styled Components 사용법 Engineering Blog..