개발하고 싶은 초심자

Link의 밑줄을 없애는 방법까지 알아냈는데, 똑같은 방법으로 NavLink를 넣었을 때는 제대로 동작하지 않았다. NavLink는 Link와 다르게 isActive라는 속성이 있어 삼항연산자를 활용하여 스타일을 지정해 줄 수 있는데, NavLink를 사용했을 때 밑줄이 나오지 않게 하면서 클릭했을 때 글씨 색깔도 바꿀 수 있는 방법이 없을까? 하다가 &(ampersand)를 활용하여 해결했다. import { NavLink } from "react-router-dom"; import styled from "styled-components"; const AllNavLink = styled(NavLink)` color: black; &:link { text-decoration: none; } &.activ..

리액트를 사용할 때, Link 혹은 NavLink를 활용하여 내가 이동하고자 하는 url을 링크할 수 있다. 이때, 밑줄이 그어져 있는 것이 기본이라 없애려고 많은 사람들이 text-decoration: none;을 활용하는데, 이상하게 내가 똑같이 하면 안 된다. 똑같은 상황이 생겼을 때 구글링이 아닌 내 블로그에서 찾아볼 수 있도록, 그리고 혹여 누군가가 구글링을 하다가 흘러들어오게 되었을 때 도움이 되길 바라면서 정리해두기로 했다. 우선, text-decoration 속성은 말 그대로 텍스트를 꾸며주는 속성이다. 기본값이 none이며, 다른 상황에서도 필요에 맞게 사용할 수 있다. 간단하게 text-decoration이 뭔지 설명했으니, 본론으로 들어가서 내가 하는 none 속성은 왜 동작하지 않을..

이전에도 한 번 정리해둔 글이 있었는데, 이 때는 리액트 버전이 17이라서 useLocation()과 index.js 파일 구조를 BrowserRouter로 감싸줌으로서 해결했었다. 하지만 지금은 리액트 버전이 18이기 때문에 해당 방법으로는 해결할 수 없었다. 그래서 이번에는 조금 더 간단한 방법으로 해결하면 좋을 것 같아 구글링하다 해결한 방법으로 정리해보았다. 일단, 현재 경우에서는 로그인을 할 때는 Header와 Sidebar를 나오지 않도록 하는 것이다. (Outlet을 활용하여 상위 컴포넌트 레이아웃화 시키기는 여기 정리해두었다) 이제 로그인 화면에서 Header와 Sidebar를 나오지 않게 하는 것은 더 쉽다. // App.js ... function App() { return ( ); }..

(참고링크) 페이지를 만들어보다가, 간단한 페이지 하나를 만들어도 레이아웃을 짤 때 계속 복잡해지고 있어 조금 더 간단하게 레이아웃을 짤 수 있는 방법을 찾게 되었다. 그리고 지금은 모든 페이지에 Header와 Sidebar 컴포넌트가 나올 수 있도록 만들지만, 추후 나오지 않을 페이지도 만들 것까지 고려하여 코드를 작성할 때 어떻게 할 수 있을까?를 고민하다 찾은 방법이 Outlet이다. Outlet을 설명하기 위해서는 먼저 중첩 라우팅이 뭔지, 어떻게 사용하는 것인지에 대한 이해가 먼저다. ✅ 중첩 라우팅 (지금은 중첩 라우팅을 활용하지 않는 페이지들만 있지만, 추후 들어갈 수 있게 하기 위해 설명을 같이 작성한다) v6에서 중첩 라우팅이 컴포넌트의 children과 같은 개념으로 중첩이 가능해졌고..

(참고링크1) (참고링크2) (참고링크2는 CSS flex에 대해 헷갈리면 자주 들어가보는데, 도움이 많이 된다) 예전에 부트캠프에서 CSS flex를 학습할 때도 언급되었던 내용이었지만, 정확하게 어떤 의미인지 잘 알지 못한 채 넘어갔고, 그러다보니 제대로 활용할 수 없었다. 이번에는 뭔지 제대로 알고 넘어가기 위해 찾아보고 정리한 내용들을 글로 작성하게 되었다. 일단 flex 속성은 flex의 세 속성을 한 번에 작성하기 위한 단축 표현이다. 세 속성은 각각 flex-grow, flex-shrink, flex-basis다. 각각의 의미는 이렇게 정리해볼 수 있다. 1. flex-grow • flex-basis(flex item의 기본 크기)보다 늘어날 수 있는지 결정하는 속성 • 디폴트 값은 0, i..

항상 Header와 Footer를 구분 지을 때는 색상으로 구분을 지었었는데, 생각해 보면 항상 그렇게 해야만 구분을 지을 수 있었던 것은 아니었다. 그래서 밑줄(이라는 표현이 맞는지는 모르겠지만)을 그어 Header와 Sidebar, Footer를 구분짓고 길이를 조절할 수 있는 방법에 대해 찾아보기로 했다. MDN 을 찾아보면서, border 속성으로 할 수 있다는 것을 알게 되었다. 단순 border속성은 테두리를 지정할 수 있는 속성이지만 top, bottom, left, right의 위치를 지정해 줌에 따라 내가 원하는 대로 줄을 지정할 수 있다. .classNameOne { ... border-bottom: thick double #32a1ce; } 이렇게 순서를 맞추어 줄의 두께, 종류, 색..

퇴사 후 자꾸 써먹지 않으면 머리가 굳어버릴 것 같아 다시 한 번 이것 저것 기본적인 부분들부터 만들어보고 있었는데, 에러 메시지가 나왔다. Uncaught Error: useRoutes() may be used only in the context of a component. useRoutes는 로 감싸야합니다, 라고 나왔는데... App.js에서 를 로 감싸주지 않아 나온 에러였다. 정말 기본적인 부분이라서 놓친 것에 대해 어이가 없었지만, 그만큼 내가 기본적인 부분도 놓칠 정도였구나 싶어 더 열심히 해야겠다 다짐하게 되었다.

수강생의 질문을 받다가, 어김없이 내가 학습하게 된 내용에 대해 간단하게 작성해보고자 한다. 질문내용은 항목을 수정할 때 처음 입력했던 내용이 나오지 않고 새로고침하기 이전의 내용으로 나온다는 것이었다. 소스코드를 제공받아 직접 레포지토리를 포크하고 클론하여 코드를 살펴보았는데, 페이지네이션을 활용하여 인덱스를 주고 있었는데 map을 활용하는 과정에서 key값이 문제가 되었다. import React, { useState, useEffect } from "react"; import Board from "./Board"; import dummyData from "../dummyData"; import uuid from "react-uuid"; function MainPage() { ... const [co..