본문 바로가기

리액트21

[React] styled-components 📖리액트를 다루는 기술📖을 공부하다가 14장에서 뉴스뷰어를 만드는 부분에서 처음으로 styled-components에 대한 부분이 언급되었다. 이 덕분에 페이지는 이쁘게 완성되었지만 왜 css, sass(scss)를 이용하지않고 styled-components를 사용한 것일까? 이런 궁금증을 얻게 되어 나는 다시 구글링을 시작했다. 구글에 "styled-components"를 쳐보았더니 이 웹사이트가 떴다. 스타일드 컴포넌트의 공식 웹사이트인가 보다. 이 사이트에 딱 처음에 들어가자마자 보면 이렇게 쓰여져있다. Visual primitives for the component age? 일단 뭐 비주얼적으로 도와준다는 소리같다 Use the best bits of ES6 and CSS to style you.. 2021. 2. 3.

[React] 영화 웹 오늘은 내가 몇일 전에 만든 영화 웹을 만들면서 전반적으로 썼던 기술?들을 정리해보려고한다. 이 프로젝트는 노마드 코더님의 강의를 바탕으로 했으며, 전체적으로는 결과물이 비슷하나 누르면 줄거리만 나오는 화면이 나오는 것과 About화면의 css등 자잘하게만 응용을 해서 수정을 했다. 이번에 이렇게 전체적으로 프로젝트를 해보니까 리다기에서 책으로만 보고 예제를 따라하며 이해했던 것 그 이상으로 많은 것을 느낄 수 있어서 너무 좋았다. 이 때 이 개념이 여기에 쓰이는거구나!!하면서 반갑기도 하고 잘못이해했던 부분들을 고칠 수 있어서 재밌었다. 새로 알게 된 부분 중에 깃헙 페이지가 있어서 너무 신나 프로젝트를 끝내자마자 바로 블로그 포스팅도 하나 했었다ㅎㅎ... 그래서 전체적으로 정리해놓으면 나중에 보기에도.. 2021. 2. 3.

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

[JavaScript] map 함수 리액트를 사용하고 공부하다보니 자바스크립트 문법에 대해 부족한 점을 많이 느껴 자세히 공부하기로 마음먹었다. 자바스크립트 문법을 보다 정확하게 알고있어야 리액트를 하는데도 온전히 내것으로 만들 수 있는 것 같다. 그렇게 코드에서 내가 자주 사용했던 함수들 위주로 작성해보려고한다. 오늘은 map함수에 대해서 알아보려고 한다. 이 글은 MDN 과 제로초님의 블로그를 참고해서 작성하였습니다. map 함수 배열.map((요소, 인덱스, 배열) => { return 요소 }); arr.map(callback(currentValue[, index[, array]])[, thisArg]) map함수는 위와같은 구문을 가지고 있다. 두가지 구문표현방법은 나는 아래의 표현보다는 위의 표현이 더 와닿았던 것 같다. 배열 .. 2021. 2. 1.

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

이전 1 2 3 4 다음

티스토리툴바