티스토리

Watch Web

검색하기

블로그 홈

Watch Web

watchwebs.tistory.com/m

granpa CLOCK 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Github Action S3 설정 에러 부서지고 부수기 참고사항 S3 - CloudFront - Routes53 환경입니다. AWS 배포 환경 설정은 자세히 다루지 않습니다. 아래는 이번 github action 에러를 처리하고 yml 파일 최종 코드입니다. name: build and deploy on: push: branches: - main jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: Install dependencies run: npm install - name: Build project run: npm run s-build - name: Configure AWS credentials uses: aws-actions/configu.. 공감수 0 댓글수 4 2023. 10. 18.
JUMPIT TO FRONT-END 컨퍼런스 후기 안녕하세요. 이번에는 JUMPIT 이 주최한 JUMPIT TO FRONT-END 컨퍼런스를 다녀온 후기를 작성해보려고 해요. 이번에 참여한 컨퍼런스는 - 2023년 4월 30일 - 강남 모나코스페이스 센스있게 일하는 FE 개발자 되기 • ‘FE개발의 소프트 스킬과 하드스킬’ 강연자 김태곤 • ‘협업?! 이렇게 한번 해봐’ 강연자 유동균 - FE개발자가 타 직군과 대화를 잘해야하는 이유 FIT한 정보로 성장 부스트업 • ‘FE개발 트렌드’ 강연자 이인제[소플] - 리액트 개발 생태계와 Next.js까지 • ‘타입스크립트로 FE개발 레벨업’ 강연자 장기효[캡틴판교] 의 내용으로 진행되었어요. 이번 점핏의 개취콘을 통해 기술적으로도 정보를 얻을 수 있었지만, 특히나 마인드셋에 대해 배운 점과 기억나는 점이 많.. 공감수 0 댓글수 0 2023. 6. 7.
테오의 구글 스프린트 14기 회고 소개 먼저 스프린트란 무엇일까요? 단거리를 전력질주한다는 의미에서 따온 것으로, 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간입니다. “스프린트는 스크럼과 애자일 방법론의 핵심이며, 올바른 스프린트는 애자일 팀이 더 적은 수고를 통해 더 나은 소프트웨어를 제공하는 데 도움이 됩니다.” 라고 알려져 있습니다. 구글에선 이 스프린트를 아래과 같이 사용합니다. 핵심 과제를 5일 안에 집중적으로 해결할 수 있도록 창안한 팀 단위의 기획 및 실행방법으로 단기 프로젝트를 7명 이내의 팀원이 5일 내에 완료하는 것을 목표로 합니다. 바로 이 구글 스프린트 방식을 배경으로 하여금 “테오”가 주최하는 스프린트인 것이지요. 이번이 14기인 만큼 지금까지 많은 분들이 테오의 구글 스프린트를 경험해왔고, 그만큼 체계.. 공감수 2 댓글수 1 2023. 3. 9.
API 호출 에러와 비동기 마주한 상황 어느날 갑자기 페이지를 리로드 하니 간헐적으로, 무작위 하게 “인증되지 않은 사용자”라며 “다시 로그인 하세요.”라는 알림을 띄워준다… 심지어 다른 팀원의 PC 에서는 발생하지 않고 일부 PC 에서만 재현되는 상황이었다. 페이지 이동, 혹은 다른 상호작용 시에는 발생하지 않았다. 프로젝트의 구조(개요) // App.tsx AppProvider 내부에는 아래와 같은 함수들이 있다. // 1. 쿠키에서 authToken 을 가져온다. // 2. 가져온 authToken 으로 로그인을 시도한다. // 3. 로그인에 성공하면 권한별 메뉴를 가져온다. const LoginByTokenFetch = async ( ... await getRoleMenu(authToken); ) => {}; const g.. 공감수 0 댓글수 0 2023. 1. 25.
리액트 폴더 구조(Architecture) 시작 전 최초에는 노션으로 작성한 문서인데, 노션이 더 보기에 편한것같기도 하다. https://enormous-algebra-1c0.notion.site/Architecture-ffea125ae7904d01b609fabd9eafb798 폴더 구조(Architecture) 왜? enormous-algebra-1c0.notion.site 왜? React는 어플리케이션을 구성하고 구조하는 방법을 제공하지 않는다. (그렇기에 정답도 없다.) 어플리케이션을 구성하고 구조하는 것은 개발자나 팀이 상호작용하는 방식이다. 잘 짜여진 프로젝트는 개발자들이 자신의 구현에 더 깊이 생각하고 정리하도록 요구한다. 또한 잘 짜여진 프로젝트는 코드베이스를 쉽게 탐색, 수정 및 확장할 수 있다. 조직화된 코드베이스는 팀이 장기적.. 공감수 0 댓글수 0 2023. 1. 8.
Chart.js 사용하기 개요 리액트에서 chart.js 사용하기 그래프 구현을 위해 chart.js 를 사용하면서, 처음 사용할 때 어려웠던 점. 불편했던 점을 정리 내가 어려웠던 점은 크게 3가지가 있었다. 리액트에서 사용하기 Object 다루기 그래프에 특정 색 할당하기 그럼 chart.js 의 기본 구조에 대해 정리하고, 위 3가지를 공유해보겠다. 기본 설정 chart.js : 3.9.1 버전 react-chartjs-2 : 4.3.1 버전 react-chartjs 라고 해도 기본적으로 chart.js 를 기반으로 하고 있다는 것을 잊지 말자. chart.js 의 기본 구조 const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data:.. 공감수 0 댓글수 0 2022. 12. 19.
도서 정리 프로젝트(4) 메인페이지 목록 출력 페이지에 접속 했을 때, 기본적으로 도서 목록을 표시해 주는 메인페이지. Redux 비동기 feature 작성 Redux에서 비동기 통신을 활용할 것이다. 리덕스에 내장되어 있는 createAsyncThunk 을 사용한다. import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; import axios from '../api/axios'; // 커스텀 axios 호출 // createAsyncThunk('명칭/개요', 실행할 함수) 의 형태 export const fetchFrontEnd = createAsyncThunk('get/frontEnd', async(_query, _page) => { const res = awa.. 공감수 0 댓글수 0 2022. 6. 26.
도서 정리 프로젝트(3) 스타일/레이아웃 포인트 컬러 : 책은 가을의 양식, 가을하면 따듯한 베이지톤이 생각났다. 또, 이번 2022 트렌드 컬러를 참고하여 마침 우리나라의 인기 색상이 아래와 같은 색이었다. (#FFEBCD) 이렇게 확정은 아니지만 이런 비슷한 느낌의 컬러를 포인트로만 사용해볼 예정이다. 페이지 핵심 기능(검색) : 처음에는 내가 읽은 책 목록을 보여주는 것을 중심으로 진행하려고 했으나, 내가 필요한 책들을 찾고 기록하는게 핵심 기능이라고 생각했다. 그래서 사용자가 페이지에 접속했을 때, 검색창을 가장 접근하기 쉬운 상단에 위치시켰다. 내비게이션 바 : 스크롤을 내려도 검색창에 접근할 수 있도록 작은 검색창과 나의 페이지로 이동하기 위한 사용자 아이콘 버튼을 위치시켰다. 검색창 : 제목 검색만 가능하며, 검색 .. 공감수 0 댓글수 0 2022. 6. 13.
도서 정리 프로젝트(2) 리덕스 학습 및 적용 학습 과정 코딩애플과 생활 코딩을 통해 개념 및 간략한 사용법을 익히며 학습 진행 중 마주친 deprecated 메시지. 기존의 Redux 에서 RTK(Redux ToolKit)로 문법이 최신화 되었다. createStore는 이제 (구)문법으로 처리되어 최신문법인 configureStore를 쓰도록 안내해준다. Provider에 state값을 넘겨주지 않아서 마주친 에러. props 로 넘겨주어 해결 Provider로 컴포넌트를 감싸줌으로써 내부에서 Redux의 state를 사용할 수 있게된다. import { Provider } from 'react-redux'; import { configureStore } from '@reduxjs/toolkit'; const weight =.. 공감수 0 댓글수 0 2022. 6. 12.
도서 정리 프로젝트(1) 프로젝트 설명 도서 검색 및 열람 페이지, 내가 읽은/읽고 싶은 책을 정리할 수 있는 페이지 이 프로젝트를 진행하게된 이유 내가 읽은 책과 읽고 싶은 책을 정리하고 싶다. 추천받는 개발 서적들에 대해 기록해 놓고 싶다. 확실하게 학습하고 기록하면서 프로젝트를 진행하고 싶다. 리액트와 상태관리 라이브러리를 학습하고 싶다. 핵심 기능 도서 목록(무한 스크롤) 대표 카테고리 별 목록(웹 개발, 프론트엔드, 웹디자인) 읽은/학습한 도서 저장 읽고 싶은 도서 저장 도서 검색(제목) 개발 환경 React.js Redux styled-components axios Figma Git/Github 환경 설정 도서 검색 API 카카오의 OPEN API 사용 왜? 1. 너무 많은 정보는 필요하지 않았다. 2. 호출 건수에 .. 공감수 0 댓글수 0 2022. 6. 11.
프론트엔드와 에러 핸들링 Never be entirely idle; but either be reading, or writing, or praying or meditating or endeavoring something for the public good. 1. 정의 2. 왜 에러 핸들링을 해야할까? 3. 에러 핸들링 4. try - catch 1. 정의 에러(오류) : 하드웨어나 소프트웨어가 본래의 동작을 수행할 수 없는 상태 컴파일 에러 : 코드가 컴파일(해석할 수 있는 언어로 변경되는 과정)되는 과정 중 발생하는 에러 런타임 에러 : 프로그램이 동작하는 과정 중 발생하는 에러 예외 : 일반적으로 런타임 에러와 관련된 예상하기 어렵거나 불가능한 이슈 에러 핸들링 : 예외로 인해 발생한 에러 객체를 다루는 것 일반.. 공감수 0 댓글수 0 2022. 5. 19.
UI와 UX 그리고 Front-end 개발자 Determine never to be idle...It is wonderful how much may be done if we are always doing. UI/UX는 무엇이고, 프론트엔드 개발자와의 연관성은 무엇일까 항상 막연하게 알고만 있던 것같다. "UI/UX가 필요하구나. 사용자 경험을 개선시켜준다." 많은 기업들이 원하는, 혹은 프론트엔드 개발자의 역량으로 요구되는 UI/UX 역량이 무엇을 의미할까 궁금해졌다. 1. UI 란 무엇일까? 2. UX 란 무엇일까? 3. 프론트엔드 개발자와 UI/UX 1. UI란 무엇일까? User Interface : 사용자가 마주하는 접점, 면 즉, 사용자가 제품/서비스를 이용할 때 마주하는 레이아웃, 컬러, 폰트와 같은 시각적인 디자인 요소를 말한다. 그렇.. 공감수 1 댓글수 0 2022. 5. 3.
HTTP 그리고 HTTPS The future depends on what we do in the present. HTTP란? 정의 : 인터넷에서, 웹 서버와 사용자의 인터넷 브라우저 사이에 문서를 전송하기 위해 사용되는 통신 규약을 말한다. HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜인데, 웹에서 이루어지는 모든 데이터 교환의 기초이자, 클라이언트-서버 프로토콜이기도 하다. HTTP의 특징 모든 데이터 교환의 기초 HTTP의 헤더를 통해 추가적인 정보를 주고 받을 수 있다. 상태를 저장하지 않는다. 쿠키를 통해 상태가 있는 세션을 만들 수 있다. HTTP의 대표적인 처리방식 GET POST PUT DELETE HTTPS란? 정의 : HTTP 프로토콜의 암호화된 버전이다. 클라이언트와 서버가 민감한 정보를 안.. 공감수 0 댓글수 0 2022. 4. 9.
웹 접근성 견고성 Spring is a true reconstructionist. 견고성은 사용자가 콘텐츠를 이용할 수 있도록 기술에 영향을 받지 않아야 함을 의미 한다. 견고성에는 2가지 지침으로 구성되어 있다. 1. 문법 준수 (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다. 마크업 언어로 작성된 콘텐츠는 해당 마크업 언어의 문법을 최대한 준수하여 제공하는 것이 바람직하다. 그 의미를 파악해 보자면, HTML 태그의 사용성에 맞게 활용하는 것이 바람직하겠다. 가. 요소의 열고 닫음 일치 : 시작 요소와 끝나는 요소가 정의되어야 한다. 나. 요소의 중첩 방지 : 요소의 나열 순서는 포함 관계가 어긋나지 않아야 한다. 다. 중복된 속성 사용 금지 : 하나의 요소 안에 .. 공감수 0 댓글수 0 2022. 3. 3.
웹 접근성 이해의 용이성(2) Try not to become a man of success but rather try to become a man of value. 3. 콘텐츠의 논리성 가. (콘텐츠의 선형 구조) 콘텐츠는 논리적인 순서로 제공해야 한다. 나. (표의 구성) 표는 이해하기 쉽게 구성해야 한다. 웹 페이지를 구성하는 모든 콘텐츠는 사용자가 그 내용을 이해할 수 있도록 순서에 맞게 작성되어야 한다. 시각적으로 배치를 변경하더라도, 콘텐츠의 나열 순서는 그 맥락을 이해할 수 있도록 논리적으로 구성해야 한다. 또한 표를 제공할 경우, 표의 내용 및 구조에 대한 정보를 제공하고, '제목 셀'과 '데이터 셀'이 구분되도록 구성해야 한다. 4. 입력 도움 가. (레이블 제공) 사용자 입력에는 대응하는 레이블을 제공해야 한다. 나.. 공감수 0 댓글수 0 2022. 3. 2.
웹 접근성 이해의 용이성(1) Life is a long lesson in humility. 이해의 용이성은, 모든 사용자가 웹 사이트의 콘텐츠를 이해할 수 있도록 제공하는 것을 의미한다. 이것은 4 가지 지침으로 구성되어 있다. 1. 가독성 2. 예측 가능성 3. 콘텐츠의 논리성 4. 입력 도움 그 중 가독성과 예측 가능성에 대해서 알아보자. 가독성 1. (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다. 웹 브라우저는 웹 페이지를 구성하는 언어 정보를 바탕으로, 텍스트 콘텐츠를 화면에 표시하거나 보조 기술로 전달한다. 화면 낭독 프로그램을 사용하는 경우, 텍스트 콘텐츠의 언어 정보를 통해 정확한 발음으로 읽어주도록 제어하기도 한다. 즉, 기본 언어를 반드시 정의해야 한다. 예측 가능성 (사용자 요구에 따른 실행)사용자가 의도.. 공감수 0 댓글수 0 2022. 3. 1.
웹 접근성 쉬운 내비게이션(3) carpe diem 3. (적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다. 만약 우리가 '링크' 와 같은 형태로 텍스트를 제공한다면, 사용자들은 무엇을 위한 링크인지 정확하게 이해하지 못할 것이다. 링크는 목적지를 명확하게 이해할 수 있는 텍스트를 제공해야 한다. 가. 문장의 일부분에 링크를 연결하는 경우 : 목적지, 용도 등을 표현한 텍스트에 링크를 연결한다. 나. '바로가기', 'GO' 등의 링크 텍스트를 제공하는 경우 : URL에 관한 정보에 이어서 제공한다. 다. 이미지 링크를 제공하는 경우 : URL 정보 관련 텍스트와 URL로 이동하는 이미지 링크는 하나의 링크로 구성하는 것이 바람직하다. 이 경우, 이미지의 대체 텍스트는 공백 문자로 제공한다. - 이미지 .. 공감수 0 댓글수 0 2022. 2. 28.
웹 접근성 쉬운 내비게이션(2) 집을 가장 아름답게 꾸며주는 것은 자주 찾아오는 친구들이다. 2. (제목 제공)페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다. 제목은 간단명료해야 하며, 해당 페이지, 프레임, 콘텐츠 블록을 유추할 수 있도록 제공해야 한다. 다음 항목들을 주의하며 제목을 제공하자. 가. 페이지 제목 제공(title) : 여러 개의 웹 페이지가 열려 있더라도 제목을 통해 웹 페이지를 선택할 수 있다. 나. 팝업 창 제목 제공 : 팝업 창에도 제목을 제공해야 한다. 다. 프레임 제목 제공 : 모든 프레임에 제목을 제공해야 한다. 내용이 없는 경우에도 '빈 프레임'과 같이 제목을 제공한다. 라. 콘텐츠 블록 제목 구성 : 적절한 제목(heading)을 제공하여 콘텐츠를 구분할 수 있으며, 블록 간 이동이 원할.. 공감수 0 댓글수 0 2022. 2. 25.
웹 접근성 쉬운 내비게이션(1) Never regret. If it's good, it's wonderful. If it's bad, it's experience. 1. (반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다. 키보드 사용자, 화면 낭독 프로그램 사용자들은 페이지가 갱신될 때마다 공통적으로 들어있는 메뉴, 링크 목록 등을 다시 읽게 된다. 이렇게 반복되는 영역을 건너뛰어 핵심 영역으로 이동할 수 있는 수단을 제공해야 한다. 가. 반복 영역을 건너뛸 수 있는 수단을 제공 : 건너뛰기 링크는 항상 웹 페이지의 가장 앞에 제공한다. 나. 여러 개의 건너뛰기 링크 제공 : 핵심 영역으로의 이동 링크를 가장 먼저 제공한다. 다. 시각적인 구현 : 저시력 이용자 뿐만 아니라 움직임이 불편한 이용자를 위해 화면에 보.. 공감수 0 댓글수 0 2022. 2. 24.
웹 접근성 광과민성 발작 예방 If we take care of the moments, the years will take care of themselves. 광과민성 증후가 있는 사용자들은 빛이 번쩍거리는 것에 민감하게 반응하여 발작을 일으킬 수 있다. 광과민성 증후가 유명해지게 된 계기는 일본의 포켓몬스터 방영 사건이 있다. 당시 포켓몬스터를 시청 중 빠르게 번쩍이는 장면을 통해 많은 사람들이 발작, 구토, 메스꺼움을 호소하며 병원으로 이동했다고 알려져 있다. 현재에도 일부 영상, 게임에서는 광과민성 증후 경고를 알리고 있다. 이것을 예방하기 위해 한국웹접근성 지침은 다음과 같이 말한다. 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다. 1. 번쩍이는 콘텐츠 사용 금지 : 초당 3~50회, 10인치 이상의.. 공감수 0 댓글수 0 2022. 2. 23.
웹 접근성 충분한 시간 제공 군자는 말은 어눌해도 행동에는 민첩하다. 문서를 읽고 이해하는 데 많은 시간이 필요한 사용자들을 위해 모든 콘텐츠는 충분한 시간을 제공해야 한다. 첫째, 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다. 시간제한 콘텐츠의 사용을 최대한 지양해야 하나, 보안사유 등 사용이 불가피한 경우가 있다. 그 경우, 이 네가지를 기억하자. 1. 시간제한의 존재를 미리 알린다 2. 시간제한의 종료를 알린다 3. 시간제한을 연장할 수 있는 수단 제공 4. 시간제한을 해제할 수 있는 수단 제공 둘째, 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다. 자동 스크롤이 되거나 자동 갱신되는 콘텐츠를 제어하기 위해서는 아래 두 가지를 기억하자. 1. 일시 정지 기능을 제공한다 2. 이동할 수 있는 수단을 제.. 공감수 0 댓글수 0 2022. 2. 22.
JavaScript 문제풀이(39 ~ 41) Great hopes make great men. 문제39 : 오타 수정하기 혜원이는 평소 영타가 빠르고 정확한 것을 친구들에게 자랑하고 다녔습니다. 반 친구들이 혜원이의 타자 속도가 빠르다는 것을 모두 알게 되자 혜원이는 모두의 앞에서 타자 실력을 보여주게 됩니다. 그런데 막상 보여주려니 긴장이 되서 문장의 모든 e를 q로 잘못 친 것을 발견했습니다. 혜원이는 프로그램을 돌려 재빠르게 모든 q를 e로 바꾸는 프로그램을 작성하려고 합니다. 문장이 입력되면 모든 q를 e로 바꾸는 프로그램을 작성해 주세요. 입출력 입력 : querty 출력 : euerty 입력 : hqllo my namq is hyqwon 출력 : hello my name is hyewon 풀이) 정규표현식 문제40 : 놀이동산에 가자 테.. 공감수 0 댓글수 0 2022. 1. 4.
웹 접근성 입력장치 접근성 The journey is the reward. 운용의 용이성은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 모든 기능들을 이용할 수 있도록 제공하는 것이다. 이것은 '입력장치 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 내비게이션'의 4가지 지침으로 구성되어있다. 그 중 먼저 입력장치의 접근성을 다뤄보자! 첫째 모든 기능은 키보드만으로도 사용할 수 있어야 한다! 왜 그럴까요? 마우스로 위치를 지정할 수 없는 사용자들이 있기 때문입니다. 대신 키보드 접근성을 구현하기 위해서 키보드 조작의 횟수는 고려하지 않아도 된다. 사용할 수 있도록 만드는 것이 목표입니다. 조작하기 쉬우면 좋겠지만, 조작을 간편화하는 것은 두번째 문제입니다! 단, 커서 궤적이 중요하거나(그림판 등) 움직임 측정.. 공감수 0 댓글수 0 2021. 12. 28.
웹 접근성 인식의 용이성(2) 명료성: 뚜렷하고 분명한 성질 지난 포스팅에서 명료성의 두가지를 다루었다. 첫째, 콘텐츠는 색에 관계없이 인식 될 수 있어야 한다. 둘째, 명확한 지시 사항 제공 이후로 계속해서 명료성에 대해서 알아보자. 세 번째, 텍스트 콘텐츠와 배경의 명도 대비는 4.5 : 1 이상 뚜렷하지 않은 명도 대비는 저시력, 색각 이용자들에게 불편한 사용 경험을 제공할 수 있다. 하지만 명도 대비의 기준도 텍스트의 크기, 화면 확대에 따라 가변적이다. '18pt 이상의 폰트 사이즈 혹은 14pt 이상의 굵은 폰트 혹은 화면 확대 기능' 일 경우 그 기준이 3대 1까지 낮아질 수 있다. 그래도 되도록 애매한 색의 구분 보다는 뚜렷하게 구분되는 색으로 표현하는 것이 좋은 방법이라는 생각이 든다. 네 번째, 자동 재생 금지 왜 .. 공감수 0 댓글수 0 2021. 12. 21.
JavaScript 문제풀이(31 ~ 36) 정진 (精進) 문제31 : 자바스크립트 자료형의 복잡도 다음 배열 내장함수의 시간 복잡도가 O(1)이 아닌 것을 모두 고르시오. 1) arr[i] 2) arr.push(5) 3) arr.slice() 4) arr.pop() 5) arr.includes(5) 풀이) '빅 오 1', 0(1)에서 1은 단계수를 나타낸다. 즉, 컴퓨터가 연산에 한 단계만을 거치는 것을 찾아내는 문제다. 문제32 : 문자열 만들기 취업 준비생인 혜림이는 자기소개서를 쓰고 있습니다. 열심히 자기소개서를 작성하던 도중 혜림이는 자기가 지금까지 단어를 얼마나 적었는지 궁금하게 됩니다. 혜림이를 위해 문자열을 입력받으면 단어의 갯수를 출력하는 프로그램을 작성해 주세요. **입출력** 입력 : 안녕하세요. 저는 제주대학교 컴퓨터공학전공 .. 공감수 0 댓글수 0 2021. 12. 16.
JavaScript 문제풀이(28 ~ 30) 실패가 불가능한 것처럼 행동하라. 문제28 : 2-gram 2-gram이란? 문자열에서 2개의 연속된 요소를 출력하는 방법입니다. 예를 들어 'Javascript'를 2-gram으로 반복해 본다면 다음과 같은 결과가 나옵니다. 입력으로 문자열이 주어지면 2-gram으로 출력하는 프로그램을 작성해 주세요. **입력** Javascript **출력** J a a v v a a s s c c r r i i p p t 풀이) 1단계) 두 글자씩 출력해보자. 그런데 마지막 순회를 생각해보자. JavaScript의 index는 0에서 9까지있다. i = 9일때, 'js[9] js[10]'을 출력하게 된다. 즉, 't와 undefined'를 출력한다. 2단계) 기준이 되는 i값을 뒤에 출력되게 하자. 그렇다면 i =.. 공감수 0 댓글수 0 2021. 12. 14.
웹 접근성 인식의 용이성 웹 사이트에서 제공하는 모든 콘텐츠를 동등하게 인식할 수 있도록 제공하는 것 인식의 용이성은 '대체 텍스트, 멀티미디어 대체 수단, 명료성' 3가지 지침으로 구성되어 있다. 인식의 용이성 부분을 읽어나가며 모두 재미있고 도움이 많이 되었지만, 특히나 '명료성'에 대해 하고 싶은 이야기가 많았다. 바로 시작해보자. 대체 텍스트는 정보에 접근하기 힘든 사용자들을 위해 최소한의 접근권을 보장해주는 수단이다. 대체 텍스트를 통해 텍스트가 아닌 콘텐츠에 대한 검색이 가능하다. 하지만 단순 장식이나 시각적인 형태를 위한 콘텐츠에 대체 텍스트를 사용하는 경우, 오히려 혼란을 일으킬 가능성이 있다. 이런 경우, 대체 텍스트로 공백 문자를 제공해야 한다. 명료성 첫째, 콘텐츠는 색에 관계없이 인식 될 수 있어야 한다. .. 공감수 0 댓글수 0 2021. 12. 14.
JavaScript 문제풀이(25 ~ 27) Weakness of attitude becomes weakness of character. 문제25 : 원의 넓이를 구하세요 원의 넓이는 `반지름의 길이 x 반지름의 길이 x 3.14`로 구할 수 있습니다. 함수를 사용하여 원의 넓이를 구하는 코드를 작성해봅시다. 입력으로 반지름의 길이 정수 n이 주어지면, 원의 넓이를 반환하는 함수를 만들어 주세요. 풀이) 1단계) 원의 넓이 출력 원의 넓이를 구하는 공식을 참고한다. '반지름의 길이(n) x 반지름의 길이(n) x 3.14' 2단계) 반지름을 입력해 주기만 하면 끝이다. 문제26 : 행성 문제2 우리 태양계를 이루는 행성은 수성, 금성, 지구, 화성, 목성, 토성, 천왕성, 해왕성이 있습니다. 이 행성들의 영어 이름은 Mercury, Venus, E.. 공감수 0 댓글수 0 2021. 12. 13.
JavaScript 문제풀이(22 ~ 24) 마부작침(磨斧作針) 문제22 : 배수인지 확인하기 다음 중 변수 i가 6의 배수인지 확인하는 방법으로 올바른 것은? 1) i / 6 == 0 2) i % 6 == 0 3) i & 6 == 0 4) i | 6 == 0 5) i // 6 == 0 풀이) 나누었을 때, 나머지가 없어야 배수임이 확인 될 것이다. 나머지를 출력하는 연산자 : % 문제23 : OX문제 'console.log(10/3)'의 출력 결과는 3 이다. 풀이) 나누기 연산자(/)와 '버림'을 이용한다. '10 / 3'의 출력 결과는 3.33333333의 값이 나오게 된다. 3을 출력 시키기 위해선 버림(Math.floor())를 이용해야 한다. 문제24 : 대문자로 바꿔주세요! 민지는 국제 포럼에서 아르바이트를 하게 되었습니다. 민지는 각.. 공감수 0 댓글수 0 2021. 12. 10.
JavaScript 문제풀이(19 ~ 21) 배우고, 때때로 익히면 또한 기쁘지 아니한가 문제19 : 제곱을 구하자 공백으로 구분하여 두 숫자 a와 b가 주어지면, 'a의 b승'을 구하는 프로그램을 작성하세요. **입출력** 입력 : a b 출력 : a**b 풀이) 1단계) 'prompt()'와 'split()' 주어지는 값(prompt(a b))을 공백을 기준으로 하는 배열 만들기.(split(' ')) 그것을 변수로 선언 value = ['a', 'b'] 2단계) 'a의 b승' 'a의 b승' 만들기. 변수로 선언하자. result = a ** b 3단계) 입력값을 'a'와 'b'로 추출하기 'value'라는 배열에서 값을 뽑아내자. a = value[0], b = value[1]; 에서 result를 출력하면 끝! 추가 답안) Math.pow를.. 공감수 0 댓글수 0 2021. 12. 9.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.