[React🌌] 리액트 슬라이드 ⏩ / 캐로셀 (Carousel)
슬라이드? 캐로셀(Carousel) ! 우리나라 사람들은 보통 이렇게 버튼을 통해 자연스럽게 넘어가는 것을 슬라이드라고 부르죠! (영알못인 저만 그러는 걸수도..😂) 사실 이런 슬라이드는 정식용어는 캐로셀(Carousel) 입니다! 저도 처음엔 이게 뭔가 하고 Carousel 을 구글에 검색해보았는데 뭔가 무슨 느낌인지 와닿죠!? 아무튼 Carousel 이 올바른 표현입니다😀 + 참고로 슬라이드는 보통 음량조절할때 미는 그런 조절기구를 칭하는 것 같습니다. 아무튼 오늘은 리액트에서 이 캐로셀을 구현, 혹은 이용하는 여러 방법을 알려드리고자 합니다! 1. 직접 구현하기 직접 구현 하는것도 생각보다 어렵지는 않습니다. 슬라이드 모든 컨텐츠를 담을 하나의 Container 를 만들고 Overflow를 hidd..
2020. 12. 19.
[React🌌] 리액트 공식문서 함께 읽기 📘 / *️⃣ - 리액트 v17 Update 정리 / 17버전 달라진 점은?!
리액트 v17 Released 2020. 10. 20. 리액트 17버전이 배포가 되었습니다. (ko.reactjs.org/blog/2020/10/20/react-v17.html) 저로서는 어떤 변화가 생겼고, 새롭게 추가된 기능을 사용할 생각에 조금 설레기도 했는데요, 헌데 웬걸? 공식문서 첫 문장이 이렇게 시작하네요 더보기 리액트 17 릴리즈는 개발자-직접적인 기능을 새로 추가하지 않아 이례적이다. 대신 이 릴리스는 React 자체를 쉽게 업그레이드할 수 있도록 하는 데 주로 초점을 맞추고 있다. 저는 '개발자-직접적인 기능을 새로 추가하지 않아 이례적' 이라는 말과 'React 자체를 쉽게 업그레이드할 수 있도록 하는 데' 라는 말에 집중을 했는데요, 눈에 띄는 변화는 없을 것으로 예상이 됩니다..ㅠ..
2020. 12. 3.
[React🌌] 리액트 공식문서 함께 읽기 📘 / 4️⃣ - 리액트는 순수함수다 /
순수함수란? 순수 함수는 함수형 프로그래밍에서 자주 사용되는 개념입니다. 함수 중에서도 함수 내부의 명령들을 실행했을 때, 외부에 영향을 주지 않는 함수들을 순수함수라고 하죠. 전역 변수를 건들인다거나, 들어온 input 상태를 바꾼다거나 하면 전부 순수함수가 아닙니다! 함수형 프로그래밍은 input => output / output이 다시 다른함수의 input 으로 => output / 이런식으로 구현이 되기 때문에 함수는 들어온 input 에 맞게 정해진 일을 해서 그에 따른 output 을 내놓아야만 합니다! 순수함수의 예 function sub(n1, n2) { return n1 - n2; } Input인 n1 과 n2 에 따라 정해진 output 을 반환하고, 외부에 전혀 영향을 주지 않기 때문..
2020. 9. 8.
[HTML] a 태그 새 창에서 실행 / a 태그 속성 / target="_blank"
a 태그란? 다들 알고계실테지만 a태그는 하이퍼링크 를 만들어주는 태그입니다. 보통 다른 페이지로 갈 때 사용하긴 하지만 사실 하이퍼링크라는 것은 꼭 다른 페이지일 필요가 없습니다. 같은 페이지 내에 요소로 접근도 가능하고, 파일이나 이메일 주소로도 접근할 수 있습니다! href 외에 유용한 props 가장 흔한 href는 다들 아실테니 생략하겠습니다😀 그 외에 유용한 태그에는 download와 target이 있습니다. download 링크로 이동하는 것이 아니라, 사용자에게 URL을 저장할지 물어볼 수 있습니다. 브라우저에서 마우스 우클릭하고 다른 이름으로 링크 저장 을 실행하는 것과 같습니다! 설명이 너무 잘 돼있는 링크가 있어서 첨부합니다! taegon.kim/archives/5178 [HTML5]..
2020. 9. 7.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 5️⃣ - 키 입력받기
키 입력💥 이제 키를 입력받아서 구현해뒀던 함수들을 쓸 수 있게 만들어봅시다. 방향키를 누르면 그에 따라 게임판이 바뀌고, 아래 사진처럼 게임판 양쪽에 있는 전광판에 무슨 키를 눌렀는지도 나오게 해볼거에요! Arrow 스타일링 const ArrowContainer = styled.div` display: inline-block; position: absolute; top: 50%; right: 30px; background: #ea5455; width: 50px; height: 50px; text-align: center; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5p..
2020. 9. 6.
[React🌌] 리액트 공식문서 함께 읽기 📘 / 3️⃣ - 엘리먼트란?
엘리먼트란? 엘리먼트는 React 앱의 가장 작은 단위입니다. 갖춰져있는 React 개발환경에서 개발을 하다보면 컴퍼넌트는 엄청 자주써도, 엘리먼트에 대한 개념은 모호할 수 있습니다. (제가 그랬거든요 ㅎㅎ 😂 React 엘리먼트는 일반 객체입니다. 예를들자면 아래 예시의 color 는 엘리먼트입니다. 그리고 ReactDOM 을 통해 전달되죠. const color = 파란색 ReactDOM.render(color, document.getElementById("blue")) React 에서는 브라우저의 DOM 과 별개로 React DOM 이 존재합니다. React DOM 은 React Element 내용과 일치하도록 DOM을 업데이트 합니다! React DOM 에 렌더링을 해보자! index.html ...
2020. 9. 4.
[React🌌] 리액트 슬라이드 ⏩ / 캐로셀 (Carousel)
슬라이드? 캐로셀(Carousel) ! 우리나라 사람들은 보통 이렇게 버튼을 통해 자연스럽게 넘어가는 것을 슬라이드라고 부르죠! (영알못인 저만 그러는 걸수도..😂) 사실 이런 슬라이드는 정식용어는 캐로셀(Carousel) 입니다! 저도 처음엔 이게 뭔가 하고 Carousel 을 구글에 검색해보았는데 뭔가 무슨 느낌인지 와닿죠!? 아무튼 Carousel 이 올바른 표현입니다😀 + 참고로 슬라이드는 보통 음량조절할때 미는 그런 조절기구를 칭하는 것 같습니다. 아무튼 오늘은 리액트에서 이 캐로셀을 구현, 혹은 이용하는 여러 방법을 알려드리고자 합니다! 1. 직접 구현하기 직접 구현 하는것도 생각보다 어렵지는 않습니다. 슬라이드 모든 컨텐츠를 담을 하나의 Container 를 만들고 Overflow를 hidd..
[React🌌] 리액트 공식문서 함께 읽기 📘 / *️⃣ - 리액트 v17 Update 정리 / 17버전 달라진 점은?!
리액트 v17 Released 2020. 10. 20. 리액트 17버전이 배포가 되었습니다. (ko.reactjs.org/blog/2020/10/20/react-v17.html) 저로서는 어떤 변화가 생겼고, 새롭게 추가된 기능을 사용할 생각에 조금 설레기도 했는데요, 헌데 웬걸? 공식문서 첫 문장이 이렇게 시작하네요 더보기 리액트 17 릴리즈는 개발자-직접적인 기능을 새로 추가하지 않아 이례적이다. 대신 이 릴리스는 React 자체를 쉽게 업그레이드할 수 있도록 하는 데 주로 초점을 맞추고 있다. 저는 '개발자-직접적인 기능을 새로 추가하지 않아 이례적' 이라는 말과 'React 자체를 쉽게 업그레이드할 수 있도록 하는 데' 라는 말에 집중을 했는데요, 눈에 띄는 변화는 없을 것으로 예상이 됩니다..ㅠ..
[React🌌] 리액트 공식문서 함께 읽기 📘 / 4️⃣ - 리액트는 순수함수다 /
순수함수란? 순수 함수는 함수형 프로그래밍에서 자주 사용되는 개념입니다. 함수 중에서도 함수 내부의 명령들을 실행했을 때, 외부에 영향을 주지 않는 함수들을 순수함수라고 하죠. 전역 변수를 건들인다거나, 들어온 input 상태를 바꾼다거나 하면 전부 순수함수가 아닙니다! 함수형 프로그래밍은 input => output / output이 다시 다른함수의 input 으로 => output / 이런식으로 구현이 되기 때문에 함수는 들어온 input 에 맞게 정해진 일을 해서 그에 따른 output 을 내놓아야만 합니다! 순수함수의 예 function sub(n1, n2) { return n1 - n2; } Input인 n1 과 n2 에 따라 정해진 output 을 반환하고, 외부에 전혀 영향을 주지 않기 때문..
[HTML] a 태그 새 창에서 실행 / a 태그 속성 / target="_blank"
a 태그란? 다들 알고계실테지만 a태그는 하이퍼링크 를 만들어주는 태그입니다. 보통 다른 페이지로 갈 때 사용하긴 하지만 사실 하이퍼링크라는 것은 꼭 다른 페이지일 필요가 없습니다. 같은 페이지 내에 요소로 접근도 가능하고, 파일이나 이메일 주소로도 접근할 수 있습니다! href 외에 유용한 props 가장 흔한 href는 다들 아실테니 생략하겠습니다😀 그 외에 유용한 태그에는 download와 target이 있습니다. download 링크로 이동하는 것이 아니라, 사용자에게 URL을 저장할지 물어볼 수 있습니다. 브라우저에서 마우스 우클릭하고 다른 이름으로 링크 저장 을 실행하는 것과 같습니다! 설명이 너무 잘 돼있는 링크가 있어서 첨부합니다! taegon.kim/archives/5178 [HTML5]..
[React🌀] React로 2048 게임 만들기 ! 🎮 / 5️⃣ - 키 입력받기
키 입력💥 이제 키를 입력받아서 구현해뒀던 함수들을 쓸 수 있게 만들어봅시다. 방향키를 누르면 그에 따라 게임판이 바뀌고, 아래 사진처럼 게임판 양쪽에 있는 전광판에 무슨 키를 눌렀는지도 나오게 해볼거에요! Arrow 스타일링 const ArrowContainer = styled.div` display: inline-block; position: absolute; top: 50%; right: 30px; background: #ea5455; width: 50px; height: 50px; text-align: center; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5p..
[React🌌] 리액트 공식문서 함께 읽기 📘 / 3️⃣ - 엘리먼트란?
엘리먼트란? 엘리먼트는 React 앱의 가장 작은 단위입니다. 갖춰져있는 React 개발환경에서 개발을 하다보면 컴퍼넌트는 엄청 자주써도, 엘리먼트에 대한 개념은 모호할 수 있습니다. (제가 그랬거든요 ㅎㅎ 😂 React 엘리먼트는 일반 객체입니다. 예를들자면 아래 예시의 color 는 엘리먼트입니다. 그리고 ReactDOM 을 통해 전달되죠. const color = 파란색 ReactDOM.render(color, document.getElementById("blue")) React 에서는 브라우저의 DOM 과 별개로 React DOM 이 존재합니다. React DOM 은 React Element 내용과 일치하도록 DOM을 업데이트 합니다! React DOM 에 렌더링을 해보자! index.html ...