분류 전체보기138

• 

  Parsing (파싱) 이란? Parser (파서) 란? 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com Parsing 언어학에서 parsing은 구문 분석이라고도하며 문장을 그것을 이루고 있는 구성 성분으로 분해하고 그들 사이의 위계 관계를 분석하여 문장의 구조를 결정하는 것 데이터를 조립해 원하는 데이터를 빼내는 프로그램을 하는것 컴퓨터 과학에서 parsing은 일련의 문자열을 의미있는 token(어휘 분석의 단위) 으로 분해하고 그것들로 이루어진 Parse tree를 만드는 과정 어떤 문장을 분석하거나 문법적 관계를.. HTML&CSS 2021. 1. 8.

• 

  반응형 작업을 위한 폰트 단위 em / rem 사용 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 결론부터 말하자면 html 태그에 10px 로 맞추고, 나머지 모든 Element는 REM을 쓰도록 하쟈 css에서 사용 하는 단위는 여러가지가 있다. 가장 많이 사용하고 있는 px를 비롯해 % / em / rem / vh / vw / vmin / vmax / ex / ch / 등이 있다. 요즘엔 사용하지 않는 것들도 있고 새롭게 떠오르는 단위도 있고..IE버전 지원 문제로 외면 받는 단위도 있다. 여기서도 IE지원 .. HTML&CSS 2021. 1. 8.

• 

  React Component 생성 & 사용하는 방법 React Component 리액트 컴포넌트는 html 요소들을 반환하는 것이라고 할 수 있다. 컴포넌트는 만들고 싶은 만큼 만들고, 각각 파일로 분리해서 관리한다. 하지만 React application은 한 번에 하나의 컴포넌트만 rendering 할 수 있다. 따라서 모든 것은 App.js에 모두 들어가야하고, 이 application 안에서 많은 컴포넌트를 넣고 import할 수 있다. 그리고 컴포넌트는 일종의 UI 조각이라고 할 수 있다. 따라서 쉽게 재사용이 가능하다. 컴포넌트 여러 곳에서 여러 번 불러와서 사용할 수도 있다는 것이다. React Component 생성 1. src 디렉토리에 Hello.js 파일 추가 2. import & 함수 또는 클래스 형태 & export 코드 작성 He.. React & TypeScript/React 2021. 1. 7.

• 

  React 장점 1 추가적인 템플릿 코드없이, HTML 작성과 함께 javascript를 사용할 수 있게 되었다. 이게 엄청난 효율을 가져올 수 밖에 없었다. {중괄호} 하나만 더 추가되면 너무 큰 이점이 있었다는 것이 매우 유용했다. import React from "react"; const getTitle = title => { return title; }; function App() { return ( Hello {getTitle("Title")} Serach: ); } export default App; React & TypeScript/React 2021. 1. 6.

• 

  [HTML]input에 안내문구 넣기 Placeholder속성 사용하기 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com Placeholder는 HTML5에서 추가된 속성입니다. 텍스트 입력 폼에 안내문구를 넣어 데이터 입력에 도움을 줍니다. 간단한 예는 다음과 같습니다. 입력 폼 안에 placeholder의 속성값인 ‘Your phone number.’가 나옵니다. Value 속성으로도 비슷한 효과를 낼 수 있습니다. 웹브라우저로 보았을 때의 모양은 거의 비슷하지만, placeholder와 value는 다음과 같은 차이점이 있습니다. .. HTML&CSS 2021. 1. 5.

• 

  PureComponent와 Component의 차이 PureComponent와 Component의 차이 React.PureComponent는 사실 React.Component와 비교해서 딱 한가지만 다르다 react의 생명주기 메서드중 하나인 shouldComponentUpdate를 어떻게 쓰는가 하는 부분이다. shouldComponentUpdate() shouldComponentUpdate()는 props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출된다. 기본적으로 shouldComponentUpdate() 메서드의 return값은 true 인데 false를 반환할 경우 render()와 componentDidUpdate()는 호출되지 않는다. component : shouldComponentUpdate React.Comp.. React & TypeScript/React 2021. 1. 4.

