profile
가치 있는 같이
post-thumbnail

동적 라우팅 실습 순서

동적 라우팅 실습에 사용되는 요소는 컴포넌트 총 4개와 Router.js로 이루어져 있다. >- 데이터를 받아오는 가장 부모 컴포넌트인 Monsters 받아온 데이터를 넘겨받는 테두리의 역할을 하는 CardList 테두리 안의 하나하나의 요소를 맡는 Card Card

2022년 3월 13일
·
0개의 댓글
post-thumbnail

장바구니 Table Modify!

내가 원하는 레이아웃나의 코드에서 나온 레이아웃mock data의 4개의 목록을 map함수를 사용해서 출력했을 때의 결과이다.rowSpan속성을 사용해서 위의 중복되는 부분을 병합하려고 했지만 mock data의 목록 수 만큼 출력되는 모습을 볼 수 있었다.해결!조건부

2022년 3월 6일
·
0개의 댓글

useEffect

React Component가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있도록 하는 Hooks >- 기본적으로 렌더링 되고난 직후마다 실행되며, 두번째 인자 배열에 무엇을 넣느냐에 따라 실행되는 조건이 달라진다. useEffect를 실행할 수 있는 조건

2022년 3월 6일
·
0개의 댓글
post-thumbnail

after & before

가상 요소 별도의 class를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있다. after 실제 내용 바로 뒤에서 생성되는 자식요소 before 실제 내용 바로 앞에서 생성되는 자식요소 content="" 가짜 속성으로 after와 before를 사용할

2022년 3월 6일
·
0개의 댓글
post-thumbnail

[TIL] search 기능

보고싶은 결과물만 검색하고 싶다면 filter()을 사용하여 검색기능을 구현해보자.주어진 상황은 다음과 같다.UI구성은 Home에서 이루어지며, 글자를 입력할 수 있는 Search 컴포넌트(input)와, 반복되는 content를 묶어놓은 CardList 컴포넌트가 존

2022년 2월 27일
·
0개의 댓글
post-thumbnail

[TIL] CodeKata Day3

str: 텍스트 return: 중복되지 않은 알파벳 길이 (숫자 반환)예를 들어, str = "abcabcabc" return 은 3 => 'abc' 가 제일 길기 때문str = "aaaaa" return 은 1 => 'a' 가 제일 길기 때문str = "sttrg"

2022년 2월 20일
·
0개의 댓글
post-thumbnail

State

state 상태 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값 화면에 보여줄 컴포넌트의 UI 정보(상태) 얼마든지 데이터가 변경될 수 있다. 변할 데이터를 저장 리로드 useState를 사용해야 리로드해서 UI를 다시 그려줌. function component

2022년 2월 20일
·
0개의 댓글
post-thumbnail

React?

리액트의 등장 리액트의 등장과 함께 3세대 웹 시작 복잡성 증가 -> 기술 발전으로 이어짐 웹에서의 복잡? -> 사용자들이 원하는 기능과 유저의 인터랙션 처리 한계를 느끼고 프레임워크를 개발 1 jQuery 등장 DOM을 더 쉽게 제어 하지만 돔에서만 작동 그래서

2022년 2월 20일
·
0개의 댓글
post-thumbnail

[TIL] 로그인 & 댓글달기 JS

Q. id 값과 password값 둘 다 입력했을 때, 로그인 버튼이 활성화되게 해라. 필요하다고 생각했던 기능.아이디와 비밀번호 입력 칸에 무언가 입력되었나를 확인하는 기능두 곳 모두 빈 칸이 아니라면 버튼 색을 달리하여 활성화시키는 기능버튼을 클릭 했을 때, 다음

2022년 2월 13일
·
0개의 댓글
post-thumbnail

[TIL] Git & GitHub

Westagram 클론 코딩을 시작하면서 나의 진행 상황을 공유해야 하는 일이 생겼다.또한, 코드를 수정하면서 어디가 달라졌는지 확인해야 할 일이 생겼다.git과 github을 통해 코드의 버전을 관리하고 사람들과 공유해보자.git은 버전 관리자github는 자신의 p

