728x90 반응형 Front Side17 [HTML/CSS] 자동으로 조절되는 세로줄 긋기 Start! 프론트엔드 개발자는 아니지만 태그를 이용해서 가로선을 만들 수 있다는 것을 알고 있었다. 개인 프로젝트에서 화면정의서를 만들다가 연출면에서 선을 세우면 좋겠다는 생각을 했다. 물론 피그마로 디자인을 할 때까지만 해도 이 선 세우는게 그렇게 오래걸릴 줄 몰랐다. 시행착오 끝에 세로줄 긋기에 성공한 나의 과정을 시작하도록 하겠다. 혹시 하는 방법만 알고 싶은 사람은 맨 아래 '정리'에 간략하게 정리해두었으니 참고하길 바란다. 예..? 선을 세우라고요?현재 개인 프로젝트로 만들고 있는 에는 스레드(내용)를 한 번에 볼 수 있는 List가 존재하고 디자인 요소를 넣기 위해 세로선이 필요했다. 처음엔 가로선을 그을 수 있는 태그로 만들 수 있다고 생각했는데.. 아니었다. 찾아보니 현재까지 세로선을 손쉽게 만들.. 2022. 12. 13. React에서 세션이 생성되지만 유지 되지 않는 Issue 해결 - withCredentials 옵션 현재 사이드 프로젝트 에서 Express와 React를 가지고 로그인 서비스를 만들고 있었다. https://bcoding-lab.tistory.com/m/350 Express에서 로그인 서비스 만드는 방법 with.Session 이미 7월 달에 세션으로 로그인 하는 서비스를 만들어본 경험이 있다. 근데 이번에 로그인 서비스를 구현할려고 하니 기억이 안나서 구글링이나 하고 있어 직접 포스팅을 해야겠다는 필요성을 bcoding-lab.tistory.com 하지만 이상한 현상이 포착되었다. 바로 postman에서 로그인을 하면 세션이 잘 유지가 되는데 React에서 로그인을 하면 세션이 생성은 되지만 유지가 되지 않는 Issue가 있었다. 너무나도 이상한 현상이라고 생각했다 😱 axios.post(`http.. 2022. 10. 17. [React] 회원가입과 로그인 서비스 구현 중 컴포넌트 재사용 (1) React에서 가장 좋은 장점은 컴포넌트 기반이기 때문에 재사용이 가능하다는 점입니다! 이번에 회원가입 서비스를 구현한 후 로그인 서비스 구현을 할려고 하니 이미 회원가입에서 만든 페이지를 재사용할 수 있겠다는 생각을 했습니다. 형식이 비슷해서 컴포넌트 재사용을 잘 활용해준다면 편리하게 개발할 수 있을 것 같습니다. 1. 부모 컴포넌트 만들기 - signup.js, signin.js 우선 url에 따라 사용될 로그인 컴포넌트와 회원가입 컴포넌트를 만들어줍니다. import React from 'react'; import AuthForm from './AuthForm'; const Signup = () => { return ( ); }; export default Signup; import React fr.. 2022. 10. 8. [React] useState() 바로 반영 안되는 현상 해결 회원가입 서비스를 만들려고 하는데 비밀번호와 비밀번호 확인가 일치할 때만 가입할 수 있도록 만들고 싶었습니다. 하지만 위와 같이 비밀번호를 동일하게 입력했음에도 불구하고 한 박자 느리게 useState가 반영되었습니다. const onChange = (e) => { setUser({ ...user, [e.target.name]: e.target.value, }) if(user.password === user.passwordCheck) { setIsPassword(true); } else{ setIsPassword(false); } } 코드를 보면 input에 상태값이 바뀔 때마다 onChange 함수가 실행되면서 만약password와 passwordCheck가 같다면 true로 바꿔주고 같지 않다면 fa.. 2022. 9. 21. [React] useEffect 두 번 호출?! with.StrictMode useEffect을 이용해서 백엔드로부터 받은 data를 확인하기 위해 console.log을 찍어보았습니다. 그런데..무려 두 번이나 콘솔에 찍혔습니다. 어째서 두 번이 호출된 것일까요? 🤔 root.render( ); 이유는 태그에 감싸져 있으면 개발 단계에서 오류를 잘 잡기 위해 두 번씩 렌더링 된다고 합니다! useEffect과 관련된 사항이 아니었군요. 그렇다면 StrictMode는 무엇일까요? 바로 React에서 제공하는 검사 도구입니다. 개발 모드일 때만 디버그를 하며 해당 태그로 감싸져 있는 컴포넌트의 자손까지 검사를 한다고 합니다. 공식문서 : https://ko.reactjs.org/docs/strict-mode.html Strict 모드 – React A JavaScript libra.. 2022. 8. 21. [React] 리액트 이해하고 사용하기 (3) useEffect useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => { setCoins(json) setLoading(false) }) }, []) useState는 값이 변화할 때마다 매번 실행되지만 useEffect는 단 한 번만 실행된다. 즉, 우리가 언제 코드를 실행시킬지 결정할 수 있다는 것이다. useEffect으로 우리는 아래와 같이 언제 코드를 실행시킬지 결정할 수 있다. 1. 처음부터 실행시키기 2. 특정 조건일때 실행시키기 알고보니 useEffect를 이러한 특성을 이용해 서버와 통신하여 데이터를 주고 받을 수 있다. 특정 조건일 때 서버와 통.. 2022. 8. 16. [React] 리액트 이해하고 사용하기 (2) useState() 이용해서 리렌더링 하기 const root = document.getElementById("root"); let count = 0; function countUp() { count += 1; }; const Container = () => ( 클릭수 : {count} 클릭 ); ReactDOM.render(, root); JSX를 이용해서 간편하게 HTML를 render해줬다. 인제 우리가 원하는 것은 버튼을 클릭하면 클릭수가 0에서 클릭한 수만큼 바뀌는 것이다. 버튼을 클릭하면 countUp이라는 함수가 동작하고 함수로 인해 count는 1씩 증가할 것이다. 그렇지만 실제로는 UI에서는 아무런 일도 일어나지 않는다❗️ 왜그럴까? 바로 리렌더링이 되지 않기 때문이다. 코드가 동작하는 것을 보면 리렌더링 즉 새로고침이 되지 않는.. 2022. 7. 30. [React] 리액트 이해하고 사용하기 (1) JSX JSX를 모르고 리액트를 이해할 수는 없다. 리액트 공식문서에서도 맨 먼저 소개되는 개념이 JSX일 정도로 중요하다. 공식문서를 보는 것도 추천하기 때문에 아래 링크를 참고하시길. https://ko.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org 클릭수 : 0 클릭! 순수 JS에서는 body에 HTML을 만들어준 다음 에서 기능이 동작하게 해줬다. 하지만 기능이 동작하게 하기 위해서는 document.getElementById라든지 document.querySelector라든지 HTML을 가지고 와야했다. 이 비효율적인 방식을 바꿔주는 것이 .. 2022. 7. 30. 이전 1 2 다음 728x90 반응형
