'🐤 Web' 카테고리의 글 목록

리액트 폴더구조의 정석이 있을까 우리가 코딩한 src 폴더 사실 노마드코더를 따라했기 때문에.. 그리고 이번 프로젝트는 그 안에서 충분히 커버가 가능했기 때문에 폴더구조에 대한 고민을 할 필요가 없었지만 그래도 폴더 스트럭쳐에 관심이 많은 나는 찾아보았다! 플러터와 다르게, 대부분 거의 통일된 폴더 스트럭쳐를 갖추어 작업을 하는 모습을 볼 수 있었다. 그래서 앞으로 내가 보고 계속해서 참고할만한 내용을 가져와봤다 ..! CRA의 초기 폴더구조 my-app ├── node_modules ├── public ├── src ├── .gitignore ├── package.json └── README.md node_modules 현재 프로젝트에 포함된 라이브러리들이 설치되어 있는 폴더로 보통 깃과 같은 저장소에 올릴 때는 이 폴더를 함께 올리..

개발자도구 야무쥐게 쓰기 ✨ 개발자도구 실행하기 F12 Ctrl + Shift + i Elements : html/CSS 상태 확인 Console : 콘솔 (변수 정보를 확인하고 오류 메시지 표시) Sources : 스크립트 디버깅 (break point 지정 및 변수 모니터링 등) Network : 브라우저에서 발생하는 통신 상태 Performance(예전 Timeline패널) : 성능 측정 Memory(예전 Profiles 패널) : 메모리 사용 형태를 작성하고 누수 탐색. Application(예전 Resources 패널) : 쿠키 및 스토리지 등의 내용 수집 Audits : 페이지를 분석하고 최적화를 위한 팁 나열 Security : Mixed content 이슈, 인증서 문제 등을 디버깅 👍 크롬 개발자 도구 단축키 모..

반응형 웹에서의 컨테이너 크기 반응형 웹이란 브라우저 넓이에 따라 최적화된 사이트를 말합니다. 출력물과는 달리 웹 퍼블리싱 작업이 들어가며, 코드로 구현되기 때문에 고정 값인 디자인을 잡아줄 때 PC / Tablet / Mobile 이런 식으로 최적화된 시안으로 잡아줘야 됩니다. PC const ProjectComponent=styled.div` .contentsbox{ width: 1140px; height: 100%; margin: 0px auto; display: flex; flex-direction: column; } ... ` 우선 저희가 사용한 방법!! (실제 코드 가져왔습니다) 저희는 컨테이너를 1140px로 잡았고, 양쪽에 margin을 auto로 주어 센터에 두었습니다! 그리고 전체 width를 1280px 이상이라고..

Firebase 보안규칙 수정 : 파이어베이스에 안전하지 않은 규칙이 있습니다 메일 올 경우 해결 방법 파베 보안규칙 보안 규칙 시작하기 | Firestore | Google Cloud 보안 규칙 시작하기 | Firestore | Google Cloud 의견 보내기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 보안 규칙 시작하기 Firestore 보안 규칙을 사용하면 인프라를 관리하거나 서버 측 인증 및 승인 cloud.google.com 정말 징글징글하게 이메일을 보내 괴롭히던 firebase 보안규칙을 수정했습니다 (계속 경고하니까 불안했슴 🥲 경고 감사합니다 구글씨) 1. 보안규칙 버전 작성 rules_version = '2'; 기존의 rules_version = '1' 은 와일드 카드를 사용할 때 한 개 혹은 두 개 이상의 path를 포함하고 있어야하기 때문에 자유..

React validation 리액트 유효성 검사 Formik VS REACT Hook form https://nyeongnyeong.tistory.com/299 [React] Form Validation (Formik VS React Hook Form) Validation 이란? 서버에 데이터를 제출하기 전에 양식이 올바른지 확인하는 과정 사용자가 데이터를 목적지로 보내기 전에, 올바를 데이터를 입력했는지 유효성을 체크해주는 것. Client Validation rea nyeongnyeong.tistory.com

react iframe에 의해 클릭 안되는 문제 해결 https://www.inflearn.com/questions/404668/react-%EC%A0%80%EC%9E%A5-%EC%8B%9C-iframe-%EA%B0%95%EC%A0%9C-%EC%9E%AC%EC%83%9D%EC%84%B1-%EB%AC%B8%EC%A0%9C react 저장 시 iframe 강제 재생성 문제 - 인프런 | 질문 & 답변 create react app을 통해 프로젝트를 진행 중입니다. 원래 컴퓨터에서는 프로젝트가 정상적으로 작동 되었는데, 다른 컴퓨터에서 git clone을 받아 npm install 후 npm start 진행하니, 1. Cannot read pro... www.inflearn.com

리액트 팝업창/모달/다이얼로그 구현하기, 삭제버튼 구현, 구조분해할당 https://jaeseokim.dev/React/React-Portal_Render%EC%9D%98_%EC%B0%A8%EC%9D%B4%EC%A0%90_%ED%99%9C%EC%9A%A9%EB%B0%A9%EC%95%88_%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0/ [React] Portal, Render의 차이점, 활용방안 알아보기! 최근 Kakao Map Api를 React Component 라이브러리로 개발을 진행하며 자주 사용하게 된 ReactDom의 Portal 기능에 대해서 공부를 하면서 Render와 어떠한 차이점이 있는지 그리고 활용방안에 대해서 정리 해 jaeseokim.dev Portalcreate를 이용하여 구현 나는 navbar 안에 있는 login button을..

styled-component 로 코드 리팩토링하기 0. 왜 공부하나 해커톤 웹사이트를 만들며 팀원의 코드 간에 css 간섭이 일어나 몇번의 수정을 거쳤다. 리액트에 css를 주는 방법이 다양하지만, styled-component는 알고만 있었지 사용해본 적은 한번밖에 없는 기술이다. (나는 리액트 베이비니깐) 시행착오의 해결책으로 styled-component로 방식을 바꾸기로 하였고, 생코 교수님 강의를 들어보려 한다. 강의 시간이 14분밖에 안되니까 정리겸 한시간안에 끝내는 걸 목표로 하며 블로그를 켰다. 1. 기존의 인라인 css 선언과 styled-component의 비교 역시 우리의 생코 교수님은 특정 기술을 사용하기 전에 꼭 비교로 시작하신다. 난 이 과정이 참 좋다 - ✨ - 왼쪽은 함수를 정의하고 리턴값으로 버튼태그를 두어 버튼 태그를 최..

Three.js 로 움직이는 지구본 만들기 https://velog.io/@whdnjsdyd111/Three.js-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0 [Three.js] 기본 구조 원시 모델 Three.js 의 원시 모델이란, 런타임에 다양한 인자들로 정의한 3D 모양을 의미한다. 주로 공, 육면체 등으로 3D 그래프를 만드는데 사용한다. BoxGeomtry 육면체 CircleGeometry 원 ![](https://images.v velog.io 원에 이미지 씌우고 모션 주기 .. 재밌다 예전에 사둔 three.js 강의 천천히 들어봐야겠다 ㅎㅎ

이전 1 2 3 다음

라이브러리 브랜드 그룹 | 🐤 개발하는 참새 🌞

티스토리툴바