솔적솔적

안녕하세요, 이번에는 쇼핑몰이나 인스타그램에서 자주 보이는 좋아요 버튼을 만들어 볼 예정이예요. 클릭하면 숫자가 증가하는 버튼을 만들려하는데, 리액트로는 어떻게 만들어질까요? 차근히~ 알아가보죠! ​ (저번시간에 만든 App.js 파일 그대로 사용합니다.) 먼저 화면상에 클릭버튼 만들기. (아범은 누르는 버튼을 이모티콘으로 가져왔습니다.) 1. 클릭 시 숫자 증가하는 버튼 만들기 이 태크안에 클릭 이벤트를 넣어주고 클릭 시 실행될 함수를 넣어줘야한다. onClick={ 클릭될 때 실행할 함수 } ⇒ onClick={ ()⇒{실행할 내용} } ​ 그럼 처음 초기값은 0으로 셋팅을 하고 클릭 시 숫자가 변하는 방법을 써야한다. state를 이용해 변경을 하는 것이다. 이렇게 기존에 선언한 '좋아' 변수를 클..

저번시간에는 리액트에 대한 간단한 셋팅과 리액트를 쓰면 좋은 점들에 대해서 알아보았고, 이번 시간에는 리액트에서 데이터바인딩을 하는 법과 navbar를 만드는 법, 변수를 선언할 때 state로 데이터를 저장하는 방법에 대해서 알아보겠습니다. 그리고 혹시 보고 계신 분들 중에 🎲보드게임🎲이나 프로젝트📂에 관심있으신 분들 계신가요? 사이드프로젝트팀과 보드게임 중고거래 플랫폼을 진행하고 있는데, 기획부터 개발과정까지 오픈, IT관련 정보를 공유하자는 목적으로 팀과 함께 네이버 블로깅도 운영하고 있습니다. 관심있으신 분들이 있으시다면 살짝쿵 방문해주시면 감사하겠습니다. https://blog.naver.com/boardgetddo_team 보드살롱 : 네이버 블로그 즐겁고 유쾌한 기획자, 개발자, 디자이너, ..

안녕하세요, 리액트 셋팅부터 홈페이지를 만들 때 사용하는 기능등을 알아가려해요. 요즘은 리액트가 대세라고 곳곳에서 리액트를 쓰고있다고 합니다. 다들 리액트를 배우려는 이유는 Web app을 만들기 위해서! web app이 뭔데? Instagram, Vibe 이런 사이트들 우리가 다 사용! 이걸 web app이라고 하며. 이 web app을 사용하면 포스팅을발행하거나 다른 페이지로 넘어갈 때 새로고침을 굳이 안해도 자연스럽게 요청한 화면이 나오게 됩니다. web app을 사용하는 이유를 말해보자면 1. HTML 관리가 보다 편리, 2. 전환율 높음, 3. 리액트 문법으로 IOS/Android 모바일 앱제작도 가능, 4. 자바스크립트를 쓰지만 리액트를 쓴다면 더 간결명료한 코드로 구현가능, 5. 가독성이 좋..

이번 시간에는 Literal Types에 대해서 알아보자. 내가 어떤 변수를 만들 때 딱 5라는 값만 갖게 제한을 두고 싶으면 어떻게할까요? 네, const 변수를 사용하면 되지요. 근데 "흠~ 5아니면 6만 가질 수 있게 하고 싶다." 라면 어떻게 할까요? 그 변수에 number 이러 식으로 타입을 정해준다면 모든 숫자들을 넣을 수 있으니깐 범위가 커지게될 것인데.. 이럴 때 쓰는 변수가 바로 Literal type을 사용합니다. | Literal Type 만드는 법 let 짱아 : '아기'; let 짱구 : '어린이'; 지금까지 number, string, boolean 이런 것들만 타입을 지정할 수 있는 것이 아니라, 이렇게 내가 정한 것도 변수 또는 함수에 할당할 수 있습니다. 짱아란 변수는 '아..