본문 바로가기

Computer Science14

img SEO에 닿아보자 안녕하신가?근 5개월만에 돌아온 프론트엔드 개발자 하상원이다.이직하고 새로운 환경에 적응하느라 기술 블로그에 소홀해졌다... 라고 하는 변명하지만 괜찮다!난 아직 개발을 좋아하거든 오늘은 프론트엔드 개발자로서 종종 듣게되는 SEO에 대해 궁금해서 글을 쓰게 되었다.SEO가 뭔지는 안다.. 문제는 그게 손에 와닿지 않는다는 점.SEO 개선을 한다고 해서 어떤 효과가 있는지 측정해보지 못했다는 것이다.그래서 도메인을 구매하고, 할 수 있는 것들을 모두 적용해서 구글 검색에 띄울 수 있도록 해보겠다! 일단 SEO란 무엇일까?SEO는 ‘Search Engine Optimization’의 약자이다.즉 검색엔진(구글, 네이버 등)에 친화적인 사이트를 구축하여,광고가 아닌 자연 검색 결과를 통해 트래픽의 양과 질을.. 2024. 10. 30.
img Full text search를 위한 검색 array 알고리즘 Hi 난 하상원 27세 오늘은 소소한 알고리즘 코드를 짜는 일이 있어서 적어보려고 한다. 파이어 베이스는 풀 텍스트 서치를 지원하지 않는다. 만약 DB에 하상원이라는 문자열이 저장되어 있다면, 검색 기능을 만들었을 때 where( 검색어, ==, name ) 으로 검색할 수 있다. 하지만 이건 검색창에 꼭 하상원을 써야한다. 상원으로는 검색할 수 없다. 그렇다면 모든 데이터를 받아와서 스테이트에 저장하고 내부에서 검색하면 어떨까 그건 안된다. 검색 한 번 할 때마다 모든 데이터를 저장하고 저장한 스테이트에서 필터를 돌려야하는데, 파이어 베이스는 리드 수 당 돈을 낸다. 고로 이따위로 짰다간 회사가 망할 수 있다. 대신에 파이어베이스엔 array-contains-any가 있다. 검색어가 배열 중 뭐 하나만.. 2022. 10. 24.
img SSR(Server-side Rendering)이란 무엇인가. SSR 이란 ? SSR이란 렌더링의 방식이다. 렌더링이란, 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것이라고 이전에도 말했다. 알겠나 ? CSR vs SSR CSR은 내 클라이언트에서 로직을 수행하는 반면, SSR은 서버에서 모든 것을 처리한다. 페이지를 이동할 때마다 서버에 데이터를 요청하고, 서버에서는 모든 로직을 처리하고 데이터를 클라이언트에게 주는 것이다. SSR이란 Server, 즉 서버에서 렌더링 하는 것이다. 우리가 서버에 데이터를 요청할 때 마다, 서버는 완성된 페이지를 보내주고, 클라이언트는 그것을 받아 렌더링 한다. 두 개의 비교를 이쁘게 한 사진을 찾아서 첨부한다. 이전 글과 같은 출처의 SSR 버전의 사진도 첨부했다. 그렇다면 각광받는 SSR의 장점은 대체 무엇일까.. 2022. 9. 21.
img CSR(Client-side Rendering)이란 무엇인가. CSR 이란 ? CSR이란 렌더링의 방식이다. 렌더링이란, 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것이다. 알겠나 ? CSR 이란 ? 2트 그 정도로는 알 수 없다. 그렇다면 CSR이란 무엇인가.... CSR을 알기 전에 SPA부터 알아야한다. SPA vs MPA SPA란 Single Page Application. 즉 한 페이지로 구성된 앱이라는 뜻이다. React 개발할 때 보면 html 파일이 한 개다. 왜냐 ? SPA, Single Page Application 이기 때문이다. 이 하나의 html 파일에서 모든 정보를 사용할 수 있는 것이다. 일종의 웹 애플리케이션 아키텍쳐라고 볼 수 있다. 반대는 MPA가 있다. 뭐 똑같은데 single이 아니라 multi인 것이다. 과거에는.. 2022. 9. 19.
img 아토믹 디자인 패턴 - 모두 재활용을 합시다 안녕하신가 난 프론트엔드 개발조무사 하상원이다 ~ 회사에서 아토믹 디자인 패턴을 이용한 개발을 하고 있다 후후 과연 아토믹 디자인이 뭘까 ? 아토믹 디자인이란, 아토믹하게 디자인 하는 것이다 !.. 혹은 내가 이해한 바는 UI를 나누는 방법 같은 느낌이다. page(Next라 페이지는 따로), templates, organisms, molecules, atom 이렇게 조각조각 쪼개서 UI를 구성하는 것이다 ! 나는 UI를 위의 사진처럼 page는 가장 크고, - 링크 단위 templates은 한 페이지를 구성하며, - 한 화면 단위 organisms은 템플릿을 크게 분리하고, - 화면의 큰 요소들 molecules는 한 가지 목적을 가지며, - 특정 모달창, 리스트 atom는 최소의 기능을 단위로 나누.. 2022. 9. 6.
img SQL과 NOSQL의 차이 SQL - 관계형 데이터베이스 -> RDBMS(관계형 DB 관리 시스템, 오라클/mySql 등) 에서 데이터를 저장, 수정, 삭제, 검색 가능하다 -> 정해진 스키마에 따라 테이블에 저장된다, 관계에 따라 여러 테이블에 분산된다, 스키마를 준수하지 않은 레코드는 추가할 수 없다 -> 데이터의 중복을 없애기 위해 관계를 이용하여 저장한다. 하나의 테이블에서 중복없이 하나의 데이터만을 관리하기 때문에 부정확한 데이터를 다룰 위험이 없다 장점 +++데이터 무결성 보장 ++명확한스키마, 데이터는 한번만 저장됨 ++수직 확장만 가능(성능 업글) 단점 -- 수평적 확장이 어렵고, 조인이 많을 시 매우 복잡한 쿼리문이 만들어짐 SQL 데이터베이스 사용이 더 좋을 때 관계를 맺고 있는 데이터가 자주 변경되는 애플리케이.. 2022. 7. 19.
반응형