728x90 반응형 코딩 메모장6 StyledComponents로 리액트 스타일도 컴포넌트로 만들기 최근 공부를 하다가 Styled Components라는 것을 알게 되었다. 직접 사용해보고 적용해보니 리액트에서 스타일을 다른 파일로 따로 지정해서 사용하는 것보다 편리하고 파일도 간소화되는 것 같았다. 리액트에서 기능들을 컴포넌트로 관리할 때도 좋은 것 같았다. 사용법도 아주 쉽게 되어있어 편리할 것 같다. https://styled-components.com/docs styled-components: Documentation Learn how to use styled-components and to style your apps without stress styled-components.com 1. 일단 터미널에 인스톨 해준다. npm install styled-components 인스톨이 끝나면 pa.. 2023. 3. 16. [REACT 오류 해결] gh-page 배포 경로 오류 gh-page로 github에서 리액트 배포한 후 경로 오류 문제에 봉착했다. 이렇게 내가 배포한 주소로 들어가면 첫 페이지가 나오는 것이 아니라 잘못된 경로를 적었을 때 나오는 페이지가 바로 나온다는 것이다. 돌아가기를 누르면 내가 설정한 경로가 아닌 github.io에서 페이지가 정상작동한다 구글링을 엄청 해서 방법을 찾았는데 이것은 라우터의 문제라고 한다. HashRouter로 하면 된다는 말이 있어서 HashRouter로 바깠다가 해결이 안되어서 이렇게 바깥을 감싸는 브라우저라우터에 basename으로 경로를 지정해주니 해결이 되었다. 이것 때문에 node- modules를 삭제했다 npm install로 다시 깔았다를 엄청 반복했고 build폴더도 지웠다가 다시 build했다가를 반복하면서 엄청.. 2021. 8. 20. [REACT 메모] REACT Hook - useInput(1) * 내가 이해한대로 메모한 것임... 틀릴 수도 있음! export default function App() { const name = useInput("mr."); // 기본 값을 mr. 로 설정 return ( {/* // {...name} value={name.value}*/} {/* {...name} name안에 있는 모든 것들을 풀어준다. */} ); } 인풋에서 name안에 있는 것들을 각각을 풀어서 적용 name은useInput함수에 mr. 를 기본적으로 전달 const useInput = initialVal => { const [value, setValue] = useState(initialVal); return {value} // 어떤 변화를 주기 전에 설정한 기본 값을 value와 re.. 2021. 8. 15. [REACT 메모] .env로 githib에서 키 관리 .env 환경 변수 지정해서 githib에서 키 관리 firebase이나 뭐 어딘가에서 받아온 모든 api 키나 URL을 그냥 코드에 적어두는 것 대신에 .env파일을 생성해서 분리해서 관리하기. env파일에는 환경 변수들이 담겨있다. react에서 환경 변수를 써야한다면 REACT_APP_SOMETHING=apikey 이라고 정의해줘야함 앞에 REACT_APP_으로 시작하는게 포인트! 사용할 때는 아래와 같이 process.env.REACT_APP_SOMETHING로 적어서 사용 env파일을 사용해서 키를 관리하는 이유는 내가 원한다면 gitignore에 와서 .env를 적어주면 여러가지 키들이 들어있는 .env 파일은 git에서 ignore됨. git 사용 시 이 정보는 공개되지 않기 때문 하지만 서.. 2021. 8. 14. [JAVASCRIPT 메모 ] 오브젝트 메소드 - Object.assign(); / /Object.keys(); / Object.values(); /Object.entries(); / Object.fromEntries(); // Object.assign(); - 객체 복제 메소드 const user = { name: "kay", age: 30, }; const cloneUser = user; // 이렇게 하면 복제가 되는 것이 아니다. cloneUser.name = 'ddd'; // 유저의 이름도 변경됨 // 복제된게 아니라 하나의 객체를 두 변수가 접근하고 있는 것. //cloneUser == user 복제를 하려고 저렇게 바로 user를 할당하면 복제가 되는 것이 아니라 하나의 객체(user객체에) 두개의 변수가 접근하고 있는 것임. 결과를 보면 cloneUser의 이름을 바꿨는데 user의 이름이 바뀜. 복제를 위해서는 Object.assign(); 메소드를 사용한다. const newUser = Object.assi.. 2021. 8. 13. [JAVASCRIPT 메모 ] 생성자 함수 생성자 함수 = 붕어빵 틀! 함수의 이름 첫글자는 대문자로 쓴다. function User (name, age) { // this = {} this.name = name; this.age = age; // return this; } 사실은 주석처리 된 부분이 숨어있는 것. 생성자 함수는 new 연산자로 호출한다. const user1 = new User('mika', 20); const user2 = new User("misa", 22); const user3 = new User("mina", 21); new로 호출하지 않으면 리턴되는 값이 없어서 undefined반환 function Item (title, price) { this.title = title; this.price = price; this... 2021. 8. 12. 이전 1 다음 728x90 반응형
