전체 글
-
[React] Footer UI 제작카테고리 없음 2023. 7. 18. 14:37
📌 footer UI styled component로 Footer 만들기 Footer.ts import React from 'react'; import styled from 'styled-components'; import { Link } from 'react-router-dom'; const FooterContainer = styled.footer` background-color: var(--white-deepdark); width: 100%; height: 180px; bottom: 0; padding: 20px; display: flex; align-items: center; justify-content: center; @media ${props => props.theme.breakpoints.mo..
-
[learn-typescript] interface 코딩 작성codeStates front-end/Typescript 2023. 7. 5. 18:15
📌 interface 코딩 작성 interface User { age: number; name: string; } // 변수에 활용한 인터페이스 var seho: User = { age: 33, name: 'seho' } // 함수에 인터페이스 활용 function getUser(user: User) { console.log(user); } // User에 정의된 변수와 타입을 맞춰야 한다! const capt = { name: 'capt', age: 11 } getUser(capt); // 함수의 스펙에 인터페이스를 활용 interface SumFuction { (a: number, b: number): number; } let sum: SumFuction; sum = function(a: number..
-
[learn-typescript] 할 일 관리 앱 JS -> TS 변환codeStates front-end/Typescript 2023. 7. 4. 16:33
📌 할 일 관리 앱 JS -> TS 변환 JavaScript let todoItems; // api function fetchTodoItems() { const todos = [ { id: 1, title: '안녕', done: false }, { id: 2, title: '타입', done: false }, { id: 3, title: '스크립트', done: false }, ]; return todos; } // crud methods function fetchTodos() { const todos = fetchTodoItems(); return todos; } function addTodo(todo) { todoItems.push(todo); } function deleteTodo(index) { ..
-
[learn-typescript] typescript의 장점codeStates front-end/Typescript 2023. 7. 3. 16:53
📌 typescript를 써야하는 장점 📍장점 1. 에러의 사전 방지 타입을 명명하여 에러를 사전의 방지한다. app.js function sum(a, b) { return a + b; } app.ts function sum(a: number, b: number) { return a + b; } 👩⚖️ js의 경우, 타입이 number이 외의 타입이 들어오면 client 브라우저에서 에러 확인이 가능했으나 ts의 경우, 타입이 number 이 외의 타입이 들어오면 코드에서 에러가 나기 때문에 에러를 사전의 방지할 수 있습니다. 자바스크립트를 타입스크립트처럼 사용하는 방법 타입을 활용하여 사전의 값이 들어올 타입에 대해 미리 알 수 있다. // api url var url = 'https://jsonpl..
-
[learn-typescript] live server 이용해서 user 정보 가져오기codeStates front-end/Typescript 2023. 6. 28. 18:09
📌 live server 이용해서 user 정보 가져오기 app.ts // api url var url = 'https://jsonplaceholder.typicode.com/users/'; // dom var username = document.querySelector('#username'); var email = document.querySelector('#email'); var address = document.querySelector('#address'); // user data var user = {}; function startApp() { axios .get(url) .then(function (response) { console.log(response); user = response.dat..
-
[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‘에 푸시하는데 실패했습니다 힌트: 현..