profile
Ryuwisdom
post-thumbnail

React에서 input 사용

참고: 크롬에서 테스트한 결과로 디테일한 현상은 타 브라우저와 다를 수 있습니다. 그리고 테스트 코드는 typescript 기반으로 제작되었는데, 인자 값을 any 타입으로 정의한 것은 테스트 코드를 간소화하기 위한 것으로 실제로는 타입에 맞게 지정해 주어야합니다.js

2일 전
·
0개의 댓글

동적 라우팅(Dynamic Routing)

라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것.(Dynamic Routing)React Router에서는 두 가지 방법을 통해 유동 라이팅 기능을 구현할 수 있습니다.1\. Query parameters2\. URL parameters\*\*이

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

위코드 한 달 후기

유치원 첫 등원 하는 기분으로 화창한 테헤란로 아침 햇볕을 받으며 던킨 앞 횡단보도를 룰루랄라 건넜던 기억이 엊...엊그제 같은데...얼굴을 외웠지만 이름과 매칭시키는 과정에서 이름이 기억안나 부르진 못하고 이름없이 자연스럽게 부르려고 했던 시간도,라운지가 낯설어 강의

2020년 11월 15일
·
7개의 댓글

fetch 🐾

목차1\. fetch() 2\. fetch함수를 사용해 backend API붙이기Ajax의 포스팅은 요기에서 🐙두근두근 +\_+ ! 오늘은 backend분들이 만든 데이터 모델을 fetch함수를 통해 내가 만든 위스타그램 로그인창에서 유효성 체크를 해보는 시간을 가

2020년 11월 14일
·
0개의 댓글

Mock Data 🐾

mock data란?mock: 거짓된, 가짜의이름에서 알 수 있듯이 mock data 는 가짜 데이터, 샘플 데이터즉, 실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플용으로 만든 데이터 mock data가 필요한 이유API 가 아직 준비중인

2020년 11월 12일
·
0개의 댓글

라이프사이클 메서드 🐾

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지가 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다.프로젝트 진행 시 가끔 컴포넌트를 처음 랜더링할 때 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어

2020년 11월 10일
·
0개의 댓글

SPA & Router 🐾

: Single Page Application: 말 그대로 한 개의 페이지로 이루어진 애플리케이션을 의미기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고, 페이지를 로딩할 때 마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주었다. 이렇게

2020년 11월 10일
·
0개의 댓글

Props 🐾

props : properties(속성)단어 뜻 그대로 컴포넌트의 속성값을 의미.props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.props를 통해 부모 컴포넌트로부터 자

2020년 11월 10일
·
0개의 댓글

State 🐾

state : 상태단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값 으로 이해state는 화면에 보여줄 컴포넌트의 정보(상태)를 지니고 있는 객체state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다.클래스형 컴포넌트에서

2020년 11월 10일
·
0개의 댓글

Component 🐾

component : 재활용 가능한 UI 구성 단위컴포넌트의 종류, 즉 컴포넌트를 선언하는 방식에는 두 가지가 있다.Class형 컴포넌트(Class Component)함수형 컴포넌트(Functional Component)1) Class Component클래스형 컴포넌트

2020년 11월 8일
·
0개의 댓글
post-thumbnail

JSX 🐾

이게 바로 JSX 이다 ! JSX: Javascript XML(syntax extension for JavaScript / extensive markup language)그럼 XML은? : HTML의 한계를 극복한 마크업 언어특징 : 호환성 / 확장성이 뛰어남, t

2020년 11월 8일
·
0개의 댓글
post-thumbnail

💙 React - Intro

브라우저를 열고 사이트에 들어가면 보여지는 것 (UI: User Interface) 과 할 수 있는 것 (UX: User Experience) 이 굉장히 많다. 이러한 이유로 요새는 웹 페이지(Web Page)라는 단어보다 웹 애플리케이션이(Web Application

2020년 11월 5일
·
0개의 댓글

프론트앤드 개발자를 위한 database

데이터... 베이스...?😶 단어만 읇어도 피하고 싶은 느낌이 물씬드는 단어(였)지만 이제 피할 수 없다 ^-^..피할 수 없으니 그냥 씹어먹어버리기🪓. 프론트앤드가 데이터베이스를 알아야하는 이유는 다음과 같다.⭐️ 프로젝트의 다양한 측면에 대한 광범위하고 포괄

2020년 11월 1일
·
0개의 댓글

Git(2)

🙋‍♀️ 알아볼 내용Git 기본 명령어(2) - clone, pull request(PR), conflicts, pullgithub에 있는 저장소(repository)를 로컬로 다운로드하는 것을 "복제(clone)한다"라고 말한다.해당 remote repository

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

객체의 반복문

객체에서는 크게 두가지의 방법으로 객체의 반복문 작성이 가능하다. Object.keys(obj): 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메서드.Object.values(obj): 객체가 가지고 있는 값들의 목록을 배열로 리턴하는 메서드.Object.entr

2020년 10월 26일
·
0개의 댓글

객체 생성 & 접근 & 수정

축약식 표기법(literal Notation)객는 중괄호와 그 콘텐츠로 구성된다. 객체는 hotel이라는 변수에 저장되므로 이 변수를 호텔 객체로 참조할 수 있다.각 키와 값은 콜론(:)으로 구분한다. 각 속성과 메서드는 쉼표로 구분하고 마지막 값 다음에는 생략한다.생

2020년 10월 26일
·
0개의 댓글

크롬 개발자 도구 (DevTools | Chrome)

🖇 Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diag

2020년 10월 24일
·
0개의 댓글

Semantic Web과 Semantic Tag

" semantic : 의미론적인, 의미가 통하는 "🟢 Semantic Web시맨틱 태그는 알았지만 시맨틱 웹은 생소했던 단어! 시맨틱웹 위키백과(https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1\_%EC

2020년 10월 21일
·
0개의 댓글
post-thumbnail

float

float - 왼쪽 또는 오른쪽으로 배치하기 (with clear 속성)몇 번의 미니 프로젝트를 만들어보면서 float를 사용한 적은 단 한 번도 없었다.😳왜냐하면 float보다 더 수월하게 스타일을 적용시킬 수 있는 flex 속성이 있기 때문이다.하지만 언젠간 마주

2020년 10월 21일
·
0개의 댓글
post-thumbnail

position

position 속성웹 문서 안의 요소를 원하는 위치에 배치할 때 사용하는 속성 중 하나.position속성 중 static을 제외한 나머지 속성 값에서는 좌표를 이용해 각 요소의 위치를 조절 할 수 있다.위치는 속성 top, bottom, left, right를 사용

2020년 10월 20일
·
0개의 댓글