개발하고 싶은 초심자

이전에도 한 번 정리해둔 글이 있었는데, 이 때는 리액트 버전이 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에서 를 로 감싸주지 않아 나온 에러였다. 정말 기본적인 부분이라서 놓친 것에 대해 어이가 없었지만, 그만큼 내가 기본적인 부분도 놓칠 정도였구나 싶어 더 열심히 해야겠다 다짐하게 되었다.

공식적인 근무 종료는 2월 3일이었지만, 근무를 종료하는 마지막 날까지 맡은 업무를 마무리하느라 한동안 블로그에 글을 작성하지 못했다. 결론적으로는 코드스테이츠 내의 다른 포지션으로의 전환을 시도해 볼 수 있었지만, 고민해 본 결과 그렇게 하지 않기로 했다. 내가 결정을 내리는 데 기준을 세우려 스스로 던졌던 질문들은 다음과 같았다. 나는 개발자가 되고 싶은걸까? 내가 해당 포지션으로 전환을 하면, 이 길에 만족할까? 이 선택을 했을 때, 언젠가는 후회할까? 세 가지 질문은, 어떻게 보면 같은 결의 질문이다. 하지만 이 질문들은 내가 마구잡이로 했던 생각들과 질문들 중, 제일 중요하다고 생각하는 부분들을 작성해 본 것이다. 그렇다면 먼저 첫 번째와 두 번째 질문에 대한 답변들을 함께 정리해보고자 한다. ..

실질적으로 업무를 한 기간(주말, 연휴 제외)만 따지니 굉장히 짧아 보이는 기간이다. 하지만 플렉스에 보니 입사한지 158일이라고 적혀있네...시간이 빠르게 지나갔다. 입사했을 때와 상황이 달라지기도 했고, 눈떠보니 정규직 전환을 위한 오프보딩을 준비하고 있는 기간이다. 아직 제대로 정해진 것이 없기 때문에 이렇다 저렇다 내가 쓸 수는 없지만, 어떻게 보면 새로운 길을 위한 준비를 하고 있다. 처음 코드스테이츠에 입사할 때만 해도, 전형 진행하는 동안 여기 입사하게 되기만 하면 소원이 없겠다 라는 생각을 했던 적이 있었다. 사람이 참 간사한 것이, - 그렇기 때문에 사람인걸까 - 지금은 정규직 전환만 시켜주면 좋겠다 라는 생각을 한다. 이 회사에 있으면서 느낀 점도 많고, 배운 것도 많지만, 정작 내 스..

수강생의 질문을 받다가, 어김없이 내가 학습하게 된 내용에 대해 간단하게 작성해보고자 한다. 질문내용은 항목을 수정할 때 처음 입력했던 내용이 나오지 않고 새로고침하기 이전의 내용으로 나온다는 것이었다. 소스코드를 제공받아 직접 레포지토리를 포크하고 클론하여 코드를 살펴보았는데, 페이지네이션을 활용하여 인덱스를 주고 있었는데 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..