728x90 반응형 전체 글145 문제를 근본적으로 해결하는 법 실제로 개발자로 일을 하면서 문제를 해결하는데에만 급급해, 근본적인 원인을 찾지 못해 누군가 이슈에 대해 깊이 있는 질문을 할 때 제대로 대답하지 못한다는 것에 대한 한계를 느꼈습니다. 그래서 문제를 근본적으로 해결하는 법에 대해 찾아보게 되었고, 좋은 글을 보게 되어 공유합니다. 실제로 저도 이를 직접 개발하면서 활용했고, 스스로도 성장을 많이 하게 되었다는 느낌을 받게 되었습니다. 문제를 근본적으로 해결하는 flow 1. 문제가 어떤 상황에서 발생하는지 파악하기 2. 문제가 어디에서 발생하고 있는지 파악하기 3. 적절한 키워드로 검색해보기 (구체적 => 포괄적) 4. 키워드로 검색해도 해결책을 찾을 수 없다면 주먹구구식 방법 사용하기 5. 문제의 원인과 해결방법 찾기 6. 문제의 근본적인 원인과 해결.. 2024. 1. 10. Svelte 파헤치기 1. 날씬한 Svelte 먼저 스벨트는 2016년경에 Rich Harris가 개발한 자바스크립트 웹 애플리케이션 개발 프레임워크입니다. 즉, 리액트, 뷰, 앵귤러와 같은 웹 프레임워크 대신 쓸 수 있습니다. 실행하는 방법은 아주 간단합니다. 2. 왜 Svelte를 써야할까? Svelte는 회사에서 사용하고 있어 이번에 처음으로 사용해보게 되었습니다. React를 많이 쓰는 이 시점에 왜 Svelte를 써야하는지 궁금했습니다. 몇 주간 직접 사용해보고, 구글링해본 결과 아래와 같은 근거로 인해 svelte를 사용한다고 생각했습니다. 개인적인 견해 + 공식적인 지표입니다. 1. 다른 프레임워크보다 더 적은 코드로 같은 기능을 구현할 수 있습니다. 아래의 지표를 보면 svelte의 코드 수는 매우 적은 것을 .. 2023. 11. 6. Rest API method 관련 코드 utils로 생성하여 관리하기 제목 그대로 Rest API 관련 코드들을 method 별로 정리하여 관리하면 추후에 fetch를 통한 통신을 할 때 관리하기에 매우 유용하다. import { API_URLS } from '../constants/apis'; /* eslint-disable class-methods-use-this */ class FetchService { private baseUrl = API_URLS.BASE; private async handleResponse(response: Response) { if (!response.ok) { const message = await response.text(); throw new Error(message); } return response.json(); } async get.. 2023. 10. 30. [svelte] $app/stores에서 제공되는 Page 활용하기 회사에서는 svelte를 메인으로 가져가고 있어서 요 몇주간 사용했는데, react와 다르게 조금 더 편리성을 주는 것 같다. 예를 들어서 console.log로 $page로 확인해보면 아래와 같은 정보를 가져올 수 있다. 그래서 위와 같은 코드로 네비게이션의 유무를 관리할 수 있다. data, error, form, params, route, status, url 등의 정보를 모두 쉽게 확인하고 이를 사용하여 코드를 작성할 수 있기 때문에 유용한거 같다! 2023. 10. 30. [원티드 9월] 데스크탑 웹사이트 개발하기 - 사이트 최적화 원티드에서 반응형 웹 사이트 관련된 강의가 있어서 참여하게 되었다. 평소에 반응형 웹 사이트에 관심이 많았기 때문에 아주 흥미로웠다. 브라우저 렌더링 원리 1. HTML을 파싱해서 DOM 트리를 구축합니다. 2. CSS를 파싱해서 CSSOM 트리를 구축합니다. 3. DOM과 CSSOM을 결합해서 Render Tree를 구축합니다. 4. Viewport를 기반으로 Render Tree의 각 노드가 가지는 정확한 위치와 크기를 계산하는 Layout 단계를 거칩니다. 5. 계산한 위치와 크기를 기반으로 실제 pixel을 화면에 그리는 Paint 단계를 거칩니다. 사이트 최적화 이때, 사이트를 최적화하기 위해서는 위의 Layout과 Paint 단계, 즉 Reflow와 Repaint를 최소화시켜야 합니다. Ref.. 2023. 9. 21. [원티드 9월] 태블릿 웹사이트 개발하기 원티드에서 반응형 웹 사이트 관련된 강의가 있어서 참여하게 되었다. 평소에 반응형 웹 사이트에 관심이 많았기 때문에 아주 흥미로웠다. 미디어쿼리 기본 1. HTML link 태그로 사용 2. CSS @media 키워드로 사용 @media only all and (조건) and (조건) {} only: 특정 미디어에만 적용하는 경우, screen | print를 지정하는 경우 all(기본값, 생략 가능): 미디어 설정, screen | print 를 주로 사용 and: 미디어쿼리의 조건은 모두 and 키워드로 연결 조건 반드시 괄호 안에 조건을 입력해야 함 min: 최소값이 일치할 때, 입력한 사이즈 이상부터 적용(확장 개념) max: 최대값이 일치할 때, 입력한 사이즈 이하까지 적용(축소 개념) 미디어쿼.. 2023. 9. 17. [원티드 9월] 모바일 웹사이트 개발하기 원티드에서 반응형 웹 사이트 관련된 강의가 있어서 참여하게 되었다. 평소에 반응형 웹 사이트에 관심이 많았기 때문에 아주 흥미로웠다. Mobile first 데스크탑부터 작업을 하게 되면 오버라이딩이 많이 발생되고, 복잡한 구조를 줄이기 보다 단순한 구조를 늘리는 것이 쉽기 때문에 모바일을 먼저 만드는 것을 추천한다고 합니다. 참고로 오버라이딩은 객체 지향 프로그래밍에서 사용되는 개념으로, 상속 관계에 있는 클래스들 간의 메서드를 재정의하는 과정입니다. 주로 부모 클래스에서 정의된 메서드를 자식 클래스에서 동일한 메서드명으로 다시 구현하면, 자식 클래스에서의 메서드가 부모 클래스의 메서드를 오버라이딩하게 됩니다. viewport 위의 코드는 VSCode에서 !를 통해 자동 생성되는 HTML 기본 코드입니.. 2023. 9. 15. 구름톤 챌린지 4주차 학습 일기 v2 - Set과 Array의 시간복잡도 비교 궁금한 점 알고리즘을 풀 때, 특정 값을 찾기 위해서 배열을 주로 사용하는데, 시간복잡도가 최악의 경우 배열의 길이만큼 걸릴 수 있기 때문에 비효율적이라는 생각이 들었다. 그래서 이걸 Set으로 관리하면 시간 복잡도가 줄어들지 않을까?라는 생각이 들었고, 내 생각이 맞는지 알아보기 위해 정리하게 되었다. Set Set은 중복되지 않는 값을 저장하는 자료구조이다. Set은 내부적으로 해시 테이블과 같은 자료구조를 사용해서 값을 저장한다. 값을 찾을 때 O(1)의 시간복잡도로 검색할 수 있다. Array 순서대로 값을 저장하는 자료구조이다. 중복 여부에 대한 제약은 없다. 배열의 각 요소를 순회하며 값을 찾아야 하기 때문에, 최악의 경우 배열의 길이에 비례하는 O(n)이 소요된다. 결론 정리하자면, Set은.. 2023. 9. 10. [원티드 9월] 반응형 웹사이트 기초 원티드에서 반응형 웹 사이트 관련된 강의가 있어서 참여하게 되었다. 평소에 반응형 웹 사이트에 관심이 많았기 때문에 아주 흥미로웠다. 반응형 웹 사이트 반응형 웹사이트는, 기기의 화면의 크기 맞춰 자동으로 레이아웃 및 콘텐츠 구성하는 개발방법이다. 아래와 같은 이유로 중요성이 증가했다. 1. 스마트폰의 대중화로 인해 중요성 인식 2. 인터넷에 접속되는 기기가 다양해지면서 더 다양한 스크린에 대응해야 하는 이슈 ex. 스마트폰, 랩탑, PC, 워치, 티비, 자동차, 냉장고 반응형 웹 사이트 범위 1. 화면 크기(viewport) 2. 화면 방향 3. 픽셀 밀도(해상도) 4. 화면 비율 5. 마우스 포인터 6. 프린트 장치 7. 컬러 & 컬러모드 8. 주변 광도(최신 기술이라서 안되는 웹사이트도 있음) 9... 2023. 9. 8. [모던 자바스크립트 딥다이브] 1장 ~ 6장 위 서적을 읽고 중요하다고 생각되거나 모르는 부분을 정리했습니다. 1. 프로그래밍 1. 사람이 이해할 수 있는 자연어로 구성된 프로그래밍 언어를 사용해 프로그램을 작성한다. 2. 컴퓨터가 이해할 수 있는 기계어로 변환하는 번역기인 컴파일러(혹은 인터프리터)를 이용한다. 3. 컴퓨터가 이해할 수 있는 기계어로 변환된다. 2. 자바스크립트란? 2-1. Ajax(Asynchronous Javascript And XMLHttpRequest) Ajax는 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능입니다. 이전의 웹 페이지는 완전한 HTML 코드를 서버로부터 전송받아 웹 페이지 전체를 렌더링하는 방식으로 동작했습니다. 그래서 아래와 같은 단점이 있었습니다. 1. 불필요.. 2023. 9. 7. 이전 1 2 3 4 5 ··· 15 다음 728x90 반응형
