분류 전체보기 (44) 썸네일형 리스트형 React | 검색 기능 구현하기 React로 외부 API를 받아온 뒤, 검색창에 입력하면 관련 데이터가 나오는 기능을 구현해보았다. 참고로, 해당 사이트는 아래의 3단 구조 컴포넌트로 되어있다. Monsters(최상위) > CardList > Card 아래엔 Monsters Class 코드 위주로, 또 import 부분 등은 생략하고 적어볼 예정 Step.1 : state 설정 componentDidMount() { fetch("API주소") .then((res) => res.json()) .then((data) => { this.setState({ monsters: data, userInput: this.state.userInput, }); }); } // SearchBox 에 props로 넘겨줄 handleChange 메소드 정의 .. React | map 함수 적용시 key props를 부여하는 이유 React에선 기존에 한땀한땀 작성해야했던 배열을 map()함수를 이용해 element list로 반복실행할 수 있다. 예를 들어 div안에 feed의 데이터가 담긴 배열(this.state.feeds)에서 배열 값이 하나씩 나타나도록 map()함수를 이용할 때, 아래의 코드를 작성했다. (실제 코드에서 일부분을 빼내온 터라 보충 설명을 해보자면, 배열 값 feed는 comments, feedContents의 속성을 가지고있다.) { this.state.feeds.map(feed => { return ( ); })} 위 코드를 실행시키면 console에 아래와 같이 list의 모든 child요소는 unique key 속성을 가져야 한다는 메세지가 출력된다. 그럼 여기서 key는 무엇이고, 왜 필요한 걸까.. React | State와 Props State와 Props state 와 props (properties)는 JavaScript의 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는, 속성을 가진 데이터이다. State와 Props의 차이점 state : (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리되는 데이터. 자식 컴포넌트 입장에서 보면 쓰기 전용이라고 할 수 있다. props : (함수의 매개변수처럼) 상위 계층의 컴포넌트에서 자식 컴포넌트로 전달되는 데이터. 자식 컴포넌트 입장에서 보면 읽기 전용이라고 할 수 있다. 어떤 데이터가 state가 되어야 할까? 부모로부터 props를 통해 전달되는가? 시간이 지나도 변하지 않는가? 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가? 위 질문에 하나라도 yes가 나.. 웹 개발 공부 한 달차 회고록 부트캠프에서 웹 개발 공부를 한지 한 달이 지났다. 길다면 길고, 짧다면 짧은 한 달을 무언가에 푹 빠져 보낸 뒤 떠오르는 생각과 기억들을 정리해본다. 📝 배우고 협업하는 순간을 온전히 즐겼다. 어려운 순간도 기꺼이 즐기며 보낸 것은 스스로에게 긍정적으로 지내자 다짐한 덕분이기도, 동기분들의 긍정적인 영향 덕분이기도 했다. 남들보다 웃음 장벽이 낮아 평소에도 잘 웃는 편이긴 하지만, 지난 한 달간 정말 많이 웃으며 즐겁게 생활했다. 낯선 개념을 이해하는 동시에 적용하느라 뇌에 쥐가 나는 순간에도, 의견 차이를 잘 풀어나가기위한 방법을 고민하던 순간에도 이렇게 또 하나를 배운다~ 라는 마음가짐으로 즐겁게 임했다. 가끔 심란해지려하면 동기들과 웃음 폭발하는 쉬는 시간을 보내며, 슬럼프에 빠질 새도 없이 차곡.. React | What is React? Why React? 웹의 규모가 커지면서 동시접속자 수와 데이터의 양이 폭발적으로 증가했고, 이 결과로 웹 3세대의 시대가 도래하게 된다. 이러한 흐름속에서 기존의 DOM, jQuery만으로는 새로운 웹 애플리케이션을 개발하고 코드를 유지보수 하는 것이 어려워졌다. 규모가 커지고 복잡해진 웹 애플리케이션의 데이터 관리 / 코드 유지 보수를 편리하게 하기 위해 다양한 Frontend Framework 및 Library가 등장한다. React는 이 중 Frontend Library에 해당한다. What is React ? - 사용자 인터페이스(UI)를 만들기 위한 JS 라이브러리 - 컴포넌트 단위로 이루어진 UI 라이브러리 위 단어에서 생소하게 느껴졌던 단어, 라이브러리와 컴포넌트 아래로 각각 정리해본다. .. HTML과 Javascript 연결하기 HTML에 Javascript를 연결하는 방법 HTML에 Javascript를 연결하기 위해선 기본적으로 아래 코드를 해당 HTML에 입력한다. 다만 이 때 코드의 위치와 옵션에 따라 각기 다른 특징을 가진다. 그렇다면 각 방법의 특징과, 어느 방법이 가장 최선일지도 함께 알아보자. 각 방법은 위치, 옵션에 따라 총 4가지로 나뉘어진다. 용어 정리 우선 각 방법의 실행 순서 이해를 위해 알아둘 용어들이 있어 정리해본다. ( * Parsing(파싱)과 fetching(패칭)은 영문과 국문을 번갈아 쓸 예정 😅 ) Parsing (파싱) 처음 들어본 개념인 Parsing(파싱)은 Parser(파서)에 대한 이해에서부터 시작된다. Parser(파서)는 컴파일의 일부로서 [원시 프로그램의 명령문이나 온라인 명령.. 웹 서비스의 역사와 발전 Internet과 Web의 출현 인터넷의 출현 1960년대 핵전쟁 이후 상황에서 핵 공격에도 마비되지 않을 통신 시스템이 필요했고, 물리적으로 떨어져 있어도 서버 간 통신이 가능한 인터넷이 출현하게 되었다. 결국 인터넷은 군사적 목적으로 처음 출현하게 된 셈이다. 웹의 출현 1990년대, 팀 버너스리를 통해 처음 등장하게 된다. 최초의 브라우저인 web이 등장하면서 인터넷이 대중화되기 시작했다. (인터넷이 web을 포함하는 관계! 헷갈릴 수 있으니 메모..📝️ ) 인터넷이 가져온 혁신 인터넷이 가져온 가장 큰 혁신은 유통 인터넷이 발달하기 이전, 소프트웨어를 구입하면 물리적인 매개체(CD, 플로피디스크 등)을 전달받아 컴퓨터에 연결해 설치해야했다. 인터넷이 대중화 된 이후 이러한 유통 과정이 혁신적으로 .. CSS | revert, unset react와 styled-component를 사용하여 프로젝트를 진행할 때 코드를 줄이기 위해 기본적인 text속성을 정의해두고 H1, H2 등 다른 속성에 상속시켜 사용했다. 그러다보니 몇 가지 속성은 기본적인 text속성과 font-weight 등 한 두가지가 달랐는데, 이를 효과적으로 처리할 수 있는 revert를 알게되어 정리해본다. revert란? revert 는 현재 엘리먼트에 선언 된 css 속성을 부모 속성 또는 user agent에 따라 default로 선언 된 속성으로 되돌리는 것이다. revert 속성은 각각의 경우의 수에 따라 아래와 같이 적용된다. 1. 사이트의 기본적인 css 속성이 지정되어있는 경우 : 유저가 지정한 커스텀 스타일로 돌아간다. 2. 사이트의 css속성이 하나만 .. 이전 1 2 3 4 5 6 다음
