본문 바로가기

react21

[React] ContextAPI를 사용해서 TodoList만들기(1) : styled-components 리액트를 다루는 기술에서는 투두리스트를 만드는 예제를 만들어봤었는데, 그 때와 다르게 이번에는 contextAPI를 이용해서 투두리스트를 만들어보았다. 아직 contextAPI에 대해서 누구에게 설명할 수 있을만큼 정리가 안되어있다는 생각이 들어서 다시 새로운 마음으로 공부를 해봤다. 그래서! 이번 포스트에서는 contextAPI에 대한 개념들에 대해서 설명하고, 투두리스트 코드를 보면서 다시 정리해볼 생각이다. contextAPI를 사용한 투두리스트 예제는 벨로퍼트님의 이 글을 참고해서 작성했습니다. 먼저 styled-components를 사용해서 투두리스트를 꾸며줬는데, 거기서 사용된 스타일링에서 내가 잘 몰랐던 부분들에 대해 적어보려고 한다. createGlobalStyle : 이 기능은 페이지 전.. 2021. 1. 31.

[React] 댓글기능 구현 📖요즘 리액트를 어느정도 공부하면서 내 힘으로 간단한 결과물을 만들어보고 싶다는 생각에 블로그? SNS?와 같은 형식의 게시물과 댓글과 좋아요를 구현할 수 있는 페이지를 만들고 있다. 하나의 싱글페이지를 만드는 것도 이렇게 많은 시행착오가 필요한 걸 겪어보니, 아직 갈 길이 많이 멀다는 생각이 들었다😥 이 글은 이번 페이지를 구현하면서 내가 겪었던 오류들과 이를 해결한 방법과 왜 그렇게 써야만하는지 그 이유에 대해서 써보려고한다. 이번에 겪은 오류는 input태그로 이름과 댓글의 내용을 입력받아 댓글을 띄우는 기능을 구현하고 있었는데, 입력받은 내용들이 뜨지 않고 빈 칸이 뜨는 것이었다. 댓글의 입력을 받는 코드가 작성되어있는 commentInput.js의 코드는 아래와 같다. import React, .. 2021. 1. 25.

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.

이전 1 2 3 4 다음

티스토리툴바