개발 요정🧚‍♀️ 용덕대게

1. 메모리 구조 프로그래밍 언어를 사용하시다 보면 code, data, stack, heap 이라는 말이 어색하지는 않으실 것 같습니다. 프로그램이 실행되기 위해서는 메모리 상의 여러 영역을 사용하게 됩니다. 이러한 메모리 구조는 프로그램이 실행될 때 운영 체제에 의해 관리되며, 각각의 영역은 특정한 역할을 수행합니다. 간단히 소개하자면 아래와 같습니다. code 영역: 말그대로 실행할 코드가 저장되어 있는 영역. CPU가 여기에 저장된 명령어를 하나식 가져가 처리. 프로그램 시작~종료까지의 메모리 존재. 이 영역은 프로그램의 실행 코드가 저장되어 있는 곳입니다. CPU는 여기에 저장된 명령어를 하나씩 가져와 실행합니다. 이 영역은 프로그램의 시작부터 종료까지 메모리에 상주하며, 일반적으로 수정되지 않..

이번에는 리액트에서 많이 사용되는 flux패턴에 대한 공부를 해보고자 합니다. REACT를 사용하면서 컴포넌트끼리 데이터를 교류할 때 글로벌 이벤트 시스템을 설정하는 방법인 flux 디자인 패턴에 대해 알아보고 MVC가 아닌 FLUX패턴을 적용하는지에 대해 알아 보겠습니다. 디자인 패턴을 사용하는 이유 유지보수성 향상: 디자인 패턴을 사용하면 코드의 일관성이 유지되고, 코드를 이해하기 쉬워집니다. 따라서 프로젝트가 커져도 코드를 쉽게 관리할 수 있습니다. 재사용성 증가: 디자인 패턴을 활용하면 유사한 상황에서 코드를 재사용할 수 있습니다. 이는 개발 시간을 단축시키고 코드의 효율성을 높입니다. 확장성 강화: 디자인 패턴은 시스템을 확장하거나 변경할 때 유용합니다. 새로운 기능을 추가하거나 기존 기능을 수..