2022년 2월 13일
·
0개의 댓글
post-thumbnail

DOM 은 무엇일까?

문서 객체 모델(Document Object Model)이란 HTML 문서에 접근하기 위한 일종의 인터페이스이다.HTML 문서를 Javascript가 이해할 수 있도록 바꿔주는 작업 = parsing자바스크립트는 !새로운 HTML 요소나 속성을 추가존재하는 HTML 요

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

Switch()

switch의 마지막이 default가 아니여도 된다. 하지만 default가 마지막이 아니라면 break를 함께 사용해야한다. 공통 코드 블록 위처럼 동일한 사례를 사용하려면 공백으로 처리하여 같은 값을 사용할 수 있다. 스위치문은 엄격 비교를 사용한다.(=

2022년 1월 30일
·
0개의 댓글

주석을 달아보자.

자바스크립트나 hyml를 사용하면서 나중에 봤을 때 이해가 잘되게 하려고 메모를 하고 싶다거나 혹은 다른 사람이 코드를 봤을 때, 전달하고자 하는 내용이 있다면 어떡해야할까? 이번 게시물은 위의 상황에서 사용할 수 있는 방법인 주석을 소개하고자 한다. 코드를 작성하여도

2022년 1월 26일
·
0개의 댓글
post-thumbnail

css와 position

css(cascading style sheets) 는 html으로 작성한 코드를 더 다채롭게 해준다. css를 통해 같은 스타일이 필요한 코드를 한번에 수정,관리할 수 있게 해준다. css를 사용하면 글씨의 크기, 색상 같은 작은 구성요소 부터 웹 페이지 전체의

2022년 1월 25일
·
0개의 댓글
post-thumbnail

img태그와 속성

img태그와 태그의 속성 중 어떤 것을 사용해 이미지를 넣어야 할까? img태그와 속성 중 어떤 것을 사용해야할까라는 문제는 상황에 따라 다르다. 그 문제를 알아보기 전에 img태그가 무엇인지 알아보자. img태그는 시멘틱 태그(semantic tag)로써, div

2022년 1월 24일
·
0개의 댓글
post-thumbnail

arguments

arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열이다.arguments에는 함수에서 호출할 때, 입력한 인자의 값이 담겨져 있으며, arguments를 사용하면 인자의 함수에서 정의를 하지 않은 인자임에도 불구하고 인자를 전

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

split( )

split? String 객체를 지정한 구분자를 이용하여 여러 문자열로 나누어 준 후, 배열로 변환된다. 1) 구분하려고 하는 구분점을 설정한다. 2) 구분하려고 문자열에 split메소드를 활용한다. 공백을 기준으로 구분하고 싶다면 문자마다 구분하고 싶다면 문자

2022년 1월 20일
·
0개의 댓글
post-thumbnail

객체의 반복문

반복문을 통해서 객체가 가지고 있는 데이터를 처리할 수 있다.객체의 속성을 확인하거나, 객체처럼 키-값 쌍이 선호되는 데이터의 경우 특정 값을 가진 키가 있는 지 확인할 때 사용할 수 있다.객체 = for in문을 실행할 객체속성이름 = 객체 안의 이름 값반복횟수 =

2022년 1월 12일
·
0개의 댓글
post-thumbnail

객체를 다루어보자

객체(Object)는 key 값과 value값이 쌍으로 이루어져있다.객체를 생성하고 객체의 값에 접근해보자.Dot NotationBracket Notation변수로 접근객체안에 위치하고 있는 객체에 접근해보자.tvBrand의 값이 "samsung"이 되게 해보자.객체안

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

화살표 함수

파라미터가 하나만 있으면, ()괄호 생략 가능 / 화살표 함수의 유일한 문장이 return이면 return, {}중괄호 생략 가능화살표 함수(arrow function expression)는 전통적인 함수표현을 간편하게 쓸 수 있지만, 몇몇의 제한점이 있고 모든 상황에

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