[개발지식] Webpack과 Babel은 왜 쓰이는 건지 알고 계신가요?

개발 이후의 이야기 우리가 리액트를 사용해서 개발을 뚝딱뚝딱 하고 나면 npm build 입력 한 방에(CRA 기준) 빌드가 완료가 됩니다. 리액트 개발에서 대표적인 라이브러리인 create-react-app은 개발 환경부터 빌드까지 모든 것이 다 갖추어져 있죠 하지만 프론트엔드 개발자라면 그 뒷단의 이야기에 대해서 알 필요가 있습니다. 자신의 프로젝트를 온전히 커스터마이징 하고 싶다면, CRA를 이용하지않고 환경 설정부터 빌드 세팅까지 전부 스스로 해야하거든요. 그 중에서도 모듈 번들러와 자바스크립트 트랜스파일러에 대해서 알아보겠습니다. 웹팩(Webpack) 웹팩(Webpack)은 오픈 소스 자바스크립트 모듈 번들러입니다. 번들러, 말 그대로 여러 개의 파일을 하나의 파일로 모아주는 역할을 합니다. 여..

→2022.01.26

[개발지식] 브라우저 저장소, 각각에 대해서 자세히 알고 계신가요?

브라우저 저장소 로컬, 세션, 쿠키가 있는 건 알고 있는데.. 각각 무엇을 하고 장점과 단점은 뭐였죠? 브라우저 저장소 (크롬 기준) 우리가 브라우저에서 개발자 도구 탭을 열면 애플리케이션 탭에서 브라우저 저장소에 대한 정보를 볼 수 있습니다. 로컬 스토리지, 세션 스토리지, IndexedDB, 웹 SQL, 쿠키, 신뢰 토큰(크롬 한정) 이렇게 나누어져 있어요. 오늘은 이것들에(신뢰 토큰 제외) 대해서 자세히 알아볼 예정입니다. 쿠키 "쿠키"라는 용어는 웹 브라우저 프로그래머 루 몬툴리가 만들어냈다고 합니다. 이는 유닉스 프로그래머들이 사용한, "프로그램이 수신 후 변경하지 않은 채로 반환하는 데이터의 패킷"을 의미하는 매직 쿠키라는 용어에서 비롯된 것이라고 합니다. HTTP 쿠키(웹 쿠키, 브라우저 쿠..

→2022.01.21

[개발지식] Client Side Rendering & Server Side Rendering 차이점에 대해서 아시나요?

😶 CSR vs SSR 보통 사람들이 리액트는 CSR이라서 SEO에 안좋다. Next.Js는 SSR을 지원해주기 때문에 SEO에 좋다. 등등과 같은 얘기들을 하면서 CSR과 SSR에 대해 말합니다. 저도 얼핏 대충 알기만 하지, 자세하게 모르기 때문에 이번 기회에 정리를 해보려고 합니다. 📌 CSR (Client Side Rendering) 클라이언트 사이드 렌더링, 말 그대로 클라이언트 측에서 렌더링을 진행한다는 것입니다. 브라우저 측에서 JS를 다운받고, 리액트를 실행시킵니다. 모든 로직과 데이터 가져오기, 템플릿, 라우팅과 같은 것들은 서버가 아닌 클라이언트에서 처리가 됩니다. 완전히 실행이 다 되면 사용자는 화면을 볼 수 있고 작동을 시킬 수 있습니다. FCP: First Paint - 픽셀이 처..

→2022.01.19

[개발지식] 브라우저 동작방식에 대해서 알고 계신가요?

브라우저 브라우저는 우리가 컴퓨터를 사용하면서 가장 많이 사용하는 소프트웨어일 것입니다. 크롬, 파이어폭스, 엣지등등과 같은 소프트웨어들이 우리가 흔히 사용하는 브라우저죠. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 원하는 자원을 서버에 요청하고 그리고 받은 자원을 브라우저에 띄우는 것입니다. 브라우저의 인터페이스는 소프트웨어들마다 조금씩 다 비슷하게 되어있는데 오랜 기간을 거쳐 제일 적합한 인터페이스로 정형화 됐다고 생각하시면 됩니다. 즐겨찾기(북마크), 뒤로가기, 앞으로가기, 새로고침, 주소표시줄 등등과 같은 기능을 제공하죠 브라우저 구조 브라우저가 어떻게 동작하는지 구글에 검색하면 아래의 사진이 정말 많이 나옵니다. 그만큼 중요하고, 대부분의 브라우저들이 비슷하게 동작한다는 것으로 보입니..

→2022.01.13

[개발지식] 웹 서버와 웹 애플리케이션 서버의 차이, 정확히 알고 계신가요?

들어가며 서버라는 것은 요청이 들어오면 그에 대한 응답을 해준다 라는 것은 알고 있지만 보통 프로젝트를 진행하면서 WAS에 서버 코드를 올렸었는데 WAS가 무엇인지도 정확히 모르면서 사용을 하고 있었던 것... 웹 애플리케이션 서버(WAS)가 있고 웹 서버(WS)도 있다는데 둘의 차이점과 둘의 정확한 의미를 알고 싶었습니다. 웹 서버(Web Server), 웹 애플리케이션 서버(Web Application Server) 우선 웹 서버라는 것은 무엇일까요 우리가 브라우저에 접속해서 www.google.com을 치면 어떻게 될까요? 구글의 서버에 HTTP 통신으로 구글 서버에 있는 컴포넌트 파일(컴포넌트 파일에는 HTML 문서, images, CSS stylesheets, 그리고 JavaScript file..

→2022.01.11

[개발지식] CORS, 잘 알고 계신가요?

MDN Web Docs | 교차 출처 리소스 공유 (CORS) 이 글은 CORS에 대해 공부하고 정리한 글입니다. 오타나 부족한 곳이 있다면 마음껏 지적해주세요 CORS 우리가 개발을 진행하다보면 다음과 같은 에러를 많이 만날 수 있습니다. 대충 번역을 해보자면 네가 보낸 요청은 CORS 정책에 의해서 막혔다. 현재 요청에 Access-Control-Allow-Origin 헤더가 없다. 정도로 해석할 수 있습니다. 그럼 우선 CORS는 무엇일까요? CORS는 Cross-Origin-Resource-Sharing, 즉 직역을 해보자면 "교차 출처 리소스 공유"로 번역할 수 있겠네요. 다른 출처의 자원을 공유하는 것에 대한 정책이다. 조금 해석을 해보자면 위와 같습니다. 그러니까 우리의 에러는 해당 정책을 ..

→2022.01.08