학습 목표 1. CSS-in-JS 를 이해할 수 있습니다. Styled Components 를 배워보고, 활용할 수 있습니다. CSS-in-JS란? css-in-js 란 무엇인가? 지난 주차에 css파일을 생성하고, 그 안에서 CSS코드를 이용해 컴포넌트를 꾸몄습니다. 나름 괜찮은 방식이었지만, 조금은 불편했습니다. 컴포넌트를 만들고, 컴포넌트를 꾸미기 위해 css파일을 만들어서 import 하고, HTML tag마다 classname 을 넣고 CSS 코드를 작성하는 것을 반복해야 했죠. 이번 숙련주차에서는 조금 더 간편한 방법으로 컴포넌트를 꾸밀 수 있는 CSS-in-JS 방식에 대해 배웠습니다. CSS-in-JS 방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성해 컴포넌트를 꾸미는 방식입..
리액트의 Ref 를 이용하면 돔(DOM) 요소들을 직접 조사할 수 있습니다. Ref 는 Reference 의 줄임말로 참조라는 뜻입니다. 이번 절에서는 이 기능을 이용해 돔 요소를 제어해 보겠습니다. useRef 사용하기 리액트에서는 useRef 라는 리액트 함수를 이용해 Ref 객체를 생성합니다. 먼저 함수 useRef 로 Ref 를 생성하기 전에 Body 컴포넌트를 다음과 같이 수정합니다. src/component/Body.js import { useState } from "react"; function Body() { const [text, setText] = useState(""); const handleOnChange = (e) => { setText(e.target.value); }; cons..
리액트 앱을 만들다 보면 컴포넌트가 다른 컴포넌트에 값을 전달해야 하는 상황이 생깁니다. 이번 절에서는 컴포넌트 간 값을 주고받는 방법에 대해 알아보겠습니다. Props 란? 리액트에서는 부모가 자식 컴포넌트에 단일 객체 형태로 값을 전달할 수 있습니다. 이 객체를 리액트에서는 Props(Properties) 라고 합니다. Props 는 Properties 의 줄임말로 속성이라는 뜻입니다. Props 객체가 왜 이런 이름을 갖게 되었는지 이해하려면, 컴포넌트가 어떤 상황에서 자식에게 값을 전달하는지 알아야 합니다. 물론 Props 는 이름이 왜 붙었는지 몰라도 이 책의 실습 내용을 진행하는 데 문제는 없습니다. 따라서 만약 아래의 내용이 잘 이해되지 않는다면, 잠시 건너뛴 다음 실습을 마치고 다시 살펴볼..
리액트란? 리액트는 프론트엔드 3대장 중 하나다. 리액트를 반드시 배워야 한다. 취업에 필수다. 등등 이런저런 이야기를 듣고 저는 리액트라는 기술스택을 쌓으려고 합니다. 이렇게까지 주목받으니 리액트는 복잡하고 대단한 기술일 것 같지만, 그렇게까지 복잡하고 거대한 개념은 아니고, 단순히 자바스크립트의 라이브러리일 뿐입니다. 리액트는 현재 메타로 회사명을 바꾼 페이스북의 개발자들이 만든 오픈소스 프로젝트입니다. 이 리액트를 사용하는 데에는 비용이 들지 않고, 또는 오픈소스에 기여하기 위해 직접 리액트의 다음버전의 코드를 추가하는 기여를 할 수 있습니다. 무엇을 만들 수 있을까? 리액트는 특히 웹프론트엔드 기술로 알려져 있습니다. 그래서 대부분 사람들이 리액트라는 것은 웹 그 이상을 만들 수 없다고 생각할 수..
저번주 금요일(08/18)부터 진행했던 프로그래밍 기초2 알고리즘 문제가 35번, 시저 암호를 마지막으로 모든 문제에 대한 페어 프로그래밍이 끝이 났습니다. 페어 프로그래밍을 진행하면서 숱한 어려운 문제들을 만나며 좌절감과 프로그램의 방향성에 대한 고민을 갖기도 했지만, 팀원들과 커뮤니케이션이 잘 되고, 팀의 좋은 분위기 덕에 막 프로그래밍을 종료한 지금, 문제를 다 풀어서 얻는 해방감보다는 좋은 팀원들과 좀 더 오랜 시간을 갖지 못하는 게 아쉽습니다. 이번 게시글에 작성할 내용은 35번까지 알고리즘 문제를 풀면서 각자 문제마다 본인이 준 난이도가 있었는데요. 난이도가 △ 인 문제들과 X 인 문제들에 대해서 풀었던 소스코드와 설명을 함께 작성해보려고 합니다. https://github.com/yngjnh..
