자기계발 캠퍼스

Hook 이라 함은 저번에 살펴본 UseState를 활용하는 것입니다. https://selfdevelopcampus.tistory.com/entry/ReactHook-useState-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0 React(Hook) - useState 활용하기 오늘은 리액트 훅 useState를 살펴보겠습니다. (링크: 리액트 훅 공식문서) const [count, setCount] = useState(0) count라는 변수를 const로 선언을 해주고 초기값에 0을 부여했다는 의미입니다. setCount는 c.. selfdevelopcampus.tistory.com 이 Hook을 사용하여 Array에서 push 메소드와 똑같은 기능을 하는 걸 만들어보려 합니다...

오늘은 리액트 훅 useState를 살펴보겠습니다. (링크: 리액트 훅 공식문서) const [count, setCount] = useState(0) count라는 변수를 const로 선언을 해주고 초기값에 0을 부여했다는 의미입니다. setCount는 count 변수를 조작해주는 콜백함수(?) 같은 녀석입니다. 이렇게 increase와 decrease라는 함수에서 setCount를 조작하였습니다. increase 실행 -> count에 1을 추가해서 count 값을 set해준다. decrease 실행 -> count에 1을 빼서 count 값을 set해준다. 그리고 각 버튼 onClick시 함수를 실행하게 설정해놓으면 즉시 화면에 더하기 빼기 된 결과가 출력됩니다. 우리가 신경쓰지 않아도 1이 계속 추..

emojipedia라는 토이 프로젝트로 array.map과 component를 결합하는 것을 배웠습니다. 위 화면을 띄우기 위해 component를 만들지 않으면 이렇게 App.jsx에 수많은 div들이 등장합니다. dictionary 클래스를 가지고 있는 dl 태그 안에 term 클래스를 가지고 있는 div가 반복되고 있습니다. (코딩할 때 반복이 보이면 무조건 함수를 사용하든 뭘 하든 줄이라고 배웠습니다.) 일단 단어가 들어갈 Entry라는 component를 만듭니다. emojipedia.js에 id, emoji, name, meaning의 데이터를 array의 방식으로 저장했기에 그 안에 props로는 name, emoji, description을 argument로 받을 수 있게 구성했습니다. (..

ReactDOM.render로 각종 HTML 태그를 입력해서 화면에 출력할 수 있었고 이를 잘게 쪼개서 component로 바꿀 수 있었습니다. Card 라는 component를 만들어서 를 여러개 입력하면 그만큼 출력이 가능하죠. (비욘세 누나 너무 아름다우시네...) 이렇게 component를 만든다면 비욘세 누나만 계속 나오고 다른 인물들을 추가하기 위해서는 새로운 component를 또 만들어줘야 합니다. (물론 저는 비욘세 누나 있는 component만 반복해서 출력해도 너무 좋습니다.) 하지만 아쉬워하실 분들을 위해 props라는 기능이 있습니다. HTML 태그 안에 속성부터 태그 안에 넣을 데이터까지 컨트롤이 가능합니다. 함수에 props라는 인자만 추가해준다면 말이죠. 라는 태그 안에 na..

이전에 배운 걸 토대로 h1과 ul을 화면에 출력시키려면 위의 코드처럼 작성하면 됐다. React를 들어보면서 component라는 말을 정말 많이 들어봤는데 드디어 오늘 처음 배웠다. 뭔가 새로운 걸 알았다는 설렘과 이렇게 편한데 내가 지금까지 한 건 뭐지...라는 회의감이 온다. 제목에 해당하는 h1태그를 Heading.jsx라는 파일로 따로 만들고 list에 해당하는 부분들을 전부 끌고 와서 List.jsx라는 파일로 따로 만들었다. jsx 파일 형식은 React에서 작동하는 자바스크립트이므로 꼭 앞에 React를 import 해주어야 한다. 그리고 각각의 파일 맨 마지막에는 Heading과 List를 default로 export 할 수 있도록 코드를 작성했다. 얘네를 이제 App.jsx 파일로 가..

HTML 태그에 class를 부여해서 styling을 하는 것 외에 태그 안에서 inline styling도 가능합니다. HTML에서 이렇게 작성하면 되는데 react에서는 object를 대입시키는 방식으로 작동합니다.

ReactDOM.render로 불러온 HTML에 CSS를 입혀보려 합니다. img 태그 3개를 불러와서 각각의 태그에 className을 붙여줍니다. ※유의사항 HTML 파일에서는 태그 안에 class = "class-ex1" 이런 식으로 클래스를 추가해주는데 React에서는 className = "class-ex"으로 클래스를 추가해주어야합니다. Camel Case로 써야한다는 점도 잊으면 안 됩니다. 각각의 img 태그의 class를 불러와서 height와 width를 100px로 맞춰보겠습니다. 그러면 위의 화면과 같이 사진 3개가 똑같이 100 x 100 으로 출력됩니다. img 주소를 담은 변수 img를 선언한 후에 src에 대입해줘도 됩니다. -lorem ipsum이 아무 텍스트를 가져와준다면..

오늘부터 React 공부를 시작했습니다. 그동안 vanila js만 계속 다뤘었는데 이제 새로운 프레임워크를 배운다고 하니깐 한편으로는 되게 설레네요ㅎㅎ 오늘 배운 내용 복습 들어갑니다. react와 react-dom을 import를 활용해서 불러옵니다. (npm 쓰듯이 require 써도 됩니다.) ReactDOM.render를 사용하는 방법은 위와 같습니다. express에서 render를 썼던 것과 똑같은 기능을 하는데 내용과 위치를 parameter로 받아야 합니다. body 안에 id가 root라는 div tag가 있다고 하면 그 안에 h1 태그를 넣으려고 한다면 그저 HTML을 입력하듯이 parameter로 입력하면 됩니다. 그러면 이렇게 Hello World!가 짠 하고 등장합니다. 단순 t..

express에서 사용할 수 있는 update 요청으로는 PUT과 PATCH가 있습니다. 위의 코드들은 PUT과 PATCH를 배우면서 사용한 예시 코드입니다. 언뜻 보기에도 큰 차이가 없죠. replaceOne, updatdOne이라는 mongoose API도 크게 다를 게 없어 보입니다. PUT과 PATCH는 데이터를 업데이트한다는 점에서는 일맥상통합니다. 하지만 그 방식이 다른 것이죠. 제 DB에 title이 HTML과 CSS인 두 개의 document가 있습니다. HTML에 해당하는 주소에 content를 WTF으로 바꾸는 PUT 요청을 해보겠습니다. 결과는 위와 같습니다. title이 HTML인 document를 찾아서 그 문서의 모든 내용을 content : WTF인 document로 바꿔버렸습..

Express를 사용할 때 app.get('/', (req,res)=>{ ~~~~~~ }) 이런 식으로 하는 게 가장 기본입니다. 하나의 경로에 GET, POST, DELETE 등 많은 요청을 처리하려면 일일이 다 따로 쳐야하나... 생각했습니다. app.get('/home') app.post('/home') Express는 역시 똑똑하더군요. app.route()를 통해 하나의 경로에 대하여 다양한 요청을 하나의 괄호 안으로 묶을 수 있습니다. 만약 '/articles'라는 경로에 대하여 get, post, delete 할 때 각기 다른 요청을 하고 싶다면 그냥 .get().post().delete()를 이어서 붙이면 됩니다. '/articles'라는 하나의 경로에 대한 다양한 요청을 '/article..