본문 바로가기

react4

[react]react의 또 다른 hook useEffect에 관하여.. 1. useEffectuseState라는 리액트의 유명한 훅과 거의 동등급으로 유명한 hook이다 . useEffect는 어떤 특정 컴포넌트가  화면에 표시되거나 , 사라진 후에 실행될 수 있도록 하는 훅이다.(포스팅 진행 중) 2024. 8. 20.
[React] vite, Cra(Create React App) 없이 Developement Environment 구성하기. 1. 개요토스 커리어즈에 토스 채용 공고 중 토스가 사용하는 기술 칸이다. 빌드 툴을 보면 4가지나 빌드 하는 과정에 빌드 툴을 사용하고 있는데, 각 회사의 프로젝트마다, 회사의 특성 마다 이러한 기술사용 스택은 얼마든지 변화하고, 변경되거나, 또한 내가 몰랐던 빌드, 기술을 사용할 가능성이 크기 때문에 이를 위해서는 vite나 cra같이 간편하게 설정을 해주고, 템플릿을 지정해주고 커스터마이징이 제약된 환경보다는 커스터마이징이 자유롭고  , 엄청 큰 프로젝트나, 여러가지 환경이 필요한 상황일 때는 vite, cra없이 개발 환경을 구성하는 것이 필요하다고 생각이 되어 포스팅을 작성하게 되었다. 2. Example2-1. React 환경 생성 및 테스트 https://ko.legacy.reactjs.or.. 2024. 8. 20.
[React] Cross Browsing 를 해결하기 위한 몇가지 방법 feat.CSS Reset 1. Cross Browsing Chrome, safari , whale (네이버) , edge 등 오늘날 존재하는 여러 웹 브라우저들은 내부적으로 각 동작하는 엔진과, 속성, 기술요소 등이 다 다를 것입니다. 동일한 웹사이트에 접속하더라도 어떤 웹 브라우저로 접속하느냐에 따라 충분히 다르게 보일 수 있습니다. Cross browsing은 이 다르게 보일 수 있음에 대하여 모든 브라우저에서 화면이 모두 동일하게 표시되어야한다는 것을 의미하는 것이 아니라, 동등한 수준의 정보, 동일한 기능 제공이 우선적이어야 한다에 대해 얘기하는 것입니다.  크로스 브라우징을 맞춰주기 위해서는 우선 어플리케이션이 가장 우선해서 고려해야할 웹 브라우저는 어떤 브라우저인가를 고려해야합니다. ex) 점유율이 높은 것이 우선이니.. 2024. 8. 20.
[React] Styled-Components 개요1. className 을 지정하여 , 별도의 css파일에서 Styled를 지정하는 방법.  div>'        a href="https://vitejs.dev" target="_blank">          img src={viteLogo} className="logo" alt="Vite logo" />        a>      div>하나의 예시로 className은 logo로 지정되어 있기에 상단에서import './App.css'App.css 파일을 import 하고 있기에, .logo {  height: 6em;  padding: 1.5em;  will-change: filter;  transition: filter 300ms;} App.css에서는 이러한 className에 대한 st.. 2024. 8. 20.