react (5) 썸네일형 리스트형 리액트 일지 002 | 리액트 SVG 파일 겹침 현상 | 여러개의 SVG 파일 사용시 이미지 겹침 현상 | 리액트 SVG 오류 에러로그 아이콘 이미지와 메뉴명을 같이 사용하는 하단 네비게이션 바 구현 중, 이미지아이콘을 SVG링크로 복사하여 사용할 때에 이미지가 겹치는 일이 발생했다. 프로젝트에서 icons 폴더내에 각각의 파일들로 svg링크들을 보관하여 사용하고 있었고, import 경로도 각각 파일로 확실했는데 어디가 틀린지 몰라서 한참 고민했다 ㅠㅠ 심지어 미리보기에서도 각 이미지가 제대로 출력되었다. 이거 확인하려고 svg미리보는 확장팩까지 깔았다. 나의 멋진 해결 알고보니 이런 현상이 발생하는 이유가 SVG 링크의 id가 제일 처음 올린 id와 중복되어서 발생한 에러였다. id가 한가지로 지정되어있었기때문에 해당 아이디를 갖고 있는 홈 이미지만 출력됐던 것이였다. 요렇게 SVG 링크는 각각의 pattern id 를 갖게.. 패스트캠퍼스 챌린지 27일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 27일 차. 리액트 스터디에 가입했다. 정확히는 여러 스터디를 진행하는 스터디를 가입하게 되었고 리액트 입문 단계의 커리큘럼을 공부하게 되었다. 책임감을 가지고 공부할 일이 더 생겨서 지금 의욕에 가득 차 있다. 2022년 들어서 해야 하는데 생각만 하는 인간에서 계획을 짜고 실행해보는 단계까지 발전했으니 연말에는 아마 지금보다 더 발전한 내가 되어있을 것 같다. 그리고... 취업도 할 수 있겠지...? 어쨌거나 난 멋있는 사람이니까 멋지게 성장할 거야!!! 오늘은 리액트의 실전 활용에 관한 강의를 들어보았다. 간단하게 정리해보려 한다. Controlled Component VS Uncontrolled Component HTML 엘리먼트들 중에서는 상태를 가지고 있는 엘리먼트들이 있다. 자체적으로 상태를.. 패스트캠퍼스 챌린지 26일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 26일 차. 리액트 강의를 수강함과 동시에 리액트를 사용하여 유튜브를 클론 코딩하는 프로젝트를 진행 중에 있는데 두가지를 같이 진행하니까 리액트의 구조와 사용법에 어느정도 이해가 되어가고 있다. 처음 배울 땐 좀 어려워서 잘 사용할 수 있겠느냐는 생각이 많이 들었었는데 역시 차근하게 진행해나가니까 차근차근 풀려나가는 느낌이 든다. 아직은 자바스크립트가 더 익숙해서 리액트 프로젝트를 진행할 때에 막히는 부분에선 자바스크립트로는 이렇게 호로록 해버리면 되는데 라는 생각이 자꾸 든다.. 오늘은 리액트 이벤트리스너에 대한 정리를 간단하게 해보았다. React Event Handling HTML DOM 에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야한다. class Commp e.. 패스트캠퍼스 챌린지 25일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 25일 차. 50일 챌린지의 진행 방식은 하루하루 학습일지를 작성한 뒤 그 다음 주 월요일에 한 주 간 작성한 일지들을 인증하는 폼을 제출하는 방식이다. 챌린지는 어느덧 4주차까지 진행되고 있고 2월 14일 월요일에 한 주간 작성했었던 3주차의 링크들을 제출하였었다. 그러면 이렇게 다음 주 목요일에 미션에 성공했는지 알려주는 메일과 문자가 날아온다. 저번 주에도 한 번 받았었던 메일인데 저번 주와는 느낌이 조금 달랐다. 뭔가 열심히 하고 있다고 알려주는 느낌이라서 뭔가 기분이 묘했다. 힘을 내서 으쌰으쌰 오늘도 달려보았다. Props Props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터이다. 리액트의 컴포넌트들은 여러 가지 데이터를 받아야 하는 경우가 많은데 다른 컴포넌트로부터 넘겨받는 데이터를.. 패스트캠퍼스 챌린지 24일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 24일 차. 아직 어려운 듯 안 어려운 듯 친한 듯 안 친한 리액트.... 원래 오늘은 리액트 강의를 쭉 빼고 프로젝트를 만드는 강의를 진행해보려 했는데 낮잠을 자버려서 계획을 수행하지 못했다. 그래서 못한 만큼... 새벽 공부를 쭉 해보려 하는데 집중이 잘 될지 모르겠다. 요즘 전자기기를 보면 눈이 시려서... 눈물이 막 난다... 과연 이 눈물은 눈이 시려서 나는 걸까... 내 코딩 실력 때문에 나는 걸까..? 리액트가 하는 일 리액트가 하는 일은 무엇일지 리액트의 핵심 모듈 2개로 리액트에 대해 알아보자. 1. 리액트 컴포넌트를 HTML에 연결하기 import ReactDOM from 'react-dom'; react-dom으로 부터 React를 import해온다. ReactDOM 은 리액트.. 이전 1 다음
