# front end

846개의 포스트
post-thumbnail

✔️ React 에서 동적 UI를 만드는 3-STEP

리액트에서 동적 UI를 만들고자 할 때 유용한 3-STEP

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

Vue.js API, Methods (1/ 2)

뷰의 메서드는 특정 기능 별로 묶을 수 있는 자바스크립트 함수를 의미한다.메서드는 흔히 뷰 템플릿의 버튼 이벤트 처리부터 HTTP 통신까지 다양한 성격의 코드로 구성된다.메서드를 선언하는 방법은 아래와 같다.메서드를 이용해서 버튼 클릭 이벤트를 처리하면 다음과 같다.위

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

✔️ React 의 useState

useState 의 사용법과 Object, Array 정보를 담고있는 State 변경 시 유의사항

3일 전
·
0개의 댓글
·

HTML

여는 태그()와 닫는 태그()로 구성HTML은 공백을 표시하지 않는다.출력: Hello HTML!주석 다는 방법!DOCTYPE 우선 브라우저가 문서를 해석하는 방법을 정의해주자.<html> HTML 전체를 감싸주자<head>페이지에 대한 metadata를 적

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

Front-End, Back-End 기본 개념 특강

\- 사용자가 볼 수 있는 모든 부분 / HTML, CSS, JavaScript -집의 구조를 결정웹페이지 틀을 잡는 것(Header, Footer 등) 쉽지만 중요하다. (언어가 아니라고 하는 밈이 있을 정도)집의 인테리어 웹페이지를 꾸며주는 것 집의 기능을 부여(

5일 전
·
0개의 댓글
·

9. 웹 페이지 따라 만들기 <크로스 브라우징>

인터넷 익스플로어에서는 flex item 의 width를 overflow가 hidden으로 설정되어 있음에도 불구하고, flex box 너비에 최대한 많은 아이템들이 보여질 수 있도록 수축시킴.따라서 flex-shrink:0 으로 설정시켜야함.또한, class-card

5일 전
·
0개의 댓글
·

8. 웹 페이지 따라 만들기 <footer>

항상 inner태그가 기본이 되어야 한다.footer 태그 바로 위의 줄을 만들기 위해 border-top 으로 설정해두었다.margin과 padding설정은 알아서 잘 보고 하자.

5일 전
·
0개의 댓글
·

7. 웹 페이지 따라 만들기 <CSS - transition>

1. skill 클래스에 transition 효과 부여하기 당연히 각 요소가 어떤 클래스네임을 가지고 있는지 알아보려면, f12 눌러서 개발자 모드에서 커서로 확인해보면 된다. 각 요소별로 마우스를 올렸을 때 효과를 줘보도록 하자. (hover) 먼저 해당 skill 클래스에 transition 효과를 주고, 원래 transition:transform...

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

HTML 목록 및 표 태그

순서 없는 목록 첫 번째 항목. 두 번째 항목. 각 항목은 li 태그로 표시한다. 순서 있는 목록 각 항목은 li 태그로 표시한다. start 속성으로 번호의 시작값을 정할 수 있다. type 속성으로 번호의 속성 값을 정할 수 있다. 숫자(1)

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

HTML5 텍스트(text) 태그

h1 부터 h6 까지 있으며, 글의 제목을 표시할때 주로 사용하는 태그이다.p 태그는 단락을 구분할 때 쓰는 가장 자주 사용하는 태그이다.안녕하세요 안녕하세요br 태그는 문장의 줄바꿈을 표현하는 태그이다.hr 태그는 문장의 단락을 구분할 때 사용하면 유용한 수평 줄을

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

HTML5 기본 태그

HTML 태그 정리

2022년 9월 22일
·
0개의 댓글
·
post-thumbnail

Vue.js Template과 Components

뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미한다.템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다.가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)이다.div

2022년 9월 22일
·
0개의 댓글
·
post-thumbnail

E2E Test with Cypress - 방 생성 테스트 코드 작성하기

cypress를 이용해 방 생성 e2e 테스트를 해보자

2022년 9월 21일
·
0개의 댓글
·
post-thumbnail

React JS 컴포넌트와 랜더링, State, Props

What is React JS?Interactive UI를 만들어주는 Javascript libraryReact JS는 새로운 데이터가 들어올 때마다 자동으로 UI를 refresh하고, 기능을 단위별로 캡슐화한 component를 기반으로 작동한다.React 컴포넌트는

2022년 9월 21일
·
0개의 댓글
·

Javascript Weather API 사용해서 날씨 정보 표시하기

우선 날씨 API를 사용하기 위해 open Weather API에 가입해서 유저 당 발급되는 API key를 알아서 받는다. > 아래 코드의 API key는 당연히 무효함. geolocation.getCurrentPosition() > 디바이스의 현재 위치를 가져온

2022년 9월 18일
·
0개의 댓글
·

Javascript To-Do list 만들기

❗️ function paintToDo(newTodoObj)에서 파라미터의 이름을 다르게 해도 handleToDoSubmit에서 넘겨준 인수 값이 newTodoObj이므로 코드의 실행에는 문제가 없다.: 인수로 주어진 callback 함수의 테스트를 통과하는 모든 요소

2022년 9월 18일
·
0개의 댓글
·

Javascript 날짜와 시간 정보 표시하기

(callback function, milliseconds) : 설정한 밀리초마다 함수를 실행함(callback function, milliseconds) : 설정한 밀리초만큼 기다린 후에 함수를 실행: 호출하는 그 시점의 날짜, 시간 정보를 반환하는 객체 - getD

2022년 9월 18일
·
0개의 댓글
·
post-thumbnail

BEM 방식의 Sass작성하기

BEM 방식으로 Sass를 작성할 경우의 장점에 대해 알아보고, css 코드와 Sass 코드를 비교한다.

2022년 9월 17일
·
0개의 댓글
·
post-thumbnail

Sass의 기본 문법

Sass의 기본 문법에 대하여 학습한다.

2022년 9월 17일
·
0개의 댓글
·
post-thumbnail

BEM의 기본 문법

BEM의 구조와 Block, Element, Modifier의 간단한 기능에 대하여 학습한다.

2022년 9월 17일
·
0개의 댓글
·