개발하고 싶은 초심자

오늘은 하루 종일 개발 일정 맞추는 데에 시간을 보냈다. 자꾸만 일정이 밀려 초조해지고 더 불안해지고, 그러다보니 더 위축되는 것 같다. 처음에는 '이렇게 질문하는 것이 맞을까?' 였지만, 지금은 '내가 질문을 해도 되는 걸까?' 라는 생각이 더 많이 든다. 오히려 수강생 때보다 더 뒷걸음 친 것 같다. 이게 맞나...수강생이랑 다른 게 뭐지. 더 못하는 것 같은데. 쓴 소리를 들으면 우울해할 게 아니라 더 자극을 받아서 달려야하는데, 오히려 더 작아지는 느낌... 그래도 우울해할 틈이 없다. 계속 달려야한다. 일정 맞추기에 급급해도 그 안에서 해결하는 것들이 더 늘어나고 있으니까, 속도를 더 붙이면 되지 않을까. 태스크 체크리스트에 체크를 더 많이 하고 있으니까. 코드는 더 깔끔하게 정리해야겠지만, 처..

바쁘다는 것은 핑계라고 생각했는데, 블로그에 간단한 일기 정도를 못 남길 정도가 되었다. 매일 매일 작성하겠다고 다짐했는데, 일을 하다보면 그렇게 되지 못하는 경우가 생기는걸까. 1차 개발 기간이 점점 딜레이되고있다. 내가 맡은 부분에서 제대로 진행이 되고 있지 않다. 처음에는 실수할 수도 있고, 모를 수도 있지 라는 생각을 많이 하면서 첫 회사이니만큼 내가 얻어가는 것이 더 많아야한다는 생각으로 근무를 했는데, 요즘에는 지금까지도 이렇게 못해서 어떡하지, 내가 이 일에 적성이 맞지 않는 것은 아닐까 하는 생각이 들기도 한다. 감상에만 빠져있기에는 시간이 너무 없기 때문에 바로바로 빠져나오려 하는 편이기는해도, 그런 의문점이 생길 때 해소하는 방법을 잘 모르기에 더 그런 것 같기도 하다. 오늘의 고민들을..

(onKeyPress 이벤트도 있었으나 현재는 deprecated되어 권장하지 않는다고 한다) 보통 회원가입을 할 때 아이디가 중복되었거나, 혹은 입력하지 않았을 때 값을 입력하라고 나오는 메시지들이 있다. 그런 메시지들이 제대로 된 값을 입력했을 때에는 없어져야하는데, 이 부분을 키보드 이벤트로 구현할 수 있었다. 여러가지 키보드 이벤트들이 있지만, onKeyUp을 활용하였다. import React, { useState } from 'react'; const 내가하고싶은컴포넌트 = () => { const [입력값, set입력값] = useState(''); const [중복메시지, set중복메시지] = useState(''); const 키보드이벤트핸들러 = (e) => { if(e.key) { s..

(레퍼런스 링크) Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 개발을 하다가 상기와 같은 경고 메시지를 콘솔에서 발견했다. 솔직히 에러 메시지만큼이나 거슬리는게 Warning이지만, 구글링과 해석을 통해 하나씩 해결해나갔다. 해석) unmounted된 컴포넌트에 대해서는 상태 업데이트를 수행할 수 없다. 해당 작업은 수행되지 않지만 메모리 누수가..

페이지를 일일이 새로고침 해주어야지만 응답 데이터가 렌더링되는 것이 효율적이지 못하다고 생각해서 해결법을 찾아보다 나온 방법이다(실제로 해결이 되었다). const [state, setState] = useState(0); useEffect(() => { ... transState(); }, [state]); useState를 사용하는 방식으로 해결했다. useEffect 두 번째 인자에 값을 넣어주면 state라는 값이 변화할 때 마다 useEffect는 함수 호출을 하게 되는 식이다.

개발을 하다가 내가 원하는 그림으로 나오지 않아 한참 고민하다가 해결이 되어 블로그에 정리하게 되었다. 1. 클릭 이벤트를 작성할 때 그 안에 한 조건이 참일 때 두 가지 이상의 이벤트를 동작시키기 onClick={() => {condition1 ? value1 value2 : value3}} 위 코드는 올바른 문법은 아니지만, 보는 사람의 이해를 돕기 위해 정말 직관적으로 작성해봤다. (근데 작성해보고 나니 정말 저렇게 작동되면 좋을 것 같은데 왜 저렇게 못하게 했을까, 리액트 형님들(?)의 큰 뜻이 있는것일까...) 여러가지 방법들을 시도해보다, 결국 해답을 찾아냈다. 처음에 작성했을 때는 onClick={() => {condition1 ? () => {value1; value3}} : value2}..

오늘은 아침부터 몸상태가 별로 좋지 않아 많은 일을 하지 못한 것 같다. 시간은 많이 없는데 건강관리가 제대로 이루어지지 않는 것 같아 마음이 더 급해진다. 오후에 진행했던 회의를 제외하고는 전부 개발 시간으로 갈아넣었다. 하지만 보여지는 결과물이 왜 뚜렷하지 않을까. 여전히 나는 학습을 잘못하고 있는 것일까. 오늘은 지난 주 금요일에 급하게 정리했던 라이브러리 정리들을 하고, 그 과정에서 confirm box 재구현과 select box 구현이 있었다. confirm box를 sweetalert2라는 라이브러리를 사용했으나, 후에 알아보니 mui에도 confirm box 기능을 구현할 수 있는 mui dialog가 있다는 것을 알게 되었다. 정리하는 과정에 sweetalert2도 해당되었다. 그리고 s..

1. 처음 시도해본 방법 if (window.location.pathname === '/') return null; 구글링으로 찾아봤을 때 나온 방법이었다. 단순하게 헤더를 보이지 않게 하는 데에는 성공했으나 새로고침을 임의로 해주어야만 헤더가 없어지는 문제가 생겼다. 사이드 이펙트 내용: 임의로 새로고침을 한 후에 다른 페이지로 넘어가면 똑같이 헤더가 나오지 않는 문제. 2. 해결한 방법 // App.js import React, { useEffect, useState } from 'react'; import { Route, Routes, useLocation } from 'react-router-dom'; ... function App() { const [path, setPath] = useState..