개발 공부 썸네일형 리스트형 안드로이드 Chrome talkback 이미지 대체텍스트 송출 안 되는 문제 접근성 대응을 위하여 이미지에 alt 를 삽입하여, 대체텍스트를 추가 해 주면,스크린 리더기가 읽어주게 되는데최신 크롬 버전(chrome v137.0.7151.72)에서 일정 크기 이상의 이미지는 img 태그로 인식하지 않아 alt 에 작성 된 대체텍스트도 읽어주지 않는 문제가 발생했다. 아래와 같이 연결하면 이미지 태그 인식 및 이미지 내 텍스트까지 사용자에게 제공하여 접근성, 표준성 대응을 할 수 있다. /* .blind 는 css 처리 하여 화면에 보이지 않게 함 id 맞춰주기! */ 이미지 內 대체텍스트 내용 넣어주기 더보기 [버스언제와] 환경설정 React + Typescript +vite 설치npm create vite@latest [프로젝트 명] -- --template react-ts mui 관련 파일 다운로드https://mui.com/material-ui/getting-started/installation/#cdnReact-Router-domhttps://www.npmjs.com/package/react-router-domnpm i react-router-dom openlayersnpm install ol map 은 vworld 로 사용할 예정https://www.vworld.kr/v4po_main.do 더보기 [버스언제와] 프로젝트 만들기 그동안 공부 했던 것들을 혼자서 어디까지 구현할 수 있을지 프로젝트를 하나 만들어 보고 싶어서,고민끝에 버스앱을 만들어 보기로 했다.만들면서 겪는 시행착오들을 잘 정리해 두고 싶어서 블로그에 기록하기로 한다. 둘째아이 학교가 조금 멀리 배정이 되어서 버스로 통학을 해야 하는데,아침마다 버스 앱을 계속 조회 해 보며 시간 맞추어 나가는 모습을 보고,지금도 버스 앱은 많지만, 사용해보고 아이들에게 물어보며 사용자에게 좀 더 편리한 UI 와 기능을 찾아 낼 수 있지 않을까 하는 생각에 소재를 결정하게 되었다. API 는 공공데이터 포털에서 무료로 이용 할 수 있다.추후에 더 추가하게 되겠지만, 아래 2개의 API 를 활용 신청하고 시작 해 보려고 한다.- 서울특별시_버스위치정보조회 서비스- 서울특별시_정류소정.. 더보기 [React] 새로 고침 시 state 초기화되는 현상 - redux-persist 적용하기 페이지를 새로 고침하면, state에 저장된 값은 모두 초기화가 되는데,로그인 토큰을 세션에 저장하듯, 초기화 되지 않아야할 state를 local storage 에 저장하기. 현재 프로젝트의 경우, 로그인 시 BE에서 토큰을 받아와 session storage에 저장을하고, reducer > state 에 user 값을 저장 해 두고user가 있으면 login 페이지 접근 시 홈으로 보내주도록 해 두었다.user 확인이 필요한 페이지는 session storage에 토큰을 체크해 주어도 되나, reducer 에서 한번에 관리할 수는 없을지 고민이었다가 redux-persist 를 사용해보라는 조언을 듣고 적용을 해 보았다. 1. 설치 npm i redux-persist * https://www.npmj.. 더보기 React 프로젝트에서 .env 파일을 읽어오지 못할 때 .env 파일을 추가하고, 파일에서 읽어오려는데, undefind 가 발생..한 경우 살펴봐야 할 사항 1. .env 파일 위치- .env 파일은 루트에 있어야 함. package.json 과 같은 위치에 있는지 확인 2. 환경변수 이름 형식- 리액트에서 환경 변수는 반드시! REACT_APP_ 으로 시작해야 함- 예 ) api_url → REACT_APP_API_URL 으로 변경 3. 불러오기 방식- process.env. 객체를 사용하여 불러오기- 예 ) const apiUrl = process.env.REACT_APP_API_URL 4. dotenv 패키지 설치 여부 확인- cra 로 시작한 프로젝트에는 해당 안됨- 만약 cra 가 아니면, dotenv 패키지 설치 후 파일 상단에 require(.. 더보기 node.js 환경 설정 1. package.json 설정npm init -y 2. 라이브러리 설치-- express -- mongoose-- body-parser : req.body 가 객체로 인식되도록 하기 위함-- cors : cors 에러 방지를 위함(http, https)-- dotenv : node 에서 env 파일을 읽어오기 위함-- jsonwebtoken : 로그인 시 이용할 token 발급 용도-- bcryptjs : 비밀번호 암호화-- nodemon 3. app.js 4. 스키마 설정 Model 폴더에 데이터 컬렉션 별로 스키마 파일 작성하기 5. route 만들기의존성이 없는 데이터를 생성하는 것 부터 시작한다. 6. controller 만들기 더보기 비밀번호 암호화 하기 bcryptjs npm i bcryptjs 로 패키지 다운로드 후 아래와 같이 설정한다.// bcryptjs importconst bcrypt = require('bcryptjs');// user에게 받은 비밀번호let password = 'abc';// 복잡도 10 설정const salt = bcrypt.genSaltSync(10);// 암호화하여 다시 password 에 넣어주기password = bcrypt.hashSync(password, salt); https://www.npmjs.com/package/bcryptjs 더보기 connection fail MongooseServerSelectionError: connect ECONNREFUSED ::1:27017 connection fail MongooseServerSelectionError: connect ECONNREFUSED ::1:27017 신나게 모델과 컨트롤러 파일을 작성한 후 post man 으로 테스트를 시작했는데, 에러 발생chat gpt 에게 문의해 보았다.에러 메시지를 분석해보면, MongooseServerSelectionError: connect ECONNREFUSED ::1:27017라는 에러가 발생했습니다. 이 에러는 Mongoose가 MongoDB 서버에 연결을 시도했지만 실패했음을 나타냅니다. 구체적으로 ECONNREFUSED 에러는 해당 주소(::1:27017, 이는 IPv6에서 localhost:27017을 의미)에서 연결이 거부되었음을 뜻합니다. 몇 가지 원인과 해결 방법을 고려.. 더보기 이전 1 2 3 4 5 다음