천진난만 코딩 스토리

1. unknown any 타입과 동일하게 모든 값을 허용하지만, 할당된 값이 어떤 타입인지 모르기 때문에 함부로 프로퍼티나 연산을 할 수 없다. unknown 타입으로 변수를 정의하면 '변수의 타입이 unknown이라 어떤 값이든 올 수 있기에 엄격하게 검사'하도록 한다. unknown과 any 비교 unknown any 모든 타입을 허용합니다. 프로퍼티 또는 연산을 하는 경우 컴파일러가 체크한다. -> 문제 되는 코드를 미리 예방할 수 있다. TypeScript에서 타입 검사를 느슨하게 한다. -> 개발 당시에는 문제가 없으나 애플리케이션 또는 웹 페이지 개발 후 예기치 못한 문제가 발생할 가능성이 매우 높다. 2. void void는 아무것도 return하지 않는 함수를 말한다. 보통은 따로 voi..

1. readonly 속성 readonly 속성은 요소를 읽기 전용으로 만들어 준다. const names: readonly string[]=["1", "2"] names.push() //불가능 names.filter() //가능 names.map() //가능 readonly 속성을 적용하게 되면 값을 수정할 수 없게 된다. 다만, array를 변경하지 않는 즉, 불변성을 지켜주는 filter나 map은 사용할 수 있다. 다시 정리하면, readonly는 요소이 불변성을 지켜주는 보호장치인 셈이다! 2. Tuple Tuple은 array를 생성하게 한다. 다만 최소한의 길이를 가져야 하고, 특정 위치에 특정 타입이 있어야 한다. const user:[string, number, boolean] = ["o..

1. 타입스크립트에서 타입을 지정해주는 방법 타입스크립트란 말 그대로 타입을 지정해준다는 의미이다. 보통 자바스크립트에서는 [1,2,3]+flase => 123flase 이렇게 말도 안되는 코드를 실행해준다. number와 boolean을 더해주는 말도 안되는 실행을 보여준다. 실행되는 이유는 자바스크립트는 우리가 작성하는 코드를 최대한 이해하려고 하고, 추론하여 실행하기 때문이다. 그렇기에 저런 이상한 코드를 작성해도 오류가 발생하지 않는다. 하지만, 타입스크립트는 타입을 지정해주기에 오류가 난다고 알려주게 된다. 타입스크립트로 타입을 지정해주는 방식에는 두 가지가 있는데, 1. 명시적으로 지정해주는 방식 2. 타입스크립트가 추론하게 하는 방식 이렇게 두 가지가 있다. let a : string = "..

원래는 styled-components 를 사용해서 프로젝트를 해왔다. 근데 이번에 emotion을 알게 되었고, 이 둘을 비교하여 공부를 해봤다. 결론부터 말하자면? 별 다를게 없다!! 사용법도 크기도 확연한 차이를 드러내지 않는다. 그래서 뭘 써도 상관이 없을 듯 하다. 다만 타입스크립트 사용시 styled-components는 @types/styled-components 따로 설치 해주어야 한다는 차이점 정도?? 속도나 크기에선 미미한 차이가 있거나 상황에 따라 달라지기에 굳이 이 둘을 따로 공부할 필요는 없는 것 같다. //스타일드 컴포넌트 @styled-components @types/styled-components //이모션 @emotion/react @emotion/styled

정리할 건 많지만,,, 노션에만 정리해두고 블로그는 못 한지 오래... 오늘은 이력서 쓰고 타입스크립트로 슬랙 클론 + 또두리스트를 만들기 위해 준비를 하려고 한다!! 또두리스트 하구 프로젝트도 타입스크립트로 변경해보고 이래저래 써봐야겠다. 타입스크립트를 수동으로 환경 세팅해주니 유익하긴 하지만, 너무 오래 걸리고 복잡해서 결국 명령어로 설치 해버렸당... $ yarn create react-app . --template typescript // or $ npx create-react-app . --template typescript 명령어로 타입스크립트로 리액트를 설치해주었다!! 문제는 서버였다.... 이래서 백부분도 공부하라는건가보다. 파일구조 자체는 클론해올 수 있어서 클론을 했지만 디비 연결은 직..

