요구사항 정의 구현해야 할 기능 1) 공통 UI 구현하기 API 명세서 작성하기 2) 본문 CRUD 구현 본문 리스트 조회하기 본문 조회하기 본문 추가하기 본문 삭제하기 본문 수정하기 3) 배포 json-server 서버 배포 (heroku 사용) 리액트 프로젝트 배포 (S3, vercel 등 자유) 필수 요구사항 동적 라우팅 사용 1개 이상의 Custom Hook 구현 Form에 유효성 검증 기능 적용 버튼 컴포넌트 1개로 모든 버튼 구현 배포된 결과물에서는 console.log()가 보이지 않도록 처리 .env를 이용해서 API 서버의 URL 코드 상에서 숨기도록 처리 프로젝트 설명 자신이 좋아하는 과자를 소개할 수 있는 웹페이지를 만들고자 했다. 2023.04.28 ~ 2023.04.30 기간동안 ..
📌 a 태그에는 href attribute를 반드시 명시해야 한다! href = hypertext(HTML 문서, 웹 페이지) reference (주소값, 참조) 👉🏼 어디로 이동할지에 대한 상세 속성을 정의한다. href 주소값 표기 방법 1. 웹 URL 웹 페이지 주소 또는 상대경로 2. 페이지 내 이동 [참고] 현재 페이지의 최상단으로 이동하는 링크 📌 href="#top" 또는 href="#" 3. 메일 쓰기 📌 4. 전화 걸기 (모바일) 📌 [참고] 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타낸다. address 요소의 콘텐츠가 제공하는 연락처 정보는 현재 맥락에 적절한 아무 형태나 취할 수 있으며, 물리적 주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌..
em 📌 주위 텍스트에 비해 강조된 부분을 나타내며, 주로 기울임꼴을 적용해 표현한다. 이때, 단순히 기울임꼴이 필요해서 을 사용하면 안된다! 이 경우에는 CSS의 속성으로 효과를 부여해야 한다. 과 콘텐츠를 강조할 때 사용한다. ex. Just do it already! / We had do someting about it! 👉🏼 이 문장을 읽는 사람이나 소프트웨어는 기울임꼴 부분에 강세를 두고 말하게 된다. 외국어나 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용한다. ex. The Queen Mary sailed last night. 👉🏼 Queen Mary를 강조한다거나 중요하게 취급하는게 아니다. 다만 Mary가 여왕의 이름이 아닌 Queen Mary라는 이름의 선박을 나타내기 위해 기울..
제목 (Headings) 📌 , , , ..., 접근성 고려사항 1. 탐색 스크린 리더 사용자가 흔히 사용하는 탐색 기법은 제목에서 제목으로 뛰어 넘으며 페이지 콘텐츠를 빠르게 파악하는 것이다. 따라서 제목 순서를 뛰어 넘으면 ( 다음으로 사용 등) 중간에 빠진 제목이 어디있는지 알 수 없으므로 사용자의 혼란을 야기할 수 있다. 2. 중첩 하위 구획으로 제목을 중첩해 콘텐츠의 구조를 나타낼 수 있다. 대부분의 스크린 리더는 페이지의 제목을 정렬한 목록도 생성해 제공하므로, 사용자가 빠르게 콘텐츠 구조를 파악할 수 있도록 돕는다. 이때, 중첩 제목에서 하위 구획을 닫을 땐 제목 단계를 위로 건너뛸 수 있다. 3. 구획 콘텐츠 레이블 스크린 리더 사용자가 자주 사용하는 다른 기술은 콘텐츠 구획의 목록을 생성..
HTML이란? 정의 프로그래밍 언어가 아닌 컨텐츠의 구조를 정의하는 마크업 언어이다. 웹페이지를 이루는 가장 기본적인 building block이다. CSS와 JavaScript는 추가적인 부분이며, HTML이 기본이다. HTML이 중요한 이유 웹페이지의 시작은 HTML에서 비롯된다. (웹 브라우저 환경의 베이스!) 웹페이지에 보이는 모든 것들은 HTML 태그의 결과물이다. 👉🏼 따라서 문서의 구조와 정보 위계가 명확히 보이는 HTML 코드를 작성해야 한다. 시맨틱 마크업 (Semantic Markup) 정의 Semantic 시맨틱 == 의미론적인 Markup 마크업 == HTML 태그로 문서를 작성하는 것 👉🏼 따라서 시맨틱 마크업이란, 의미를 잘 전달하도록 문서를 작성하는 것을 말한다. 어떻게 작성할..
JSON(JavaScript Object Notation)이란? 경량의 데이터 교환 형식이다. 텍스트 기반의 형식으로, 인터넷에서 데이터를 주고받을 때 많이 사용된다. JSON은 JavaScript에서 객체를 만들 때 사용하는 문법을 기반으로 만들어졌다. 👉🏼 즉, 자바스크립트 객체 문법에 토대를 둔 문자 기반의 데이터 교환 형식이다. JSON 구조 { "name": "Alice", "age": 25, "isStudent": true, "courses": ["Math", "Science", "History"], "address": { "city": "New York", "state": "NY" } } 일반적인 JSON 구조는 자바스크립트 객체 리터럴 작성법을 따른다. (key-value 쌍의 집합) 자바..
한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 리액트 Lv.4 과제 제출하기 🤔 리액트 개념 정리해서 블로그에 업로드하기 ✅ 리액트 Lv.4 과제 제출하기 이번 주는 유독 정신없이 한 주가 흘러가서 다시 되짚어 본다. 월요일엔 지난주에 계획했던 대로 Lv.3 과제를 서로 바꿔 다시 구현해 보면서 리팩토링을 진행했고, 화요일은 각자 복습(나는 hooks와 js 복습 진행), 수요일부터 목요일까지 심화주차 강의를 2/3 들은 뒤 금요일 ~ 토요일 오전은 페어분과 빠르게 프로젝트 기획을 하고 HTML, CSS구현, 토요일 낮 ~ 일요일은 기능 구현을 진행해 일요일 18시에 과제를 제출했다. 심화주차 강의는 리덕스 툴킷, axios, thunk, react query 등으로 이루어져 있었는데 휘몰..
요구사항 정의 구현해야 할 기능 Button styled-components를 이용해 구현하며, props를 적절하게 활용할 것 버튼 label에 선택적으로 아이콘을 넣을 수 있도록 구현 Modal 취소, 확인이 있고, overlay 클릭 시 모달이 닫히지 않음 닫기 버튼만 있고, overlay 클릭 시 모달이 닫힘 모달을 on 시키는 버튼의 형태는 각각 달라야 하며 위에서 만든 버튼 재사용 가능 Inpnut 일반 형식의 Input 숫자를 넣었을 때 3자리 숫자마다 ,가 찍히는 input form을 구현하고 각 inpnut에 값 입력 후 저장 버튼 클릭 시 { name: '아무 텍스트', price: '콤마가 없는 금액' } 을 alert에 표시 Select select 클릭 시 option들이 나오고 ..
모던 자바스크립트란? 모던 자바스크립트 딥 다이브, 모던 자바스크립트 입문.. 모던 자바스크립트라는 말을 많이 접하게 되는데, 모던 자바스크립트가 의미하는 게 대체 뭔지? 가 궁금해져서 이번 주차 스터디 주제를 정하게 되었다. 모던 자바스크립트에서 언제를 기준으로 모던으로 봐야 하는 지에 대한 정확한 기준은 없으나, 일반적으로 모던 자바스크립트라고 말할 때는 다음과 같은 특징을 꼽는다. 리액트, 뷰, 앵귤러 등 가상 DOM을 이용하는 라이브러리나 프레임워크를 사용한다. npm이나 yarn 등 패키지 관리자를 사용한다. 주로 ES6 이후의 표기법을 사용한다. 웹팩 등 모듈 핸들러를 사용한다. 바벨 등 트랜스 파일러를 사용한다. SPA(Single Page Application)으로 작성되어 있다. 그렇다면..
📚 2022년 정리했던 글을 옮겨둔 포스팅입니다. Spring, Mybatis, Oracle을 기준으로 작성되었으며 프로젝트 경로, 프로젝트 명은 가려두었습니다. MVC 패턴 이해를 위해 코드를 뜯어보며 정리했던 글이라 틀린 내용이 있을 수 있습니다. MVC(Model, View, Controller) 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있으며, 로직을 분리해 두어 유지보수에 유용하다. 디자인패턴이란? 객체 지향 프로그래밍 설계 시 특정 문맥에서 공통적으로 발생하는 '문제'에 대해 재사용 가능한 해결책으로 사용되는 서술이나 템플릿 Model 정의 애플리케이션의 정보, 데이터를 나타낸다...
