본문 바로가기

전체 글78

알고리즘을 위한 C++ 시작하기 기존 C에서 C++로 바꾸면서 printf나 scanf 같은 C형식의 입출력 혹은 헤더 배제 #include int main(){ int a; cin>>a; couta; cin.ignore(); getline(cin,str);입력 버퍼를 비우기 위해 cin.ignore() 함수 활용한다. EOF처리는 엄청 쉽다. string a; while(true){ cin>>a; if(cin.eof()) break; }또는 string a; while(cin>>a){ // 활용 코드가 들어갑니다 } getline 함수 활용시 string str; while(getline(cin,str)){ cout 2024. 4. 9.
React로 간단히 만들어보는 구글맵(with Typescript) 구글 맵을 프로젝트에 이용하려고 했는데, 진짜 진짜 정보가 적어서 어떻게든 완성하였다.나는 @googlemaps/react-wrapper를 이용하였고, 기본적인 세팅은 다른 글에서 보았다. https://leirbag.tistory.com/158 React에서 Google Maps API를 자유롭게 사용하는 방법 (@googlemaps/react-wrapper)React에서 Google Maps API를 사용하기 위해 사용하는 @react-google-maps/api나 react-google-maps 같은 라이브러리들을 사용하는 방법이 있을 것입니다. 이 라이브러리들을 사용하면 Google Maps API에 있는 주요 기leirbag.tistory.com 많은 사람들이 docume.. 2024. 4. 5.
NextJS Deep Dive NextJS Deep Dive 파일 기반 라우팅과 리액트 서버 컴포넌트 app 폴더는 NextJS 프로젝트에서 가장 중요한 폴더이다. 이 app 폴더에서 전반적인 웹 사이트에 넣고 싶은 페이지를 설정할 수 있다. app폴더의 page.js 파일을 통해 만드는데, 이 page.js 파일은 layout.js 파일과 마찬가지로 보호된 파일명이다. 이 page.js 파일은 NextJS에게 페이지를 렌더링해야 한다고 말해준다. 이 컴포넌트의 특별한 점은 서버 컴포넌트라는 것이다. 서버 컴포넌트 React만으로는 만들 수 없고, NextJS에서 지원하는 형식이다. 표면적으로는 일반적인 컴포넌트이지만, NextJS가 이 컴포넌트가 서버에 렌더링되고, 컴포넌트 함수가 서버에 실행되는 것을 보장한다. Terminal이 .. 2024. 4. 1.
React Query/Tanstack Query React Query/Tanstack Query Tanstack Query(React Query) React-Query로도 불리며, HTTP 요청을 전송하고, 프론트엔드의 UI를 백엔드 데이터와 동기화시키는 데에 도움을 주는 라이브러리이다. 무조건 Tanstack Query(이하 리액트 쿼리)를 사용할 필요가 없고, useEffect 혹은 axios 등으로도 작업을 할 수 있다. 하지만 Tanstack Query를 이용하면 코드가 매우 간결해지고, 내장된 고급 기능을 이용하면 작업이 좀 더 수월해진다. 빈번하게 변경되는 데이터가 아니라면 매번 서버에 요청을 날리는 것보다, 캐싱된 정보를 제공하는 것이 서버의 부담을 줄이면서도 사용자 경혐을 향상시킨다. 리액트 쿼리는 다음과 같은 이슈를 해결한다. 동일한 .. 2024. 4. 1.
Deploying React Apps Deploying React Apps 배포 과정 배포할 때, 거치는 과정은 다음과 같다. 코드를 작성하고 테스트 최적화가 가능한지 파악(지연 로딩이 가능한가도 파악) 프로덕션용 앱 빌드(코드 패키지 최적화) 지연 로딩 리액트의 최적화 테크닉 중에서 React.memo()를 사용할 수도 있지만, 필요한 코드만 로딩함으로써 최적화를 이끌어낼 수도 있다. 지연 로딩(Lazy Loading)은 특정 코드를 필요할 때만 로딩하는 방법이다. 만약 프로젝트가 지연 로딩 없이 빌드되고 최종 사용자에게 전달될려면, import 문들에 포함된 코드들이 최종 사용자들에게 전달되기 전에 모든 코드가 불러와져야 한다. 기초적인 앱에서는 문제가 되지 않지만, 복잡한 앱인 경우, 수많은 라우트와 컴포넌트가 문제될 수 있다. 또한 .. 2024. 4. 1.
User Authentication User Authentication 사용자 인증의 원리 사용자가 로그인 요청을 백엔드에 보낸다. 그러면 서버는 어떻게 응답을 해야 하는가? 단순히 응답에 yes라고 대답하면 안된다. 가짜 응답으로 정보를 탈취할 수 있기 때문이다. 보통 다음에 저술될 두 가지 방법을 사용한다. 서버 사이드 세션(Server-side Sessions) 프론트엔드와 백엔드가 분리되지 않은 풀스택 앱에서 자주 사용하는 대중적인 방법이다. 클라이언트가 로그인하고 인증된, 서버에 고유 식별자를 저장한다. 기본적으로 yes를 서버에 저장하고, 식별자를 이용해, 그 대답을 특정 클라이언트와 연결한다. 그리고 그 식별자를 다시 클라이언트에 보낸다. 그 이후, 클라이언트가 요청을 통해 보호되어 있는 리소스에 접근할 때, 해당 식별자를 전.. 2024. 4. 1.

티스토리툴바