코드스테이츠
-
Git FlowcodeStates front-end/Git(project) 2023. 4. 12. 18:51
HTML 삽입 미리보기할 수 없는 소스 📌 Git Flow 📍Git branch 브랜칭이란, 기존 개발중인 메인 개발 코드를 그대로 복사하여 새로운 기능 개발을 메인 개발 코드를 건드리지 않고 할 수 있는 버전 관리 기법이다. 기존 main 브랜치를 건드리는 것이 아닌 새로운 브렌치를 생성하여 자유롭게 코드를 추가 및 삭제한다. 🔗 브랜치 생성하기 / 변경하기 (git switch) # feature라는 브랜치를 새로 생성하는 경우, -c를 붙입니다. git switch -c feature # checkout이라는 명령어도 사용할 수 있습니다. git checkout -b feature # 기존에 있던 main 브랜치로 HEAD를 변경하려면, -c를 붙이지 않습니다. git switch main git ..
-
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 표기법은 입력값의 변화에 따라 연산을 실행할 때, 연산 횟수에 비해 시간이 ..
-
[html] 개념학습 <optimization>codeStates front-end/Html 2023. 3. 29. 20:26
HTML 삽입 미리보기할 수 없는 소스 📌 optimization 📍 최적화(optimization) 사전적의미 : 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정 주어진 조건으로 최대 효율을 낼 수 있도록 하는것을 의미한다. 🔗 최적화의 필요성 및 효과 이탈률 감소 : 웹 개발 최적화 👉🏻👉🏻 빠른 속도로 렌더링 하는 것 🙏🏻 렌더링이 빠르지 않으면 페이지 이탈할 확률 ⬆️🙏🏻 전환율 증가 : 💁🏼♂️ 전환율이란? 방문자의 비율 👉🏻👉🏻 이탈율 ⬇️ 👉🏻 전환율 ⬆️ 수익 증대 : 회원 수가 증가하면 수익이 증대함을 의미 사용자 경험(UX) 향상 : 페이지 로딩이 빠를수록 UX는 향상된다. 🔗 HTML,CSS 코드 최적화하기 html,css의 DOM트리가 크고 복잡할 수록 리..
-
[TS] 제네릭codeStates front-end/Typescript 2023. 3. 23. 21:52
HTML 삽입 미리보기할 수 없는 소스 📌 제네릭 알려진 타입은 사용하는 것이 아닌 코드에서 호출하는 방식에 따라 다양한 타입으로 작동하도록 하려면 어떻게 해야 할까? 🙋♂️ 타입을 선언하지 않는 다면? any로 간주👉🏻👉🏻 any는 모든 타입을 뜻하는게 아니라 제한을 두지 않는 것일 뿐 👉🏻👉🏻 엄격한 검사를 하지 않기 때문에 문제가 발생할 수 있다. 🙋♂️ 모든 타입을 허용하려면? 제네릭 사용 👉🏻👉🏻 타입 간의 관계를 알아낸다. 🙋♂️ 제네릭이란? 타입을 마치 함수 파라미터로 사용한다는 것, 코드를 수행될 때(런타임) 타입을 명시 any처럼 타입을 지정하지 않지만, 타입을 체크해 컴파일러가 오류를 찾을 수 있다. 재사용성이 높은 컴포넌트를 만들 때 자주 활용 📍 제네릭 함수 매개변수 괄호 바로..
-
[React] 코드 분할codeStates front-end/React 2023. 3. 23. 18:41
HTML 삽입 미리보기할 수 없는 소스 📌 React 심화 📍 코드 분할(Code Spliting) React는 HTML 웹 페이지에 JS를 추가해야 하기 때문에 번들링을 진행한다. 그러나 JS코드가 점점 무거워지기 때문에 실행 속도가 느려지게 된다. 이를 방지하기 위해 해결방법은 번들을 물리적으로 나누는 것이다. 번들 분할 혹은 줄이는 법 번들링이 진행되면 npm을 통해 서드파티 라이브러리가 포함하게 된다. 🤷🏼 서드파티(Third Party) 라이브러리란? 개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리, 즉 제 3자 라이브러리 그러나 번들링 시 이 라이브러리는 많은 공간을 차지하기 때문에, 따로 따로 불러서 사용할 수 있어야 한다. /* 이렇게 lodash 라이브러리를 전체를 불러와..
-
[React] React Hooks, useMemo, Custom Hooks카테고리 없음 2023. 3. 22. 21:30
HTML 삽입 미리보기할 수 없는 소스 📌 React Hooks 📍 Function Component와 Class Component Hook은 함수 컴포넌트에서 사용하는 메서드 🔗Class Component VS Function Component 🤷🏼 컴포넌트란? 단순히 템플릿을 넘어 데이터에 맞춰 UI를 만들어 주는 기능과 API를 통해 화면의 움직임 작업을 수행 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있다 class Counter extends Component { constructor(props) { super(props); this.state = { counter: 0 } this.handleIncrease = this.hand..