codeStates front-end
-
Project GitHubcodeStates front-end/Git(project) 2023. 4. 12. 18:35
HTML 삽입 미리보기할 수 없는 소스 📌 Project GitHub 📍 kanban 칸반이란, 팀의 조직이 작업을 시각화하고, 업무의 병목 현상과 리소스 낭비를 해결하는 업무 관리 방법 칸반 보드를 통한 시각화 🔗 Work In Progress(WIP)로 진행중인 업무 제한 및 흐름 관리 WIP이란? 현재 진행하고 있는 작업을 의미 칸반에서는 각 업무 단계에 WIP제한을 둘 수 있다. WIP제한이 2이면, 두 개 이상의 카드가 해당 열에 위치할 수 없게 된다. 🔗 명확한 팀 정책 설정 개발 업무에 경우 다른 업무에 비해 맥락 전환이 없이 집중할 수 있어야 업무 효율이 증가한다. 개발 프로젝트의 경우 인원수가 늘어난다고해서 소요 기간이 드라마틱하게 증가하지 않는다. 💁🏼♂️ 그럼 어떻게 해야할까? 칸반..
-
Algorithm의 개념2codeStates front-end/Algorithm 2023. 4. 6. 18:33
HTML 삽입 미리보기할 수 없는 소스 📌 Algorithm의 개념 문제를 해결하는 최선의 선택 📍순열과 조합 순열 서로 다른 n개의 원소를 가지는 어떤 집합에서 중복없이 순서에 상관있게 r개의 원소를 선택 또는 나열하는 것 순열은 조합과 달리 순서도 따져서 부분집합을 만든다. 순열의 식 P - Permutation n - 원소의 총개수 r - 그 중 뽑은 개수 순열은 중복을 허용하지 않기 때문에 반드시 R { e = e.charCodeAt(0); if(e 122){ result = '영문 소문자가 아닙니다.'; } }); result; // '올바릅니다.' 휴대전화 번호 유효성 검사 let regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]..
-
ProxycodeStates front-end/node(server) 2023. 4. 4. 21:59
HTML 삽입 미리보기할 수 없는 소스 📌 Proxy 📍 CORS 정책이 필요한 이유 💁🏼♂️ CORS란? 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS), 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 💁🏼♂️ 출처란? 접근할 때 사용하는 URL의 프로토콜(스킴), 도메인 포트로 정의되는데 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가진다고 말한다. 개발한 서비스 및 프로젝트가 모두 출처의 접근을 허락한다면 그 문제로 야기될 수 있다. 따라서 모든 도메인을 허용해서는 안되고, 특정 도메인을 허용하도록 구현해야한다. 프론트엔드 개발자 👉🏻👉🏻 서버 도메인 허..
-
Algorithm의 개념1codeStates front-end/Algorithm 2023. 4. 4. 11:38
HTML 삽입 미리보기할 수 없는 소스 📌 Algorithm의 개념 문제를 해결하는 최선의 선택 📍시간 복잡도 입력값의 변화에 따라 연산을 실행할 때, 연산 횟수에 비해 시간이 얼마만큼 걸리는가? 효율적인 알고리즘 구현 👉🏻👉🏻 입력값이 커짐에 따라 증가하는 시간의 비율을 최소화한 알고리즘 🔗 Big-O 표기법 시간 복잡도를 표기하는 방법 Big-O(빅-오) Big-Ω(빅-오메가) Big-θ(빅-세타) 각각 최악, 최선, 중간(평균)의 경우를 대하여 나타내는 방법, Big-O표기법이 가장 자주 사용 Big-O표기법 👉🏻👉🏻 최악을 고려 "최소한 특정 시간 이상이 걸린다" , "이 정도 시간까지 걸릴 수 있다" O(1) Big-O 표기법은 입력값의 변화에 따라 연산을 실행할 때, 연산 횟수에 비해 시간이 ..
-
아마존 웹 서비스(AWS)codeStates front-end/node(server) 2023. 3. 31. 11:56
HTML 삽입 미리보기할 수 없는 소스 📌 AWS 클라우드 컴퓨팅 서비스 📍 Cloud Computing 기존 서버 방식 - 같은 공간에 더 많은 컴퓨터를 추가해 한 대가 해결할 수 있는 요청을 여러 대가 나누는 방식 👉🏻👉🏻 공간의 한계와 주기적인 유지 관리의 어려움으로 한계가 드러남 클라우드 - 서버의 자원과 공간, 및 네트워크 환경 제공 필요할 때마다 컴퓨팅 능력을 유연하게 조절 사용한 만큼의 요금만 지급 👉🏻👉🏻 클라우드 서비스에 문제가 생기면 내가 배포하고 관리하는 환경에 영향을 미치는 단점이 존재함 🔗 SaaS, IaaS, PaaS IaaS : 서비스로 제공하는 인프라스트럭처클라우드 인프라스트럭처 서비스는 확장성이 높고 자동화된 컴퓨팅 리소스를 가상화하여 제공하는 것다. PaaS : 서비스로 ..
-
[html] 개념학습 <optimization>codeStates front-end/Html 2023. 3. 29. 20:26
HTML 삽입 미리보기할 수 없는 소스 📌 optimization 📍 최적화(optimization) 사전적의미 : 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정 주어진 조건으로 최대 효율을 낼 수 있도록 하는것을 의미한다. 🔗 최적화의 필요성 및 효과 이탈률 감소 : 웹 개발 최적화 👉🏻👉🏻 빠른 속도로 렌더링 하는 것 🙏🏻 렌더링이 빠르지 않으면 페이지 이탈할 확률 ⬆️🙏🏻 전환율 증가 : 💁🏼♂️ 전환율이란? 방문자의 비율 👉🏻👉🏻 이탈율 ⬇️ 👉🏻 전환율 ⬆️ 수익 증대 : 회원 수가 증가하면 수익이 증대함을 의미 사용자 경험(UX) 향상 : 페이지 로딩이 빠를수록 UX는 향상된다. 🔗 HTML,CSS 코드 최적화하기 html,css의 DOM트리가 크고 복잡할 수록 리..
-
[React] React와 TDDcodeStates front-end/React 2023. 3. 29. 17:13
HTML 삽입 미리보기할 수 없는 소스 📌 React 와 TDD 📍 TDD(Test-driven Development) 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론 개발자가 자신이 바람직하다고 생각하는 코드의 결과를 미리 정의하고, 이것을 바탕으로 코드를 작성하는 법 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성라는 과정을 반복하는 것을 의미 🔗 TDD를 사용하는 이유 테스트코드를 먼저 작성해야 하기 때문에 시간이 오래 걸리는 것처럼 느껴지지만, 오히려 예상하지 못했던 버그를 줄여 소요 시간을 줄일 수 있기 때문이다. 🔗 TDD를 작성하는 방법 console.log escribe, it, assert, expect 등의 다양한 키워드들 : JavaScript 내장 기능이..
-
[TS] 제네릭codeStates front-end/Typescript 2023. 3. 23. 21:52
HTML 삽입 미리보기할 수 없는 소스 📌 제네릭 알려진 타입은 사용하는 것이 아닌 코드에서 호출하는 방식에 따라 다양한 타입으로 작동하도록 하려면 어떻게 해야 할까? 🙋♂️ 타입을 선언하지 않는 다면? any로 간주👉🏻👉🏻 any는 모든 타입을 뜻하는게 아니라 제한을 두지 않는 것일 뿐 👉🏻👉🏻 엄격한 검사를 하지 않기 때문에 문제가 발생할 수 있다. 🙋♂️ 모든 타입을 허용하려면? 제네릭 사용 👉🏻👉🏻 타입 간의 관계를 알아낸다. 🙋♂️ 제네릭이란? 타입을 마치 함수 파라미터로 사용한다는 것, 코드를 수행될 때(런타임) 타입을 명시 any처럼 타입을 지정하지 않지만, 타입을 체크해 컴파일러가 오류를 찾을 수 있다. 재사용성이 높은 컴포넌트를 만들 때 자주 활용 📍 제네릭 함수 매개변수 괄호 바로..