본문 바로가기

전체보기335

22.07.26_TIL 📌 웹팩은 JavaSrcipt, JSON 문법만을 번들링할 수 있지만 loader를 사용하여 각종 css, jsx 등의 언어와 png, jpb 등의 멀티미디어 파일 또한 번들링을 할 수 있습니다. 오늘은 이러한 사실을 알고 있으므로 리액트를 웹팩을 사용하여 번들링하는 방법에 대해 알아보아야한다. 📗 오늘 학습한 내용 react, react-dom 리액트 컴포넌트와 Hooks, 라이프 사이클에 대한 정보가 모두 들어있는 리액트와 이 리액트 코드를 브라우저에 보여줄 수 있는 react-dom이 필요하다. babel create-react-app에 포함되어 있는 babel이 jsx를 js로 변경해주어 번들링을 해주었기 때문에 babel은 jsx를 JavaScript로 변경하여 entry에서 불러올 수 잇게 만.. 2022. 7. 26.
22.07.25_TIL 📌 웹팩은 어렵다고 많이 들었는데 어떤 부분에서 어려움이 있는지 자세히 찾아봐야겠다. 📗 오늘 학습한 내용 번들링 사전적 의미: 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위 개발적 의미: 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 번들링을 사용하지 않을 경우 일어나는 상황 두 개의 js파일에서 같은 변수를 사용하고 있어서 변수 간 충돌이 일어난 상황 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소한 상황 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기 어려운 상황 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 .. 2022. 7. 25.
[Firebase] React 프로젝트 구성 #1 React 프로젝트 구성 #1 (프로젝트 생성) Firebase를 사용하여 React 프로젝트에서 Firestore를 사용할 수 있도록 작업을 시작해보겠습니다. 1. Firebase 로그인 및 콘솔로 이동 구글 계정을 생성후 firebase.google.com 링크에 접속하여 우측 상단에 있는 '콘솔로 이동'을 클릭하여 Firebase 프로젝트를 생성하러 이동합니다. 2. 프로젝트 생성 콘솔로 이동하게 되면 중앙에 프로젝트 추가 버튼을 클릭해줍니다. 프로젝트의 이름을 지정합니다. 애널리틱스를 설정합니다. *애널리틱스: 무제한 무료 분석 솔루션인 Google 애널리틱스를 사용하면 Firebase Crashlytics, 클라우드 메시징, 인앱 메시지, 원격 구성, A/B 테스팅, Cloud Functions.. 2022. 7. 24.
[Firebase] Firebase? Firebase? 모바일 및 웹 애플리케이션을 만들기 위해 개발된 플랫폼입니다. Firebase로 플랫폼을 구축 시 자동적으로 서버를 구축해주어 리눅스의 명령어를 알 필요가 없으며, 인증, 데이터베이스, 스토리지, API 등을 구성하는데 조금 더 간편하게 작업을 할 수 있도록 도와줍니다. 이를 통해서 적은 비용으로 좋은 앱을 만들 수 잇습니다. 기능 기본적으로 가장 많이 사용하는 기능만 적어보도록 하겠습니디ㅏ. Authentication 계정 기능을 쉽게 만들 수 있게 해주는 API입니다. SNS 로그인 기능 또한 구현할 수 있습니다. Cloud Firestore SQL 언어를 사용하지 않고, 클라우드에 데이터를 저장하여 사용할 수 있습니다. 실시간 데이터베이스 사용자 기반 보안으로 온/오프라인에서 실시.. 2022. 7. 24.
22.07.22_TIL 📌 어제 한 미디어 쿼리는 재미있었다. 오늘은 웹 페이지에 동적인 효과를 가져올 수 있는 애니메이션 효과에 대해서 학습을 한다. 오늘도 어제와 같이 재미있는 시간이 되었으면 좋겠다. 📗 오늘 학습한 내용 CSS 애니메이션 @keyframes CSS로 키프레임 블록을 만든다 @keyframes 애니메이션이름{ 0% {/* from으로 작성가능 */ CSS속성: 속성값; transform: rotate(0deg) } 50% { CSS속성: 속성값; transform: rotate(180deg) } 100% {/* to으로 작성가능 */ CSS속성: 속성값; transform: rotate(360deg) } } /* 시작 시점에서 0도, 50프로 시점에서 180도, 완료시점에서 360도 회전시킴*/ 애니메이션.. 2022. 7. 22.
22.07.21_TIL 📌 내가 제일 노력을 해야하는 부분인 CSS 디자인 부분에 대해서 학습을 하는 시간을 오늘 포함 이틀을 준다고 한다. 이때 더욱 실력을 향상시켜 구현만 가능한 프론트엔드 개발자가 아닌 디자인도 같이 겸비할 수 있는 개발자가 될 수 있도록 노력해야겠다. 📗 오늘 학습한 내용 브라우저 프론트엔드 개발자는 브라우저의 동작과정에 대해 아는 것이 중요하다. 작성한 코드가 브라우저의 소프트웨어 프로그램 상에서 수행되기 때문이다. 웹(Web) = 월드 와이드 웹(World Wide Web) 인터넷 상에서 텍스트나 그림, 소리 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공한다. 웹 페이지 HTML 언어를 사용하여 작성된 문서 형태 웹 사이트 웹 페이지 중 서로 관련된 내용으로 작성된.. 2022. 7. 21.

티스토리툴바