profile
매일 조금씩 앞으로..🐢
post-thumbnail

[React] 리액트 state 변경 & 버튼 기능 개발

실행 화면 ↓이렇게 좋아요 UI가 완성됩니다.지금은 좋아요 갯수를 0이라고 하드코딩 해놨는데, 이러면 안되겠죠😅

약 4시간 전
·
0개의 댓글
post-thumbnail

[React] useState 함수

리액트에서도 그냥 변수를 자유롭게 만들고 변수에 데이터 저장해서 쓸 수 있는데, 데이터바인딩과 관련된 중요한 데이터를 저장할 땐 변수 대신 state를 만들어 쓰는데요.state는 왜 사용하며, 어떻게 만들어서 데이터를 저장하는지 알아보도록 할게요.

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

JavaScript를 HTML에 링크할 때 효율적인 방법

HTML에서 자바스크립트를 포함할 때 어떻게 포함하는 것이 더 효율적일까요? 1. head 안에 그냥 script를 포함시키기 HTML을 쭉 파싱하다가 script 태그가 보이면 HTML을 파싱하는것을 잠시 멈춤 필요한 JS 파일을 서버에서 다운받아 실행한 다음에

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

[React] JSX를 이용해서 HTML 페이지 제작

본격적으로 리액트를 이용해 HTML 페이지 개발 방법을 알아봅니다.그러기 위해서는 HTML 대신 JSX라는 문법을 사용해야 합니다.<span style="color: 위의 이상한 태그 문법은 문자열도, HTML도 아닌 바로 JSX입니다. JSX는 JavaScrip

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

[React] 리액트 설치와 개발 환경 세팅

구글에 Nodejs를 검색해서 설치합니다.Visual Studio Code 에디터도 구글에 검색해서 설치합니다.파일(File) - 파일 열기(Open Folder) 메뉴를 이용하면 됩니다.그럼 왼쪽 상단에 작업폴더명이 뜹니다.앞으로 코드 짜거나 npm으로 뭐 하기 전에

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

디자인 참고 사이트 모음

1. GDWEB : https://www.gdweb.co.kr/main/

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

rem과 em의 차이는?

HTML 에서 CSS 를 이용해 폰트나 마진, 패딩 등의 크기를 지정할 때 정확한 px 로 지정할 수도 있지만, 반응형 웹에서는 px보다 상대적인 값을 표현해주는 단위인 rem 이나 em 을 사용하는 것이 좋은데요. 헷갈리는 rem과 em의 차이를 알아봅시다.rem의

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

var, let, const 차이점

자바스크립트는 ES6 문법이 새로 추가되면서 다양한 새로운 기능들이 나오게 되었는데요.그중의 하나가 바로 let과 const입니다.let과 const가 그동안 사용해온 var과 어떤 차이점이 있는지 알아보겠습니다.ES6 문법이 나오기 전까지 var로 변수를 선언하는 것

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

바닐라 자바스크립트란?

바닐라 자바스크립트(Vanilla JS)란 프레임워크 또는 라이브러리가 적용되지 않은 순수한 자바스크립트를 말합니다.바닐라는 콩이라는 뜻으로 핵심, 근본이 되는이라는 의미를 비유적으로 표현 가능합니다.따라서 바닐라 자바스크립트는 핵심이 되는 아무것도 포함하지 않는 순수

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

CSS 적용 우선순위

CSS의 특성상 어떤 태그에 속성이 중복되어 설정될 수 있는데 CSS는 어떤 속성이 우선되어 적용되는지 우선순위를 미리 명시하고 있습니다. 만약 CSS 원본 파일은 보존해야하는 상황에서 CSS를 수정해야 할 경우 우선순위를 높여주는 식으로 CSS를 수정할 수 있습니다.

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

CSS 전처리기란?

CSS 전처리기는 전처리기의 자신만의 특별한 문법을 가지고 CSS를 생성하도록 하는 프로그램입니다. 믹스인(mixin), 중첩 셀렉터(nesting selector), 상속 셀렉터(inheritance selector) 등등. 이러한 특징은 CSS 구조를 가독성있고 더

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

메타태그란?

메타태그(meta tag)는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용합니다.메타태그는 base, link, script, style, title 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공할

2021년 11월 1일
·
0개의 댓글
post-thumbnail

시맨틱 태그란?

시맨틱(Semantic)은 의미의, 의미론적인이라는 뜻입니다.즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 됩니다.일반적으로 div 태그만 보고는 이 태그 안에 들어간 내용의 의미를 알 수가 없습니다.반면, section, art

2021년 11월 1일
·
0개의 댓글
post-thumbnail

<figure>

figure는 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용합니다.

2021년 11월 1일
·
0개의 댓글
post-thumbnail

<strong>, <em>, <b>의 차이는?

strong과 em은 의미론적으로 강조하고 싶을 때 사용하는 것으로 strong은 글자가 굵게 표현되고 em은 이탤릭체로 표현됩니다. 단순히 글자만 이탤릭체로 표현하는 태그로 i태그가 있습니다. b태그는 i태그처럼 의미 없이 단순히 글자를 굵게 표현하고 싶을 때 사용

2021년 11월 1일
·
0개의 댓글
post-thumbnail

<dl>, <dt>, <dd>

dl은 Description-List의 약자로 설명 목록을 나타냅니다. dt는 Description-Term, dd는 Description-Description의 약자입니다. dl은 dt로 표기한 용어와 dd로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다.

2021년 11월 1일
·
0개의 댓글
post-thumbnail

ul, ol의 차이

은 unorder list로 순서가 없는 목록입니다. 보총 불릿으로 표현합니다.ol은 oreder list로 순서가 있는 목록입니다.

2021년 11월 1일
·
0개의 댓글
post-thumbnail

API란 무엇인가?

API(Application Programming Interface)는 응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻합니다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스

2021년 11월 1일
·
0개의 댓글
post-thumbnail

float 속성 clear하는 방법

float은 HTML의 요소를 Document로 부터 띄어주기 때문에 레이아웃을 짤 때 많이 사용하는 속성인데요. 원래의 용도는 텍스트(인라인 요소)와 배치할 때 사용했습니다. 지금은 flexbox라는 더 좋은 아이가 있기 때문에 flexbox로 레이아웃 만드는게 훨씬

2021년 10월 29일
·
0개의 댓글
post-thumbnail

DOCTYPE

index.htmlDOCTYPE은 웹 문서를 작성할 때 문서가 특정 문서 형식 정의(DTD)를 따름을 지정하는 것입니다. HTML과 같은 모든 웹 문서의 시작은 문서 형식 정의(DTD)의 선언으로 부터 시작합니다. 웹 브라우저는 문서 형식 선언이 없는 HTML 문서를

2021년 10월 29일
·
0개의 댓글