본문 바로가기

전체 글2213

React.js - DOM에 Element 랜더링 하는 방법 리액트 돔에 엘리먼트 랜더링 하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 엘리먼트(element)를 DOM에 랜더링 하는 부분을 알아보겠습니다. 엘리먼트는 리액트에서 애플리케이션을 구성할 때 가장 작은 단위입니다. 이를 통해 화면을 구성하고 완성합니다. 제 블로그에서 학습하시던 분들은 이전 소스에서 이미 계속적으로 엘리먼트를 DOM에 랜더링을 자연스럽게 하고 있었습니다. ● 2. 랜더링 하는 소스를 살펴보겠습니다. 1번 라인 : 엘리먼트를 작성합니다. 2번 라인 : 리액트 DOM의 노드에 랜더링 합니다. const element = Hello, react!; ReactDOM.render(element,document.getElementById("root")); ● 3. 랜더링 된 DIM은 r.. 2021. 1. 23.
repl.it - 레플릿 유료로 업그레이드 하기 / 소스 비공개하기 repl.it 소스 비공개는 유료 서비스 안녕하세요. 고코더 입니다. ● 1. 레플릿에서는 무료로 소스 코딩 연습이 가능하지만 유료로 업그레이드하여서 좀 더 집중적으로 사용이 가능합니다. 그리고 무엇 보다. 소스를 비공개하려면 결제가 필요합니다. Hacker라고 하는 게 바로 유료 서비스입니다. ● 2. 로그인 후에 해당 사이트를 접속하면 유료 구매가 가능합니다. 구매 후에 서비스는 아래와 같습니다. 소스 비공개와 저장공간 5GB, 메모리 2GB, CPU 속도는 4배입니다. Private repls 10x the storage = 5 GB 4x the memory = 2 GB 4x the speed = 2 vCPUs https://repl.it/site/pricing ● 3. Upgrade to Hack.. 2021. 1. 23.
한글2014 - 글자는 그대로 그림만 삭제하기 문서 내 이미지 전부 한 번에 지우기 안녕하세요. 고코더 입니다. ● 1. 한글을 사용하다 보면 그림만 삭제하고 글자만 남겨둬야 할 경우가 생깁니다. 이럴 경우에는 찾아서 하나씩 지워도 가능하지만 대량의 문서일 경우에는 수작업하기가 어렵습니다. 그래서 오늘은 한글2014에서 글자는 그대로 남기고 그림만 지우는 방법을 알아봅니다. ● 2. 아래와 같이 글자 사이에 그림이 있습니다. 이 이미지를 한글 기능을 통해 제거해보겠습니다. ● 3. 상단에 편집 탭에서 "조파 부호 지우기"를 클릭합니다. ● 4. 그리고 조판 부호 지우기 "삽입 그림"을 체크합니다. 그리고 지우기를 클릭합니다. ● 5. 그러면 삽입된 그림이 자동으로 전체 삭제가 됩니다. 마무리 이 기능 정말 좋네요. 2021. 1. 23.
CodePen - 코드펜에서 미리보기(Preview)가 안보일때 코드펜 라이브 뷰 안 보일 때 안녕하세요. 고코더 입니다. ● 1. 코드펜을 사용하다 무엇을 잘못 만졌는지 화면처럼 미리 보기 화면이 깜쪽같이 사라져 버렸습니다. 당황스럽지만 차분하게 모든 버튼을 클릭하고 눌러봤지만 도저히 나타나지가 않네요. 그러다가 우연히 알아낸 건 매우 황당한 사실.. 바로 맨 밑에 두꺼운 바를 클릭해보았습니다. ● 2. 네 바로 미리보기가 제일 작가 되어서 바닥 맨 밑에까지 붙어버려서 보이지 않았고 이를 클릭하여 위로 올려보니 프리뷰가 다시 나타납니다. 와 이걸로 30분은 헤맨 거 같습니다. 결국 단순하게 프리뷰를 최소화시켜놓았던 것입니다... ● 3. 혹시 코드펜에서 코딩하시다가 프리뷰가 안 보이는 분들은 만 아래에 바를 클릭하여 올려 보세요.. 마무리 겨우 이런 이유 때문에 3.. 2021. 1. 23.
React.js - JSX를 사용하지 않고 createElement를 사용하기 JSX를 대신해서 리액트 object 형태로 표현하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSX를 사용하지 않고 리액트로 엘리먼트를 생성하여서 사용하는 방법을 알아보겠습니다. 다시 말하면 JSX는 리액트에서 필수가 아닙니다. 쉬운 개발과 성능의 이점때문에 대부분의 리액트 환경에서 JSX를 사용하는 것입니다. 저와 배워보는 리액트들도 JSX를 기준으로 예제를 만들어 갈것입니다. 그래도 JSX 없이 어떻게 element를 생성하는지 알아보겠습니다. ● 2. JSX를 사용했을 때 사용했던 간단한 방식입니다. HTML을 그대로 사용하면 되는 방식이었습니다. 덕분에 새롭게 문법을 배울 필요가 없었습니다. const jsxElement = JSX Element ● 3. 하지만 만약 리액트의 기능을 .. 2021. 1. 22.
React.js - JSX에서 스타일을 지정하는 방법 / inline Style 사용법 JSX에서 style 속성에 값을 주는 방법 안녕하세요. 고코더 입니다. ● 1. JSX에서는 스타일 시트 즉 CSS를 Inline 형식으로 입력하는 방법을 알아보도록 하겠습니다. 흔히 HTML과 CSS를 배울 때 태그에 style이란 속성 값을 선언하고 안에 디자인할 내용을 채워 넣습니다. ● 2. 예를 들면 이렇습니다. 많이 보던 방식입니다. 1번 라인 : 문자열을 빨간색으로 바꾸는 스타일을, 배경은 검은색을 적용합니다. Inline stylesheet ● 3. 하지만 JSX에서는 인라인 방식의 CSS를 Object 형식으로 만들어서 직접 태그에 넣는 방식의 인라인 스타일 방식이 사용 가능합니다. 이렇게 하면 가독성도 좋고 개발하기도 매우 편리합니다. 그 방법을 알아보도록 하겠습니다. 1번 라인 : .. 2021. 1. 22.
프론트엔드 면접 문제 은행 - 개발자 면접 연습 front-end 준비하는 개발자를 위한 예상 문제 안녕하세요. 고코더 입니다. ● 1. 프런트엔드 개발자로 이직을 준비하거나 취업을 준비하는 분들에게는 좋은 정보가 있어 공유해드리려고 합니다. 이 사이트는 "프런트엔드 면접 문제 은행"이라는 이름으로 면접에서 예상되는 질문을 모아놓은 사이트입니다. ● 2. 해당 주소로 접속해보시면 내용들이 한 페이지에 가득합니다. https://h5bp.org/Front-end-Developer-Interview-Questions/translations/korean/ ● 3. 목차는 일반적인 질문부터, 코딩 지식까지 방대하게 다루고 있습니다. ● 4. 질문들도 면접 때 자주 들었던 내용들입니다. 특히 호이스팅 같은 문제는 단골 면접 문제입니다. ● 5. 여러 프론테 엔.. 2021. 1. 22.
길벗 IT 도서 열람 서비스 - thebook.io 길벗 IT 도서 맛보기 안녕하세요. 고코더 입니다. ● 1. 개발자 라면 길벗 책 한두권 정도는 구매해본 기억이 있을 것입니다. 길벗은 대형 출판사답게 IT 도서에 한해 열람 서비스를 제공하고 있습니다. 바로 더 북(TheBook)이라는 사이트입니다. https://thebook.io/ 도메인도 .io 로 트렌드에 맞게 잘 따서 만들었네요. ● 2. 사이트에 접속하면 이렇게 길벗이 출판한 책들의 리스트가 나옵니다. 반가운 책들이 많이 보이네요. ● 3. 해당 책을 클릭하면 이렇게 자세한 페이지가 나타납니다. 책에 대한 내용과 목차들이 나오고 책 내용의 전부를 공개하는 것이 아니라 초반 내용을 열람할 수 있습니다 제가 클릭한 책은 7강까지 확인이 가능하네요. ● 4. 목차의 원하는 내용을 클릭하면 이렇게 .. 2021. 1. 21.
React.js - JSX에서 속성(attribute)를 표현하기 리액트에서 속성을 사용하기 안녕하세요. 고코더 입니다. ● 1. JSX에서는 속성을 표현할 때는 큰따옴표를 사용합니다. 그리고 JSX는 HTML 기반이기에 속성(attribute) 값은 대부분 같습니다. 하지만 다르게 정의된 값이 있는 것도 알아야 합니다. 그중에 가장 대표적인 속성명은 className입니다. 원래는 class라는 이름으로 많이 봐왔지만 리액트에 한해서는 다르게 사용됩니다. 이 두 가지를 가지고 예제를 한번 보여드리겠습니다. ● 2. CSS에서 아래와 같이 속성에 사용할 스타일의 요소를 추가하였습니다. 이를 JSX에서 사용해보겠습니다. .bluelif { color: blue; } ● 3. JSX에서 속성을 사용할 때는 큰 따옴표를 감쌉니다. 1번째 라인 : class 대신 classN.. 2021. 1. 21.
네이버 애널리틱스는 어플이 없습니다. - Naver Analytics 네이버 애널리틱스의 아쉬움 안녕하세요. 고코더 입니다. ● 1. 구글 애널리틱스는 홈페이지 방문자를 분석하는 완벽한 도구입니다. 저도 자주 애용하고 있고, 해당 프로그램을 통해 방문자의 성향을 파악하고 있습니다. 그리고 어플로도 완벽히 동작이 돼서 다양한 플랫폼 환경에서 사용하고 있습니다. ● 2. 그런데 한국형 애널리틱스인 네이버는 어플이 있을까요? 정답은 "아니오"입니다. 네 스마트폰에서 구글 애널리틱스 어플처럼 손쉽게 방문자의 현황을 확인할 수 없습니다. 매우 아쉬운 부분입니다. 그래도 핸드폰에서 확인하고 싶다면 아래와 같은 방법이 있습니다. ● 3. 바로 네이버 애널리틱스를 웹으로 접근하여 사용하는 방법입니다. 반응형 웹도 아니라서 아쉽게도 사용하기 불편하지만 급한 분에게는 어쩔 수 없는 선택입니.. 2021. 1. 21.
HTML - parent, child Element 란? / 부모, 자식 엘리먼트란? parent Element, child Element 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 엘리멘트의 관계를 나타내는 표현을 알아봅니다. 특정 엘리먼트는 부모(parent)와 자식(child)이라는 요소를 사용해야 합니다. ● 2. 리스트를 표현하는 엘리먼트 ● 3. 테이블(table)의 부모, 자식, 자손 엘리먼트 ● 4. 부모와 자식이 같이 사용해야 하는 엘리먼트들은 함께 사용해야 작동합니다. 즉 상위에 쓰이는 것이 부모(parent)고 그 아래가 자식(children), 자손(descendants) 엘리먼트입니다. 마무리 직속 관계가 있는 엘리먼트가 있습니다. 2021. 1. 21.
HTML - attribute(속성) 이란? attribute(속성)을 나타내는 태그 안녕하세요. 고코더 입니다. ● 1. 오늘은 HTML에서 attribute 이라는 것을 배워 보려고 합니다. 영어 사전의 이 뜻을 살펴면 아래와 같습니다. attribute 자질,속성 - 영어사전 ● 2. 예를 들면 아래와 같은 폰트 태그가 있습니다. 태그 안에 들어가는 요소들의 대한 성격 및 스타일을 나타내는 상태 구분을 말합니다. 즉 size 라는 크기와 color 라는 색깔을 지정하여 속성을 나타내었습니다. ● 3. 다시 말하면 html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소입니다. 속성은 항상 "이름='값'" 이런식의 쌍으로 된 정보가 옵니다. 만약에 아래와 같은 div요소가 있습니다. 그럼 여기서 div는 element라는 요.. 2021. 1. 20.