시멘틱 태그는 이전에도 한번 블로깅을 통해 다루었었는데,조금만 더 디테일하게 시멘틱한 코드(시멘틱 HTML)를 짜는 방법을 다뤄보겠다.시멘틱(semantic) 이란? "의미가 있는"이란 뜻으로, 쉽게 말해코드만 보고도 이 태그는 어떤 역할인지, 저 태그는 어떤 역할인지

Redux는 리액트 뿐만 아니라 개별적으로 사용이 가능한 대표적인 상태관리 라이브러리이다.리액트에서는 Redux를 사용함으로써 컴포넌트간의 데이터를 주고 받을때 state와 props로만 사용했을때 생기는 큰 불편함들을 모두 해결해줄 수 있다.그럼 Redux는 어떻게

리액트에서 CSS를 다뤄보았다면 여간 불편한게 한두가지가 아니다.HTML밖에 몰랐던 시절 CSS를 쓰고 있으면 크게 불편한게 없었지만,리액트라는 라이브러리에서는 JS나 HTML은 편리하고 효율적으로 바뀌었지만그에 비해 CSS는 고전적인 비효율적인 방법으로 할 수 밖에

useRef는 리액트에서 사용할 수 있는 훅의 하나로, useState와 매우 흡사하지만 몇가지 다른 점이 있다.먼저 사용하기 위해서는 따로 임포트를 해줘야한다.그리고 inputRef라는 이름으로 useRef를 하나 만들어보겠다.그리고 input태그를 하나 만들어 re

프로그래머스 0단계 "한 번만 등장한 문자"난 반복문을 돌려서 배열을 .sort()로 문자끼리 정렬시켜준 다음 ,각 요소의 바로 전 요소와 바로 다음 요소가 모두 다르지 않다면result 배열에 push해주는 방법으로 해결을 했는데, 나름 신선하다고 생각했는데 아래 방

UX(User experience)는 완성 된 시스템이나 제품 등을 사용자가 이용하면서느끼는 전반적인 경험을 말한다.UX를 측정하는 기준은 여러가지 요소들이 있고, 그 요소들에는 어떤것들이 있는지는아래에서 더 자세히 다뤄보겠다.UI(User Interface)는 사용자

섹션 2는 교육 컨텐츠에 대한 아쉬움이 많았다.실무에서는 리액트를 거의 매일 다룬다고 하는데좀 더 리액트에 대한 내용이나 연습을 중점적으로 다뤘으면 좋겠는데백엔드 기초 부분의 비중이 더 크니 이해도 잘 안되고왜 해야하는지도 잘 모르겠어서 의욕이 안 생겼었던 것 같다.특

useEffect란?리액트의 컴포넌트의 생명주기(Life cycle)라는 것이 존재하는데,생성(mount), 갱신(update), 삭제(unmount)으로 구분되어 있다.useEffect는 이러한 생명주기에 따라 원하는 코드를 실행할 수 있게 만들어주는 훅이다.useE

리액트의 단방향 데이터 흐름(one-way reactive data flow)의 원칙에 따라자식 컴포넌트에서는 props나 state를 이용해서 부모의 컴포넌트의 상태를 바꾸는 것은 불가하다.하지만, 끌어 올리기(Lifting-state up)로 단방향 데이터 흐름의

문자열에서 특정 문자 제거 또는 바꾸기 >str.replace(/바꾸려는 문자/ , 바뀐 문자) > > let str = "안녕안녕" str.replace(/안/, "반"); //"반녕안녕" str.replace(/안/g, "반"); //"반녕반녕" str.repla

도저히 글로 된 학습 내용들로는 이해가 안되서이것저것 유튜브 강의도 찾아보고 블로그도 찾아보면서최대한 REST API가 무엇인지와 어떻게 활용할 수 있는지 공부해보았다.먼저 API(Aplication Programing Interface)란 클라이언트와 서버가 소통할

이번 과제를 하면서 코딩애플 강좌를 들으며 배웠던 내용들이새록새록 떠오르기 시작했다.그 중에 하나가 배열을 재갱신 하는 방법이다.특히 메소드 없이 어떻게 배열에 요소를 빼거나 추가할 수 있을까?기존의 student에 newEl을 추가하려고 한다.먼저 useState로

시멘틱 태그가 무엇인지,왜 써야 하는지에 대해서는 아래의 벨로그를 참고하면 된다.https://velog.io/@huurray/HTML-시멘틱-마크업이-중요한-이유난 위 부분들은 이미 다 알고 있기 때문에실제로 실무에서는 어떻게 시멘틱 태그를 활용하는지 궁금했

코딩을 하다보면 종종 랜덤한 숫자를 반환해야 하는 경우가 많다.첫번째로 Math.random()을 사용해 0~배열의 길이 미만의 정수를 마치 공식처럼 구현할 수 있다.위 함수 표현식은 마치 공식처럼 length 부분에만 배열의 길이 뿐만 아니라 원하는 반환 값의 최대

리액트에서 서버 데이터를 가져오거나 불러오려면 어떻게 할까?즉, 서버에 GET(가져옴)/POST(보냄)요청을 할때 "새로고침 없이" 데이터를 주고 받을 수 있는 브라우저 기능을 AJAX라고 한다.AJAX 중 axios라는 외부 라이브러리를 사용하는 방법이 가장 많이 쓰

Promise : 자바스크립트에 내장 된 객체로써 비동기적인 작업을 처리하기 위해 사용된다.비동기적인 작업은 예를 들어 파일 로딩, 네트워크 요청 등이 있는데,이러한 작업들은 모두 시간이 오래 걸릴 수 있기 때문에 프로미스를 사용한다.프로미스 체이닝은 .then을 활용

프로토타입(prototype): 어디 게임에서나 들어 봤을 단어다.자바스크립트는 흔히 프로토타입 기반 언어라고 불린다.모든 객체들이 메소드와 속성을 받기 위한 템플릿으로써 프로토타입 객체를가진다는 뜻이다.즉, 클래스 Human의 .prototype은 프로토타입 객체이며

객체 지향 프로그래밍(Object-Oriented Programming : OOP) 이란?객체 지향 프로그래밍은 프로그래밍 패러다임 중 하나로, 데이터와 이를 처리하는 동작을 하나로 묶어서 객체라는 단위로 관리하고, 이러한 객체들의 상호작용으로 프로그램을 구성하는 방식

자바스크립트에는 기본적으로 내장 된 고차함수가 여러가지 있다.이 내장 고차 함수들을 사용하는 이유는 코드의 추상화를 통해 생산성을 비약적으로 높이는데에 있다.그럼 대표적으로 가장 많이 쓰이는 3가지 내장 고차 함수 filter, map, reduce에 대해서 살펴보자.

클래스와 인스턴스의 개념을 활용하면 보다 간단하게하나의 생성자 함수를 가지고 수많은 인스턴스(그 생성자 함수를 가지고 찍어낸 객체)를 만들어사용 할 수 있다. 첫번째로, 먼저 생성자 함수를 만드는 방법을 살펴보자.