Front-end11 [React]조건적 Content 렌더링하는 방법들( 삼항연산자, AND(&&), 변수 등) 1. function App() { const [selectedItem, setSelectedItem] = useState(''); ... return ( ... {!selectedItem ? 아이템을 선택해주세요 : null} {selectedItem ? 아이템이 선택되었습니다 :null} ... )}2.function App() { const [selectedItem, setSelectedItem] = useState(''); ... return ( ... {!selectedItem ? ( 아이템을 선택해주세요} ) : ( 아이템이 선택되었습니다 ) ... )}3. AND.. 2024. 4. 24. [json-server 패키지] json서버 생성 오류 개발 진행 중 실제 백엔드 API 서버가 구축이 되지않았더라도 간단히 JSON server를 통해 프론트엔드 개발 진행을 해나갈 수 있다. 실제로 프로젝트를 하며 JSON파일을 사용하거나, JSON 서버를 통해 실제 DB나 엔드포인트를 대신해 계속해서 만들어나갔던 기억이 있다. 여기서 사용할 json-server는 json파일을 사용해 JSON server를 구축할 수 있는 패키지이다. 간단히 포트번호를 지정해서 해당 포트에서 서버가 실행되도록 한다. npx json-server --port 9999 --watch db.json 를 터미널창에 실행시키면 (9999번 포트에서 json서버 실행, db.json 파일에 있는 정보를 json 서버에 바로 반영(watch)) db.json파일이 생성이 되어야하는.. 2024. 4. 11. [yarn] npm error | redux, redux-actions, redux-devtools-extension,redux-actions, .. redux 설치 오류 | yarn 설치 redux, react-redux, redux-devtools-extension, 그리고 redux-actions를 설치해야하는데 평소처럼 npm install로 설치를 하니, 잘 설치가 되는 것도 있었지만 오류가 나는 것도 있었다. 그래서 npm 으로 설치하는게 아니라 yarn으로 설치하기로 했다. 다음 명령어를 실행하면 우리가 사용하는 시스템에 전역적으로 설치해 다양한 프로젝트에서 yarn 사용이 가능하다. npm install --global yarn npm install -g yarn 라고 명령어를 실행해보니 changed 1 package in 1s 라는 문장이 떴기에 설치가 잘 되었나보다 생각을 했지만 yarn --version을 해봐도 'yarn'은(는) 내부 또는 외부 명령, 실행할 수 있.. 2024. 3. 12. [React] 리액트 라우터 설치 및 사용 | A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes> | useRoutes() may be used only in the context of a <Router> component 오.. 웹 애플리케이션에서, 웹 서버와 웹 브라우저가 여러 HTML 파일을 주고받는 방식을 MPA(multi page application) 라우팅이 웹 브라우저에서만 일어나는 웹 방식을 SPA (single page application) 간단히 말해 MPA는 여러개의 페이지, SPA는 단일 페이지로 구성된 애플리케이션이라 볼 수 있습니다. 그리고 리액트의 라우터가 바로 SPA 방식을 사용합니다. 🧵SPA의 동작 방식 1. 사용자가 서버에 접속하게되면, 다양한 컴포넌트들로 구성된 하나의 HTML 파일을 웹브라우저에 전송합니다. 2. HTML 파일은 애플리케이션의 기본적인 레이아웃과 초기 데이터를 정의합니다. 3. 이 HTML파일에 포함된 JavaScript 코드가 동작하여 사용자와의 상호작용을 처리하고, 필요.. 2024. 3. 5. [React] 컴포넌트(함수형, 클래스형) | Hooks | State, Lifecycle Methods 컴포넌트란? 컴포넌트는 리액트 애플리케이션의 구성 요소입니다. UI를 작은 독립적인 부분으로 나누어 관리할 수 있게 해줍니다. 각 컴포넌트는 자체적인 라이프 사이클을 가지며, 독립적이며 재사용성을 향상시킬 수 있죠. 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있는데 이에 관해 정리해보도록 하겠습니다. -클래스형 컴포넌트 클래스형 컴포넌트는 더 복잡한 로직이나 상태 관리가 필요한 경우 사용됩니다. 클래스형 컴포넌트는 라이프 사이클 기능( 컴포넌트가 생성되고 제거되는 시점에 호출하여 코드를 실행할 수 있습니다. )과 state 기능을 사용할 수 있습니다. ( state는 컴포넌트의 내부 상태를 관리하기 위해 사용됩니다. 컴포넌트가 렌더링될 때 변경될 수 있는 데이터를 저장하고 관리합니다.) 물론 리액.. 2024. 2. 29. 이전 1 2 3 다음
'Front-end' 카테고리의 글 목록
