nika-blog

이번 포스팅에서는 리액트 라이프 사이클에 대해서 공부하고, 함수형 프로그래밍과 클래스형 프로그래밍에서 각각 어떻게 사용하는지 익혀보겠습니다. 리액트 라이프사이클 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 라이프사이클의 분류 생성될 때 = 마운트 업데이트할 때 = 업데이트 1. props 가 바뀔 때 2. state 가 바뀔 때 3. 부모 컴포넌트가 리랜더링 될 때 4. this.forceUpdate로 강제로 랜더링을 트리거 할 때 제거할 때 = 언마운트 함수형 라이프 사이클 구현 useEffect ..

개념 React는 UI를 구축하기 위한 JavaScript 프론트엔드 라이브러리. 주로 SPA 만들 때 사용 장점 virtual DOM을 사용해서 어플리케이션의 성능을 향상 시킵니다. 서버, 클라이언트 사이드 렌더링 지원이 가능합니다. 컴포넌트의 가독성이 높고 간단하여 유지보수가 쉽습니다. 다른 프레임워크와 혼용도 가능합니다. 컴포넌트란? 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수. 레고 블록과 같이 작은 단위로 만들어서 그것들을 조립하듯이 개발하는 방법입니다. 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있습니다. **컴포넌트 이름은 항상 대문자로 시작하도록 한다. (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이..

createDocumentFragment template tag element 와 node 의 차이점 children과 childrenNodes의 차이점 offsetTop offsetWidth HTML과 DOM 차이 효율적 DOM 제어 : createDocumentFragment 개념 : DocumentFragment는 기본적으로 DOM과 동일하게 동작하지만, HTML의 DOM 트리에는 영향을 주지 않으며, 메모리에서만 정의됩니다. 왜 필요한가? 예를 들어, 여러개의 li 태그를 가지고 있는 ul 태그를 조건에 따라 추가해야 한다면 기존에는 div 태그등을 만들어서 그 안에 ul 및 li 태그들을 생성, 추가 한두에 조건에 따라 추가해 주었습니다. 이 경우 브라우저에는 보이지 않지만 DOM 트리에 연결되..

이번 포스팅에서는 CSS 애니메이션을 공부하면서, keyframe 사용 법 및 다양한 애니메이션 속성에 대해 공부하겠습니다. CSS 애니메이션이란? 여러 개의 CSS 스타일을 부드럽게 전환해준다. @keyframes 키워드 활용 시 시간 순서대로 정밀하게 짜여진 애니메이션 만들기 가능 @keyFrames 활용 1. CSS로 키프레임 블록 만들기 /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% ..

이번 포스팅에서는 Canvas에 대해서 대략적인 내용을 공부하고 이를 통해 사각형을 만들어 볼 예정입니다. canvas란? HTML 의 태그로, JS를 이용해서 다양한 그래픽 요소를 만들 수 있다. 사용법? 1. DOM 조작이 필요함으로 id 작성이 필요하다. 2. 크기와 높이 설정 -> 설정하지 않으면 기본 300px*150px 태그 속성 이용 (픽셀만 가능) DOM 설정 (유동적 값 가능) canvas.width = 50vw; canvas.height = 40vh; // 50vw * 40vh 로 설정됩니다. canvas.width = innerWidth; canvas.height = innerHeight; // 화면 크기에 맞춰서 설정해줄 수도 있습니다. 3. 캔버스에 그래픽 작업을 할 수 있는 속성..

DOM의 개념 document 객체의 생성, 조회, 변경 document 객체의 제거 + removeChild 와 remove 비교 + 여러개의 자식 element 지우기 document 객체의 추가 + 이미 존재하는 노드를 추가하면 어떻게 될까? innerHTML과 textContent의 차이 **참고** 대분류 제목 색상 소분류 제목 색상 DOM이란? Document Object Model의 약자로, HTML 요소를 Object처럼 조작할 수 있는 Model 입니다. document 객체 CRUD(Create, Read, Update and Delete) **DOM 에는 HTML에 적용(APPEND) 하는 메소드가 따로 있음 Create : createElement element 생성 웹 페이지 상에..

안녕하세요. React Router를 이용하여 페이지를 개발할 때 URL을 이용하여 할 수 있는 작업은 매우 다양한데요.다음과 같은 작업들을 할 수 있습니다. url Parameter로 호출할 api 의 id 값 받아오기 url parameter로 특정 컴포넌트를 보여주기location state 으로 현재 페이지에 상태값 전달 및 받아오기history 객체를 이용하여 새로운 페이지로 이동하기 등등오늘은 React Router 에서 제공하는 location 객체에 대해서 알아볼 것입니다!  Location 이란?React Router 라이브러리에서 제공하는 location 객체는 현재의 URL 정보를 나타냅니다. (참고로 web api 의 location 과는 다른 객체입니다. history 객체도요!)..

요즘은 프레임워크를 많이 사용해서 HTML을 일일이 작성하는 경우는 많이 없지만, 그래도 작성할 일을 대비해 작성해보겠습니다.  바로 요즘에 거의 모든 IDE(IJ)와 Text Editor(vscode) 등에 탑재되어 있는 Emmet 입니다. 바로 아래와 같이 작성하는 것이데, 기억할 것은 다음과 같습니다.  부모 > 자녀형제 +. class# id{text}Tab키 누르기* 곱하기전 div.container>h1.title+p.description+ul#users>li{user}*5 후(Tab키 누르기) user user user user user  추가로 숫자로 클래스 명이나 내용을 작성할 때 자동으로 지정할 ..

안녕하세요. 오늘은 반응형 웹개발에 대해서 작성해 보려고 해요.  요즘, 워낙 다양한 크기의 기기들이 많아서 반응형 웹개발은 필수가 되었는데요, 다양한 요소가 필요하지만 주요 CSS 속성으로는 다음과 같은 것들을 활용할 수 있습니다.  %자주 사용하는 것으로 % 가 있는데요, 기억해야 할 것은 %는 부모 컨테이너의 영향을 받기 때문에,100% 라고하면, 부모 컨테이너의 100%가 되는 것입니다.  vh대신, vh 라고 하면 화면의 높이를 의미하는 것이기 때문에, 100vh 라고 하면 전체화면의 높이가 됩니다.  이 밖에도 flex gird, flex box, vw 등을 사용할 수 있습니다. 화면 크기에 따라 박스 배치를 바꾸고 싶다면 Media Queries를 사용할 수 있는데요, 보통은 3가지 크기에 ..

안녕하세요. 오늘은 프로미스(Promise)에 관한 포스팅 입니다.   콜백지옥을 탈출하기 위해 가장 좋은 방법이죠!먼저 개념을 알아보면 아래와 같습니다.  promisePromise 객체는 비동기 작업이의 완료 또는 실패와 그 결과 값을 나타냅니다.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise - JavaScript | MDNPromise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.developer.mozilla.org 코드를 한번 살펴보며 다음과 같습니다.  promise.js'use strict';//promise is a JavaScript ..