본문 바로가기

WEB32

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

[JavaScript] filter() 📖리액트를 다루는 기술📖을 공부하면서 컴포넌트의 반복을 공부하면서 배열 객체의 내장함수를 많이 사용하였는데, 이를 좀 더 자세하게 알아보고 싶었다. 리다기에서 filter()메소드를 사용하는 예제가 있었다. 데이터를 제거하는 기능을 필터함수를 사용했다. const onRemove = id => { const nextNames = name.filter(name => name.id !== id); setNames(nextNames); }; 이 함수는 입력된 id를 받아서 그 id와 다른 즉, 해당된 id를 제외한 나머지 id에 해당되는 name들을 모아놓은 배열이 nextNames가 되는것이다. 그러고나서 setNames(nextNames)를 통해서 names값을 업데이트해주는것이다. 그렇다면, 여기서 fi.. 2021. 1. 24.

[JavaScript] push() & concat() 오늘은 리액트를 공부하다가 미뤄놓았던 궁금증을 풀어보았다. 📖리액트를 다루는 기술📖의 6장에서 내장함수에 대한 언급이 있었는데, 거기에 concat, filter와 같은 함수가 있었다. 그런데 concat 함수를 찾아보다보니 push함수와 비교가 많이 되길래 같이 공부해보았다. 이 두 함수들은 배열에 요소를 추가할 때 사용된다. 그럼 그 사이에서 두 함수의 차이는 무엇일까? 먼저, push 함수를 알아보고, concat함수에 대해서 알아보겠다. 왜 두 함수를 같이 비교하는것인가? 그 이유는 두 개의 배열을 하나의 배열로 합칠 때, 일어나는데 하나의 원소를 밀어넣는 push 대신에 concat을 사용하라고 두 함수를 같이 비교하는 것이다. 이 글은 MDN을 참고하여 작성하였다. push() push는 기존.. 2021. 1. 20.

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.

이전 1 2 3 4 5 6 다음

티스토리툴바