본문 바로가기

분류 전체보기

 (265)
[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에 전송하지 않음 직렬화를 통해 객체도 저장 가능 - 문자열만 저장 가능(쿠키와 동일) 웹스토리지 - 클라이언트에 저장만 할 뿐 서버로 전송되진 않는다. - 키와 값의 형태로 데이터를 저장 - 지속성에..
[CSS] width: fit-content; 적용이 안되는 이슈 해결(feat:IOS) 이슈 width: fit-content; 를 통해 CSS를 작성했는데 PC에서는 이상이 없다가 IOS에서 확인을 하니 적용이 안되어 다르게 나타났다. 원인 크롬 46 이하 버전, 인터넷 익스플로러나 엣지, IOS에서 width:fit-content가 안될 수 있다고 한다. 해결 width:auto; 를 사용하여 조절하거나 (auto의 경우 display: inline-block;을 같이 사용해야한다.) 같은 역할을 하는 display:table; 를 사용하면 모든 버전에 적용된다. https://stackoverflow.com/questions/49095440/width-fit-content-working-on-chrome-but-not-explorer/49095568 width: fit-content;..
[Basic] 캐시(Cache)란 무엇인가? AWS 를 사용해 '서비스 점검중' 페이지 전환을 한 사이트에 접속했다. 서비스 점검중 페이지가 노출되지 않았는데 인터넷 사용기록 삭제를 통해 캐시를 제거하자, 올바르게 서비스 점검중 페이지로 전환되었다. 이러한 캐시는 무엇일까? 캐시(Cache)란? "자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소" html, image, js, css 등을 첫 요청시 파일을 내려받아 특정 위치에 복사본을 저장한다. 이후 동일한 URL의 경우 다시 내려받지 않고 내부에 저장한 파일을 사용한다. 왜 사용을 하는가? "빠르게 서비스를 하기 위해서" 서버를 통해 내려 받는 양이 적어지기 때문에 응답 시간, 네트워크 트래픽이 감소되어 더 빠르게 서비스 할 수 있다. 어떤 경우에 사용을 고려하면 좋을까? 1. 반복적으..
[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: ..

티스토리툴바