본문 바로가기

22.12.15 ~ 23.06.08 코드스테이츠39

[자료구조/알고리즘] 기초 (Stack, Queue) (참고) 자료구조 시각 자료 사이트 https://www.cs.usfca.edu/~galles/visualization/Algorithms.html https://visualgo.net/en ※ class (객체 지향) 문법 → 비슷한 객체(object)를 많이 만들고 싶을 때 사용! // class 키워드의 예 class Person { // 클래스 작명은 대문자로 constructor(name, age) { this.name = name; // 새로 생성되는 객체에 {name : name}을 추가 this.age = age; } speak() { return `저는 ${this.name}입니다.`} } const dd = new Person('최예슬', 30); console.log(dd.speak(.. 2023. 3. 14.
[네트워크] 심화 보호되어 있는 글 입니다. 2023. 3. 6.
[사용자 친화 웹] 웹 접근성 웹 접근성 : 일반적으로 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것. 물론 비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있으며, 결국 웹 접근성이란 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것을 의미한다. 웹 콘텐츠 접근성 지침 ( W3C 웹 접근성 권고안 ‘WCAG(Web Content Accessibility Guidelines) 2.0’을 기반으로 한국 실정에 맞게 조금 수정한 ‘한국형 웹 콘텐츠 접근성 지침 2.1’ 내용 참고 ) ● 인식의 용이성 (Perceivable) 1. 적절한 대체 텍스트 - 배경 이미지와 같이 정보를 인식할 필요가 없는 경우에는 alt.. 2023. 3. 3.
[사용자 친화 웹] 웹 표준 웹 표준 : W3C (World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’ → 어떤 환경(운영체제, 브라우저 등)에서도 이용할 수 있는 웹 페이지를 만들기 위해 → 웹 개발에 사용되는 언어인 HTML, CSS, JavaScript 등의 기술을 다룬다. 웹 표준의 장점 - 유지 보수의 용이성 (코드의 경량화) - 웹 호환성 확보 - 검색 효율성 증대 - 웹 접근성 향상 (참고) 인터넷 ⊃ 웹 인터넷 : 전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망 웹 : 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간 Semantic HTML (semantic : 의미의, 의미가 있는) 필요한 이유? 1. 개발자간 소통 2. 검색 효율성 3.. 2023. 2. 28.
[React] Custom Component(2) Storybook ( https://storybook.js.org/ ) : UI 개발 즉, Component Driven Development를 하기 위한 도구 (컴포넌트 탐색기) 사용하는 이유? 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있기 때문 지원하는 주요 기능 UI 컴포넌트들을 카탈로그화하기 컴포넌트 변화를 Stories로 저장하기 핫 모듈 재 로딩(새로고침 안 해도 변경 사항 확인 가능)과 같은 개발 툴 경험을 제공하기 리액트를 포함한 다양한 뷰 레이어 지원하기 >> 설치하기 //폴더 안에서 다음 명령어를 입력 npx storybook init //이 명령어는 package.json 을 보고 사용 중인 프론트엔드 라이브러리에 맞는 //Storybook 사용.. 2023. 2. 21.
[React] Custom Component(1) CDD (Component Driven Development) : 부품 단위로 UI 컴포넌트를 만들어 나가는 개발. 재사용이 가능하여 프로젝트의 규모가 커졌을 때 유용하게 쓰이게 된다. CSS 전처리기 (CSS Preprocessor) : CSS가 구조적으로 작성될 수 있게 도움을 주는 도구. 구조화된 CSS의 필요성이 증가함에 따라 등장하였다. → SASS (Syntactically Awesome Style Sheets) : CSS 전처리기 중에서 가장 유명한 'CSS를 확장해 주는 스크립팅 언어' 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 해 주는 등의 기능을 가짐. //예시 $base-color: rgba(198, 83, 140, 0.88) 그러나 얼마 지나지 않아 전처리기가.. 2023. 2. 20.
[사용자 친화 웹] UI/UX UI (User Interface, 사용자 인터페이스) : 사람들이 컴퓨터와 상호 작용하는 시스템 키보드, 마우스 등의 물리적 요소도 있으나, 현대에는 화면상의 그래픽 요소, 즉, GUI (Graphical User Interface, 그래픽 사용자 인터페이스)의 중요성이 더 커지고 있다. UX (User Experience, 사용자 경험) : 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼는 총체적 경험 제품 그 자체뿐만 아니라, 제품과 관련된 모든 요소가 UX에 영향을 준다. → UX는 UI를 포함하는 개념이다. UI 디자인 패턴 : 프로그래밍 시 자주 반복되어 나타나는 문제들을 해결하고자 과거 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴. 즉, 자주 사용되는 .. 2023. 2. 15.
[자료구조/알고리즘] 재귀 재귀(recursion, 再歸) 함수 : 자기 자신을 호출하는 함수 [ 재귀로 문제를 해결하는 단계 ] 1. 문제를 좀 더 작게 쪼갠다. 2. 1번과 같은 방식으로, 문제가 더는 작아지지 않을 때까지, 가장 작은 단위로 문제를 쪼갠다. 3. 가장 작은 단위의 문제를 풂으로써 전체 문제를 해결한다. //자연수로 이루어진 배열을 입력받아, 리스트의 합을 리턴하는 함수 'arrSum'을 만들어보자. //1.문제를 작게 쪼개기 (예) [1, 2, 3, 4, 5] arrSum([1, 2, 3, 4, 5]) === 1 + arrSum([2, 3, 4, 5]) arrSum([2, 3, 4, 5]) === 2 + arrSum([3, 4, 5]) ... //2.문제를 가장 작은 단위로 쪼개기 ... arrSum([3, .. 2023. 2. 13.

티스토리툴바