문제점: 위와 같이 로그인이 되어 있지 않음에도 /home 그러니깐 피드페이지(메인페이지)에 접근이 가능한 이슈가 있었습니다. 들숨날숨 프로젝트는 로그인을 하면 localstorage에 로그인 정보를 담아 놓고 사용함으로서 사용자가 사용하기 편하도록 설계하였습니다(로그인을 여러번 하지 않도록). 그러다 보니 로그인을 하지 않은 상태에서 로그인을 해야만 접근을 할 수 있는 페이지에도 접속이 가능했습니다. 해결 방법: localstorage에 값이 있으면 로그인이 되어 있다는 뜻임으로 localstorage에서 값을 받아온 뒤 값의 여부에 따라 다른 페이지로 이동하도록 코드를 적성해 주면 됩니다. const isAuthenticated = () => { const token = localStorage.get..

레이지 로딩(Lazy Loading)은 웹사이트에서 필요한 리소스를 필요한 시점에만 로드하는 기술입니다. 이를 통해 초기 로딩 속도를 개선하고 사용자 경험을 향상시킬 수 있습니다. 특히 이미지나 동영상과 같은 대용량 리소스를 효과적으로 관리하거나, 페이지의 일부분을 동적으로 로딩할 때 유용합니다. 레이지 로딩의 주요 아이디어는 페이지 로드 시점에 모든 리소스를 한 번에 로드하는 대신, 사용자가 해당 리소스가 필요한 순간에 로드하는 것입니다. 이로써 초기 로딩 시간을 줄이고 페이지 전환 속도를 빠르게 만들 수 있습니다. 웹 개발에서 레이지 로딩은 주로 다음과 같은 방식으로 사용됩니다: 이미지 레이지 로딩: 페이지에 표시되지 않는 이미지는 초기에 로드하지 않고, 사용자가 스크롤하거나 다른 상호작용을 할 때 ..

local에서 작업을 하다 netlify를 통한 배포를 진행하면서 문제가 발생했습니다. 기존에 local에서 .env파일을 통해서 KAKAO_MAP_KEY를 받아서 작업을 하다가 배포를 하게 되니 .env파일을 참조할 수 없어서 맵이 뜨지 않게 되는 문제가 발생했습니다. !https://blog.kakaocdn.net/dn/bz9muI/btsqZ1eeMvg/vuNK40cv5BBjBKRazAUMSk/img.png 문제를 해결하기 위해 서칭을 하던중 github action을 발견하게 되었습니다. githubAction 이란? GitHub Actions는 GitHub에서 제공하는 지속적인 통합(CI) 및 지속적인 배포(CD) 서비스입니다. 이를 사용하여 소프트웨어 개발 및 배포 프로세스를 자동화하고, 코드 ..

웹페이지 성능향상이란? 웹페이지 성능 향상은 웹사이트나 웹앱이 더 빠르게 로딩되고 반응하는 것을 의미합니다. 사용자가 웹페이지를 방문할 때, 페이지의 로딩 속도와 반응성이 빠를수록 사용자 경험이 향상되며, 더 나은 사용자 경험을 제공할 수 있습니다. 웹페이지 성능 향상을 위해서는 이미지 최적화, 파일 최소화, 캐싱, 비동기 로딩, 코드 스플리팅, 서버 최적화, 사용자 경험 개선 등 다양한 기술과 방법을 사용할 수 있습니다. 이를 통해 웹페이지의 성능을 최적화하여 사용자에게 더 나은 경험을 제공할 수 있습니다. 겪고 있는 문제 프로젝트 기간안에 웹페이지를 다 만들고 나니 성능과 접근성 권장사항등 여러 항목에서 문제가 발생하고 있다는 것을 발견하였습니다. 점수가 많이 낮다보니 어디 한군데의 문제가 아니라 전..

먼저 카카오 지도API 키 발급을 해줍니다. https://apis.map.kakao.com/ 연습용이니깐 대강 작성해 주시고~ 플랫폼 도메인에는 localhost:3000를 적어줍니다. (본인이 사용하시고 계신 포트 넘버를 넣어주셔야 해여) 적용하기 https://apis.map.kakao.com/web/guide/ 가이드를 따라서 차근차근 해보겠습니다. 물론 js로 만들어진 코드이니 다를 수 있습니다. api 키 등록해주기 pulbic → index.html의 tag아래에 본인이 입력받은 키와 함께 삽입해 줍니다. 사용하기 /* global kakao */ //명시 해주셔야 합니다. import React, { useEffect } from 'react'; const { kakao } = window..

약속해줘 … promise의 필요성 자바스크립트는 비동기 처리를 위한 패턴으로 콜백함수를 사용하곤 합니다. 그런데 이러한 콜백 패턴은 많은 문제가 있습니다. 비동기를 처리하기 위해 사용했던 콜백함수들이 지옥을 만들어 내기 때문이죠. 이런식으로요 보기만해도 읽고 싶지 않아지게 만드는 마법을 부린답니다. 또한 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다고 해도 기다리지 않고 즉시 종료됩니다. 또한 에러 처리에도 불편함을 주죠. 이러한 프로미스의 한계와 불편함으로 인해 ES6에서는 비동기 처리를 위한 다른 패턴으로 promise를 도입했습니다. promise란? “A promise is an object that may produce a single value some time..

우리가 수시로 드나드는 웹페이지는 어떤 식으로 동작을 할까요?. 사실 웹페이지는 미리 만들어진 페이지를 가져오는 것이 아니라 실시간으로 그려진답니다. 이 과정을 웹 브라우저 렌더링 과정이라고 말하구요. 그림으로 정리한 브라우저의 렌더링 과정입니다. 대부분의 인터넷 웹 브라우저들을 분해해 보면, 그 언에는 두개의 엔진이 들어가 있습니다. 하나는 렌더링 엔진 사용자가 볼 화면을 그려내죠. 다음은 jsEngine으로 자바스크립트 코드를 읽어내 기능을 동작하는 역활을 합니다. 아래는 위의 그림을 순서대로 그려낸 것입니다. 브라우저는 렌더링에 필요한 리소스를 요청하고 서버로 부터 응답을 받는다. 주소창을 통해 필요한 사항들을 담아 보낸다고 생각하시면 될 것 같습니다. 요청의 응답으로는 HTML, CSS, JS 등..

프로토타입(prototype)이란, 무언가 제품을 만드는 과정에서 시험용으로 미리 만들어보는 물건을 의미한다. 적절한 한국어 표현은 〈시제품〉(試製品), ‘시험기’, ‘초기형’, ‘시작형’이다. 시제품이라고 하면 대개 아래의 경우 중 하나 또는 2개 항목 이상에 해당되는 제품을 가르킨다. 오리지널, 또는 기반이 된 모델. 대표적으로 제시할 수 있는 예가 되는 모델. 종류의 기초가 되는 모델. 앞서 제작된 모델. -wiki c++과 같은 언어는 클래스를 기반으로 객체를 만듭니다. 그렇다면 클래스란 무엇일까요? 객체 지향기반 언어 책들을 보면 “붕어빵틀과 붕어빵” 이런식으로 클래스는 틀에 인스턴스는 그 틀에서 만들어진 물건으로 빗대어 표현하는 경우가 많습니다. 자바스크립트는 왜 프로토타입을 선택했을까 자바스..