creamymood의 개발 공부 발자취 💭

타입 스크립트의 중요도를 깨닫고,,갈 수록 헷갈려지는 멘탈을 다 잡고,,처음부터 다시 세세히 꼼꼼히 공부중 ! 화잇팅타입 지정 (Type Annotation) (=문법)일반 변수, 매개 변수, 객체 속성 등에 :TYPE 과 같은 형태로 타입을 지정해줄 수 있다.let name: string = "Jane";let age: number = 25;let isHappy: boolean = true;여기서 : string, : number 같은 부분이다. function someFunc(a: TYPE_A, b: TYPE_B): TYPE_RETURN { return a + b}let some: TYPE_SOME = someFunc(1, 2)이런 식으로 지정해줄 수 있고,function add(a: number,..

타입스크립트의 등장 배경자바스크립트는 동적 타입 시스템으로 다소 자유롭고 유연한 타입 시스템을 가진 프로그래밍 언어다.초기에 단순한 종류의 상호작용을 위해 개발되었기 때문에, 그다지 엄격성이 요구되진 않았다.유연한 장점 중 하나는, 우리가 직접 변수의 타입을 직접 정의하진 않아도 되는 편리함이 있다. 하지만 그러한 유연함이 단점이 될 때가 있는데,자유로운 만큼 오류나 버그 같은 비안정성인 문제가 있고, 이에 타입 스크립트가 등장했다. 타입 스크립트는 자바스크립트에 타입 검사가 실시된 자바스크립트의 확장판이라고 생각하면 쉽다.완전히 다른 문법이 아닌, 자바스크립트에서 타입을 직접 지정해주는 여러가지 문법이 추가 된 것이다. 타입 스크립트는 그렇다고 너무 엄격한 언어는 아니다. 정적 타입 시스템과 동적 타입..

TypeScript 공부를 시작하면서..타입을 지정해주는 것 말고는 큰 메리트가 없는데(?) ㅋㅋ 라는 생각이 들면서..이걸 왜 공부해야할까? 공부를 한다면 어느정도로 해야할까? 리액트랑은 아예 별개인건가? 리액트랑 함께 쓰면 좋다고 ? 그렇다면.. 리액트랑 같이 쓰인다면, 어느정도로 손봐서(?) 어떻게 어느시점에 쓰는건가.. 이런게 다 궁금해졌다. 일단 기본 문법들은 익히고 있는데,,어떨 때 언제 어떻게 쓰는지 알아야.. 사용도 할 수 있을테고 응용도 하고 할테니까, 한번 찾아봤다 혼자 찾아보고 생각해본 결론은.. 타입 검사가 추가된 조금 더 발전된 자바스크립트를 리액트에서 쓰는 것! 리액트가 기본이되, 타입 지정 같은 것을 할 수 있는 문법이 추가된 것 ! ~ 이라고 생각하기로 했다.✓타입스크립..

해당 게시글에서의 구현 목표는디테일 페이지에서 온도에 따른 추천 옷과 노래를 보여주고,날씨에 맞는 배경을 보여준다.1) 한 공통 컴포넌트에서 온도별로 나눈다.공통 컴포넌트를 만든 뒤, 그 안에서 온도 분기 처리 해줄 예정 1. 우선 Clothes 공통 컴포넌트에 온도를 props로 내려준다. 불필요한 코드를 제거한 코드는 다음과 같다. return( { detailCityWeatherValue? ( ):( 날씨 정보를 불러오는 중... )} ..

인라인 스타일?- css파일 없이 JSX 안에서 바로 style 속성에 객체로 스타일을 적용하는 방법- 간단해서 바로 테스트해보기나, 간단한 프로젝트에서 사용할 수 있다. function MyComponent() { return ( 인라인 스타일 예시 );} 문법 내용속성 이름은 카멜케이스(camelCase) 로 써야 함예: backgroundColor, fontSize, marginTop값은 무조건 문자열이나 숫자단위가 px일 경우, 숫자만 써도 자동으로 처리됨 예시: 버튼에 인라인 스타일 주기function MyButton() { const buttonStyle = { backgroundColor: 'black', color: 'white', pa..

children은 React 컴포넌트에서 컴포넌트 태그 안에 들어가는 자식 요소들을 전달받을 수 있게 해주는 특별한 prop.(* 고정 문법은 아니지만, 리액트에서 특별하게 처리하는 props이름으로써, 다른 데이터 변수명으로 사용하는건 삼가해야함* ) 👩🏻‍💻기본 사용법function MyBox({ children }) { return ( {children} );}// 사용 예시function App() { return ( Hello, world! Click me );} MyBox 컴포넌트는 children prop을 받아 안에 넣습니다.App에서 태그 안에 들어간 와 요소들이 children으로 전달됩니다.→ Hello, wo..

시작 전에.. 로고를 클릭하면 메인페이지로 이동하게 하는 코드 return( W E A T H E R )스타일을 입혀서, 하이퍼링크 스타일 없애줌..해당 게시글에서의 구현 목표는,검색창에 검색 하면 디테일 페이지에서 사용자가 검색한 도시의 날씨 디테일을 보여주는 것 ✎ 혼자 고민해본 흐름더보기1. 우선 인풋창에 입력 되는 값을 상태로 저장한다. 2. 그리거 버튼을 눌렀을 때 -> 인풋창 값으로 url을 그 값으로 바꾸면서 디테일로 이동하는 navigate3. 그리고 디테일 페이지에서 useParams를 써서 그 도시 이름을 받아와서 API 호출 한다 ..