개발

리액트를 복습하고 리덕스를 좀 더 배우고 싶어서 패스트캠퍼스 강의를 신청하게되었다. 예전에 발급받았던 내일배움카드를 통해 신청할 수 있었다! 강의 초반은 기초 과정인 것 같아서 쉽게 들을 수 있었다. 내가 원하던건 리액트, 리덕스를 가지고 실습을 해보는 것이라서 앞 기초부분은 정리할 겸 들으면서 복습하고 있다. 듣다보니까 VS code에서 모르고 넘어갔던 단축키도 다시 상기시킬 수 있어서 좋았다. 😊 내가 초반에 무턱대고 배울 때 제일 어려웠던 부분이 '상대 경로와 절대 경로' 였는데 이 부분에 대해서 잘 정리를 해주신 것 같아서 정리해두려고 한다. 특히 상대경로의 개념을 설명할 때 '그 파일의 주변'이라고 말씀해주셨는데 처음 배우시는 분들이 듣고 빠르게 이해할 수 있는 부분일 것 같았다. 처음에 절대 ..

리액트 프로젝트에서 POST 기능을 구현하는데 파일을 업로드하는 부분도 만들어야 했다. 이 페이지는 내가 마크업을 하지 않아서 기능만 구현하고 있었다. 프로젝트 발표 후 웹접근성을 다시 고려해 리팩토링을 하고 있던 도중 문제를 발견했다. 파일업로드 부분은 tab key로 접근이 안된다는 점이다. 마크업을 살펴봤을 때 input이 display: none; 상태여서 접근이 불가능 했다. 그래서 고민을 하다가 tabIndex 를 주자 싶어서 코드를 수정했다. 코드를 수정한 부분은 div에 tabIndex 속성을 부여했다. 근데 여기서 tabIndex 만 주면 밑과 같이 eslint 가 경고를 한다. 이 오류를 해석했을 때 tabindex는 대화형 요소에서만 선언해야 합니다. 라고 알려주는 것이다. 잘 이해가..

리액트 프로젝트를 하면서 웹접근성에 맞게 리팩토링을 진행하고 있다. 마우스 없이 tab key로도 동작이 되도록 다시 코드를 수정하고 있던 도중 문제를 발견했다! 바로.. 등록버튼의 색상이 포커스됐을 때 색상과 비슷해서 티가 안난다는 것.. 뭔가 커지긴하는데 티가 안난다. 포커스가 잘 되는지 마는지 인식이 안된다. 그래서 focus 됐을 때 색상을 변경해줘야 한다고 생각이 들었다! 팀원들에게 조언을 구한 후 색상을 변경하자는 결론에 도달했고, 자료를 찾다가 여러가지 방법을 발견했다. 이 방법을 정리하기 전에 초점, 포커스링의 개념과 중요성을 알아야 한다. 초점 / 포커스링의 개념과 중요성 1. 초점의 개념 일상 속에서 우리는 무언가 집중해서 보거나 일을 할 때 초점이라는 단어를 쓴다. 컴퓨터에서는 키보드..

-프로젝트를 배포 후 리팩토링 및 추가작업을 위해서 test 브랜치의 것들을 새 브랜치에 pull 받고 실행시켰더니 이런 오류가 발생했다..! 이럴 때 경우는 여러가지가 있는 것 같다. 1. node 버전 최신화하기 - node -v 로 버전 확인 후, 최신 버전으로 올려준다. 2. npm 버전 최신화하기 - node 버전과 동일하게 최신화 시켜줘야 한다. 그래서 최신화를 시켜줬지만.... 동일하게 오류가 해결되지 않았다. 여기서 다시 드는 의문.. 에러이긴 한데 나는 `Cannot find package 'vite-plugin-svgr' ~` 가 나온다는 것. 이때 우리가 사용하기 위해 설치한 vite-plugin-svgr 이 불러와지지 않는다는 말인 것 같았다. 아까 npm i 로 다 설치해줬지만 혹..

리액트 프로젝트를 하다가 생각지 못한 문제에 부딪혔다! 바로 스크롤 유무에 따라서 화면이 왼쪽으로 밀리는 현상이 있다는 것.... 이 문제를 어떻게 해결해야할까 많은 고민을 했다. ❗️흔들리는 애플리케이션 인터페이스 Y축 이 문제를 해결하기 위해서 임의로 전체에 스크롤을 만드는 방법이 있었다. body { overflow-y: scroll; } 📢 여기서, 의문! 💬 과연 이 밀림 현상 하나 때문에 전체에 스크롤을 임의로 줘서 막아도 될까? 정답은 없지만.. 만드는게 더 낫다! 라는 결론이 나왔다. 나는 이런 문제가 사용자에게 혼란을 불러올 수 있다고 생각했다. (임의로 세로 축을 만드는건데, 왜 스크롤이 안될까? 라는 의문을 가질 수 도 있다고 생각했음) 그리고 다른 사이트들을 엄청나게 찾아봤다. 😮 ..

