본문 바로가기

WEB/REACT23

[React] React를 GitHub Page에 무료 호스팅하기(페이지 만들기) 오늘은 React JS로 작성한 코드를 어떻게 github page에 무료로 배포할 수 있는지에 대해서 공부해보았다. 가끔 블로그나 사이트들을 볼때 주소가 github.io라고 작성되어있는걸 많이 봤었는데, 이 호스팅에 대해 알기 전까지는 그냥 깃헙에서 만들어놓은 블로그인줄만 알았었다. 솔직히 이걸 알고나니 지금 완전 신세계다😲 지금 너무 삘꽂혀서 피곤한데도 블로그 포스팅을 하고 있다. 내가 오늘 깃헙 페이지를 사용해서 만든 웹사이트는 영화소개 웹이다. 위의 링크를 달아놓은것과 같이 내가 만든 사이트를 일시적으로 yarn(npm) start로 켜서 만든 사이트가 아닌 계속해서 볼 수 있는 사이트를 만들 수 있다. 웹에 들어가보기 귀찮은 분들은 아래 움짤을 보면 됩니당 GitHub Page github p.. 2021. 2. 2.

[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.

[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 다음

티스토리툴바