회의실 예약을 하게 되면 예약한 날짜와 회의 시작, 끝 시간이 들어오게 된다. 현재 시각에 따른 예약 유무를 확인해야해서 고민을 해봤다. 들어오는 데이터를 어떻게 가공을 하고 회의 중인 저 시간에 어떻게 예약 유무를 보여 줄 것인지 고민을 했다. 정리를 해서 해야한 고민을 적자면, 1. {start: '2023-04-25T13:00', end: '2023-04-25T13:59'} 이렇게 들어오는 데이터에서 날짜와 시간을 따로 꺼내서 어떻게 가공해 쓸 것 인지. 2. start와 end의 시간 사이에 현재 시각이 위치 한다면 어떻게 구분해야할지. 3. 현재 시간은 어떻게 받아와야 할지. 4. 어떻게 예약 유무를 회의실 요소에 표현할 것인지. 이 고민을 해결하기 위해서 1. 데이터를 T로 잘라서 앞은 날짜로..

과제만 주구장창 했기에 오류와 싸우느라 바빠서 블로그에 적을 것들을 잊어버렸당....... 그나마 기억나는 것을 적어야겠다. 일단 느낀 건 thunk는 어렵다...... 리액트 쿼리랑 너무 비교될 정도로 어려웠다. 그치만 thunk로도, 리액트 쿼리로도 과제 구현에 성공했다!!!! 먼저 데이터를 받아와서 get을 해주고 상세페이지를 연결해야 하는데 상위 컴포넌트에서 get을 한 것이 아니기에 오류가 났다.. 그래서 아예 Router.js에서 get을 해주고 데이터를 내려주었다. 그렇게 사용하니 문제없이 사용할 수 있었다!! 과제 해둔게 배포 안되어 뭔가 했더니 yarn build로 확인해보니! 리액트 아이콘 패키지 설치 안했다... 별다른 오류는 안 떠서 몰랐다..... 패키지 설치하니 잘 된다!!!!

이 부분 내용들을 아직은 와닿지 않는다.... 중요한 부분인 것은 알겠고 흐름까지는 이해했지만, 이 부분은 협업 때 사용하기 위해 더 공부가 필요할 것 같다. 다시 한번 보는걸로!!! 1) 인증&인가 ① 인증(Authentication) vs. 인가(Authorization) ❶인증(Authentication) 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차이다. ❷인가(Authorization) 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차이다. ② http 프로토콜 통신의 특징 ❶ 무상태 (Stateless) 서버는 클라이언트의 상태를 기억하지 않는다. 각 요청마다 서버에서 요구하는 모든 상태 정보를 담아서 요청해야 한다. 상태값은 매 요청마다 클라이언트가 가지고 오기 때문에, ..

이 내용은 뭔가 재미있는 부분이었다!! 테스트 하기 위해 버튼을 여러번 타다다다다닥 누르며 스트레스를 풀었달까 ㅎㅎㅎㅎㅎ 많이 어렵지도 않고 재미있어서 좋았다 하지만 이 부분이 나중에 내게 어떤 어려움으로 다가올지 아주 두근하다.....!! 1) Throttling & Debouncing 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때, 과도한 이벤트 핸들러 호출을 방지하는 기법에 쓰로틀링과 디바운싱이 있다. Timer Web API 중 setTimeout 메소드를 사용하여 쓰로틀링과 디바운싱을 각각 구현해보고 원리를 이해하고 적용할 줄 알아야 한다. ① Throttling 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록..

리액트 쿼리...... 생각보다 이 친구가 날 괴롭혔다... 썽크를 해서 가볍게 할 줄 알았던 나 반성해.... 결국 이 내용을 이해하기 위해 내가 전에 만들었던 투두리스트 파일을 뜯어가며 새로 고쳐보며 이해하였다. 결국 강의에 나오지 않은 부분도 완성하기 성공했다ㅡㅜㅜㅜ 너무 감격스러운 것 ㅠㅠㅠㅠㅠ 요 몇 주 심각히 힘들었는데 보상받은 기분이라 너무 좋았다! 1) React Query ① 리액트 쿼리란 ❶ 기존 미들웨어의 한계 우리는 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-Saga 등 미들웨어를 채택해서 사용할 수 있다. 하지만 다음과 같은 문제가 있습니다. 보일러 플레이트 : 코드량이 너무 많다. 규격화 문제 : Redux가 비동기 데이터 관리를 위..