개발일기

본 글은 2024.11.13에 마지막으로 수정되었습니다.  Devel Up 서비스에는 '위로 가기 버튼'이 있습니다. 아래 사진과 같은 버튼인데요, 글이 길어지는 경우 사용자 경험을 향상시키기 위해 스크롤을 최상단으로 끌어올릴 수 있게 해주는 버튼입니다.      이 버튼은 페이지 스크롤에 상관 없이 항상 position: fixed로 화면에 고정되어 있었습니다. 하지만 스크롤이 최상단에 있는 경우에도 버튼이 존재하는 것이 어색하다는 사용자 피드백이 있었습니다. 따라서 이 버튼을 스크롤이 특정 지점 아래에 있을 때만 보이도록 구현하기로 했습니다.  여기서 든 의문점이 있었습니다. 1. 사용자의 스크롤 위치를 항상 구하고 있어야 되는가?2. 스크롤 위치를 항상 구하고 있어야 한다면, 이벤트의 콜백 함수를 ..

본 글은 2024.11.05에 마지막으로 수정되었습니다.    CSR와 SSR CSR와 SSR은 웹 어플리케이션을 렌더링 하는 대표적인 방법들이다. 본 글에서는 CSR와 SSR의 동작 원리와 이를 비교하며 장단점을 작성하려 한다.   CSR ( Client Side Rendering) CSR은 브라우저에서 거의 모든 작업이 이루어지는 렌더링 방식이다. React의 경우 기본 HTML에 컴포넌트를 갈아 끼우는 SPA로 동작하기 때문에, 서버로부터 처음 받아오는 html 파일은 아주 간단한 HTML 상태다.             이 기본 HTML 파일에는 태그만 있을 뿐, 서버에서 받아오는 데이터는 없는 상태다.브라우저는 HTML 파싱을 통해 파일을 위에서부터 순차적으로 읽어나가다     React    ..

React 프로젝트의 번들러로 Webpack을 사용하기 위해 공부한 내용을 정리해보았다.   1. webpack 설치npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin install 하게 되면 package.json, package-lock.json, node-modules가 생성된다 - html-webpack-plugin : Webpack의 플러그인 중 하나로, Webpack으로 번들링한 자바스크립트 파일을 자동으로 HTML 파일에 삽입해주는 역할을 한다. 이를 통해 수동으로 HTML 파일을 수정할 필요 없이, 번들링된 파일이 HTML 파일에 자동으로 포함되도록 할 수 있다. 1-1. scripts 추가// package...

✅ Webpack 이란?Javascript로 만든 어플리케이션을 위한 정적 모듈 번들러. 즉, 웹 어플리케이션을 구성하는 css, javascript, image 등의 웹 자원을 각각의 모듈로 간주한 뒤, 이들의 의존성 관계를 결합하여 하나의 결과물을 만들어주는 도구이다. Webpack은 프로젝트에서 필요한 모든 모듈을 매핑하고, 하나 또는 여러 개의 번들 파일로 결합하여 의존성 그래프를 생성한다. 이를 통해 웹 어플리케이션의 성능을 최적화하고, 모듈화를 통해 코드의 유지보수성을 높일 수 있다. 또한, 어플리케이션의 로드 시간을 줄이며, 사용하지 않는 코드를 제거하는 tree shaking을 통해 최종 번들 크기를 줄일 수 있다. webpack.config.js 파일을 통해 설정을 할 수 있으며, 진입점..

바닐라JS로 프로그램을 만들던 중 export에 대한 궁금증이 생겼다. (named) export vs export default export 한 모듈에 여러 개체들, 혹은 특정 개체만을 각각 가져올 수 있음 반드시 지정된 이름으로만 import 해야함import { hello } from './hello.js' export default 해당 모듈에 하나의 개체 (변수, 클래스, 함수 등)만 있다는 의미 ⇒ 해당 모듈의 전체를 export 하는 느낌 원하는 이름으로 import 가능import helloTest from './hello.js' 무엇을 사용해야 될까? airbnb convention에 의하면 내보내기 할 것이 한 가지이면 export default 사용하는 것..

먼저 아래 영상을 보면 이해를 쉽고 빠르게 할 수 있다! 실행 컨텍스트 코드가 실행되는 공간 실행 컨텍스트의 Call stack에는, 환경 레코드, 첫 번째로 실행될 함수, 첫 번째 함수가 종료되기 전 실행할 함수 .. 순서로 stack으로 쌓이게 된다. 후입선출 방식을 사용한다 => 나중에 실행되는 함수가 종료되어야만, 그 앞에 실행된 함수가 종료된다. 따라서 나중에 실행되는 함수에서 변수를 먼저 찾고, 바깥으로 나가며 찾는 방식으로 진행이 된다. 환경 레코드 : 실행 컨텍스트에 있는 변수들을 저장하는 공간 function greeting() { sayHi(); } function sayHi() { return "Hi!"; } greeting(); 시작 상태 call stack : [] 위 코드에서, ..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr [해설] 1. 1번부터 n번까지의 상자에 들어있는 카드의 값 cards가 주어진다 2. cards[i]에 해당하는 인덱스로 넘어가는데, 이미 방문한 인덱스라면 이동을 종료한다 3. 2번의 횟수를 카운팅한 뒤 정답 배열에 추가한다 4. 정답 배열에서 가장 큰 수와 두 번째로 큰 수를 서로 곱한 값을 출력한다 4-1. 정답 배열의 길이가 2 이하라면 0을 출력한다 function solution(cards) { const n = cards.length; let cardsCountList = []; let visi..

먼저, Javascript와 Typescript의 가장 큰 차이점은 Typescript에는 Type을 지정한다는 것입니다. Javascript에서는 a + b 코드를 작성할 때, const a = 1; const b = 1; const c = a + b; // 2 위와 같이 작성하지만 Typescript의 경우 타입을 지정하게 됩니다. const a :number = 1; const b :number = 1; const c :number = a + b; // 2 Type의 경우 number string boolean 등이 있으며, const와 let 등으로 선언하는 변수 이외에도 props로 전달받는 인자까지 타입을 지정하게 됩니다. const a :number = 1; const name :string..

Web Storage : Local Storage, Session Storage 1. Local Storage - 로컬에 저장됨 - 시간제한이 없고, 브라우저가 꺼져도 사라지지 않는다. => 데이터를 지우기 위해서는 직접 지워주어야 함! - 데이터가 문자열이어야 하고, 다른 자료형 입력 시 문자열로 자동 변환됨. 2. Session Storage - 세션이 종료될 때까지 유지됨 - 세션이 종료된다? => 브라우저, 프로세스, 탭이 종료된다 - 세션이 종료되면 데이터가 사라짐 - 브라우저마다, 탭마다 다른 session 3. Cookie - 용량, 시간, 개수 제한이 있음 - 특정 기간 동안 저장 가능. - 만료 날짜가 지나거나 브라우저 종료 시 자동으로 사라짐. - 자동로그인, 다시 보지 않기, 장바구니..