본문 바로가기

SEOP121

004_cdn 🔗 정의 & 특징 Content Delivery Network 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화한다. 왜 필요한가? 1. 물리적 거리의 한계 미국에서 제공하는 어떤 서비스가 있다고 가정해보자. 우리가 웹 페이지에 접속하는건 해당 서비스를 제공하는 서버에 요청을 보내고 그 응답으로 돌아오는 컨텐츠를 이용하는 것이다. 그렇다면 이 서비스를 이용하는데 서버와 가까운 미국 사람들은 쾌적하게 서비스를 즐길 수 있겠지만, 저 바다 건너 한국, 인도네시아, 남극 이런 곳들은 거리가 있기 때문에 요청과 응답에 시간이 걸리게 되는 문제가 생긴다. 2. 서버의 과부하 글로벌 서비스의 .. 2022. 4. 16.
003_css의 다양한 숨김처리 방법 🙄 같지만 다르다? 화면을 구성하면서 때때로 이벤트 효과나 기타 목적으로 요소를 보이지 않게 해야 할 때가 있다. CSS에서는 이러한 기능을 다양한 방식으로 작성할 수 있는데 지금부터 어떤 방식이 있는지 알아보자! 1. display: none 컨텐츠가 사라지면서 해당 컨텐츠가 차지하고 있던 영역도 함께 사라진다. 이벤트 (ex. 클릭)는 작동하지 않는다. 화면 영역에서 사라지는 것 뿐만 아니라 보조기기나 검색엔진이 접근하지 못하게 되어 텍스트인 경우 스크린리더 사용자가 해당 내용을 들을 수 없다. 브라우저 렌더링 시 렌더링 트리에서 요소를 완전히 제거한다. 2. visibility: hidden display: none과 달리 컨텐츠는 사라져도 해당 영역은 그대로 존재한다. 이벤트 (ex. 클릭)는 .. 2022. 4. 11.
깃허브 리드미의 새로운 기능, 다이아그램 🖇 본 글은 깃허브 블로그에 올라온 'Include diagrams in your Markdown files with Mermaid' 글을 번역한 글입니다. 일부 오역이나 의역이 있을 수 있으니 이 점 참고 바랍니다🙏🏻 출처 : https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/ 사진은 천 개의 단어를 나타낸다고 하죠. 그래서인지 지금까지 GitHub의 Markdown 파일에 사진과 도표를 포함시키는 유일한 방법은 이미지를 삽입하는 것이었습니다. 최근 SVG 삽입에 대한 지원을 추가했습니다만, 도표를 최신 상태로 유지하고 ASCII 아트처럼 쉽게, 그리고 훨씬 더 예쁘게 만들고 싶을 때도 있을 것입니다. Mermaid를 시작해보세요.. 2022. 4. 5.
015_자바스크립트에서의 클린 코드 (변수, 함수 편) ✏️ 본 글은 clean-code-javascript 레포지토리를 참고해 작성했습니다. 출처 : https://github.com/qkraudghgh/clean-code-javascript-ko 1. 변수 의미있고 발음하기 쉬운 변수 이름을 사용할 것 // 안 좋은 예 const yyyymmdstr = moment().format('YYYY/MM/DD'); // 좋은 예 const currentDate = moment().format('YYYY/MM/DD'); 동일한 유형의 변수에 동일한 어휘를 사용할 것 // 안 좋은 예 getUserInfo(); getClientData(); getCustomerRecord(); // 좋은 예 getUser(); 검색가능한 이름을 사용할 것 // 안 좋은 예 // 대체 8.. 2022. 4. 4.
002_인터넷 🌎 인터넷, 다 아는거 아닌가? 처음엔 그렇게 생각했다. 그러다 문득 개발자가 되겠다는 생각을 갖고 초창기에 봤었던 프론트엔드 개발자 로드맵을 다시 보게 됐는데, 가장 기초인 인터넷 항목에 대해 제대로 공부하지 않았다는 생각이 들었다. 로드맵 기준으로 가장 처음 위치에 있는 이 인터넷 파트를 넘어가서 무작정 HTML, CSS, JS를 공부했다는게 뭔가 부끄럽기도 했고, 그래서 준비한 이번 글은 인터넷에 관한 이야기이다. 1. 인터넷은 어떻게 동작할까? 우선 인터넷의 어원은 다음과 같다. 인터넷이란 이름은 1973년 TCP/IP를 정립한 빈튼 서프( Vinton Gray Cerf) 와 로버트 칸( Robert E. Kahn )이 '네트워크의 네트워크'를 구현하여 모든 컴퓨터를 하나의 통신망 안에 연결( Int.. 2022. 4. 3.
003_원티드 프론트엔드 프리온보딩 수료 후기 🏆 🤪 정신 차려보니 코스가 끝났다?! 어느새 코스가 끝난 지도 보름쯤 되는 것 같다. 처음에는 매 프로젝트가 끝날 때마다 '~주차 ~번째 후기' 이런 글을 작성하려 했지만.. 정말 정신을 못 차릴 정도로 바쁜 나날 때문에 이렇게 다 끝나고 후기로 돌아오게 됐다. 분명 새해와 함께 아주 추운 겨울에 시작했던 프리온보딩 코스였는데 벌써 꽃이 피기 시작하고 기업에 지원하고 있다니 아직도 믿기지 않는다. 그간 참 배운 것도 많고 이래저래 만든 것도 많은데, 이제 한번 하나씩 그간의 썰을 풀어볼까 한다. 원티드 프론트엔드 프리온보딩 코스를 '미리보기'해보고 싶은 분들이라면 끝까지 읽어보자! ✏️ 코스 후기 우선 이수한 코스 교육과 프로젝트 이야기부터 해보자. 5주라는 짧은 시간 동안 1번의 개인 프로젝트, 8번의 .. 2022. 4. 1.
014_Redux, Context API 없이 전역 관리하기 🔥 당연하다 생각했지만 당연하지 않은 것 - 면접 때 다음과 같은 질문을 받았다. - 'Redux나 Context API 없이 전역 관리를 하려면 어떻게 해야할까요?' - 그동안 위 두 방식을 너무나 당연하게 사용했던지라 면접관님의 질문에 당황하긴 했지만, 당시 내 답변은 '전역으로 관리할 state를 Redux의 store 형식으로 따로 만들어 사용하면 되지 않을까요?' 였다. - 대략 어떻게 해야할 지에 대한 생각은 했지만 이번 기회에 직접 작성해보며 내가 생각한 답변이 실제로 작동하는지 확인해보기로 했다. 원리 - Redux의 Store, Action, Dispatch의 개념을 활용해 훅을 제작한다. - Store는 Dispatch가 작동할 때마다 값이 바뀐다. - Dispatch는 작동할 때마다 St.. 2022. 4. 1.
013_자바스크립트의 비동기 처리 종류 + setTimeout() '자바스크립트의 비동기 처리 방식엔 어떤게 있을까요?' - 최근 진행했던 기술면접에서 제대로 답변하지 못했던 질문이었다. - 분명 공부했었고 다 안다고 생각했는데, 막상 질문이 들어왔을 때 제대로 답변하지 못했던 그 때의 나를 반성하며 제대로 비동기 처리 방식에 대해 정리해보고자 한다. 시작하기 전 다시 정리하는 동기 & 비동기 1. 동기 동작 : 현재 실행 중인 코드가 끝나야 다음 코드를 실행 = 현재 실행중인 task가 종료할 때까지, 다음 task가 대기하는 방식 장점 : 동기 처리는 코드를 순서대로 하나씩 실행하기 때문에, 실행 순서가 보장된다. 단점 : 현재 실행중인 task가 종료될 때까지 다음 task가 실행이 안 된다는게 문제 = 블로킹(blocking) 2. 비동기 동작 : 현재 실행 중.. 2022. 3. 31.
001_브라우저의 저장소에 대해 알아보자 🌎 Web Storage Web Storage란 HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능이다. Web Storage는 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 저장한다. 영구 저장소(LocalStorage)와 임시 저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분해 사용할 수 있다. Web Storage는 사이트의 도메인 단위로 접근이 제한된다. 예를 들어 A도메인에서 저장한 데이터는 B도메인에서 조회할 수 없다. HTML5부터 새롭게 지원하는 저장소이기 때문에 HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다. Web Storage vs Cookie 웹 스토리지 쿠.. 2022. 3. 31.
012_정적 타입 언어와 동적 타입 언어, 그리고 TypeScript 타입(type)이란? - 자료형을 뜻한다. - boolean, string, number, Symbol, Object 등 동적 타입 언어란? - 대표적인 언어로는 JavaScript, Python 등이 있다. - 동적 타입 언어의 자료형은 컴파일 시 자료형을 정하는 것이 아니고, 실행할 때 결정한다. 장점 1. 프로그래머들이 타입을 고민할 필요 없이 빠르게 코드를 작성할 수 있다. 2. 런타임까지 타입에 대한 결정을 끌고 갈 수 있기 때문에 유연성이 높다. ※ 런타임 프로그래밍 언어가 구동되는 환경 단점 1. 사전에 버그를 미리 간파하기 어렵다. 2. 실행 도중에 변수에 예상치 못한 타입이 들어와 TypeError를 발생시킬 수 있다. 정적 타입 언어란? - 대표적인 언어로는 C, C#, C++, Jav.. 2022. 3. 25.
011_'절대값이 2^53보다 크거나 같은 숫자 리터럴은 너무 커서 정수로 정확하게 표시할 수 없습니다.' console.log("333333333333333333" - "3"); // "333333333333333300" // ?????????????????????????? ??? - 최근 블로그 스터디를 하면서 한 분이 이런 질문을 하셨다. - '왜 계산이 이렇게 되는 걸까요?' - 그래서 직접 이리저리 텍스트를 바꿔가며 테스트를 해봤는데 여전히 정확한 계산이 안되는 것이었다. - 그러다 숫자로 값을 변경하면서 다음과 같은 사실을 알게 됐다. Number라고 생각했지만 Number가 아니다? - 위 에러 메세지에서 '절대값이 2^53보다 크거나 같은 숫자 리터럴'에 주목할 필요가 있다. - JavaScript의 Number는 부동 소수점으로 표시된다. 이는 정밀도가 제한적이라는 것을 의미한다. - 그래서 .. 2022. 3. 15.
010_for, forEach, map(재정리 ver.) 👀 어..? - 최근 현직자와의 모의 면접에 참관한 적이 있는데, 여러 질문 중 다음과 같은 질문을 하신 적이 있었다. "forEach와 map의 차이에 대해 설명해보시겠어요?" - 이 질문을 듣고 처음엔 당연히 안다고 생각하고 면접자분께서 답하기 전에 혼자서 답을 생각해봤는데, '어..?' 라는 말밖에 나오지 못했다. - 이에 이번 포스트를 통해 다시 한 번 정리하고 확실하게 개념을 다져보고자 한다. - 추가 : 뭔가 글을 썼던 것 같아서 찾아보니 자바스크립트 파트에 가장 처음 쓴 글이 forEach와 map의 차이였... 반성하는 마음으로 이번에는 절대 잊지 않겠다는 각오와 함께 써보도록 하겠다 😢 Chapter 1. for() - for()은 초기값부터 시작해 증가 또는 감소하면서 조건에 부합하면 계속.. 2022. 3. 14.
반응형

티스토리툴바