전체 글125 우아한테크코스 프로젝트 기획 우아한테크코스 레벨 3가 시작됐다. 레벨 3에는 프로젝트를 하게 된다. 프로젝트 주제는 사전에 선정이 되고 랜덤 배정이 되는데 나는 편의점 상품을 리뷰하는 서비스에 배정되었다. 우리는 2주 정도 기획에 힘을 쏟았다. 기획을 잘해두면 방향성을 잃지 않고 갈 수 있을 것이라 생각했다. 다양한 방법과 접근을 통해 우리 서비스의 길을 정하기로 했다. 그 과정을 소개해보려고 한다. 🎁 기획 🥄 킥오프 미팅 킥 오프 미팅을 통해 프로젝트의 배경과 목표, 기능을 정했다. 먼저, 배경은 다음과 같다. 편의점 수가 늘어나며 사용자 수 급증 편의점에서 자체 개발한 PB 상품 등장 편의점 음식 리뷰는 광고인 경우가 많음 리뷰들이 여러 플랫폼에 걸쳐 있어 모아 보기 힘듦 요즘 외식 물가가 올라가며 편의점 외식 시장이 급 성장.. 2023. 8. 13. a tag와 button의 차이는 무엇일까? HTML 측면에서의 차이 ⚓️ Anchor href 속성의 유무에 따라 차이가 있음 href 속성 ⭕️ 콘텐츠로 라벨링 된 하이퍼링크 href 속성 ❌ 링크가 있을 수 있는 위치에 대한 자리 표시자 (placeholder) Example 👇 Button 콘텐츠로 라벨링 된, 사용자가 어떤 액션을 트리깅 할 수 있는 컨트롤 웹 접근성 측면에서 본 차이 ⚓️ Anchor 초점이 갔을 때 '링크'라고 읽어줌 이때 사용자가 ‘사이트를 이동하구나’하고 알아차릴 수 있음 간혹 손가락 모양(커서) 때문에 혹은 눌리는 기능 때문에 링크를 거는 경우도 있음 이동할 곳이 없는데 링크를 건 경우이므로 사용자에게 혼동을 줄 수 있음 Voice Over의 경우 href가 없으면 텍스트 내용만 읽고 ‘링크’라고 읽어주지 않음 또.. 2023. 8. 6. multipart multipart ‘펀잇’에는 편의점 음식을 먹고 리뷰를 작성할 수 있는 폼이 있다. 사용자는 리뷰에 사진, 별점, 태그, 리뷰 내용, 재구매 의사를 남길 수 있다. 이 과정에서 이미지 파일을 서버로 보낼 때 문제가 생긴다. 어떤 문제가 생기는지 알아보자. 📁 File Upload 이미지는 File 형태이다. 보통 위의 형식처럼 input type을 file로 주면 파일 업로드를 할 수 있다. 이렇게 file을 서버로 전송하면 해당 file 데이터를 multipart/form-data형태로 받게 된다. 우리가 생각하는 ‘파일이름.확장자’ 형식이 아닌 이진 데이터 형식으로 받는다. 📚 FormData 이제 File 형태의 이미지와 내용을 한 번에 서버로 보내보자. 이때, formData 객체를 통해 보낼 .. 2023. 8. 6. 테코톡을 준비하며 우아한테크코스를 진행하면 꼭 거쳐야 하는 '테코톡'. '내 차례는 한참 뒤에 오겠지?'라고 생각했지만 발표가 끝난 지 벌써 한 달이나 지났다. 유튜브 영상이 올라온 김에 작성해 보는 테코톡 후기! 테코톡의 시작부터 마무리까지 적어보려 한다. 그럼 시작 😎 시작 '웹 표준과 웹 접근성'은 예전부터 많은 관심을 가졌던 주제였다. 영화 '블라인드'를 인상 깊게 보기도 했고, 예전 KDT 수업에서 한 웹 접근성 체험이 엄청 충격으로 다가왔다. [네이버 온라인 장애 체험] 다양한 웹 상황에 공감하여 웹의 문턱을 낮춰주는 웹 접근성 체험 nax.naver.com 또한, 내 전공과 연결 지어서 설명하기에도 좋을 것이라 생각했다. 그리고 테코톡을 준비하면서 공부해 두면 나중에 프로젝트에 적용하기에도 좋을 거 같았다. .. 2023. 7. 8. npm과 yarn의 차이 Node.js 환경에서 패키지를 관리할 때 대표적으로 npm과 yarn을 사용한다. 매번 npm과 yarn 중 어느 것을 사용해야 할지 고민을 하게 된다. 이번에도 프로젝트를 위해 고민을 하다 npm과 yarn에 대해 공부해 보기로 했다. 둘의 차이점은 무엇인지 그리고 어떤 장점이 있는지 알아보겠다. npm과 yarn? npm과 yarn은 Node.js의 패키지 매니저이다. 개발자들이 JavaScript로 만든 패키지를 npm에 올리면 npm과 yarn과 같은 패키지 관리 매니저를 통해 설치할 수 있다. 또한, CLI(Command-Line Interface)을 통해 패키지를 설치하거나 삭제, 버전 관리 등을 할 수 있다. 패키지란? 패키지는 특정 기능이나 목적을 위한 코드 묶음을 말한다. 모듈화와 코드.. 2023. 7. 7. axios Axios란? axios는 JavaScript용 HTTP 클라이언트 라이브러리이다. Node.js와 웹 브라우저 환경에서 사용할 수 있으며, HTTP 요청과 응답을 쉽게 처리할 수 있다. 주요 특징은 아래와 같다. Promise 기반으로 비동기 통신을 쉽게 처리할 수 있다. JSON 데이터에 대한 자동 변환 기능을 제공한다. 요청/응답 인터셉터를 사용해 HTTP 요청 및 응답 전/후에 작업을 수행할 수 있다. Axios를 사용하게 된 계기 이번 프롤로그 근로에서 fetch를 axios로 바꾸는 일을 맡게 되었다. 통신하는 부분이 fetch와 axios로 혼합되어 있었고 통일하자는 의견이 나왔다. axios가 JSON 데이터를 자동으로 변환해 준다는 것을 알게 됐고 이를 사용해 보기로 했다. Axios와 .. 2023. 7. 5. 이전 1 2 3 4 5 6 7 ··· 21 다음
