본문 바로가기

리액트21

Sass사용 오류 & Sass를 CSS로 바꾸기 리액트를 공부하면서 많은 예제들을 접해서 코드를 작성하는 중에 Sass를 사용하는 예제들을 많이 맞닥드렸다. CSS와 다르게 중복되지 않게 재활용성을 높여주고, 코드의 가독성을 높여준다는 혹하는 매력과는 달리 나는 엄청난 오류폭탄을 맞이했다.😥 오늘 이 포스트의 순서는 SCSS사용하면서 발생했던 오류 SCSS 코드 => CSS코드 🤯SCSS 실행 오류 node sass version 5.0.0 is incompatible with ^4.0.0. scss코드를 작성한 후, 실행을 하면 이런 오류가 나타났다. node sass의 버전이 안맞는다는 것 아닌가,,, 그래서 바로 구글링을 해봤다. stackoverflow.com/questions/64625050/error-node-sass-version-5-0-.. 2021. 1. 13.

[React] 투두리스트 컴포넌트 구조&코드 분석 📖리액트를 다루는 기술을 통해 공부한 내용을 바탕으로 작성한 포스트입니다.📖 오늘은 그동안 배웠던 컴포넌트들을 중심으로 할 일을 작성하고 기록하는 투두리스트를 만들어보았다. 처음으로 컴포넌트를 사용해서 완성된 한 페이지를 만들어보는 거라 예제를 따라하면서도 컴포넌트간의 구조와 세세하게 쓰이는 속성들에 관해 더 자세하게 알고 싶었다. 그리고, 코드를 작성하는데 있어 궁금한 부분들이 많이 있어서 정리해보았다. 일단 정리한 부분은 투두리스트의 컴포넌트 구조 import cn from {classnames}; 리액트로 만든 투두리스트 코드 원래는 코드를 다 따로 올리려고 했지만, 만든 파일도 많고 하다보니 가독성이 떨어질 것 같다는 판단하에 깃헙을 올리는 게 더 나을 것 같다. github.com/MinJoo-.. 2021. 1. 11.

[React] 훅(Hooks) 📖리다기, 공식문서, 노마드 코더, 제로초님의 영상을 보고 제가 이해한 내용을 바탕으로 정리한 글입니다.📖 리다기에서 8장에 훅에 대한 설명이 나온다. 예제를 따라하면서 해보았지만 8장까지 휘뚜루마뚜루 달려서 그런가 뇌에 과부화가 와서 머리가 받아들이기를 거부를 하는 것 같았다. 하지만, 8장까지 했을때 이 부분이 비중이 있고 중요하다고 느껴졌기 때문에 하루 쉬고 하루 다시 날 잡아서 공식문서와 책, 영상을 가리지 않고 찾아본 결과 어느 정도? 조금은? 이해를 할 수 있었다.😥 우선 제일 중요한 포인트는 개념을 어느 정도 이해를 하고 예제를 다시 해보는것!이 이해를 하는 데 많은 도움이 됐다. 또, 노마드 코더님의 영상과 제로초님의 훅에 대한 영상이 도움이 많이 됐다. 훅은 함수형 컴포넌트에서 state.. 2021. 1. 6.

[React] 스크롤박스 코드에 위아래 이동 기능 구현 📖리액트를 다루는 기술📖 책에 있는 ref예제인 스크롤 박스 조작 코드는 '맨밑으로'라는 버튼을 누르면 자동으로 스크롤을 맨 밑으로 내려가게 해주는 내용이다. 하지만, 나는 여기서 응용하기 위해서 버튼을 누를 때마다 스크롤 박스가 위, 아래로 이동할 수 있도록 구현하고 싶었다. 리액트를 다룬지 얼마 되지 않아 처음에는 이미 작성되어져 있는 코드를 어디서부터 손 대야 될지 막막했지만, 앞에서 했던 예제들을 이용해서 곧장 방법을 찾아낼 수 있었다. 일단 스크롤이 내려가있을때는 버튼을 누르면 올라와야하고, 올라가있을 때는 내려와야하기 때문에 상황에 따라 값이 달라지기 때문에 이에 대한 초기값들을 설정해줘야한다. 이에 따라 앞 장에서의 예제들을 떠올려서 state에 대한 초기값을 App.js에 설정해주었다. s.. 2021. 1. 2.

[React] ref 오늘은 ref에 대해서 공부해보았다. 리액트를 다루는 기술 책을 보면서 공부를 하다가 ref에 대해서 이해가 부족해서 공식문서를 찾아보게 되었다. ko.reactjs.org/docs/refs-and-the-dom.html ref(Reference) ref는 레퍼런스라는 뜻인데, 이를 번역하면 참조라는 말이다. 과연 코딩에서 참조라는 것은 어떤 것을 뜻하는 것일까? 원래 다른 언어를 배울 때, 참조는 복제와 비교가 되었었다. 복제는 파일을 복사하는 것이라면, 참조는 바로가기를 만드는 것과 같다고 비유되었다. 참조는 원본 파일에 대한 주소 값이 담겨있어서 누군가가 이 바로가기에 접근했다면 여기에 저장된 원본의 주소를 참조해서 원본의 위치를 알아내고 원본에 대한 작업을 하게 되는 것이다. 쉽게 말하면, 원격으.. 2021. 1. 1.

[React] render() 함수 render함수에 대한 궁금증은 오늘 컴포넌트에 관한 리액트 공식문서를 보다가 시작됐다. 함수형 컴포넌트와 클래스형 컴포넌트의 차이에 대해서 공부를 하다가 render함수에 대한 의문이 생겼다. 위 문서를 보다가 지금까지 예제로 작성해봤던 코드들과 다르게 ReactDOM.render라는 함수가 쓰인것을 보게 되었다. 지금까지는 클래스형 컴포넌트에서 state값을 변경하기 위해서 render함수를 작성하는 것 밖에 없었는데 ReactDOM.render함수는 과연 어디에 쓰이는 것일까?라는 궁금증에 이곳저곳에 찾아보았다. render함수에 대한 공식문서(ko.reactjs.org/docs/react-dom.html#render)를 보게 되었을 때, ReactDOM.render함수는 최신의 React 엘리먼트.. 2020. 12. 30.

이전 1 2 3 4 다음

티스토리툴바