프론트엔드 썸네일형 리스트형 비전공자의 공부일지 - firebase, LocalStorage, firebase를 이용해서 웹, 앱 배포하기 5월 1일 근로자의 날이라 오랜만에 3일의 휴식을 취하고 다시 시작되는 공부일지 이번주는 주말 동안 조카가 놀러 오기 때문에 5/5일 금요일부터 쉬는 날이지만 쉬는 게 쉬는 거 같지 않을 거 같다. 1. firebase firbase는 앱이나 웹 어플리케이션을 만들기 위해 구글에서 개발한 플랫폼이다. 지금 프론트를 배우고 있지만 웹이나 앱을 만들 때 프론트뿐 아니라 백 쪽으로 서버 작업(로그인, 데이터관리, 인증 등)을 해야 하나의 서비스가 완성된다. 하지만 프론트를 이제 막 시작한 프리니는 java, python, php, node 등 서버 쪽 언어를 잘 모르기 때문에 그걸 대체할 수 있는 게 firebase이다. https://firebase.google.com/ Firebase Firebase는 고.. 더보기 비전공자의 공부일지 - React Router Dom, useDebounce 오늘은 어제 하던 디즈니플러스 앱을 마무리하려고 한다. 요즘 재밌게 보고 있는 유튜브가 있는데 asmr처럼 말없이 키보드 소리만 들리는 유튜브인데 꽤 재미있고 javascript에 대해 도움도 많이 되는 거 같다. 심심 할 때 한 번씩 보면 좋을 거 같아요. 나름 꽤 도움도 되고 재밌더라고요 1. React Router Dom Router란 네트워크가 서버에서 사용자에게 까지 전송되는 네트워크의 경로를 최적화해서 해당 경로를 선택해서 우리에게 알려줌 https://www.cloudflare.com/ko-kr/learning/network-layer/what-is-routing/ 위의 링크로 접속하시면 상세한 정보를 얻을 수 있음 하지만 간단하게 생각하면 우리가 url를 요청하면 해당 페이지를 보여 주는 .. 더보기 비전공자의 공부일지 - Axios, Styled Component, 동기? 비동기? 현재 패캠에서 프론엔드 웹개발 관련 인강을 듣고 있어서 해당 인강에서 배운 내용을 토대로 복습하는 중입니다. 복습노트 겸 혹시라도 도움이라도 조금 될 수 있을까 하고 블로그에도 같이 글을 작성 중입니다.프로젝트는 추후 프로젝트 카테고리를 생성해서 내용을 정리할 예정입니다. 1. Axios API 통신을 위해 사용되는 라이브러리이다. fetch를 사용해서 통신을 해도 되지만 fetch는 response가 json 형식이 아니라 json으로 변경해 줘야 되는 부분이 있는데 fetch가 많이 없을 때는 괜찮지만 fetch가 많아지고 하면 복잡해지고 하기 때문에 axios를 사용한다. fetch에 관해서는 복습을 하지 않아 기억이 잘 나지 않아 조만간 다시 공부해야 될 것 같다. fetch('http://exa.. 더보기 비전공자의 공부일지 - 리액트란 무엇인가, 리액트의 컴포넌트란?, 가상돔?? 오늘의 공부내용을 복습하자. 공부했던 내용을 기억이 나는데로 적고 있어서 잘못된 내용이 있을 수도 있습니다. 1. 리액트란 무엇인가 리액트는 페이스북 에서 사용자 인터페이스를 만들기 위한 JavaScript의 라이브러리이다. React는 Vue, Angualar와 많이 비교되는데 뷰와 앵귤러는 프레임 워크이고 리액트는 라이브러리 이다. 그럼 프레임 워크란 라이브러리들을 모아놓은것을 말합니다. 그렇기 때문에 개인적인 생각으로는 리액트는 뷰와 앵귤러와 다르게 다양한 라이브러리(리액트 훅, 리덕스)를 이용해서 작업이 가능할것 같습니다. 그리고 지금도 다양한 기업들에서 리액트를 사용해서 프로젝트를 만들고 있어 다양한 정보들이 많이 있습니다. 2. 리액트의 컴포넌트란? 리액트의 컴포넌트란 페이지를 구성하기 위한 .. 더보기 같이 공부하며 배우는 : Display 요소 안녕하세요 MIN입니다. 오늘은 태그의 display속성에 대해 공부해볼께요. 개인적으로는 작업할때 제일 중요하면서 가볍게 생각하는 부분인거 같아요. 조금 더 자세히 들어가게 되면 블럭 요소들도 태그에 따라 사용되는게 많이 달라지기 때문에 오늘은 가볍게만 알아볼께요. 첫번째로 block 속성입니다. 제가 저번에 html은 건축과 비슷하고 했었죠?? 그런 느낌으로 이야기 하면 block속성은 방을 나타낸다고 생각해요. 우리가 사용하는 대표적인 block 태그는 p, div, ul, ol, h시리즈 등이 있습니다. https://codepen.io/trending 한번 여기서 각 태그들을 한번씩 사용해 보세요. 볼로그 글로 보는거 보다 한번 사용해보시면 이해가 더 쉬울꺼에요. 두번째로 inline 속성입니다.. 더보기 같이 공부하며 배우는 : CSS이란? 안녕하세요 MIN입니다. 오늘은 CSS에 대해 알아 볼께요. css란 HTML로 만든 구조에 다양한 디자인을 적용 시킬 수 있는 기능입니다. 예전에는 css로 배경색을 정의하고 위치를 정의 할 수 있었지만 css가 css2 -> css3 으로 넘어오면서 점점 많은 작업을 할 수 있게 변경 되었습니다. 자세한 작업들은 추후에 알아보도록 해요~ 혹시라도 궁금하신 분들은 구글링 해보시면 다양한 정보를 얻을 수 있을꺼에요. 우리가 웹사이트 Hello world 를 출력한다고 했을때 css가 없는 상태와 css가 있는 상태에서 어떻게 출력 되는지 한번 볼까요? See the Pen Untitled by piwe2004 (@piwe2004) on CodePen. 이해 하기 쉽도록 inline-style로 작성하였습.. 더보기 같이 공부하며 배우는 : HTML 구조 안녕하세요 MIN입니다. 오늘은 HTML의 구조에 대해 알아보려고 합니다. 오늘은 HTML의 구조에 대해 알아보겠습니다. 구조를 말씀드리기 전에 HTML은 우리가 컴퓨터에 폴더를 만들어 파일을 저장하듯이 브라우저에 폴더가 있다고 생각하지면 조금 더 쉽게 이해하실 수 있으실 거예요. 우리가 퍼블리싱을 할때 보면 이렇게 시작되는것을 보았을거에요. 예전에는 doctype 은 HTML페이지의 오류검사등 HTML을 의미하였는데 요즘은 잘 신경쓰지 않고 문서형식이라는 정도만 기억하시면 됩니다. html의 모든 콘텐츠를 표하기 위해 기본적으로 사용 하는 태그입니다. html태그 안에는 head와 body를 품고있어야 합니다. 그리고 html은 lang라고 언어 식별값을 넣어주셔야 합니다. 우리나라에서 사용할때는 ko.. 더보기 같이 공부하며 배우는 : HTML 원리 안녕하세요 MIN입니다. 오늘은 HTML이 무엇인가에 대해 알아보려고 합니다. 제가 작성한 글이 100% 맞는 말이다라고 생각하지 마시고 참고 정도 하시면 괜찮을 것 같습니다. HTML이란 Hyper Text Markup Language 의 약자로 코드를 처음 보는 사람들은 프로그래밍 언어라고 생각하시겠지만, 실제로는 브라우저에게 우리가 어떤 표현을 하고 싶은지 글로 전달하는 거라고 생각해요. 저는 HTML이 건축과 비슷하다고 생각해요. HTML로 뼈대를 만들고 CSS로 벽지와 장판등을 설치하며 JS로 전기나 가스 ,보일러 같은 기능을 사용할 수 있게 해주는 것 같다는 생각을 많이 하는 편이에요. 그럼 HTML로 어떤게 뼈대를 만드는지 한번 알아볼까요? Hello World 위의 태그는 여러 태그들중 하.. 더보기 이전 1 2 다음
