전체 글122 댓글 기능 구현하기 바닐라 자바스크립트에서 했던 댓글 기능을 리액트로도 구현해보려고 한다. DOM 직접 조작과 너무 달라서 한참 애를 먹었다. 멘토님께서 배열을 사용해서 해야한다고 힌트를 줘서 먼저 useState로 변수 선언 먼저 했다. 댓글이 들어가는 input 의 value를 가져오는 idValue, 만들어진 댓글이 들어갈 배열인 saveComment, 댓글이 한글자라도 적히면 버튼의 색을 바꿔줄 btnColor를 만들어주었다. const [idValue, setIdValue] = useState(''); const [saveComment, setSaveComment] = useState([]); const [btnColor, setBtnColor] = useState(0.3); 그리고 앞서 포스팅했던 로그인 버튼 활.. 2023. 6. 19. 로그인 버튼 활성화 구현하기 idValue의 값이 조건을 만족할 때 로그인 버튼이 활성화되고 버튼을 누를 수 있도록 만들고 싶었다. 그리고 버튼을 누르면 main 페이지로 이동할 수 있도록 만들어 주려고 했다. 바닐라 자바스크립트에서는 DOM을 직접적으로 조작하면서 input창의 값을 불러왔는데 리액트는 가상돔을 구현하기때문에 직접적인 DOM 조작을 할 필요가 없어서 뭔가 다른 산을 만나게 되었다. 일단 이번에 useState와 useNavigate 훅을 사용할 예정이기 때문에 import를 해주었다. import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import './Login.scss'; id와 pw의 input 창의 값.. 2023. 6. 19. CSS를 SASS의 한 종류인 Sass로 바꿔보기 기존에는 css로 레이아웃을 짜주었는데 css는 문법이 어려워 여러기능을 사용할 때 어려움이 있어 scss라는 문법이 나왔고 이 문법을 바꿔주기 위해 scss라는 파일 전처리기를 이용해 브라우저에게 css로 변환하여 보여준다. 이번에는 기존에 작업하던것에 scss를 적용해보려고 한다. [과제 2] 기존의 css 파일을 scss로 변경하고 그에 맞게 수정하기 variables.scss 파일과 mixin.scss 파일을 생성해주세요 variables.scss에 black, red, green의 색을 담는 변수를 만들어주세요 mixin.scss에는 두 개의 mixin을 만들어주세요 (flexCenter : 가운데 정렬, textStyle : font의 size와 weight를 인자로 넣으면 적용) Assign.. 2023. 6. 15. SPA로 구성된 React에서 Router 구현하기 리액트는 SPA로 html파일이 하나밖에 없는 라이브러리다. MPA처럼 다른 파일로 넘어가는것처럼 보여주기 위해 여러컴포넌트를 라우터를 이용해 옮겨다닌다. 우리는 한페이지짜리 웹을 만드는 것이 아니니까 라우터 기능을 필히 알아야한다. 이번에는 기존에 작업하던것에 라우터를 적용해보려고 한다. [과제 1] Router 컴포넌트 구현하고 Router 기능 구현하기 일단 먼저 link와 useNavigate를 쓸거기때문에 import를 먼저 해준다. 당연히 export도 미리 해준다. import React from "react"; import { Link } from "react-router-dom"; import { useNavigate } from "react-router-dom"; import "./In.. 2023. 6. 15. React로 컴포넌트 구성하고 이벤트 사용하기 리액트를 시작하고 처음으로 과제를 받았다. 사실... event를 DOM을 불러서 하던 바닐라 자바스크립트에 비해 쉬울거라고 생각했는데 역시 처음 배우는거라 조금 버벅거렸다.. [과제 1] 예시화면대로 컴포넌트 구성하기 [과제 2] input, button 태그에 event 적용하기 onChange 이벤트를 활용해주세요. handleInput 이라는 함수를 만들어서 onChange 이벤트가 발생했을 때 실행되도록 구현해주세요 handleInput 함수가 실행되면 개발자도구에 console 탭에 "input 태그 동작"이라는 메세지가 출력되도록 구현해주세요 onClick 이벤트를 활용해주세요. handleButton 이라는 함수를 만들어서 onClick 이벤트가 발생했을 때 실행되도록 구현해주세요 hand.. 2023. 6. 15. Console.dir이 뭘까? https://developer.mozilla.org/en-US/docs/Web/API/console/dir console: dir() method - Web APIs | MDN The method console.dir() displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects. developer.mozilla.org 먼저 공식문서를 첨부했다. 그 이후는 내가 이해한 내용을 쉽게 풀어내려고 한다... 2023. 6. 14. 이전 1 ··· 15 16 17 18 19 20 21 다음
