개발잘하고싶다

scss 함수 사용법 @function [함수이름]() { … @return … }

background-size 100% vs contain vs cover 100%: 요소와 동일한 크기로 배경 이미지를 보여줍니다. (이미지 왜곡될수 있음) cover: 요소에 이미지를 최대한 크게 보여줍니다. ( 이미지가 잘리수 있음) -> 배경화면에 여백을 만들지 않음 contain: 요소에 이미지를 최대한 크게 보여주되 (이미지가) 잘리는 부분이 없고 동일한 비율을 유지합니다.

scss (sassy css) -> 개쩌는 css 라는 뜻… 기존 css 의 문제점 1. 불필요한 선택자(Selector) 2. 연산 기능 한계 3.구문(Statement)의 부재 scss의 추가 기능 1. 변수 할당 2. 중첩 구문 3. 모듈화 4. 믹스인 확장&상속 5. 연산자

웹을 반응형으로 만들 때, 미디어 쿼리를 이용해 width을 기점으로 하여 앱 / 태블릿 / pc 를 분기하곤 합니다. 여기서 의문점이 하나 든게 iPhone 12 Pro는 픽셀값이 2532 x 1170 (세로 x 가로) 로 표기되어 있습니다. 그렇다면 width 기준도 픽셀이니, 최신 핸드폰은 웹으로 들어갔을 때 미디어 쿼리에서 모바일이 아니라, pc 형태의 디자인으로 나와야 되는거 아닌가? 라는 생각을 할 수 있습니다. 왜 픽셀값이 1000이 넘는데 여전히 모바일 뷰일까요? 그건 스펙에 나온 픽셀과 viewport가 기준으로 삼는 픽셀이 다르기 때문입니다. 위 사진의 스펙에 나온 건 물리적인 픽셀수 viewport가 기준은 css 픽셀입니다. 물리적인 픽셀수를 css 픽셀을 계산하는 방법 우선 궁금한..

이전에는 iOS로 디버깅 하는 방법을 알아보았습니다. https://borobong230.tistory.com/143 React 로 iOS / AOS 앱 디버깅 하기 1 이번에는 iOS로 디버깅 하는 방법을 알아보겠습니다. 우선 iOS로 디버깅 하는 방법으로는 safari를 이용하는 방법이 있습니다. 제일 먼저 해줘야 할 것은 사파리에서 개발자 모드를 활성화 하는 것 borobong230.tistory.com 이번에는 로컬서버에서 핸드폰 연결할 때 카메라 / 마이크 허용하는 방법을 알아보겠습니다. 로컬서버에서 iOS 디바이스에서 카메라 / 마이크 기능에 접근하려고 하면, 접근이 안됩니다. 카메라 마이크 기능을 허용하려면 아래와 같이 해줍니다. 1. 왼쪽 위에 있는 핸드폰 아이콘을 클릭합니다. 2. 그리고..

이번에는 iOS로 디버깅 하는 방법을 알아보겠습니다. 우선 iOS로 디버깅 하는 방법으로는 safari를 이용하는 방법이 있습니다. 제일 먼저 해줘야 할 것은 사파리에서 개발자 모드를 활성화 하는 것 입니다. 개발자 모드 활성화 하는법 1. Safari를 켭니다 2. Command + , 또는 왼쪽 상단에 Safari > 설정 을 클릭합니다. 3. 고급 탭에서 웹 개발자를 위한 기능보기 버튼을 활성화 4. 왼쪽 상단에 개발자용 > 연결할 핸드폰 > 로컬 연결된 사파리 링크를 클릭 하시면 됩니다. 마무리 React Native를 이용하여 android studio / Xcode 를 사용해서 에뮬레이터/시뮬레이터 를 실행해 본적은 있지만, React를 통해 모바일을 웹 버전 테스트 해보지는 않았었습니다. 위..

React로 웹/앱이 모두 동시에 되는 하이브리드 웹/앱을 구현하고 있습니다. React Native로는 앱을 모바일 디바이스로 디버깅 해보았지만, React로 만든 앱을 모바일 디바이스로 디버깅 해본 경험이 없었습니다. 아직 React Native로 덮어 쓰지 않은 React로 앱에서 디버깅 할 수 있는 방법은 무엇이 있을까요? 연결은 어떻게 하나요? 정답은 생각보다 간단합니다. 우리가 React를 실행할 때 사용하는 명령어 // yarn yarn start // npm npm start 위의 명령어로 React를 실행하면 Localhost 3000번 포트에서 사용해볼 수 있습니다. 우리는 이 LocalHost로 접속하면 됩니다. 너무나도 당연히 pc에서 처럼 모바일 디바이스에 localhost:300..

왜 이 글을 쓰는가? React만 쓰다가 Spring boot + 바닐라 자바스크립트 프로젝트 코드를 리액트로 바꾸는 경험을 하게 되었습니다. Spring boot + 바닐라 자바스크립트 프로젝트를 경험해 본 적이 없어서 처음에 프로젝트 실행하는 법 부터 헤맸습니다. 사전 준비물 우선 프로젝트 실행전에 mvn 과 java가 설치가 되어있는지 확인해야합니다. 확인하는 법은 간단합니다. // mvn 설치 확인 mvn -v // java 설치 확인 java -version 만약 설치가 안되어 있다면 아래의 순서대로 설치를 진행해주세요! 우선 홈브류로 mvn을 설치해줍니다. // 홈 브류 brew install mvn 그 다음 java를 설치해줍니다. zulu 다운로드 사이트 방문 https://www.azul..

렌더링이란 무엇인가요? 렌더링이란 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다. 보통 웹 브라우저는 크게 두가지 엔진을 가지고 있습니다. 하나는 자바스크립트 엔진이고, 나머지 하나는 렌더링 엔진 입니다. 그렇다면 렌더링은 어떻게 진행될까요? 렌더링 과정은 어떻게 되나요? 1. 웹 브라우저는 로컬 DNS 캐시를 확인하여 해당 도메인 주소와 대응하는 IP 주소를 확인합니다 2. 로컬 DNS 캐시에 없을 경우, 웹 브라우저는 DNS 서버에 도메인 주소의 IP 주소를 요청합니다 3. DNS 서버가 웹 브라우저에게 찾는 사이트의 IP 주소를 응답합니다 4. 웹 브라우저가 웹 서버에게 IP 주소를 이용하여 HTTP 요청을 보내 HTML 문서를 요청합니다 5. 웹 애..

글을 쓰게 된 이유 현대의 웹 개발 환경에서는 다양한 프레임워크와 라이브러리가 존재합니다. React, Vue, Angular와 같은 프론트엔드 도구들은 프로젝트 구축에 필수적인 역할을 합니다. 현재는 React를 주로 사용하고 있지만, 기술의 변화와 프로젝트의 요구 사항에 따라 언젠가는 다른 프레임워크로 전환할 필요가 생길 수 있습니다. 이러한 상황을 대비하기 위해, 저는 프레임워크를 직접 만들어보기로 결정했습니다. 이 과정을 통해 다른 프레임워크의 핵심 원리를 깊이 이해하고, 필요할 때 새로운 프레임워크를 더 빠르고 효율적으로 배우고 적용할 수 있을 것이라고 생각했습니다. 프론트엔드의 다양한 프레임워크들이 있지만, 대부분은 JavaScript를 기반으로 합니다. 이러한 공통점을 활용하여, 프레임워크의..