React (115) 썸네일형 리스트형 [React] React의 렌더링 방식 React.js의 렌더링 방식 살펴보기-컴콩선배 youtube [React] React의 state (우아한테크 youtube정리) [우아한테크: 무비의 React의 state 유튜브 정리] 바닐라 JS - 아래와 같이 Dom에 접근하여 직접 수정해줌 - 데이터변경에 따라 사용자가 보는 화면도 변경되어야 하기 때문 React 데이터 바인딩 - JS는 여러개의 자바스크립트 객체와 화면에 있는 데이터를 직접 일치시켜 줘야 했지만, React는 데이터 바인딩을 대신 해준다. (데이터를 view에 쏙쏙 넣어주는 작업) -React는 단방향 데이터 바인딩을 지원하는데 이는 데이터와 템플릿을 결합하여 화면을 생산함 -React에서는 변경되는 데이터를 위해 State를 사용할 수 있다. State를 사용하면 자동으로 관련된 화면을 리렌더링 해줄 수 있다. React의 state와 props -React에서는 하향식으로 데이터가 흐른다. -컴포넌트.. [React] 쿠키와 웹 스토리지란? 웹스토리지, 쿠키 :해당 도메인에 대한 데이터를 브라우저에 저장한다. 쿠키 - 서버가 클라이언트에게 전송하는 작은 데이터 파일 - 이름, 값, 도메인 정보, 경로 정보, 만료 일자와 시간 등 - 시간 설정 가능 - 모든 브라우저에서 지원을 하지만 매번 서버에 전송이 되고 저장 용량이 작고 보안에 취약하다는 단점이 있다. >> HTML5부터는 쿠키의 단점을 보완해 등장한 웹스토리지를 주로 사용 쿠키의 부족한 저장 용량 문제 해결 - 5MB 저장 용량 쿠키의 CSRF, 트래픽 문제 해결 - 요청시 headers에 전송하지 않음 직렬화를 통해 객체도 저장 가능 - 문자열만 저장 가능(쿠키와 동일) 웹스토리지 - 클라이언트에 저장만 할 뿐 서버로 전송되진 않는다. - 키와 값의 형태로 데이터를 저장 - 지속성에.. [React] src내에서 public 폴더 접근 방법 react에서 src내에서 public의 이미지를 가져와 사용하고 싶었다. index.html 에서는 아래와 같이 %PUBLIC_URL% 으로 사용한다. src내에서는 아래와 같이 process.env.PUBLIC_URL 로 사용한다. 참고사이트) https://velog.io/@rmaomina/public-url-absolute-path 환경변수 PUBLIC_URL 정적 리소스/절대 경로 가져오기 github에 호스팅을 하면서 루트 경로가 아닌 /weather/ 등 path를 추가하였다. 그런데, public에 있는 api 아이콘 경로가 깨지는 현상이 있었다. 루트가 아닌 URL에 호스트하더라도 유연하게 프로젝트가 velog.io https://bluishhot-star.tistory.com/186 [.. [React] port 기본3000> 원하는 port로 변경하기 기본 npm run start로 실행되면 http://localhost:3000 으로 시작된다. 만약 80과 같이 원하는 port로 실행되도록 하고 싶다면 package.json에서 아래와 같이 설정한다. 1) Windows "start" : "set PORT=80 && react-scripts start" , 2) Mac, Linux "scripts" : { "start" : "export PORT=80 && react-scripts start" , } ... 위와 같은 형식을 반영하여 나는 아래와 같이 설정하였다. "scripts": { "start": "set PORT=80&& env-cmd -f .env.development craco start", 그럼 아래 주소로 잘 열리는 것을 확인할 수 있.. [React] VS Code 단축키 자동완성 설정하기 (+TypeScript) VS Code를 통해 React, TypeScript를 사용중이다. 단축키를 통해 자동완성하는 방법을 알아보고자 한다. module.scss를 사용하면서 className을 매번 지정해주는 것이 번거로웠다. 아래와 같이 cxclass를 치면 className={cx('')} 가 알아서 자동완성이 되게 할 것이다. {item.list} 1. VS Code> 파일> 기본설정> 사용자 코드 조각 구성을 클릭 2. 우측 하단에 사용중인 언어를 확인하고 검색한다. 나는 typescript jsx를 검색하여 들어갔다. 그럼 아래와 같이 뜨는 json 파일 내에 원하는 단축어 설정을 작성한다. 위의 styled module className은 내가 설정한것이다. (prefix와 body가 주된 설정) prefix: .. [React] 기한까지 보이도록 설정하기 (feat:day.js) dayjs 를 사용해서 지난 번에는 남은 시간 타이머 구현을 해보았다. 이번에는 기한안에 따른 함수를 실행시킬 예정이다. case1: 시작 날짜, 종료날짜 정하기 - 기한에 맞게 실행 기한을 설정하고 오늘 날짜가 기간 안에 해당할 경우에는 페이지가 보여지도록 설정하려고 한다. 그냥 날짜를 아래와 같이 직접 코드에 쳐도 되지만, const startDate = dayjs('2023-09-04'); const endDate = dayjs('2023-10-01'); 개발환경에서와 실제 배포에서 날짜가 자동 변경되도록 하기 위해 아래와 같이 env에 작성하였다. (production의 경우에는 날짜만 다르게 env에서 작성해주면 된다.) 09-04 부터 10-01 까지 해당 기한일 경우 보여지도록 할 예정이다... [React] 구글 애널리틱스(페이지, 버튼 클릭 방문자 수 수집 ) GA 사용법 https://analytics.google.com/ Redirecting... analytics.google.com GA 세팅 GA에 우선 가입을 하고 아래 사이트 방법을 참고해 세팅한다. https://shanepark.tistory.com/123 Google Analytics 구글 애널리틱스 활용하기 - 웹 어플리케이션에 적용 https://shanepark.tistory.com/121 Google Analytics 구글 애널리틱스 활용하기 - 티스토리 연동 최종 프로젝트에서 Google Analytics 를 사용해 볼 예정입니다. 아직 프로젝트가 생성 중이니 저의 티스토리에 연동 shanepark.tistory.com 위와 같이 Web 선택후 URL에 내 localhost를 확인하기 위한 ip를 .. 이전 1 2 3 4 5 ··· 15 다음
