개발/프론트엔드10 scss - 변수, mixin 사용하기 웹 개발을 하다 보면 pc에서 보이는 것과 모바일에서 보이는 것을 구분하고 싶을 때가 있습니다. 헤더의 경우 pc에서는 펼쳐서 보여주고 모바일에서는 햄버거를 이용해서 보여줄 때가 있습니다. 이런 경우 css에서는 media쿼리를 이용해서 개발을 했는데요, scss의 mixin을 이용하면 조금 더 편하게 코딩이 가능합니다.변수와 mixin 세팅src 폴더에 _variables.scss 파일을 하나 만듭니다. 이 파일에 변수들을 넣을 것입니다. 저는 992px 아래로는 모바일로 분류하기 때문에 아래와 같이 넣어주었습니다. 헤더의 높이나 하드코딩을 해 둘 변수들을 넣어두면 편합니다. 같은 위치에 _mixin.scss 파일을 만들어 줍니다. 아래와 같이 입력해서 pc와 mobile을 구분해 주었습니다. impo.. 2024. 11. 29. react - path parameter 게시글이나 특정 페이지를 보여줄 때 https://codestudycafe.tistory.com/149 처럼 url의 숫자를 이용하는 경우가 있습니다. 이것을 동적 라우팅이라고 합니다. 리액트에서 이런 기능을 사용해 봅시다.동적 라우팅routes에서 :id를 이용해서 변수를 받을 수 있습니다. 그리고 useParam을 이용해서 값을 받을 수 있습니다. 몇번째 게시물, 몇번째 상품 등을 보여줄 때 해당 기능으로 보여주면 됩니다. 주의사항위 예시도 그렇고 대부분의 경우 id는 숫자입니다. 그럼 유저는 url의 id를 조작해서 권한이 없는 게시글(ex. 비밀글)에 들어갈 수 있습니다. 백엔드에서 이러한 경우 데이터를 내려주지 않도록 잘 막아주어야 합니다. 2024. 10. 22. react - useContext react로 웹을 만들다 보면 전역변수를 가져와야 할 때가 있습니다. 이때 Context를 이용해서 해결할 수 있습니다.로그인 상태를 저장하는 전역변수를 만든다고 해봅시다.createContext를 이용해서 context를 만듭니다. 를 이용하면 이 안에서는 해당 context 값을 읽고 쓸 수 있습니다.useContext를 이용해서 값을 읽을 수 있습니다. 같은 파일에 useAuth 함수를 만들어서 값을 export 합니다. 이 함수를 호출해서 값을 읽을 것입니다. 값을 읽고싶은 파일에서 useAuth를 호출해 isLogin과 setIsLogin을 받습니다. 그럼 isLogin과 setIsLogin을 사용할 수 있습니다. 2024. 10. 12. react - useEffect react를 하다 보면 화면이 처음 보여질 때나 특정 값이 바뀔 때 실행했으면 하는 경우가 있습니다. 이런 경우 useEffect로 해결할 수 있습니다.관리자 페이지가 있다고 해봅시다. 이 페이지가 처음 보여질 때 관리자가 맞는지 체크할 것입니다. useEffect() 안에 함수를 넣어서 어떤 것을 실행할 지 정할 수 있습니다. 마지막에 []를 넣으면 처음 화면에 보여질 때만 실행합니다. 이 코드는 todo list의 일부입니다. api를 호출해서 해야할 일의 목록을 가져오고 있습니다. 그러면 이런 에러가 여러분을 반겨줍니다. 이것은 useEffect에서 async를 사용했을 때 나타나는 현상입니다. 이 경우 아래와 같은 꼼수를 쓸 수 있습니다. 만약 일의 목록이 갱신될 때 마다 일의 개수를 출력해주려면.. 2024. 10. 9. react - useState react로 개발을 하다 보면 값이 바로 반영이 안 된다는 것을 느낄 때가 있습니다. 이 코드 같은 경우 버튼을 누르면 x값이 올라가도록 하는 프로그램입니다. 하지만 버튼을 누르면 x가 바뀌긴 하지만 화면에는 반영되지 않습니다.react의 경우 렌더링을 통해서 화면의 정보를 갱신해 줍니다. 하지만 변수가 바뀔 때마다 랜더링을 하면 불필요한 갱신이 발생할 수 있습니다.이런 경우 useState를 이용해서 해결할 수 있습니다. 이렇게 하면 setX를 호출할 때 마다 화면을 새로 랜더링해 줄 수 있습니다.뭔가 이상합니다. setX를 통해 x를 증가해 줬는데 console.log에는 증가하기 전의 값이 보이고 있습니다.이것은 비동기 때문에 그렇습니다. useState의 상태는 비동기적으로 업데이트됩니다. plu.. 2024. 10. 8. react - 소스 코드로 페이지 전환 헤더의 우측 상단에 로그인 탭이 있는 경우가 있습니다. 해당 탭을 누르면 로그인 창으로 이동합니다. 해당 기능을 구현해 봅시다.Nav 디자인우선 nav탭을 디자인해 봅시다. Navbar.Text : nav창의 우측 상단에 보여줍니다. text라고 되어 있지만 안에 넣은게 버튼이여도 됩니다.Button : 예쁜 버튼입니다. 그냥 버튼이 아니라 예쁜 버튼입니다.onClick={move} : 클릭 시 move함수를 호출합니다.variant="primary" : 예쁜 파란 버튼을 보여줍니다. 이렇게 하면 화면이 큰 상태에서는 이렇게 보이고 줄어들면 이렇게 보입니다. 오른쪽 위 버튼을 누르면 창이 열리면서 버튼도 함께 보입니다.탭 이동탭은 useNavigate를 이용해서 이동할 수 있습니다. onClick을 .. 2024. 9. 20. 이전 1 2 다음