• 

  State & Props 정의 가장 명확하게 설명해 둔 글 같아서 기록해둔다. 여기 저기서 정의한 내용보다 훨씬 낫다. 1. State 컴포넌트 안에서 우리가 정의한 컴포넌트의 state 오브젝트 입니다. 컴포넌트 UI를 위한 데이터를 보관하는 오브젝트로, 이 state라는 오브젝트를 통해서 데이터에 업데이트가 발생하면 리액트가 자동적으로 우리가 구현한 render 함수를 호출하죠. 이 부분은 아마 제가 개념 설명을 할때 많이 얘기 해서 잘 아실것 같아요 🙌 2. Props 컴포넌트 밖에서 주어지는 데이터 입니다. 컴포넌트 안에서 자체적으로 데이터를 정의해서 사용하는 State와는 다르게, Props은 컴포넌트 외부에서 데이터를 제공받습니다. 가장 근본적인 이유는 컴포넌트의 재사용을 높이기 위해서죠 :) 상황에 따라 주어진 데이터를 .. React & TypeScript/React 2020. 12. 21.

• 

  React Hook이 생긴 이유... 리액트 = Component 만드는 방법은 Class, Function으로 만들 수 있다. 주기적으로 업데이트하기 위해서 Class에서 할 수 있는데, Class에서는 State라는 Object가 있어서 값이 변할 때마다 재 호출이 가능하다. 이 State는 Component 상태 값을 표현해서 생명주기 (Lifecycle Methods)를 관리하는 것이 가능하다. Function에서는 State 같은 것이 없었다. 그런데 React Hook 이 class에서 lifecycle을 관리하는 것과 똑같은 기능을 지원하는 것이 생겼다. (React ver 16.8) 생긴 이유는 Script를 다루던 개발자들이 Class 이해를 어려워해서 똑같은 기능이 생긴 것이다. (class is difficult...?... React & TypeScript/React 2020. 12. 17.

• 

  Print 기능 구현 방법 (영역인쇄, javascript) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 인쇄할 버튼을 만들고 버튼을 클릭하면 인쇄가 되도록 구현하였다. #첫번째시도 window.print() => header 부분을 비롯하여 모바일에서 설정된 영역까지 인쇄된다. 문제가 심각하다. 영역을 설정해서 인쇄하는 방법을 찾기 시작했다. #두번째시도 0. document.body를 따로 저장해둔다. 1. 인쇄할 영역을 querySelector로 잡는다. 2. 인쇄하지 않을 영역을 querySelector로 잡는다... Javascript/Basic 2020. 12. 3.

• 

  php 와 javascript 차이 & 상호 간의 호출 방법 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com php 언어는 대표적인 서버 사이드 스크립트 언어중 하나입니다. 즉, 서버에서 실행되는 언어입니다. 서버에서 실행되는 언어라는 의미를 이해하기 위해서는 우선, 서버에 대해서 알아야할 것 같습니다. 우와 그래서 Server가 뭐야~ 예 그렇습니다. 서버는 어떤 '업무'를 수행하기 위해 설정되어있는 컴퓨터라고 볼 수 있습니다. 여러분이 웹 사이트를 하나 운영한다고 해보겠습니다. 이처럼 Client로 부터 요청이 오면 Se.. Javascript/Basic 2020. 11. 20.

• 

  addEventListener 이벤트리스너 종류 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 출처: https://abc1211.tistory.com/201 addEventListener으로 등록할 수 있는 이벤트 중 자주 쓰이는 이벤트 목록 오늘 코드하다가 resize를 처음 써보면서 이런 것도 있다 싶어서 정리해둔다. MDN 보니까 신기한 게 많다. 자주쓰는 건 몇 개 없겠지만, 알면서 안쓸 필요는 없겠지. 자바스크립트 이벤트 종류 UI 이벤트 – 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 때 .. Javascript/Basic 2020. 10. 23.

• 

  내장함수 built in Function Vanilla Javascript Framework 자체에 내장되어 있는 함수를 built in function 이라고 함. console을 찍어보면, 다양한 Function의 집합인 걸 알 수 있음. Javascript/Basic 2020. 8. 16.