# front end

202개의 포스트
post-thumbnail

[React] React 시작하기 (node.js, create-react-app)

다음의 명령으로 node.js가 설치되어 있는 지 확인한다.설치되어 있다면 다음과 같이 버전이 출력된다.v12.21.0설치가 필요한 경우 아래의 링크에서 원하는 버전으로 설치하자.https://nodejs.org/ko/npm은 JavaScript 패키지 관리자

3일 전
·
0개의 댓글
post-thumbnail

#TIL11 Array map

Array 메소드 Map 은 React의 State & Props에서 새로운 요소를 자동적으로 추가하는 알고리즘을 짤 때에도 매우 많이 활용되고 있기 때문에 개념을 짚고 넘어가려고 한다.map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의

5일 전
·
0개의 댓글
post-thumbnail

#TIL10 Array Push, Concat, Spread

배열에 새로운 요소를 추가하는 방법에는 Push, Concat, Spread(전개 연산자) 3 가지가 있다. 각각의 방법은 비슷한 기능을 수행하지만 조금씩 다른 기능을 가지고 있기 때문에 복잡한 로직을 구현하게 될수록 각 경우의 수를 구분해 적용하는 것이 중요하다. 아

5일 전
·
0개의 댓글
post-thumbnail

React의 State, setState()

1. State란?? > State는 컴포넌트 자기 자신이 들고있는 값으며, 내부에서 변경이 가능하다. 변경을 할때는 밑에서 설명할 setState()라는 내장함수를 이용하면 된다!!! 2. 사용법 및 setState() > **일단 구현하고자 하는 것은 카운

2021년 4월 2일
·
0개의 댓글
post-thumbnail

React의 props 와 DefaultProps

위의 두 사진을 보면 App.js가 부모컴포넌트 MyName.js가 자식컴포넌트이다. 부모컴포넌트에서 자식컴포넌트를 render 하면서 props name 값으로 "리액트"값을 전달하면, 이제 MyName에서 {this.props.name} 명령으로 부모가 지정해준 값

2021년 4월 2일
·
0개의 댓글
post-thumbnail

react-create-portal 에 대하여...

리액트 v16 에서 도입된 기능인 Portals! 한번 알아보도록 하자!!

2021년 3월 30일
·
0개의 댓글
post-thumbnail

#TIL9 React Intro 2

Component의 개념과 종류는 무엇이 있나?JSX의 정의와 특성은 무엇이 있나?Component란 재활용 가능한 UI 구성 단위이다.웹 사이트의 header, nav, main 등을 각 컴포넌트로 나눌 수 있다. 또한 반복되는 레이아웃(ex.인스타그램 스토리)의 경

2021년 3월 30일
·
0개의 댓글
post-thumbnail

#TIL8 React Intro 1

대망의 리액트를 시작했다. 자바 스크립트도 부족한 상태로 리액트를 시작하는 게 조금 불안하긴 하지만 그래도 그냥 해보자. 꾸준히 하다보면 어떻게든 되겠지.😎어떠한 흐름으로 오늘날 React가 많이 사용되고 있는지 설명할 수 있다.React가 무엇인지 정의할 수 있다.

2021년 3월 30일
·
0개의 댓글
post-thumbnail

<JavaScript> ID, PW 입력 시 로그인 버튼 활성화 기능

: 키보드가 눌렸을 때 나타나는 이벤트. 관련 DOM API 로는 keydown/keypress/keyup/input이 있다.DOM API - keydown, keypress, keyup, input 이벤트 간 차이getElementsById 와 querySelecto

2021년 3월 28일
·
0개의 댓글
post-thumbnail

#TIL7 Class

클래스는 객체지향 프로그래밍의 핵심이다. 객체지향 프로그래밍이란 프로그램을 객체들로 구성하고, 객체들 간 상호 작용 하도록 작성하는 방법이다. 여기서 객체는 영어로 Object, 즉 사물을 뜻한다. 각 객체는 특정 로직을 가지고 있는 행동(Method)과 변경 가능한

2021년 3월 28일
·
0개의 댓글

Nuxt PWA(oneSignal)

PWA(Progressive Web Apps)는 앱 수준으로 점진적으로 발전해 나가는 웹을 지향합니다. 궁극적으로는 앱 수준과 같은 사용자 경험을 웹에서 제공하는 것이 목적입니다. 이 블로그는 NuxtJS환경에서 PWA를 구축해 보는 것이 목표입니다.

2021년 3월 27일
·
0개의 댓글
post-thumbnail

stopPropagation 과 preventDefault 차이는 뭘까??

stopPropagation 과 preventDefault 차이

2021년 3월 23일
·
0개의 댓글
post-thumbnail

#TIL6 Arrow function

ES6에서 처음 등장한 개념으로, 기존 함수 선언문을 조금 더 간결하게 쓸 수 있는 표현 방법이다.기존 함수 선언문을 arrow function으로 바꿔보면서 어떤 특징이 있는지, 어떻게 활용할 수 있는지 살펴보자.위 welcome 함수가 기존 방법이고, 이를 arro

2021년 3월 22일
·
0개의 댓글
post-thumbnail

TIL 21 | DOM(Document Object Model)

DOM이란 Document Object Model의 약자로서, 웹 페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object)모델이다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다. 즉, DOM은 HTML인 웹 페이지와 스

2021년 3월 22일
·
0개의 댓글

Javascript - Scope

모든 식별자(변수 이름 , 함수 이름 , 클래스 이름 등)는 자신이 선언된 위치에 의해 다은 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정된다. 이를 Scope라고 한다. 즉 Scope는 식별자가 유효한 범위를 말한다. 코드가 어디서 실행되며 주변에 어떤 코드가

2021년 3월 19일
·
0개의 댓글
post-thumbnail

#TIL5 display 프로퍼티

divh1 ~ h6polulli화면 전체 크기를 가로폭으로 차지함다음 태그는 줄바꿈 적용block 내 inline 요소 포함 가능함spanastrongimgbrinputselecttextareabuttonwidth와 height 적용 불가능margin, padding,

2021년 3월 17일
·
0개의 댓글
post-thumbnail

#TIL4 CSS Position

요소의 위치를 정의하는 프로퍼티. top, right, bottom, left 속성을 통해 배치할 수 있다. position 의 기본값. position 을 지정하지 않았을 때와 같다. top, right, bottom, left, z-index 속성을 주어도 동작하지

2021년 3월 17일
·
0개의 댓글
post-thumbnail

#TIL3 Semantic Web & Semantic Tag

> "Semantic" 의미론적인, 의미의 Semantic Web & Semantic Tag 는 어원 그대로 의미가 있는 웹사이트, 의미가 있는 태그 라는 뜻이다. 그렇다면 의미가 있어야 하는 이유는 무엇일까? HTML5 등장 이전의 Web은 div, span 등

2021년 3월 16일
·
0개의 댓글

Javascript - Optional Chaining & Null 병합 연산자

ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝 연산자 ?. 는 좌항의 피연산자가 null 혹은 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.이렇게 옵셔널 체이닝은 객체를 가리키기를 기대하는 변수가

2021년 3월 16일
·
0개의 댓글
post-thumbnail

Micro Front-end 환경 구성하기

예전 대규모 프로젝트를 수행하기 위해 웹팩 빌드를 기능 별로 분리하려고 땅을 파다가 이런 생각이 났다. 빌드해야 할 Front-end가 크다면 아예 프로젝트를 여러 개로 나누어서 빌드하고 합치면 되지 않는가?이 경우에 빌드된 파일의 chunk가 다 다르게 나오면 문제가

2021년 3월 14일
·
0개의 댓글