분류 전체보기124

• 

  모달 만들기 모달 만들기를 해보았다. UI를 먼저 만들고 나서 클래스를 붙이는 방식으로하니 그렇게 어려운 건 없었다. 핵심적 코드 open modal을 클릭하면 display:none이 붙은 클래스를 없애는 방식으로 진행하였다 저번에 했던 navigation코드와 매우 비슷 hidden 클래스를 JS로 붙였다뗏다하는식으로 완성 Modal content .hidden { display: none; } (JS) const modal = document.querySelector(".modal"); const modal_btn = document.querySelector(".modal_btn"); const modal_exit = document.querySelector(".modal_exit"); modal_btn.add.. 개발/개발일지 2023. 8. 30.

• 

  반응형 Navbar 만들기 이번에 반응형 Navbar를 만들면서 내 능력에 대한 자괴감이 들었다. 엄청 쉬운거같은데 생각의 정리를 안하고 무작정 코드를 짜면 이렇게 되는구나 느꼈던 프로젝트이다. 핵심적 코드 가장 핵심적인 부분은 화면이 줄어들면 menu와 sns가 없어지는 @media부분 그리고 list_menu 아이콘을 누르면 세로로 menu들이 나오는 부분이다. 여기에서 너무 막무가내로 코드를 짜서 엄청 헤매었다. 이런거를 할때는 변하기 전, 변한 뒤 코드를 짜고 이걸 연결시키면 편하다는 걸 너무 늦게 깨달아버렸다. 이것들을 만드는 코드 ui를 먼저 만들고 연결해주면 편하다. media 부분 @media all and (max-width: 725px) { // sns 아이콘 사라짐 #sns { display: none; } /.. 개발/개발일지 2023. 8. 28.

• 실시간 데이터가 중요하면 react-query 사용이유 몇초마다 자동으로 데이터 가져오게 하기 실패시 재시도 알아서가져오기 ajax 재요청 쉽게 가능 다음 페이지 미리 가져오기 ajax 성공/실패시 쉽게파악가능 결론 : 실시간 데이터가 필요한 사이트에서 사용하자. 설치 및 셋팅 방법 터미널에서 아래 코드를 친다. npm install @tanstack/react-query index.js파일 열어서 아래 코드를 입력해준다. import { QueryClient, QueryClientProvider } from '@tanstack/react-query' //1번 const queryClient = new QueryClient() //2번 const root = ReactDOM.createRoot(document.getElementById('root').. 개발/React 2023. 8. 26.

• 

  localStorage localStorage 사용하는 이유 새로고침하면 모든 state 데이터는 리셋이 된다. 리셋되는게 싫다면 서버로 보내서 DB에 저장하면 된다. 서버나 DB지식이 없다면 localStorage를 이용하면된다. 개발자 도구 - 애플리케이션에 들어가보면 로컬스토리지, 세션스토리지가 있다. 로컬스토리지 5MB정도의 문자 데이터를 저장 object자료와 비슷하게 key : value 형태로 저장한다. 세션스토리지 로컬스토리지와 똑같은데 브라우저 끄면 삭제된다. localStorage 문법 아래의 문법을 사용하면 데이터를 추가, 읽기, 삭제를 할 수 있다. localStorage.setItem('데이터이름', '데이터'); // 데이터 추가 localStorage.getItem('데이터이름');// 데이터 가져오.. 카테고리 없음 2023. 8. 26.

• 

  sidebar 만들기 핵심적 코드 화면크기에 따라 코드다르게 하려면 미디어쿼리(Media Query) 화면크기에 따라 css가 달라지게하는 코드가 있다. 정확히는 조건에 따라 스타일을 달라지게 만들 수 있다. max-width: 500px 전체 화면크기가 500px 이하일때 sidebar_container의 width를 100%로 해버렸다. (scss) @media all and (max-width: 500px) { #sidebar_container { width: 100%; transition-duration: 0.5s; } } 미디어쿼리 미디어쿼리(Media Query)란? 조건에 따라서 스타일을 적용하고 싶을때 사용한다. @media로 시작하는 미디어 쿼리의 기본적인 문법 구조는 아래와 같다. /* css파일 */ @m.. 개발/개발일지 2023. 8. 25.

• 

  리뷰 캐러셀 만들기 만드는 방법에 대해서 전체적으로 설명하기보다는 가장 핵심적인 코드와 내가 배웠던 부분에 대해서만 다루어 보겠다. 요즘 react강의와 js프로젝트를 병행하고 있는데 확실히 react를 사용하는게 편하다는 것을 느끼게된다. 핵심적 코드 데이터를 배열에 객체형태로 담아서 그것을 활용해서 리뷰 캐러셀을 만드는 것이 핵심이라고 생각했다. html에서 이렇게 만들고 // HTML JS에서 getElementById를 통해서 셀렉터를 만들어준다. const img = document.getElementById("person_img"); const author = document.getElementById("author"); const job = document.getElementById("job"); const i.. 개발/개발일지 2023. 8. 25.

• 

  무한 props 없애기 Redux Redux가 뭔데 왜 쓰는데 Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리이다. store.js에 state들을 보관하고 다른 컴포넌트에 쏴줄수있다. 사이트가 커지면 유용하게 써먹을 수 있다. Redux 설치 및 셋팅 Redux 설치 아래의 코드를 터미널에 입력하면된다. npm install @reduxjs/toolkit react-redux redux toolkit이라는 라이브러리를 사용할 건데 redux의 문법을 쉽게 만드는 라이브러리이다. 설치하기전에 "react" "react-dom" 의 버전이 18.1.x 이상인지 확인하자. 확인법은 package.json에서 확인가능하다. Redux 셋팅 아무곳에 store.js 파일을 만들고 아래 코드에 복붙해준다. 여기가 바.. 개발/React 2023. 8. 23.

• 

  props가 귀찮다면 Context API (이거보단 Redux가 좋아) props는 무조건 부모에서 자식으로 자료를 옮겨줘야하는데 컴포넌트가 많아진다면 복잡해 질 수 있다. 그래서 Context API 문법을 쓰거나 Redux 같은 외부 라이브러리 쓰면 되는데 여기선 Context API을 사용해보자. 사용법 세팅법 createContext를 import를 해준다. React.createContext()함수를 가져와서 context1으로 만들어준다. context는 state보관 창고라고 생각하면된다. (App.js) import { useState, createContext } from "react"; export let Context1 = React.createContext(); function App(){ let [재고, 재고변경] = useState([10,11,12.. 개발/React 2023. 8. 23.

• 

  tap 만들기 강의를 듣다가 tap을 만드는 과제를 주어졌는데 bootstrap를 사용해서 css를 만들고 구현을 했는데 나는 bootstrap을 사용하기가 싫어서 직접 styled-component를 사용해서 만들어보았다. (기능구현위주라서 css는 대충 만들었다.) react, styled-component 사용 UI를 만드는 단계 applecoding에서 배운 ui를 만드는 단계는 크게 3단계로 나뉘어져 있다. 1. html css로 디자인 미리 완성 2. UI의 현재 상태를 저장할 state 하나 만듬 3. state에 따라서 UI가 어떻게 보일지 작성 그래서 이걸 토대로 tap을 만들어보자. html css로 디자인 미리 완성 전체적인 button을 모아놓은 content를 모아놓은 를 통해 디자인만 미리 만.. 개발/개발일지 2023. 8. 23.

• 

  서버통신하려면 ajax (axios) 서버에서 데이터 받을때 서버는 데이터를 달라고하면 주고 수정해달라고 하면 수정해주고 그냥 데이터 저장소이다. 데이터를 요청할 때는 그에맞는 규격에 맞춰서 요청을 해야한다. 1. 어떤 데이터인지 (URL 형식으로) 2. 어떤 방법으로 요청할지 (대부분 GET or POST 두가지 쓴다.) 데이터를 가져올 때는 보통 GET 고르면 되고 데이터를 서버로 보낼 때는 POST 고르면 된다. 더보기 요청 메소드 종류 GET : 리소스 조회 POST: 요청 데이터 처리, 주로 등록에 사용 PUT : 리소스를 대체(덮어쓰기), 해당 리소스가 없으면 생성 PATCH : 리소스 부분 변경 (PUT이 전체 변경, PATCH는 일부 변경) DELETE : 리소스 삭제 예를들어 post 요청을 보내고 싶다면 아래 코드처럼 쓰면.. 개발 2023. 8. 18.