리액트로 프로젝트를 하면서 작성페이지의 firebase에 POST 요청 부분을 맡았다. 그 중 오늘 접한 쉽디 쉽지만(?) 나는 바로 알아채지 못했던 부분에 대해서 얘기하려고 한다. 일단 프로젝트 팀원이 select box를 그냥 마크업을 해놨다. 나는 POST 하기 위해서는 value 값이 필요했기 때문에 map을 이용해 리스트 렌더링을 해줘야했다. 팀원이 그냥 작성한 코드 여기서 state가 바뀔 때 마다 값을 가져와야 하기 때문에 useState()를 이용해서 상태를 만들어준다. (추후에 recoil로 상태관리를 할 것이다.) // select box const selectList = [ { value: "default", name: "토픽 선택" }, { value: "skill", name: "..

문제상황 Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key) 오늘 리액트 프로젝트를 진행하는데 콘솔창에 이런 오류가 떴다. pull request를 진행 후 새 브랜치를 파고 pull을 받아온 후에 이런 오류를 접했다. 처음 겪어보는 오류여서 팀원들에게 먼저 조언을 구했다. 한 팀원이 🧐 : .env 파일에 잘 넣으셨나요? 라는 말을 듣자마자 아! 하고 깨달았다. 우리팀은 firebase를 공동으로 사용하고 프로젝트 설정 내 SDK 설정 및 구성에 있는 key값을 .env 파일에 넣어 연동시켰다. 그리고 그 .env 파일을 .gitignore에 넣어놔 push를 할 때 같이 들어가지 않아 사라졌던 것이다. 해결방법 나는 .env 파일에 우리팀 ..

A11Y 는 무슨 말일까? 나는 이번에 이 단어를 처음 접하게 되었다. 아예 처음보는 단어라서 무슨 의미를 가지는지 보자마자 알 수 없었다. 하지만 웹 접근성과 관련된 단어였고 "Accessibility" 라는 단어를 축약형으로 사용된 것으로 시작되었다. 웹의 창시자인 팀 버너스 리는 웹을 "장애에 구애 없이 모든 사람들이 쉽게 정보를 공유할 수 있는 공간"이라고 설명했다. 이때 웹 접근성이 장애인을 고려하는 것도 있지만 꼭 장애인만을 고려해서 만드는 것은 아니다. 일상생활에서 계단의 경사로는 장애인을 위한 것일수도 있지만 무거운 짐을 들거나 유모차를 미는 사람에게도 접근하기 용이하다. 웹도 웹 접근성 지침에 "키보드만으로도 웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다." 라는 지침이 있다...

먼저 따로 직접 해보기 위해 새로운 branch를 생성했다. git branch 을 하면 새로운 branch가 생성된 것을 볼 수 있다. git switch 는 새로 만든 branch로 이동하도록 해준다. switch 외에도 git checkout 으로도 이동할 수 있다. 이때 좌측 하단에 trainig 부분을 눌러서도 변경할 수 있다. flex를 직접 실습하기 위해서 flex branch에서 css(style.css)파일을 복사해 training branch로 이동해 붙여넣기 해준다. flex 직접해보기 어떤 값도 주지 않은 기본형태이다. 1. container에 display값 주기 그룹을 감싸고있는 main 클래스에 display: flex 값을 준다. flex 값을 주면 요소들이 가로로 정렬이 된..

오늘은 직접 원격 저장소를 Clone(복제)하고 내가 버전관리를 하기위해 저장소를 만들었다. 1. 저장소 clone 하기 먼저 likelion 파일안에 들어가서 작업을 해야한다. 그리고 git clone 를 해주면 복제가 된다. 이때 복제가 잘 됐는지 확인하기 위해 ls (list) 확인해주면 된다. 2. .git 삭제 (중요) 이때 복제를하고 ls -a 를 하면 모든 파일이 보여지는데 이때 .git 파일을 삭제해야한다. 이유는 복제 후 main 이라고 뜨는 것은 이미 git이 관리하고 있다는 뜻이다. (commit 이력이 있고 history가 같이 딸려옴) 그리고 파일을 수정후 push 할 때 내가 관리하는 저장소가 아닌 가져온 저장소에 올라가게 된다. (가장 큰 이유) 마지막으로 .git 을 삭제하면..