본문 바로가기

개발 문제 해결 기록/프론트11

[typesript] 땅콩코딩 타입스크립트 강좌 - 2 Any / Union Type, Type Aliases, Type GuardsAny 타입어떠한 타입이든 변수에 할당될 수 있다.let value : any = 5;value = 'hello';value = 'true';하지만, 타입스크립트는 타입에 대한 정보를 명시할수록 개발자의 의도를 더 명확하게 기술할 수 있으며,타입에러를 컴파일 시 잡아낼 수 있으므로 any 타입은 최대한 피하는게 좋다.쓰는 경우의 예third party library에서 동적 컨텐츠를 가져온 때, 프로그램 작성시 변수 타입을 알 수 없어 지정할 수 없는 상황 Union 타입제한된 타입들을 동시에 지정하고 싶을 때 사용let value : [타입] | [타입];두 타입 중 아무 타입이 할당 될 수 있게 한다.let price: nu.. 2024. 11. 13.
[typescript] 땅콩코딩 타입스크립트 강좌 - 1 TypeScript 강좌 타입스크립트 (Typescript) www.youtube.com TypeScript자바스크립트를 기반으로 한 언어로 자바스크립트에 모든 기능을 사용할 수 있다.정적 타입 검사와 고급 타입 기능을 제공하여 코드의 안정성과 가독성을 높여준다.버그를 줄이고, 쉬운 유지보수가 가능하며, 질 좋은 코드를 만들 수 있다.타입스크립트로 작성된 화면은 자바스크립트로 다시 컴파일 되어야 한다. Static Typing : 정적 타이핑타입을 선언하고, 선언된 타입에 맞는 값만이 할당 또는 반환되어야 한다.Type Inference : 타입 추론예시let a = 5;a = 'hello'; // error : Type 'Hello' is not assignable ro type 'number'재할당하.. 2024. 11. 13.
[React] 공공데이터 기상청 API (정보보관용) 기상청 단기예보 조회 서비스 기상청_단기예보 ((구)_동네예보) 조회서비스초단기실황, 초단기예보, 단기((구)동네)예보, 예보버전 정보를 조회하는 서비스입니다. 초단기실황정보는 예보 구역에 대한 대표 AWS 관측값을, 초단기예보는 예보시점부터 6시간까지의 예보를,www.data.go.kr간단하게 방법은 활용신청 전 회원가입 > 활용 신청 후 api 번호(Encoding) 받은 다음에 문서 확인 후 사용하면 된다. 초단기 실황, 초단기 예보, 단기 예보의 차이초단기 실황초단기 예보단기 예보현재 시점에 실시간으로 관측된 기상 상태1시간~6시간 후의 날씨를 예측하는 예보6시간~3일 후의 날씨를 예측하는 예보실시간으로 측정된기온, 강수량, 풍향 및 풍속 등 현재의 기상 데이터기온, 강수 확률, 바람의 세기, 강.. 2024. 10. 22.
[React] CORS 에러 참고 블로그1 : Inpa Dev  🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이inpa.tistory.com 참고 블로그 2: 호두파파 (React) React App에서 CORS 이슈 해결하기CORS가 무엇인지, CORS 이슈를 어떻게 극복할지 알아보자velog.io그리고 gpt.. 웹 개발자라면 한 번 쯤 겪는다는,, CORS 에러,, 이렇게 겪어보다,, 공부 하는대로 정보 추가 할 예정 --> 추가 완료 CORS 에러 란?교차 출처 리소스 공유 Cross-Origin Resourc.. 2024. 10. 16.
[React] OpenWeatherMap 날씨 api 연결 사용한 api - OpenWeatherMap 5 day weather forecast - OpenWeatherMap openweathermap.org api 사용 방법OpenWeatherMap 을 들어가면 무료, 유료 사용 가능한 api 가 존재한다1. API key 가 필요하기 때문에 사이트에 회원가입 해야한다. 2. api key를 받은 것을 확인 후 .env 파일을 생성한다. (.env 파일 앞에 이름은 안 적어도 된다.)확인은 My API keys 에서 확인하면 되며, 파일 생성은 pakage.json 과 동일한 위치에 두면 된다.이건 사이트 배포까지 진행할 사람들은 개인정보 보호를 위해 필수로 하는 것이 좋지만,배포까지 하지 않을 거라면 따로 페이지를 만들지 않고 실습하여도 된다. 3.(API .. 2024. 10. 14.
[React] 기본 브라우저 모든 css 제거하기 브라우저 마다 다양한 css 가 지정되어 내가 지정한 것과 엉킬 수도 있기 때문에 미리 제거 해야 한다. https://meyerweb.com/eric/tools/css/reset/  CSS Tools: Reset CSSCSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're intermeyerweb.com 사이트 내 .. 2024. 10. 12.
[Spring] 깃허브 : 사이트 배포하기 (서버 내, Github Actions: 실습 예정) GitHub Actions 공식 문서GitHub Actions 사용시 장점자동화된 CI/CD 파이프라인코드가 GitHub 저장소에 푸시될 때마다 자동으로 테스트, 빌드, 배포 등의 프로세스를 실행할 수 있습니다. 이를 통해 코드 품질을 유지하고 배포 과정을 자동화할 수 있습니다.CI/CD - 지속적 통합 Continuous Integration / 지속적 배포 Continuous Deployment, Continuous Delivery지속적 통합, 제공 및 배포를 포함한 앱 개발 단계를 자동화하는 방법을 말한다.유연성GitHub Actions는 워크플로우를 정의할 수 있는 YAML 파일을 제공하므로 다양한 이벤트에 반응하도록 쉽게 설정할 수 있습니다. 예를 들어, 코드 푸시, 풀 리퀘스트 생성, 이슈 발.. 2024. 10. 3.
[React] 깃허브 : 사이트 배포하기 깃허브 배포 관련 공식 문서배포 제공 : 배포 REST API를 사용하여 서버 및 타사 앱과 상호 작용하는 사용자 지정 도구를 빌드할 수 있습니다. API, REST API 란? API : Application Programming Interface응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어에서 제공하는 기능을 제어할 수 있게 해주는 인터페이스 (인터페이스 : 사람과 사람, 사람과 사물 또는 기기를 연결하는 것)즉, 어플리케이션 간 지정된 형식으로 요청과 응답을 할 수 있도록 연결하는 것을 말함. REST API인터넷 식별자 URI 와 HTTP를 기반으로 하며, 브라우저 간 호환성이 좋은 JSON 형식을 주로 사용하며,각 요청이 어떤 정보나 동작을 위한 것인지 모습 자체만으로 추론이 가.. 2024. 10. 1.
[React] React.js 입문 - 2 화면 상의 데이터를 컨트롤 하는 방법Counter 실습버튼을 사용하여 동적으로 변경되는 값을 p태그에 출력import React, {useState} from 'react';const Counter = () => { const [num, setNumber] = useState(0); return ( +1 -1 )}state동적으로 변경되는 값useState동적으로 변경되는 값을 관리하기 위한 함수const [num, setNumber] = useState(0);const num = 0; 과 같다.0을 기본값으로 갖는 변수이다.numsetNumbernum 은 useState 로 인해 0 이다.n.. 2024. 9. 2.

티스토리툴바