728x90 반응형 [c++] 코딩테스트 준비 과정 중 자주 쓰는 STL 정리 _ string 처리 1. string 처리 1. substr string s; s.substr(0,1); s.substr(시작 인덱스, 끝 인덱스) 끝 인덱스까지 잘린다. 2. 아스키 코드 A = 65번, Z = 90번, a = 97번 z = 122번 3. find string s = "i like coding"; cout c++ 2023. 1. 2. [AWS] S3 + CloudFront로 https 정적 웹사이트 배포 1. CloudFront AWS CloudFront는 AWS에서 제공하는 CDN 서비스이다. CDN은 서로 다른 지역에 있는 콘텐츠 제공자와 사용자 간에 콘텐츠 제공을 보다 빠르게 처리하기 위한 기술이다. CDN의 원리는 각 지역마다 엣지 로케이션이라는 CDN 서버를 만들어 콘텐츠 사용자가 리소스를 요청할 시 사용자와 가까운 CDN 서버에 캐쉬되어 있던 데이터를 보내줌으로써 원래 서버와 통신할 필요없이 캐싱된 데이터를 바로 받아볼 수 있게 하는 원리이다. 예를 들면 우리가 하나의 서버를 AWS의 EC2나 S3를 이용하여 배포한다면 이 배포된 서비스를 CDN에 태워서 더욱 빠른 서비스를 제공할 수 있게 된다. 2. 계기 나는 현재 진행중인 스타트업 팀의 어드민 페이지를 맡아 개발했는데 이제 어드민 페이지를.. deployment/AWS 2022. 12. 22. [React] 컴포넌트 재사용성에 대한 고민(합성 컴포넌트) 1. 컴포넌트 재사용의 필요성 frontEnd 개발을 하다보면 특히 많이 쓰이는 컴포넌트 들이 존재한다. 버튼들, 인풋 들, carousel, card 등 ui란 너무 다양하면 사람의 눈에 오히려 피로감을 주고 정돈 되지 않은 느낌을 줄 수 있기에 많은 디자인 패턴에서 공통되는 디자인을 갖고 기능을 갖는 컴포넌트들을 정의한 후 재사용하는 것이 일반적이다. 나는 현재 서비스의 admin페이지를 제작 중이다. 이 페이지 들에는 많은 부분에 select 컴포넌트와 input컴포넌트 들이 존재하는 것을 확인했다. 위와 같은 컴포넌트들은 비단 저 한 페이지에서만 사용되는 것이 아니었다. 다양한 페이지에 모두 존재했다. 등등 저 많은 컴포넌트 들을 일일히 다 정의하는 것은 비효율적이라고 생각이 되었다. 2. 어떻게.. front-end/react 2022. 11. 22. [AI] Wgan-GP (Keras, TensorFlow) 1. WGan-GP란 gan은 ai의 발전과정 중 가장 혁신적이라고 할 수 있다. 간단히 gan을 소개하자면 두 개의 모델의 경쟁 과정이라고 할 수 있다. 사람도 좋은 라이벌이 있다면 잘 성장하듯이 하나는 가짜 이미지를 만들어내는 generator 모델 , 다른 하나는 가짜 이미지를 구별해내는 discriminator모델을 생성하여 서로를 경쟁 시키면서 가짜 이미지를 만들어내는 모델을 더욱 정교화하는 모델이다. 요즘들어 GPT-3, GPT-4등 open AI의 거대 ai들이 핫하다. 이 거대 ai들은 데이터셋으로 부터 배우는 supervised learning도 수행하지만 텍스트로 부터 이미지를 만들어내고 그림의 화풍을 변화시키는 등 창작의 영역이 가능한 ai들이다. 이 모든 기술은 gan울 기반으로 하.. 파이썬/ai 2022. 11. 20. [React] React에서 컴포넌트 간 상태 교환 문제 탐구 및 해결 1. 상태 관리의 어려움 리액트는 기본적으로 컴포넌트를 분리한다. 컴포넌트를 분리하여 작성하면 그에 해당하는 로직을 쉽게 알아볼 수 있고 state변화에 따른 렌더링을 쉽게 다룰 수 있기 때문에 권장되는 방식이지만 여기에는 한 가지 문제가 생긴다. 바로 리액트에서는 state의 흐름이 단방향이라는 문제이다. 만약 컴포넌트를 다음과 같은 방식으로 분리해두었다면 자식 컴포넌트에서 부모 컴포넌트로 state를 전달하는 것은 불가능하다. 만약 다음과 같은 페이지를 만들 때 컴포넌트를 어떻게 분리할 것인가에 대한 고민이 있었다. 나는 위에 검색 창에 해당하는 부분과 밑의 테이블을 분리했는데 여기에는 문제가 있었다. 내가 구현한 컴포넌트는 다음과 같이 분리 되어 있었는데 userSearchForm의 검색 조건이 U.. front-end/react 2022. 11. 19. [React]React에서 Chakra UI 편리하게 사용하기 1. 시작 chakra UI는 emotion.js기반의 ui 라이브러리이다. 많은 컴포넌트들이 있고 전역변수 및 기본 컴포넌트들을 커스텀해서 사용할 수 있는 기능 등 많은 기능을 제공한다. 자세한 내용은 chakra UI 공식 docs에서 확인할 수 있다. https://chakra-ui.com/docs/components Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a Simple, Modular and Accessible UI Components for your React Applications. Built with St.. front-end/react 2022. 10. 21. [Next/SVGR] NextJS에서 SVGR 다루기 1. SVGR이란 svgr이란 svg 이미지를 react에서 쉽게 다루기 위해서 만들어진 webpack 설정이자 babel 설정이다. SVGR을 이용하면 SVG파일을 react에서 컴포넌트화 하여서 사용할 수 있다. Svg 파일은 png,jpg, jpeg파일들과 다르게 크기와 상관없이 일정한 화질을 유지하며 무한한 확장 축소가 가능하고 색상과 테두리 선의 두께, 색상과 같은 속성들도 그 때 그 때 변경이 가능하다. 사실 svg 이미지는 xml이라는 마크업 언어로 쓰여진 language의 일종이기 때문에 완벽한 이미지라고 보는 것에는 무리가 있다. 나는 내가 프로젝트를 진행하면서 이 svg이미지를 어떻게 다루었는 지를 기록할 것이다. 우선 나는 NextJS에서 SVGR을 사용하기 위해 @svgr/webpa.. front-end/Nextjs 2022. 9. 17. [FrontEnd/Emotion] emotion error next-dev.js?566e:24 Warning: Received `false` for a non-boolean attribute `visibility`. 1. Emotion의 props 이름에 따른 에러 next-dev.js?566e:24 Warning: Received `false` for a non-boolean attribute `visibility`. If you want to write it to the DOM, pass a string instead: visibility="false" or visibility={value.toString()}. If you used to conditionally omit it with visibility={condition && value}, pass visibility={condition ? value : undefined} instead. 다음과 같은 에러가 발생하여 무슨 원인인지 찾아보다가 티스토리 블로그.. 에러관련 2022. 9. 17. [FrontEnd] 좀 더 재사용성이 높은 컴포넌트 - 1 1. 좀 더 재사용성이 높은 컴포넌트에 관해 현재 스타트업 프로젝트에서 nextJs를 이용해 프론트엔드를 개발하고 있다. 마크업을 진행하던 중 항상 수 많은 버튼들과 컴포넌트들을 그 때 그 때마다 새로이 만드는 것은 아주 비효율적인 방법이라고 생각했다. 또한 항상 프로그래밍에서 함수를 만들고 클래스를 만드는 등의 작업을 하는 것은 반복적인 작업을 줄이기 위함임을 학부에서 배운 것을 통해 알고 있었다. 따라서 좀 더 재사용성이 높은 컴포넌트에 대한 고민을 하기 시작했다. 많은 기술 블로그등을 찾아보고 팀원들끼리 의견을 나누던 중 같은 팀원 한 분이 나에게 아주 좋은 글을 추천해주셨다. 해당 글은 카카오 엔터테인먼트 기술 블로그에 존재하던 글이었는데 다음과 같다. https://fe-developers.ka.. front-end/FrontEnd 2022. 9. 4. [AWS] EC2 인스턴스를 이용한 배포 -NextJS, Express 1. 무엇을 하려하는가? 여태까지 개발은 그저 나의 local 컴퓨터에서만 돌아가는 프로그램이었을 뿐이다. 그렇다면 브라우저 상에서 주소를 입력했을 때 모든 사람들이 나의 프로그램 및 개발한 app을 볼 수 있게 하려면 당연히 배포(deployment)라는 과정이 필수이다. 나는 이 배포를 위해 요즘 가장 보편적이며 많은 기능을 제공하는 AWS의 EC2를 이용해서 NextJS의 app과 Express의 app을 배포해보기로 했다. 2. 무엇이 필요한가? 배포라는 것은 일반적으로 서버가 필요하다. 즉 컴퓨터가 필요하다는 것이다. 하지만 나의 로컬에서 24시간 앱을 돌리게 되면 메모리도 소비하게 되고 나의 컴퓨터의 수명또한 줄게 되어있다. 또한 내가 배포하려는 앱의 종류와 기능에 따라 나의 컴퓨터에는 그에 .. deployment/AWS 2022. 8. 11. [NextJS] useInfiniteQuery이용해 무한스크롤 구현하기 2 - IntersectionObserver 1. 무엇을 하려하는가? 앞선 포스팅에서 무한스크롤을 구현했을 때 단순히 페치버튼을 누를 때마다 다음 데이터들을 불러오도록 설계를 하였다. 하지만 이렇게 되면 내가 애초에 무한 스크롤을 구현하려던 취지와 맞지 않는다. 클릭할 때마다 다음 데이터를 불러오게 된다면 결국 페이지네이션과 크게 다를 바가 없기 때문이다. 따라서 인스타그램과 네이버와 같은 큰 플랫폼에서는 이러한 문젤를 어떻게 해결했는지 참고하기로 하였다. 인스타그램이나 네이버와 같은 플랫폼에서 데이터를 검색하거나 많은 데이터들을 보여주는 페이지가 있을 때 페이지네이션ui가 사라진 건 꽤 오래된 얘기이다. 이렇게 되면 이들이 어떤 방식으로 데이터를 불러오는 지가 궁금했는데 구글링을 하던 중 IntersectionObserver라는 것이 있어 깊게 .. front-end/Nextjs 2022. 8. 11. [Next JS] React-Query로 UseInfinityQuery이용하여 무한 스크롤 구현하기 with express.js 1. 무엇을 하려하는가? - 프론트엔드 개발을 진행하면서 좀 더 사용자 친화적인 ux에 대해 고민하게 되었다. 프론트엔드는 백엔드에서 가공된 데이터들을 어떻게 사용자들이 받아들이기 쉽게 보여주는가?에 대한 고민이 필수라고 생각한다. 그러던 와중 모든 콘텐츠 항목들을 보여주는 페이지와 같은 경우 옛날에는 페이지네이션을 통해 각 페이지마다 다른 데이터들을 보여주고 페이지를 넘길 때 화면이 깜빡거리면서 새로운 api호출과 함께 페이지가 reload되는 것이 일반적이었다. 하지만 요즘 sns나 네이버와 같은 대형 플랫폼은 트렌드를 변화하고 있다. 이제 일반적으로 보이던 페이지네이션 바와 같은 ui는 그 자리를 잃어가고 있다. 데이터가 넘쳐나고 그 넘쳐나는 데이터들 사이에서 자신이 원하는 정보를 빠르게 찾아냉하는.. front-end/Nextjs 2022. 8. 11. 이전 1 2 3 4 5 6 7 ··· 13 다음 728x90 반응형