ougi FE

저는 이번 주 선배님들과 스터디를 하다가 선배님들이 모두 번들링에 대해 한번씩 이야기 하시는 것을 들었습니다번들링이 무엇인지 물어보셨지만 저는 대답을 하지 못하여서 아쉬웠습니다 다음에는 더 당당하게 답 하기 위해 이렇게 관련된 내용들과 함께 글을 쓰게 되었습니다 ㅠㅠ🏗️ 빌드(Build)란?코드가 브라우저에서 실행될 수 있도록 변환되는 과정입니다 그렇다면 대체 왜? 빌드를 해야 할까요?바로 웹 사이트가 로드되는 속도를 빠르게 하고 웹사이트를 효율적이게 하기 위해 입니다!!그렇게 하기 위해서는 번들링(Bundling)이라는 작업을 필요시 합니다 그렇다면 이제 번들링에 대해 알아야 겠죠? 💐번들링(Bundling)이란?파일 크기를 줄이고 여러 파일들을 하나로 묶는 것입니다 번들링을 하면 네트워크 요청 수..

저는 오늘 서버와 통신하는 방법들 중 몇가지를 소개하겠습니다 제가 오늘 소개하는 방법들은 모두 비동기 통신 방법입니다 일단 알아두면 좋은 지식이니 먼저 비동기와 그 반대인 동기가 무엇인지 먼저 살펴보겠습니다!그림을 보면 동기 처리의 예시는 주문을 하고 음료를 받는 것까지 한명이 모두 끝날 때까지 기다려야 하지만 동기는 진동벨을 받고 여러 사람을 동시에 처리할 수 있습니다 요약하자면 동기는 순차적으로 작업을 수행하고 해당 작업이 수행중이라다음 작업은 대기하여야 합니다 반면에 비동기식은 요청이 들어오면 해당 작업이 끝나지 않았더라도 계속 요청을 받습니다FetchJavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드입니다기본 응답 결과를 따로 json으로 바꾸거나 text로..

저는 요즘 반응형 웹에 대한 유튜브 강의를 듣고 한번 더 정리하면 좋은 반응형 웹을 만들 수 있을 것 같아 이렇게 글을 쓰게 되었습니다 일단 반응형 웹이 무엇인지 먼저 알아보겠습니다!! 반응형 웹이란?간단히 말하자면 화면 크기에 실시간으로 반응하며 레이아웃이 변화하는 웹을 말합니다하나의 코드로 모든 화면 크기에 최적화된 웹이라고 할 수 있습니다유동적입니다하나의 URL을 기반으로 화면이 바뀝니다 장치에 최적화된 페이지로 연결되는 별도의 URL이 있다면 반응형 웹이라고 부르지 않습니다장점검색엔진 최적화에 유리해 검색 결과에서 상위권에 나타나게 할 수 있습니다 보편적이지 않은 화면 크기의 새로운 기기에서도 작동 가능합니다반응형 웹 외에 다른 웹에 비해 모든 플랫폼에서 일관된 콘텐츠 경험을 줄 수 있습니다단점반..

저는 얼마 전 디자인을 가져오고 있는데 UI가 이상해져서 CSS 코드를 살펴보다가position: absolute;이런 코드가 가져와지는 것을 봤습니다. 예전에 강의에서 본 적은 있지만 너무 가볍게 넘어가 코드를 수정하는데 많은 시간 소모되었습니다. 그래서 position 속성에 대해 정확히 짚고 넘어가고 싶고 알게 된 같이 사용하면 좋은 z-index도 설명하고 싶어 이렇게 글을 쓰게 되었습니다!Position?보통 자신이 원하는 정확한 위치에 위치시키기 위해 사용합니다top, bottom, left, right 속성과 함께 사용합니다장점쉽게 위치 조정을 할 수 있습니다정밀하게 위치를 조정할 수 있습니다단점많이 사용하게 되면 코드가 복잡해집니다반응형 디자인을 할 때 문제가 생길 수도있습니다 static..