전체 글
-
SEO란 무엇일까?개발/두서없이 공부한 개발공부 2023. 8. 6. 00:47
시작하기에 앞서... 우리가 웹사이트를 제작하게 된다면 네이버나 구글에 검색어 노출을 시키려고 할 것이다. 그때 네이버나 구글에서는 사람들이 모든 페이지를 읽고 메인화면에 보여주는 것이 아닌 로봇(즉 크롤링 봇)을 시켜서 각 페이지의 제목과 내용을 긁어서 검색페이지에 노출해 준다. SEO를 왜 알아야 할까? 위에서 말했듯 웹페이지를 만들면 다른 곳에 알려하지 않을까? 네이버에서 hueeng를 검색하면 현재 있는 블로그가 나온다. 근데 내 블로그의 경우 네이버의 SEO를 따르고 있지 않는다. 간단하게 설명하자면 hueeng 메인페이지로 이동하는 링크이면서 "준비물! The More 카드종류 혜택 이제부터 알려줄 꿀 팁들"이라고 있는데. 밑에 내용을 보면 서민금융진흥원에 대한 다른 게시글에 대한 내용이며 이..
-
미니게임 천국 프로필 역기획서 (2회차)역기획/미니게임 천국 2023. 8. 4. 16:14
미니게임 천국 로딩스크린 시작부분 역기획 컴투스에서 만든 모바일게임인데.. 과거 피쳐폰 시절 전국에 있던 모든 학생들의 화장실을 책임졌던 게임이다. 내 나이가 99년생.. 피쳐폰 말기에 이 게임을 좋아했었고 나는 스마트폰 버전으로 hueeng.tistory.com 1편은 미니게임 천국 로딩스크린 시작 부분 역기획을 했었다. 궁금하면 보러 가세요~ 요번에는 프로필에 대한 분석을 좀 해봤다. 사실 블로그에 시간을 많이 할애하는 편이 아니다 보니 콘텐츠의 퀄리티가 많이 낮은 것은 나도 알고 있다. 기획에 대한 것은 취미로 하는 것이고 실제로 내가 공부하는 분야는 프런트 웹개발분야이다. 시간만 넘치면 기획을 열심히 해보겠지만 미니게임 천국은 내 취미와 팬심으로 역기획을 하는 것이다. 현업 기획자들이 봐주시면 감..
-
미니게임 천국 로딩스크린 시작부분 역기획역기획/미니게임 천국 2023. 8. 3. 16:17
컴투스에서 만든 모바일게임인데.. 과거 피쳐폰 시절 전국에 있던 모든 학생들의 화장실을 책임졌던 게임이다. 내 나이가 99년생.. 피쳐폰 말기에 이 게임을 좋아했었고 나는 스마트폰 버전으로 이번에 출시하면서 과연 이번에 피처폰 감성을 느낄 수 있게 만들었나?라는 기대반 설렘반으로 게임을 설치했다. 그리고 즐겼다.. 그러다 내꿈은 프런트엔드야 하지만.. 자꾸 게임을 하다 보니 기획자가 되고 싶기도 말기도 한 꿈틀꿈틀이 내 몸에서 벗어나지 않는다.. 뭔 말인지 나도 모르겠다.. 후에에엥.. 현재 플레이스토어에서 다운로드 받을 수 있으며 초창기 때는 서버가 많이 아팠지만 현재는 모든 문제가 해결되었다. 1. 로딩 스크린 폴드를 사용하면 게임에 대해 분석을 할때 장점이 있다. 바로 화면비를 어떻게 구현했는지 알..
-
React- Create-App 시작하기개발/React (페이지 제작과정) 2023. 8. 2. 13:50
웹팩이 무엇인가? webpack 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다. webpack.kr 위 링크에 나와있는데 오픈소스 자바스크립트 모듈 번들이며 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화 하는 라이브러리 라고 한다. 보면 왼쪽에서 엄청 많은 파일들이 오른쪽으로 나타나게 되니 편해진다. 장점 1. 여러 파일의 자바스크립트 코드를 압축해 최적하 할 수 있어 로딩에 대한 네트워크 비용을 줄일 수 있고 2. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다 바벨이란? 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서최신 ..
-
리엑트 설치를 위해 필요한 것개발/React (페이지 제작과정) 2023. 8. 1. 14:53
Node.js란? 크롬 VS 자바스크립트 엔지으로 빌드한 자바스크립트 런타임으로 웹브라우저 환경이 아닌곳에서도 자바스크립트를 사용하여 연산할 수 있는 툴 Node.js와 npm을 먼저 설치해야 React를 설치할 수 있는 데 Node.js를 다운받으면 Npm도 같이 설치된다. React 설치시 Node.js가 필요한 이유 React와 Node.js는 직접적인 연관은 없지만. 프로젝트를 개발하는데 주요 도구들이 Node.js를 사용하기 때문에 필요하다. Node.js 설치 방법 1. 아래 링크 클릭 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 안정적, 신뢰도 높음 버전 설치 Node..
-
브라우저가 그려지는 원리와 가상 돔개발/React (페이지 제작과정) 2023. 7. 31. 07:13
웹 페이지 빌드 과정 (Critical Rendering Path) CRP 서버 -> HTML 문서 -> 브라우저의 과정을 CRP라고 한다. DOM tree 생성 렌더 엔진이 문서를 읽어들여 그것들을 파싱하고 어떤 내용을 페이지에 렌더링 할지 결정 Render tree 생성 화면에 표시되는 모든 콘텐츠 및 스타일 정보를 포함 Layout(reflow) 브라우저 각 요소의 크기와 위치를 계산하는 단계 Paint 실제 화면에 그리기 위와 같은 과정을 거쳐서 실제 우리가 사용하는 웹사이트가 우리에게 보이게 된다. 솔직히 난 이런거 모르고 개발부터 때려 박았는데.. 뭔가 잘못된 것 같다.. 헤헤.. 이제부터 열심히 해보자.. 위에서 문제접은 어떤 환경에 의해 DOM이 조금이라도 변화되면 위 과정을 다시 반복해야..
-
QCY T13 ANC 리뷰리뷰/IT 리뷰 2023. 7. 30. 05:53
QCY 노이즈캔슬링 블루투스 이어폰을 쿠팡에서 하나 구매했다.. 제품명은 QCY-T13 ANC 원래 버즈를 사용했지만 서브웨이에서 구매한 샌드위치의 새우기름에 절여지는 바람에 침수판정을 받았다. 귀에 끼는 부분인 이어폰은 괜찮은데 네모난 충전기 부분이 고장 난 거라고 한다. 사려고 하니 85,000원. QCY가 3만 원 안 한다고 들었는데 차라리 그걸 사는 게 좋지 않을까 하고 그냥 질렀다. 어차피 못쓰는거 분해라도 해보자 해서 분해해 봤다. 물로 세척 깔끔히 하고 보니 캐시퍼 부분이 탔고 연결단자가 기름에 녹아서 끊어져 버렸더라. 음... 고쳐서 쓰려면 납땜도 해야 하고 많이 귀찮을 것 같고 비용도 새로 사는 거랑 가격차가 없을 것 같은 느낌이다. 그렇게 갓성비 라고 추천을 해대니 뭐.. 한번 속는 셈..
-
React 컴포넌트란?개발/React (페이지 제작과정) 2023. 7. 27. 16:24
예시를 들자면 한 페이지에 여러개의 컴포넌트가 모여서 하나의 페이지를 이루어진다. 네이버가 그렇다는건 아니지만 이런식으로 구성할 수 있다는 것이다. 위 예시에서는 검색, 뉴스, 로그인, 광고 등 여러 컴포넌트를 동시에 개발 할 수 있다는 장점이 있다. 또한 재사용성또한 좋아지게 된다. 그리고 컴포넌트는 함수형과 클래스형이 존재한다. 아래는 함수형 컴포넌트 이다. 직관적이며 메모리 자원도 덜 사용하게 된다. 빌드 후 배포할때 컴포넌트의 파일크기도 작아진다. function hello() { return ( Hello React ) } export default hello; 아래는 클래스형 컴포넌트이다. 클래스형에서는 render을 이용해서 jsx를 반환해야 한다. 클래스형에서는 함수와 다르게 lifecyc..