개탕 IT FACTORY

2019년 회고를 한지가 벌써 어그제 같은데 벌써 2020년이 마무리 되었다. 사실 2020년은 내외적으로 다사다난한 한해였다. 코로나로 인한 대외적인 이슈나 내적으로는 대학교 편입에 성공하여 재입학한 사례나 참 많은 일이 있었다. 그래서 이번에도 2020년을 회고하면서 21년에 나에게 다짐을 하는 의미로 작성해 볼까 한다. 2020년 회고 대학교 편입 성공 사실 가장 원했던 것 중에 하나였다 작년 회고를 작성하고 며칠뒤에 발표된 소식이였지만 가장 좋았던 순간일수 밖에 없다 가족 모두 자고 있을때 혼자 발표소식을 확인하고 바로 가족들에게 알려서 모두가 좋아했던 기억이 있다. 정말로 내 자신에 원했던 것이였지만 사실 코로나라는 시기에 겹쳐서 상당히 고생을 많이 했다. 필자는 신입생이 아니지만 이번에 입학한..

파이어 베이스란? 데이터베이스, 호스팅, 업로드 서버, 사용자 인증 등 다양한 백엔드를 제공해주는 서비스입니다 흔히 XaaS 서비스를 많이 말하는데 BaaS (Backend as a Sevice)입니다. 많이들 이런 서비스 종류로 대표적으로 아마존의 AWS, 마이크로소프트의 Azure, 구글의 Cloud Platform 이있는데 Cloud Platform은 Firebase와 통합된 것으로 알고 있습니다 무엇보다 AWS를 많이 이용하시는데 아마 1년 무료여서 이용하시는 분들이 많고 무엇보다 웹서비스 1위이기도 하고 안정적이기 때문이죠 하지만 파이어 베이스는 놀랍게도 기간 상관없이무료입니다. 단, 조건부 무료로써 일정 사용량 이상은 가격을 지불해야 됩니다. (뭐… AWS나 Azure도 마찬가지지만) 일단 장..

2019년 회고와 2020년 다짐 2020년 1월의 반 이상이 지난 시점에서 2019년 회고라니 정말 아이러니할 수도 있다 하지만 이 회고를 적지 않으면 나 자신을 잡을수 없다고 생각하여 회고를 하는 게 좋다고 생각하였다 아직 음력(?) 으로는 2019년이니 설 기준으로 2019년 회고를 해보자(?) 첫 회사 입사와 퇴사 2019년 7월 졸업 후 5개월 만에 직장을 얻었다 아는 친구는 이력서 몇 개 넣고 바로 입사하던데 나는 정말로 몇백 개는 넣은 것 같다… 면접도 50번넘게 본 것 같은데 취준 기간이 길어질수록 자신감은 하락했는데 합격소식은 정말 제일 기쁘고 좋았던 것 같다. 하지만 최근 2020년 1월을 마지막으로 첫 회사와 작별하였다 사실 여러 가지 이유가 있지만 모두 변명이라고 생각된다. 내가 회..

JSX란?-Reac.js에서 사용하는 문법으로 UI를 템플릿화 해줍니다 (필수는 아니지만 장점이 있습니다) JSX는 컴파일링이 되고 빠르다 에러를 쉽게 감지 할 수 있다 HTML보다 더 빠르고 쉽게 템플릿작성 가능 기본적인 JSX 문법입니다 이 코드를 바벨(babel)로 변환되어 리액트에 알맞게 변환됩니다. var a = ( react )아래가 변환된 코드입니다. var a = React.createElement( "div", null, React.createElement( "h1", null, "react", ) ); 당연한 거지만 첫번째 코드가 간결하고 쓰기 편하기 때문에 JSX를 쓰는 이유입니다. 1.감싸는 요소 import React, { Component } from 'react'; class ..

React 프론트엔드 프레임워크(라이브러리)중에 가장 핫한 존재입니다. 페이스북에서 만들고 관리하고 있고 최근에는 리액트 훅을 자신들의 정식버젼으로 흡수시켰습니다 리액트 훅을 간단히 설명하자면 기존의 컴포넌트의 데이터 전송및 방식을 손쉽게 만드는 것입니다 리액트는 앞서 말씀드린 Vue.js에서도 쓰는 Virtual DOM의 시초입니다 (Vue.js는 React의 장점,Angular의 장점을 흡수한 언어입니다) 근데 왜 Vue는 쉽고 한데 왜 리액트를 쓰고 하는것인가? 란 의문이 가질겁니다 1. 페이스북에서 만들고 유지보수를 담당한다 현재 엄청난 기업이 된 페이스북에서 만들었고 그에 상응하는 유지보수를 하고있습니다. 최신 트렌드 반영과 개발자 친화적 으로 제작하고 있고 최근 리액트 훅(React Hooks..

Vue.js는 무엇인가라는것에 대해 전 포스팅에서 간략히 다루어보았습니다 오늘은 앞서 말씀드린 컴포넌트에 대해서 알아볼까합니다 컴포넌트 컴포넌트는 화면을 구성할 수 있는 블록을 의미합니다. 저는 이구조가 트리구조를 닮아서 트리구조로 생각하면서 외웠습니다 아래 두 사진을 보시면 이해하기가 쉬우실겁니다 일반 웹구조를 표현 컴포넌트로 웹구조 표현 모든것 내비게이션바,인풋박스,리스트 등의 화면 구성 요소를 잘게 쪼개어 컴포넌트로 관리하는 것입니다 이렇게 각각의 요소를 따로 쪼개면 좋은점이 있나요? 라고 생각하실텐데 네 있습니다. 실무에서 협업할시 일의 능률이나 효율면에서도 좋고 버그나 웹사이트 장애 등을 고칠때도 특정 컴포넌트에서 고치면 되기 때문에 효율적입니다.

Vue.js란 Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.숙련된 프론트엔드 개발자이고 Vue를 다른 라이브러리/프레임워크와 비교하고 싶다면 다른 프레임워크와의 비교를 확인하십시오.-Vuejs 공식문서(https://kr.vuejs.org/v2/guide/index.html)에 나와있는 내용입니다.특히나 Vue..

전 포스팅때 다루었던 내용입니다 오늘은 CSS 셀렉터에 대해서 알아볼까합니다. CSS의 기본구조의경우 Selector { 프로퍼티 : 값 ;, 포로퍼티 : 값 ;...} 형식으로 되어있습니다 설명을 쉽게하기위해서 직접 코드를 보여드리는게 좋겠죠 h1 { color : red ; , font-family : '나눔고딕' ;...} 이런식으로 되어있습니다 하나씩 설명드리자면 셀렉터의 경우 태그명 , 전체태그(*) , ID셀렉터, 클래스 셀렉터 등 존재합니다 저도 셀렉터가 몇가지만 존재할 줄 알았는데 찾아보니 여러가지가 존재하더군요 일단 하나씩 설명드리면 1.태그 셀렉터(선택자) 태그 셀렉터의 경우 HTML 태그의 명을 이용하여 셀렉터(선택자)로 이용합니다 태그는 너무 여러가지라 다 말씀못드리지만 h1태그 ,..