WEB/일반11 [WEB] URL 길이와 SEO의 상관관계 알아보기 안녕하세요. 오늘은 조금 글이 짧습니다. 네트워크 책을 읽다가 문득 생각이 난 내용이 있어 정리합니다. URL 길이는 짧을수록 좋을까요? 길면 어떤 단점이 있을까요? 검색해보니 URL 길이가 길수록 SEO에 좋지 않다는 글이 좀 있었습니다. SEO 관련 회사들인 경우도 있었습니다. 하지만 글에 레퍼런스 문서가 없어서 신뢰하기 어려웠습니다. URL이 길면 SEO에 나쁜가요? Google Senior Search Analyst 'John Mueller'가 답합니다. 'No' 영상은 Reference에 남깁니다. URL 길이가 길수록 검색 품질이 나빠진다거나 상위에 랭크되지 않는 문제는 발생하지 않습니다. URL은 그냥 어떤 자원인지 식별하는 용도의 '식별자' (identifier)로만 사용합니다. 짧은 UR.. 2023. 10. 31. [Web] 정규표현식을 이용해 태그 변경하기, 문자열 중간에 태그 넣기 살다가 한번쯤은 만나게 될 정규표현식을 아름답게 사용하는 방법에 대해서 알아보겠습니다. 문자열 중간에 표시들을 태그로 치환하는 경우 Hello **** *good* ** *hello* =====> 변환 Hello **** good ** hello *를 통해서 문자열들을 강조 하고 싶을때 사용하는 방법입니다. 약간의 예외를 주기 위해서 *문자열* 의 케이스라고 생각해봅니다. const example = 'Hello **** *good* ** *hello*' const result = example.replace(/\*([\w]+)\*/g,`$1`) console.log(result) // Hello **** good ** hello ([\w]+) : 0-9, a-z, A-Z, '_' 를 포함한 문자가 적어.. 2023. 5. 20. [WEB] 테스트 코드 라이브러리 Jest 사용해보기 - 1 FE에서 테스트는 참 말이 많은 주제인것 같습니다. E2E, Unit Test를 도입해서 view, logic 을 모두 테스트하고, 커버리지도 100% 달성하겠다! 이런 것은 쉽지 않습니다. Input과 Output이 명확한 데이터를 다루는 영역에서는 테스트를 작성할때 이슈가 많이 없지만, FE는 DOM을 실시간으로 바꾸고 그 화면들을 테스트 하는것은 쉽지 않습니다. 또한 들어가는 노력에 비해서 return이 그렇게 크다고 생각하지 않습니다. 테스트를 도입해서 생기는 코드의 견고함과 안정성은 동의하지만, 화면같은 경우 자주 설계같은것이 바뀌게 되는데 그럴때마다 새롭게 TC를 정의하고 확인하는것이 시간 대비 효율이 맞나 싶은 생각이 있습니다. 하지만 util함수에는 BE처럼 똑같이 테스트를 할 수 있겠다고.. 2023. 5. 15. [Typescript] Axios API 함수 리턴하기, 결과값 리턴 차이를 타입의 측면에서 바라보기 Axios를 사용하다보면 API를 호출하는 함수를 통째로 리턴할지, 그 결과값을 리턴할지 고민을 모두 하셨을거라 생각합니다. 개인 프로젝트 진행 중 고민이 됐었는데요. 사람마다 다르지만 결과값을 리턴하는 케이스가 많더라구요. 왜 함수를 통째로 리턴하는건 선호되지 않을까요? 두개의 차이는 무엇이고 어떤것을 쓰는것이 나은지 알아보겠습니다. (그런 글이 없는것 같아서..ㅎ) TS를 사용하고 있었기에 차이가 체감 되었습니다. export default { // Axios API 함수 리턴 fetchLectureList : () => { return axiosInstance.get(url) } // Axios API 요청의 결과값 리턴 fetchLectureList : () => { return axiosIn.. 2022. 12. 12. [JS] 널 병합과 연산자 우선순위 이번에는 자칫하면 프로그램에 오류를 낼 수 있는 사소하지만 중요한 것에 대해서 말하고자 합니다. 널 병합과, 우선순위 연산자가 뭔 연관이지? 라고 생각하실 수 있습니다. 하지만 분기문에서 결과가 뒤바뀌는 결과를 낳을 수 있는 예시를 보여드리고자 합니다. 널 병합 연산자 (nullish coalescing operator) statement의 결과값이 null이나 undefined일 경우에, 뒤에 나온 값을 반환해주는 연산자입니다. ES2020에서 나왔습니다. falsy 값을 판단해서 오른쪽 피연산자를 반환하는 '||'와 구분해서 써야합니다. const arr = []; if( arr.length ?? 0 === 0 ) { console.log("참"); }else { console.log("거짓".. 2022. 10. 2. [TS] Enum vs Object 회사의 소스코드를 보던 중에 문득 들었던 궁금증에 대해서 해결해보고자 합니다. Enum과 Object의 차이를 알아보고, 어떤것을 사용하는것이 좋은지 결론을 내보겠습니다. 네이버 블로그식 질질끌기 포스팅을 제일 싫어해서.. 빠르게 써보겠습니다. 결론부터 내면 object가 as const로 type assertion을 해서 충분히 사용 가능하면 enum은 필요없다 입니다. Enum TS에서 자체적으로 구현한 열거형으로 C의 enum과 유사합니다. '자체적' 이라는 말에서 알 수 있듯, js에는 존재하지 않습니다. Enum은 어떻게 트랜스파일 될까? IIFE(즉시실행함수표현) 의 형태로 변환됩니다. js의 object는 멀쩡하게 나오는것을 볼 수 있습니다. Enum이 Object보다 나은 장점 .. 2022. 9. 11. Chrome Performance Flame chart 색이 투명한경우 (Main탭) 오랜만입니다!! 성능 확인을 위해서 Performance를 뒤적거리던 중... 집 컴퓨터에서 Performance 탭에서 Script 실행시간을 보려고 하는데.. 글쎄 투명으로 나오는게 아닙니까.. 아니.. 뭘 보라는겁니까.. 그래서 시크릿 모드에서 확인해봤는데.. flame chart가 잘 나오는 것이었습니다.. 별것도 아닌데.. 오류를 찾는데 꽤 오랜시간이 걸렸습니다. 침착하게 옵션들을 비교했어야 하는데.. 해결법부터 알려드리겠습니다. chrome setting에서 저 WEBGL-based flamechart를 꺼야합니다.. 끄시고나서, 다시 크롬을 재 실행후 측정을 해보면 아래와 같이 다시 잘 나오는것을 확인할 수 있습니다. 온갖 검색어로 검색을 했지만.. 나오지 않아서... *어떻게 문제를 해결했.. 2022. 3. 1. [WEB] REST, RESTful, RESTful API [미리 스포] 코세라 완강 했습니다 ^^ 경축 !!!!! 레퍼런스는 2개를 참고했고, 맨 아래 쓰도록 하겠습니다. REST ? Representational State Transfer 그.. 요즘 공고를 보면 RESTful API 사용 가능자, 설계 가능자( 경력직) 에 이런게 보이는데.. 진정한 의미의 RESTful API를 설계하는것은 사실상 거의 불가능하다고 생각됩니다. ( 유튜브 REST 이대로 어쩌고~) 그걸 보고나서 생각이 들었습니다. HATEOS, self-descriptive한 RESTful API 를 설계하는 사람이 진짜 있을까요? media-type 같은것은 IANA에 다 정의를 해야한다고 하는데.. 마이크로소프트도 REST아닌데 RESTful이라고 한다고 합니다. (반박은 빌게이츠.. 2021. 8. 12. [WEB] React, SSR(Server Side Rendering),CSR 차이, 백신 서버는 왜 터졌을까... 어제 썼던 SEO에 SSR이 유리하다. 라고 하면서 CSR,SSR에 대해서 포스팅 한다고 했었습니다. 두개를 알아보겠습니다. 1. SSR (Server Side Rendering) 위의 사진처럼 SSR의 장점은 CSR 보다 먼저 사용자에게 페이지를 보여줄 수 있다는 점입니다. 처음에 페이지를 켰을때, react를 실행시키고 js를 dom으로 변환해서 보여주기까지 시간이 걸린다고 했습니다. 그러면 그동안 사용자는 빈 페이지만을 보거나, 로딩페이지를 보고 있어야 합니다. 그런것보다는 페이지의 일부를 보는것이 UX가 좀 더 좋다고 느낄 수 있습니다. 1. 서버는 미리 넣어둔 HTML 파일을 렌더링 할 준비가 됐다고 response 합니다 2. 브라우저가 OK라고 하고 HTML페이.. 2021. 7. 20. [Web] React, Virtual DOM, Diffing algorithm, react fiber, 반복 element에 key가 필요한 이유 지난번에 React는 Virtual DOM을 이용해서 실제 DOM을 사용하는것보다 좀 효율적으로 렌더링 할 수 있다고 했습니다. Browser DOM은 browser의 object 입니다. Virtual DOM은 뭘까요? Virtual DOM 특징 : 1. RVM은 Real DOM의 가벼운 표현이라고 보시면 됩니다(lightweight) 2. js object로 메모리 내에 트리구조의 자료구조로 저장되어 있습니다. react app 메모리 내에서 계속 유지되고 있으므로, 필요할 때 언제든 쉽게 수정이 가능합니다. Browser DOM은 새로고침을 해야해서 속도 차이가 굉장히 심하게 납니다. 모~든 React의 수정사항은 가상 DOM에 먼저 반영 됩니다. 그 이후에 Virtual DOM은.. 2021. 7. 17. 이전 1 2 다음 728x90
