반응형 분류 전체보기50 웹 사이트의 렌더링 동작 방식을 이해해보자! 🔗 클라이언트/서버 - 클라이언트 인터넷을 통해 서버에 데이터 요청을 하는 주체를 말합니다. 우리가 사용하는 핸드본, 웹 브라우저 등이 클라이언트가 될 수 있습니다. - 서버 클라이언트가 보낸 요청을 받아서 처리한 후 결과를 다시 전송해주는 주체를 말합니다. 📜 웹 페이지 발전사 1. static sites 우리가 웹페이지에 접속하면 보게 되는 화면들은 어디서 오는 것인지 생각해보신적 있으신가요? 웹을 공부하다 보면 CSR, SSR 등의 용어를 들어본 적 있지만 정확한 개념을 알아볼 기회가 없었을 경우가 많았을 것입니다. 1990년대 중반까진 웹사이트 대부분은 정적인 웹사이트(static sites)였습니다. 서버에 여러 개의 html 문서들이 저장되어 있고, 사용자가 웹페이지에 접속할 때마다 서버로 부.. 2021. 5. 24. 클라우드 컴퓨팅에 대해 알아보자! 서버 개발을 공부하다 보니 배포를 하기 위해 aws를 사용해야 했다. aws를 다루고 있어도 정작 aws가 대체 어떤 것인지 알지 몰랐었다. 그래서 aws가 대체 무엇인지 찾아보았더니 클라우드 중의 하나라고 했다. 하지만 클라우드도 정확히 어떤 개념인지 몰랐기 때문에, 이번 기회에 클라우드 컴퓨팅에 대해 정리하고자 한다! 📢 어원 클라우드라는 단어는 '존재는 하지만 복잡하면서 굳이 알지 않아도 되는 것'을 구름으로 추상화 한것에서 유래하였다. 💡 개념 클라우드 컴퓨팅은 인터넷(클라우드)를 통해 가상화 된 컴퓨터의 IT 리소스(CPU, RAM, SSD...)를 제공하는 것이다. 이를 통해 자신의 컴퓨터가 아닌 인터넷으로 연결된 다른 컴퓨터에서 서버, 스토리지, 데이터베이스, 네트워킹, 소프트웨어, 분석, .. 2021. 5. 24. 개발 방법론에 대해 알아보자 어쩌다 TDD 방법론에 대해 듣게 되어서 대체 개발 방법론이 무엇인지 궁금했었다. 그래서 찾아보니 어떤 분이 블로그에 "소프트웨어를 생산하는 데 필요한 프로그래밍 개발 과정들을 정리하고 표준화하여 프로그래머들이 프로그래밍 개발과정에서 각 개인이 개발과정에서의 일관성을 유지하고 프로그래머들 간의 효과적인 협업이 이루어질 수 있도록 돕기 위한 방법론" 라고 잘 요약해주셨다. 즉, 소프트웨어 개발 방법론은 소프트웨어를 어떤 방식으로 만들어 갈지에 대한 것이다. 매우 다양한 방법론이 있으며 개발자들은 개발 상황에 맞는 방법론을 선택하면 된다. 이번 게시물에서는 여러 방법론들 중에서 TDD, BDD, DDD에 대해 정리해 보았다. ✨ TDD(테스트 주도 개발, Test-Driven Development) 일반적으.. 2021. 5. 16. OAuth로 구글 로그인을 구현해보자 🔐 OAuth 우리가 개발을 하다보면 구글 계정을 통한 개인 정보를 활용하고 싶은 경우가 생긴다. 이를 위해서 우리 개발 서버에서 유저의 구글 아이디와 비밀번호를 저장하고 있다면 쉽게 계정 정보에 접근할 수 있을 것이다. 하지만 이러한 방법은 보안상으로 매우 위험하다. 그래서 이를 해결하기 위해 나온 것이 OAuth 이다. 사용자의 아이디와 비밀번호를 전달하는 대신, 구글이 제공하는 랜덤하고, 일정 기간동안만 사용될 수 있는 임시 비밀번호를 개발 서버에서 전달받는 것을 OAuth가 가능하게 해준다. 우리의 개발 서버는 구글(또는 다른 서비스들)로 부터 access token(임시 비밀번호) 을 전달받고, 이 access token 을 사용하여 구글의 서비스에 접근할 수 있다! OAuth를 이해하기 위해서.. 2021. 5. 8. 웹팩 설정하기 - 플러그인 앞의 게시물에 이어 이번에는 웹팩에서 플러그인을 설정하는 방법에 대해 정리해보았다. 🔌 플러그인 로더가 여러 형식의 파일들을 모듈로 인식할 수 있게 해주면 이 과정에서 플러그인은 코드 사이의 공백이나 변수명을 바꿔서 파일의 용량을 줄이는 역할같은 것을 해준다. 플러그인을 적용시키는 방법은 webpack.config.js 파일에서 다음과 같은 코드를 추가하면 된다. 이러한 코드를 추가하면 MyPlugin을 추가해주게 된다. const MyPlugin = require('./MyPlugin'); module.exports = { ..., plugins: [ new MyPlugin(), ] } 1. Banner Plugin 코드가 빌드되어 난독화가 진행된 경우 사람들이 코드를 알아볼 수 없다. 따라서 코드 상.. 2021. 5. 7. 웹팩 설정하기 크롬 익스텐션을 개발할 때 boliler plate를 사용하여 개발했었다. 그러다 보니 개발환경에 변경하고 싶은 부분이 있을 때 웹팩을 수정해야하는 경우가 발생했다. 하지만 웹팩에 대해 아는 것이 없어서 설정을 건드릴 수가 없었다. 그래서 웹팩과 그 외의 개발환경을 셋팅하는 방법에 대해서 정리하고, 실제 적용까지 해볼 예정이다! jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html 프론트엔드 개발환경의 이해: 웹팩(기본) 1. 배경 먼저 모듈에 대해 이야기 해보자. 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명.. 2021. 5. 6. 이전 1 2 3 4 5 6 7 8 9 다음 반응형
