본문 바로가기

전체 글

 (46)
브라우저 렌더링 과정 혹시 여러분들은 브라우저 렌더링 과정에 대해서 아시나요?? 저는 벌써 프론트엔드라는 분야를 공부한 지 이제 1년이 거의 다 됐는데 아직 브라우저가 어떻게 렌더링이 되고 .. 방식은 무엇이 있는지 정확히 잘 모르고 있어 이번 기회를 토대로 한번 알아볼까 합니다. 그러면!! 렌더링 과정을 알아보겠습니다. 브라우저가 뭘까? 쉽고 간단하게 설명을 하자면 브라우저는 웹을 탐색하고 표시하는 도구이다. 일반적으로 Chrome, Safari, Firefox, Internet Explorer 이런 것들이 있다. 브라우저는 user들이 선택한 자원을 서버에서부터 리소스를 받아와서 그것을 가지고 user들에게 실제로 화면을 렌더링 하여 보여주는 것이다. 브라우저의 렌더링 과정 브라우저의 렌더링 과정은 총 5단계를 이뤄져 있..
Storybook 쓰고 싶어요!! 여러분들은 혹시 Storybook 이라는 개념에 대해서 알고 있으신가요?? 개발을 하면서 한 번은 들었을 것 같은데 저는 벌써 프로젝트를 하면서 3번 이상 사용하고 있습니다. 근데 왜 정확하게 사용을 하고 사용을 하는 이유에 대해서 아직 잘 모르고 쓰는 것 같아 왜 Storybook이 나오고 최근 트렌드에 도입을 하고 있는지 알아볼까 합니다. Storybook 도대체 뭔가!! 스토리북은 UI 컴포넌트의 동작을 독립적인 환경에서 테스트를 할 수 있도록 도와주는 도구이다! 또 추가된 컴포넌트는 서비스와 독립된 환경에서 렌더링을 하기에 재사용성이 있어야 한다. 이 스토리북을 사용을 하면 개발자 컴포넌트를 관리하고 어떻게 사용되며 동작을 하는지에 있어서 파악하기에 쉽다. 디자이너와 소통을 하기 더 쉽다고?? ➡..
TDD에 대해서 알고 있어? TDD? 어디서 많이 들어본 것 같은 용어이다. 뭐를 테스트? 한다. 라는 의미만 알고 있는데 .. 이번에 TDD에 대해서 간단하게 이야기를 해볼까 한다. TDD 그게 도대체 무엇일까? TDD란 Test Driven Development인 TDD는 '테스트 주도 개발'이라는 의미를 가지고 있다. 이는 소프트웨어 방법론 중 하나이며, 반복 테스트를 한다는 것이다. 작은 단위에서 테스트 케이스를 작성한 다음에 그다음 코드를 추가하는 단계를 반복하고 구현을 한다. 짧은 개발 주기의 반복에 의존하는 개발 프로세스이며, 애자일 방법론 중 TEST-FIRST 개념을 포함하고 있다. TDD의 개발 주기 위에 있는 그림을 보면 빨강 초록 파랑을 색깔이 나뉘어 있는데 이러한 것은 무슨 의미를 할까? 먼저 빨강! 빨강은 ..
CORS 해결하고 싶은데 .. 개발자 여러분들 이거 아시죠?? 하 벌써 블로그를 적고 있는데도 화가 나네요. 오늘 블로그에서 다뤄 볼 이야기는 바로 CORS입니다. 개발을 하면서 CORS라는 문구가 자주 나타나고 해결을 해보기도 하였는데요.. 근데 정확하게 무슨 개념하고 원리로 이뤄져 있는지는 잘 모르는 것 같더라고요.. 그래서 이번 계기를 통해서 CORS에 대해서 조금 자세히 알아볼까 합니다. CORS란? Cross-Origin Resource Sharing 교차-출처 리소스를 공유하는 것이다. 즉 다른 출처 우리가 흔히 많이들 보는 URL에도 다 같은 의미를 가진 것처럼 생각하지만 .. 사실 그게 아니다. 사진으로 보면 이해가 조금 빠를 뜻 하다. 지금 있는 에서 Host까지는 일반적인 Origin 구성이다. + port까지 포..
너 아직도 HTTP 프로토콜 몰라? 이제는 알아야지 !! 안녕하세요. 이번에는 HTTP 프로토콜에 대해서 한번 알아보려고 합니다. 저는 지금 개발자로 공부를 하고 있는지 1년 .. 정도가 다 돼 가는데요 아직도 HTTP 동작 원리와 개념에 대해서 자세하게는 알고 있지 않아서 미루고 미루다가 드디어 블로그를 작성하게 되네요 .. 저처럼 개발자를 꿈꾸거나 웹 개발을 하는 사람이라면 몰랐거나 자세히 알고 있지 않은 HTTP 프로토콜의 내용을 잘 습득하시고 가시면 좋겠습니다. HTTP 프로토콜이란 무엇일까? HTTP(Hypertext Transfer Protocol)이라는 것은 통신 프로토콜입니다. ( TCP / IP ) 즉 웹 브라우저와 서버 간의 데이터를 전달받고 사용하기 위해서 사용하고 있습니다. 즉 요청과 응답이라고 불리는 request와 response라는 ..
JS 동작 원리 내가 개발을 하면서 자바스크립트와 타입스크립트를 주구장창 사용을 하면서 어떻게 동작을 하는지도 모르고 사용을 하는 것 같아서 이번 계기에 내가 사용하는 언어가 어떻게 동작을 하고 어떤 원리를 가지고 있는지 알아보려고 한다. 그러면 제일 먼저 자바스크립트의 동작 구조부터 알아봐야겠지 않는가. 먼저 자바스크립트를 실행하기 위해서는 자바스크립트의 엔진이 반! 드! 시! 필요한데 자바스크립트의 엔진은 엄청 많지만 그 중에서 대표적인 Google에서 만든 V8 엔진이다. 자바스크립트의 엔진에는 크게 Memory Heap, Call Stack 이 존재합니다. (사파리도 있다!! JavaScriptCore) Memory Heap 그게 뭔데? 간단하게 설명하자면, Memory Heap이란 데이터를 임시적으로 저장하는 ..
모노레포가 쓸까 말까 .. 최근에 많은 기업에서 모노레포라는 개념에 대해서 도입을 하고 있다. 나도 프로젝트를 경험하면서 벌써 3번째 모노레포 프로젝트를 진행하고 있다. 근데 사용하는 이유에 대해서 정확히 잘 알고 있지 않은 것 같아서 모노레포의 개념과 왜 사용하는지 장점과 단점이 뭔지 알아보면 좋을 것 같다. ⭐️ 모노레포가 무엇일까? 두 개 이상의 프로젝트 코드를 하나의 버전 관리 저장소에서 관리하는 방법!! 그럼 이러한 개념이 왜 나왔을까? ➡️ 가장 대표적인 이유는 큰 규모의 소프트웨어를 하는 프로젝트에서 발생하는 여러 문제를 해결하기 위해서입니다. 일단 내가 처음 하는 리액트 프로젝트에서 진행하면서 admin과 client 두 개의 role을 관리하면서 프로젝트 레포를 각각 관리하기 힘들다고 판단을 하였고, 다음 프로젝트..
React Native 써야할까? 요즘에는 앱 개발을 React Native를 통해서 하는 개발자들도 많이 나타나고 있는데 이러한 React Native는 어떻게 사용하고 어떤 장점과 단점을 가지고 있으며 앞으로의 전망에 대해서 궁금해서 이 블로그를 작성을 한다. React Native란 무엇일까? JavaScript와 React를 기반으로 하는 크로스 플랫폼 모바일 애플리케이션 개발을 위한 프레임워크이다. IOS와 AOS에서 동작하는 네이티브 모바일 앱을 만들 수 있다. React Native는 사용자 인터페이스를 만드는 facebook 라이브러리 리액트를 기반이지만 모바일을 중점으로 두고 있다. 즉 웹 개발자가 쉽게 접할 수 있는 장점을 가지고 있다는 것이다. React Native의 관심도 변화는 계속 줄어든다 .. React Na..

티스토리툴바