content.json

{"pages":[{"title":"Hello, Daun","text":"FrontEnd Developer목차 1. Introduction2. Stacks3. Career4. Projects Introduction돕는 개발자개발의 가치는 남을 돕는데 있다고 생각합니다. 디지털 help가 필요한 어른에서부터 빠르게 습득하며 자라나는 아이들까지 개발자는 그 누구에게라도 필요한 사람으로서 살 수 있다고 생각합니다. 개발자의 삶을 선택한 저는 누구에게든 도움이 되는 사람이 되고자합니다. 성장하는 개발자개발자로 살면서 공부를 마칠 수 없는 것은 정해진 숙명이라고 생각합니다. 단순히 컴퓨터나 개발에 관련된 지식뿐만 아니라 그것을 활용하고 접목하기 위해서라도 다양한 것들에 대한 관심과 배움을 멈추지 않아야 하기에 오늘도 저는 공부하고 글을 쓰고 도전합니다. Stacks12345678910111213type FrontEndSkills = | HTML | CSS | JAVA_SCRIPT | TYPE_SCRIPT | REACT_JS | ELECTRON_JS;type BackEndSkills = JAVA | SPRING;type DataBase = MY_SQL | ORACLE;type DevOpsSkills = AWS_S3 | AWS_CLOUD_FRONT | AWS_EC2 | GIT | SOURCE_TREE; Career 페이크럭스 컴퍼니 2019.08 ~ 현재 프론트엔드 개발자(React.js, Electron.js) 키오스크 프로그램 개발 (2020.03 - 2020.06) 운영 어드민 / 파트너 어드민 개발","link":"/about/index.html"}],"posts":[{"title":"hexo로 블로그 만들기","text":"회사에서 개발 중 에러처리를 위해 구글링을 하다가 예쁘게 만들어진 블로그를 발견했다.hexo.io로 개발이 되어진 것을 어렵지 않게 확인할 수 있어서 퇴근 후에 한번 만들어봐야겠다는 생각으로hexo.io에 들어가서 GET_STARTED를 살펴보았다. 원래 strapi.io를 이용해서 CMS 기반의 서버가 필요없는 블로그를 개발해보려고했는데,GraphQL이나 DB에 대한 설정을 잡아주는 등 손이 가면서도 안가는게 많아(?) 진도가 나가지 않았는데 hexo.io는 생각보다도 쉽게 작성이 가능한 프레임워크였다. 로컬에서 실행해서 이 글을 작성하기까지의 시간은 10분 채 걸리지 않았다.이제 남은건 github 블로그로 배포해서 나만의 블로그 글을 차곡차곡 쌓아가기. 내일 나는 배포에 대한 글을 쓸것이고, 그 말을 어기면 나는 글러먹은 놈일테다. :) 12시가 땡치면 이제 잠을 자러가야지. 굿밤.","link":"/2021/03/30/hexo%EB%A1%9C-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0/"},{"title":"hexo로 블로그 만들었으니 github에 배포하기","text":"hexo로 블로그를 어제 로컬에서 띄우는걸 성공했다! 그러나 실제로 올리기까지 해야 성공했다고 말할 수 있으니, 이제 배포하는 방법을 포스팅 해보자. Hexo는 두개의 Repository가 필요하다.hexo는 두개의 repository를 필요로 한다.static 으로 생성된 페이지가 저장되어있는 repository와 외부에서 접속할 수 있게끔 deploy 되어진 [사용자이름].github.io 라는 명칭의 repository 가 필요하다.따라서 먼저 두개의 repository 를 만들어준다. [사용자이름].github.io hexo-blog 초기 세팅npm을 이용하여 전역으로 hexo를 설치해주자. 1npm install hexo-cli -g 아까 만든 repository 중 hexo-blog를 로컬 컴퓨터로 클론하여아래와 같이 초기 패키지를 설치해주자. 12hexo init ./npm install 설치 후에 터미널에서 1hexo server 명령어를 실행해주면 localhost:4000에 나만의 블로그가 개설이 되는것을 확인할 수 있다. 깃허브 페이지에 배포하기아까 만들어둔 repository에서 배포를 하기 위해서는 _config.yml파일을 수정해주어야 한다. 파일을 열어 deploy부분을 찾아주면 아래와 같이 타입이 비어있다. 12deploy: type: "" 이 부분을 다음과 같이 수정하여주자. 1234deploy: type: "git" repo: "https://github.com/[사용자이름]/[사용자이름].github.io.git" branch: "master" 배포 플러그인 설치깃허브 페이지를 배포하기 위해선 hexo-deployer-git 플러그인을 설치해줘야 한다. 아래 명령어를 통해 설치해주자. 1npm install --save hexo-deployer-git 정적 리소스 생성하기배포를 하기 전 정적리소스를 생성해주고 배포를 한다. 1hexo generate 배포하기이제 끝났다. 아래 명령어만 실행해주자. 1hexo deploy https://[사용자이름].github.io로 접속이 잘 되는걸 확인해보자. 글을 추가후 배포를 했거나 했을때 혹 업데이트가 되지 않는다면 캐쉬의 문제일 가능성이 있다. 그런 경우에는 1hexo clean 을 사용해서 캐시를 초기화해주면 되겠다. 마무리여기까지 정말 간략하게 hexo로 블로그 만든 후 배포하는 과정을 기록해봤는데, 일단 블로그는 만드는것보단 얼마나 글을 잘남기느냐가 중요한거 같다. 이제 곧 회사가 이사를 가게 되어 뭔가 마음이 기대감에 차있다. 좋은 기대감과 함께 블로그도 잘 작성해봐야지. :)","link":"/2021/03/31/hexo%EB%A1%9C-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%A7%8C%EB%93%A4%EC%97%88%EC%9C%BC%EB%8B%88-github%EC%97%90-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0/"},{"title":"알고있는거 정리하기(1) React","text":"목차 개발자? React, 정체가 뭐지? 개발자?개발자가 되기로 결심을 했을 때만 해도 부트캠프라는게 생소하던 시절이었다. 그 당시 나는 그저 돈을 벌 수단이 될만한 직업이 필요했고, 마땅한 배경이 없던 차에 국비지원 교육을 듣게 되었다. ‘빅데이터 전문가 양성’이라는 제목의 수업이었기에 당시에 나는 내가 수료 후에 주니어 데이터 사이언티스트가 될줄로만 믿었다.그러나 대부분의 국비지원 학원이 그렇듯이 내가 다닌곳 또한 우리나라 IT 업체의 주를 이루고 있는 SI와 정부지원 사업에 최적화된 인재를 기르는 JAVA개발자 양성소였다. 내가 생각하고 배우기를 원했던 빅데이터 관련 수업은 6개월 과정중 2-3주에 지나지 않았고, 그마저도 자바 프로젝트와 병행하면서 진행되었기에 개발자가 된 2년이 된 지금은 뭘 배웠는지도 잘 모르겠다.일찍이 내가 배운 것에 대해서 확신이 서지않았던 수업중 잠시 jquery로만 경험했던 javascript에 흥미를 갖게 되었고, 페이스북에서 만들어진 React라는 라이브러리에 매료되었다. HTML + CSS + Javascript가 마치 all-in-one으로 들어가있는 것처럼 보이는 이 라이브러리는 그 당시(2019.05)에도 이미 거대한 커뮤니티를 구축하고 있었지만, 국내 개발자 중에는 시니어가 없을 정도로 구인에 어려움을 겪고있단 소리에 혼자서 공부를 시작했다. 늦게 시작했다고 생각하는순간 더 늦는다. 일단 행동하자. React, 정체가 뭐지?React는 Facebook진영에서 만든 자바스크립트 라이브러리로 React의 공식 홈페이지에서는 다음과 같이 리액트에 대해 정의한다. React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. React는 javascript를 이용해서 UI 컴퍼넌트를 직관적으로 작성하는데 도움을 준다. 그 방식이 직관적이고, 리액트만의 컴포넌트 라이프사이클은 효율적인 개발을 돕는다. 많은 개발자들이 React를 사랑(?)한다고 그러고 React만한(비록 Vue가 더 쉽다는 이야기가 많지만;) 라이브러리는 없다고 말하는 이유는 유연하면서도 효율적인 컴포넌트의 구성방식에 있지 않을까 싶다. 뿐만아니라 v16에서부터 시작된 hooks는 혁명적이었던것 같다. class형 컴포넌트에서 작성되던 코드가 단 몇줄의 hooks로 대체되는 것을 경험하게 된다면 이전으로 돌아가는 일을 꿈꾸기란 쉽지않다.(물론, class형 컴포넌트도 필요한 경우가 있고, 객체지향 패턴에 있어서 클래스 컴포넌트는 매우 중요하단 사실을 안다.) 자 그러면, React가 좋은 것은 알겠으니 어떤식으로 React가 렌더를 진행하는지를 이해해보자.(다음글에서..)","link":"/2021/04/02/%EC%95%8C%EA%B3%A0%EC%9E%88%EB%8A%94%EA%B1%B0-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-1-React/"},{"title":"알고있는거 정리하기(2) React","text":"목차 1. Learning For React2. What is React? Learnig For ReactJavascript리액트를 배우기 위해서는 선행되어야 할 것으로는 javascript, html,css 등등 여러가지가 있겠지만, 단연 javascript는 그 중 핵심이라고 할 수 있다. 리액트 자체가 자바스크립트로 만들어진 라이브러리인만큼 자바스크립트가 어떤 언어인지 잘 아는 것 외에 리액트를 빠르고 깊게 이해하는 방법은 없다고 해도 무방하다. javascript는 스크립트에 대한 MDN 소개를 따르면, JavaScript(JS)는 가벼운 인터프리터 또는 JIT 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지의 스크립트 언어로서 제일 유명하지만 Node.js, Apache CouchDB, Adobe Acrobat처럼 많은 비 브라우저 환경에서도 사용하고 있습니다. JavaScript는 프로토타입 기반의 동적 다중 패러다임 스크립트 언어로, 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원합니다. 자세한 내용은 JavaScript에 대하여를 참고하세요.이 문서는 JavaScript 언어 자체만 다루며 웹 페이지를 비롯한 다른 사용 환경에 대해서는 다루지 않습니다. 웹 페이지의 특정 API에 대하여 알고 싶다면 웹 API와 DOM을 참고하시기 바랍니다.JavaScript의 표준은 ECMAScript입니다. 2012년 기준 최신 브라우저는 모두 ECMAScript 5.1을 온전히 지원합니다. 이전 브라우저의 경우는 최소한 ECMAScript 3까지는 지원합니다. 2015년 6월 17일 ECMA International에서는 공식명 ECMAScript 2015 로 불리는 ECMAScript의 6번째 주 버전을 발표했습니다(보통 ECMAScript 6 혹은 ES6으로 불립니다). 그 이후 ECMAScript 표준의 출시 주기는 1년입니다. 이 문서는 최신 초안(현재 ECMAScript 2020)에 기반을 둡니다.JavaScript를 Java 프로그래밍 언어와 혼동해서는 안 됩니다. “Java”와 “JavaScript” 두 가지 모두 Oracle이 미국 및 기타 국가에 등록한 상표입니다. 하지만, 두 언어는 문법 체계와 사용 방법이 전혀 다릅니다.안내서 및 자습서와 함께 JavaScript 프로그램을 짜는 법을 알아보세요. javascript가 어떤 기능들을 제공하는지, 그리고 흔히 할 수 있는 오해로 java와 javascript를 혼동하지 말라는 친절한 안내까지 말하는 것을 볼 수 있다. 하지만 둘 다 배워본 바로 두 언어 모두 개념상 통하는 부분들이 상당히 많고, 파이썬을 비롯한 C#, c++ 등의 현대 프로그래밍 언어는 상당한 개념들을 공유하고 있기 때문에, 어떤 언어든 하나를 제대로 익히기만 하면 다른 언어도 금방익힌다는 많은 개발자들의 조언이 꽤나 합리적이란 생각이 든다. 쨋든, javascript를 잘 이해하는 사람이 React를 잘 한다! javascript개발자를 찾는 구인 공고를 보면 꼭 보이는 말이 있다. ES6 및 최신 javascript 문법에 익숙한 자 왜 최신 문법에 익숙한 사람을 찾을까?에 대한 고민을 가졌던 적이 있다. 실무를 하면서 그에 대한 나름의 답을 내려보자면, ECMA를 통해 매년 자바스크립트의 새로운 문법이 개발자들에게 소개되고, 이것은 웹 개발의 표준으로 작동하기 때문에, 최신 자바스크립트 문법을 사용할줄 모른다면, 지금 쓰이는 라이브러리들을 활용할 수 없는 능력을 지녔다는 것으로 생각될 수 있다. 따라서 최신 스펙에 대한 이해 == 시대에 맞는 개발자라는 공식이 되는 것이다. 심지어 React의 공식문서에서는 이렇게 말한다. JavaScript의 최신 버전인 ES6의 몇 가지 기능을 사용한다는 사실에 주목해주세요. 자습서에서는 화살표 함수, 클래스, let, const를 사용합니다. Babel REPL을 사용하여 ES6 코드가 어떻게 컴파일되는지 확인할 수 있습니다. 적어도, ES6는 이해해야 React를 배울 준비가 됐다고 할 수 있다. DOMReact는 javascript를 이용해 DOM을 동적으로 렌더링하는 라이브러리다. 따라서, DOM이 무엇인지 알아야 하는게 선행되어야 한다 DOM에 대한 자세한 설명은 링크를 통해 확인해보면 좋다. 내용을 요약한 부분을 인용하자면 이렇다. DOM은 HTML 문서에 대한 인터페이스입니다. 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다.DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습니다. 항상 유효한 HTML 형식입니다. 자바스크립트에 수정될 수 있는 동적 모델이어야 합니다. 가상 요소를 포함하지 않습니다. (Ex. ::after) 보이지 않는 요소를 포함합니다. (Ex. display: none) 자, 이제 그럼 DOM을 동적으로 생성해주는 강력한 라이브러리 React에 대해서 알아보자. What is React? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. 공식문서의 설명이다. 리액트는 컴포넌트라는 작은 파편(마치 html 코드 조각)들을 떼어내서 조립하는 것 마냥 화면을 쉽게 구성하고 또한 재사용하기도 쉽게끔 해주는 javascript 라이브러리다. JSP와 같이 Static한 html 파일을 서버에서 생성하여 사용자에게 제공하던 기존의 웹 개발 프레임을 완전히 달라지게 했다고 할 수 있다. 동적으로 화면이 구성되게 하며, 사용자의 액션에 따라 server로부터 새로운 정보를 불러들이기도 하고, 상호작용 할 수 있게끔 하는 것이다. React 내부 api 들에 대한 설명들도 블로그에 남기면 좋겠지만, 같은 걸 두벌 남기는 꼴밖에 되지 않을 것이다. Javascript ES6까지 끝냈고, html, css의 기본에 대해서 공부를 했다면, 공식문서의 자습서를 통해 바로 리액트를 시작해보는걸 추천한다. CRA(create-react-app)을 통해서 5분도 되지 않아 작은 웹페이지 개발을 할 수 있을 것이다. 마무리알고있는 것에 대해 천천히 다쓰기에는 javascript, react, 등등 너무 양이 많을것 같다… 일단은 지금 쓰고 있는 것들에 대한 정리를 먼저 시작해야겠다.최근 실제 프로젝트에 처음 사용해보았던 recoil에 대한 후기를 적어보고, 더 나은 사용방법이 있었는지 한번 회고해봐야겠다. 오늘은 여기까지! 굿밤!","link":"/2021/04/05/%EC%95%8C%EA%B3%A0%EC%9E%88%EB%8A%94%EA%B1%B0-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-2-React/"}],"tags":[{"name":"hexo.io, hexo블로그","slug":"hexo-io-hexo블로그","link":"/tags/hexo-io-hexo%EB%B8%94%EB%A1%9C%EA%B7%B8/"},{"name":"hexo github 배포 deploy","slug":"hexo-github-배포-deploy","link":"/tags/hexo-github-%EB%B0%B0%ED%8F%AC-deploy/"},{"name":"React","slug":"React","link":"/tags/React/"}],"categories":[]}