전체 글
-
반복되는 components 처리 & keyFront End/React 2023. 5. 7. 18:12
위에 처럼 똑같은 박스가 연속으로 여러개 만들어 지는 상황을 생각해보자. 사실 우리가 보는 여러 웹사이트에는 같은 박스가 다른 글자만 가지고 반복되어있는 것을 확인할 수 있다. 이걸 우리는 하나하나 타이핑쳐서 개발할 수 없기 때문에 반복되는 component 들을 처리하는 방법을 알고 있어야 한다. 1. map 메소드 사용 반복되는 내용을 담는 자료형은 Array이다. 배열의 원소를 차례대로 꺼내올 수 있는 map 메소드를 사용하여 반복되는 component를 처리하자. 위의 그림에서 보는 것처럼 배열에 map을 사용하여 같은 모양의 박스에 배열의 원소를 넣어주는 방식을 사용한다. 이때, 관심갖고 봐야하는 것이 오른쪽 개발자 도구의 warning 창이다. Each child in a list should..
-
Styled Components & Css ResetFront End/React 2023. 5. 3. 21:56
지금까지 컴포넌트를 꾸미기 위해서는 css 파일을 생성하고 각 tage마다 classname을 넣고 그 class에 따라서 CSS 코드를 작성해줘야만 했다. 이런 과정을 조금더 쉽게 하기 위해 Styled-Components라는 package를 사용하여 css를 꾸며보기로 한다. 1. Styled Components 기본 원리 우선 styled components는 CSS-in-Js 방식이다. CSS-in-Js는 말 그대로 Js로 CSS를 작성하는 것이다. 즉, Js로 컴포넌트를 꾸미는 것이다. 이 때 사용하는 package들은 엄청 많지만 (예. emotion, tailwindcss 등) 가장 오랫동안 사랑받아왔고 현재도 많이 쓰고 있는 Style-Components를 사용해볼 것이다. 먼저 꾸미고자 ..
-
[항해 99] - 5주차 WILWIL 2023. 5. 1. 23:31
이번주는 React 입문 주차 였다. 어렵다는 느낌을 계속 받으면서 1차 과제를 끝냈기 때문에 숙련주차 들어가기 전에 입문 강의를 다시 듣고 있다. 숙련 강의를 빨리 들어야 제한시간 내에 2차 과제를 할 수 있을 것 같은데 입문 주차 내용도 헷갈리는데 그대로 들어가면 머리속이 카오스일 것 같아서 느리지만 입문 주차를 복습하고 있다. 🥕 이번 주 당근이는? 이번 주는 React의 컴포넌트와 props,state에 대해서 주로 배웠다. 물론 deep한 수준은 아니지만 벌써부터 휘청휘청 하는걸 보니 이 속도가 나한테 굉장히 적절한 것 같다는 생각이 들었다. 위의 개념을 간략하게 정리하자면 component : react의 핵심빌딩 블록으로 써 UI요소를 표현하는 최소한의 단위이다. props : 컴포넌트 사이..
-
Props & State 기초Front End/React 2023. 5. 1. 23:14
Props와 State에 대한 강의를 듣고 쪼개서 포스팅을 해야하나 고민했지만 둘다 Rendering에 영향을 주는 요소이기 때문에 한번에 기초적인 부분을 하나의 포스팅에 때려넣어볼까 한다. 그렇다면 이 두가지를 한번에 묶게된 이유인 Rendering에 대해 먼저 정리해보자. 1. Rendering 렌더링은 간단하게 말하자면 코드를 받아서 화면에 보여질 웹 페이지를 만드는 과정을 말한다. 이 때, 렌더링은 props와 state의 상태에 기초하여 발생하게 되는데 상태가 변경되었다는 것을 인식하면 컴포넌트에게 요청한다. 1) 렌더링이 발생하는 경우(trigger) 처음 react 앱을 실행했을 때 현재 react 내부에 state에 변경이 발생했을 때 컴포넌트 내부 state가 변경되었을 때 컴포넌트에 새..
-
yarn 에러 - yarn : 이 시스템에서 스크립트를 실행할 수 없으므로...Front End/React 2023. 4. 29. 10:49
C 드라이브가 아닌 E 드라이브에서 yarn 을 사용하려고 하니 권한 문제가 발생했다. 이 때는 yarn을 사용하여 설치할 수 있도록 권한을 부여해주면 된다. Get-ExecutionPolicy 를 통해 현재 권한 상태를 확인한다. 'RemoteSigned' 상태가 아니라면 Set-ExecutionPolicy RemoteSigned 를 통해 권한을 부여해준다. 한번더 Get-ExecutionPolicy 를 사용하여 권한을 확인하여 제대로 바꼈는지 확인한다. 이렇게 3줄의 코드로 해결 끝!
-
Component 기초Front End/React 2023. 4. 28. 23:27
간단하게 컴포넌트의 구조와 규칙에 대해서 정리하려고 한다. 우선 컴포넌트가 무엇인가? 내가 이해한대로 적어본다. 1. Component 란? 컴포넌트는 말 그대로 하나의 구성 요소이고 반복되는 로직이 발생하는 경우 사용한다. JS에서 정의하는 함수와 비슷하게 사용하며, UI를 재사용이 가능하도록 분리하여 개별적으로 관리할 수 있다. input은 props라는 데이터이고 output은 JSX라고 하는 UI 구조이다. 2. Component 구조 컴포넌트의 기본적인 구조는 위에 사진과 같다. import : 만들어진 컴포넌트, css 등 불러온다. component : 함수로써 선언하고 JS문법을 사용하여 만들어진다. return문에는 JSX 문법을 사용하여 UI를 생성한다. export : 새로 생성한 컴..
-
React 환경 구축(CRA)Front End/React 2023. 4. 28. 21:13
React를 구축하기 위해서 굉장히 많은 설치와 코드가 필요하지만 npm 혹은 yarn을 통해서 쉽고 빠르게 구축할 수 있다. 이때 사용하는 방식이 바로 CRA이다. CRA란? CRA는 Create React App의 줄임말로써 한 줄의 command 명령어로 React 프로젝트 환경을 구축해주는 것을 말한다. 이렇게 한 줄의 명령어로 쉽고 빠르게 환경을 구축해주거나 프로젝트를 생성 해주는 것들을 보일러 플레이트라고도 한다. CRA로 프로젝트 생성하기 프로젝트를 생성하고 싶은 폴더로 이동해서 딱 한줄의 코드만 치면 완성! yarn create react-app [프로젝트명] 위의 사진처럼 단 한 줄의 코드를 사용하면 자동적으로 yarn을 통해 react 프로젝트 환경을 만들어 준다. 잠시만 기다리면 아래..
-
[항해 99] - 4주차 WILWIL 2023. 4. 22. 00:19
4주차 동안은 JS의 알고리즘 문제들을 풀어봤다. JS의 메소드들을 다양하게 사용해볼 수 있었다는 것! 그리고 ES6 문법과 과거의 문법에 대한 차이를 확실하게 비교해 볼 수 있었 다는 것! 다른 사람의 코드와 나의 코드를 각자 리뷰하며 부족한 점을 세세히 채울 수 있다는 것 등등 너무 마음에 드는 주차였다. 🥕 이번 주 당근이는? 이번 주에 진행한 Pair Programming을 통해 다른 사람들의 코드와 나의 코드를 비교할 수 있어서 너무 유익한 시간이었다. 100명이 같은 문제를 푼다면 100가지의 코드 혹은 그 이상의 코드가 나올 수 있다는 것을 한번 더 깨달을 수 있었다. 사람들마다 효율성, 가독성 등 중요시하는 포인트가 다르다보니 다양한 관점에서 같은 문제를 바라볼 수 있다는 점이 많이 흥미로..