☁️

2주차에는 HTML을 중점적으로 배웠다. HTML은 뼈대라고 할 수 있는데 여러 사람들과 프로젝트를 하면서 이 뼈대가 참 중요하다고 다시금 느꼈다. 그리고 이번 강의를 들으면서 빈 태그에 관해서 개념을 잘 잡을 수 있었다. 원래 우리가 자주 쓰는 태그 유형 안녕하세요. 빈 태그 유형 또는 등 나도 처음에 코드를 배울 때 빈태그를 닫지않고 그냥 이런식으로 사용했었는데 XHTML/HTML5 부터는 안전하게 로 사용한다고 한다. 그래서 나도 이제 빈 태그를 사용할 때 이런식으로 사용하고 있다! 직관적으로 보이기도 하고 안전해서 이런식으로 써주는게 좋을 것 같다. 그리고 많이들 헷갈려하는 인라인 요소와 블록 요소에 관해서도 개념을 잘 정리할 수 있었다. 인라인 요소는 요소가 수평으로 쌓이며 콘텐츠 크기만큼 자동..

리액트를 복습하고 리덕스를 좀 더 배우고 싶어서 패스트캠퍼스 강의를 신청하게되었다. 예전에 발급받았던 내일배움카드를 통해 신청할 수 있었다! 강의 초반은 기초 과정인 것 같아서 쉽게 들을 수 있었다. 내가 원하던건 리액트, 리덕스를 가지고 실습을 해보는 것이라서 앞 기초부분은 정리할 겸 들으면서 복습하고 있다. 듣다보니까 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" 라는 단어를 축약형으로 사용된 것으로 시작되었다. 웹의 창시자인 팀 버너스 리는 웹을 "장애에 구애 없이 모든 사람들이 쉽게 정보를 공유할 수 있는 공간"이라고 설명했다. 이때 웹 접근성이 장애인을 고려하는 것도 있지만 꼭 장애인만을 고려해서 만드는 것은 아니다. 일상생활에서 계단의 경사로는 장애인을 위한 것일수도 있지만 무거운 짐을 들거나 유모차를 미는 사람에게도 접근하기 용이하다. 웹도 웹 접근성 지침에 "키보드만으로도 웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다." 라는 지침이 있다...

한 주간 내가 뭘 배웠고(Learned) 어떤게 아쉬웠고 (Lacked) 어떤게 좋았는지(Liked) [Learned] 1. Git 기초와 관리를 배웠다. 2. HTML5 마크업을 할 때 구조적으로 설계해야한다. 그리고 웹접근성을 항상 고려해야한다. 장애를 가진 사람들이 스크린 리더기를 사용하는 등 여러가지 방법으로 웹에 쉽게 접근할 수 있도록 구조를 설계해야한다. 그리고 span태그 안에 넣는 디자인적 요소( | 또는 : 같은것)는 WAI-ARIA를 통해 hidden처리 하면 스크린 리더기가 읽지 않으므로 필요할 때 써주는 것이 좋다. 3. CSS flex에 관해 알게되었다. 나는 이때까지 가로 정렬을 하기 위해 float 속성만 쓰고 flex는 잘 몰랐는데 직접 해보면서 공부하고있다. [Liked] ..