전체 글
-
[React] styled-components - card , dummydata 사용하여 로컬에 데이터 넣기codeStates front-end/React 2023. 5. 16. 00:32
📌 dummydata 구현 DummyData.js export const campgrounds = { data: [ { productId: 2, productName: "캠핑장2", address: "한강 어딘가2", location: "서울2", content: "캠핑장 빌려드립니다.2", capacity: 10, cancellationDeadline: "2023-05-03T10:00:00", productPrice: 30000, productPhone: "010-1234-1111", latitude: null, longitude: null, deleted: false, createdAt: "2023-05-10T09:24:02.995997", createdBy: "name", modifiedAt: "2..
-
[job preparation] 기술 면접5 - 브라우저 렌더링 방식에 대해 설명하세요.codeStates front-end/Job Preparation 2023. 4. 12. 20:43
📌기술 면접 tip! 결론은 간단하게, 설명은 구체적으로 자신의 언어로 설명할 수 있어야 함 간명한 정리와 풍부한 설명을 위해서는 지속적인 모의 면접을 통해 기술 설명을 연습하고, 어려운 개념에 대해서 깊게 고민하고 블로그에 기록하는 연습이 필요 기술 면접 준비 🧐 브라우저 렌더링 방식에 대해 설명하세요. 👨🏻💼 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정입니다. 브라우저는 4단계로 렌더링을 수행하는데요, 브라우저가 서버에 요청하면 html,css 트리 생성 후 렌더링 트리에서 각 노드의 크기와 위치의 계산후 개별 노드를 화면에 그립니다.이 때 렌더링 방식은 두가지가 있는데 서버쪽에서 렌더링 준비를 하고 클라이언트에게 전달하는 서버 사이드 렌더링과 서버가 요청을 받으면 클라이언트..
-
Git Error 현재 브랜치의 끝이 리모트 브랜치보다 뒤에 있으므로 업데이트가 거부되었습니다.codeStates front-end/Git(project) 2023. 4. 12. 20:15
📌 Git Error 📍Push Error 이제까지 메인에서만 작성하다가 처음으로 브렌치 만들고 push하려는데 이런 에러가 떴다...! 이게 뭐지,,, 싶다가 구글링을 해봤더니 강제 푸쉬하면 된다길래 아래 명령어를 입력했다. git push origin main --force 그러자 이런 에러가 떴다..! 돌아버리겠다. 한참 헤매다 블로그를 발견했다. Git Error Logs · Devlog Publishing Date:2020-10-13 Keep Editing… 깃 에러 로그 모음 git push 푸시 실패 에러 로그 To $repo_url ! [rejected] main -> main (non-fast-forward) error: 레퍼런스를 ‘$repo_url‘에 푸시하는데 실패했습니다 힌트: 현..
-
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 ..
-
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 표기법은 입력값의 변화에 따라 연산을 실행할 때, 연산 횟수에 비해 시간이 ..