✔️ 프론트엔드 관련 기술이 담겨있는 회고록입니다.✔️ 프로젝트는 크롬 개발자 도구 - 모바일 - Samsung Galaxy S8+ 에 모바일에 최적화 되어있습니다.자세한 동작 구현 노션 보기 👀맞는 데이터를 채워 넣기 위해 친구 + 내 사진으로 마구 마구 왕창 넣었

웹팩 핸드북모듈 번들러(module bundler)모듈이란 ?프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위. 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하는 것모듈 번들러란? Html, css, javascript, image, video 등을 각각의

React 공식문서 - 데이터를 가져오기 위한 Suspense (실험 단계)ProfilePage 에서는 비동기 처리가 진행되고 있다. 비동기 처리가 이루어지는 동안, Spinner 컴포넌트가 랜더된다. 사용자는 ProfilePage 컴포넌트에서 데이터가 없는 상태에서

MVC 패턴의 한계 MVC 패턴이란 ? controller : 데이터를 다루는 로직 model : 데이터 view : 사용자 인터페이스 MVC 패턴의 문제점 Model이 업데이트 되면 View는 화면에 반영한다. View 또한 Model을 업데이트할 수 있다. >

리덕스에 대해 잘 안다고 생각했는데.. 면접을 보다보니 나는 리덕스라는 친구와 아직 가깝지 않구나 느꼈다. 그래서 공식 문서를 좀 슥 .. 읽어봤다. 영어에 자신이 없는데 원문을 계속 보다보니 생각이 꼬여서 쿨하게 한글편으로 봤습니다. Redux 시작하기 남들이 사

last Update - 21/03/30에러코드 발생마다 추가할 예정 .. (프로젝트가 끝날 때 까지.. )gatby develop 에선 돌아가는 것을 확인하고, gatby build를 돌려보니 오류가 발생한다. 에러 95313 에 관련된 문제였다. 한국 관련된 사이트

LV2. 메뉴리뉴얼 JavaScript로 순열과 조합 알고리즘 구현하기 를 통해 조합에 대한 알고리즘을 공부했습니다.그렇게 된다면, selectNum 길이만큼의 조합이 전체 나온다.메뉴에 대한 조합을 구한다.초기에 selectNum은, 1부터 orderi.length

create-react-app, typescript, emotion으로 React 프로젝트 시작하기React와 typescript 는 npx create-react-app 폴더명 --template typescript를 이용하여 설치하였고, 기본적인 emotion, b

리액트 공식문서는 너무 잘되어 있다. 그럼에도 알고리즘을 찾기 위해.. 원문을 보는 정성 정도는 곁들여주어야 한다. _리액트가 함수형 컴포넌트를 사용하길 지향한다 했음에도 공식 문서엔 여전한 클래스 컴포넌트들이 즐비해있다 _⏤ 리액트의 공식의견이 아닐 수도 있습니다

배민문방구 클론 리액트 프로젝트입니다.firestore Database 를 이용하였고, Items의 객체는 위와 같은 모양입니다. firebase에서 데이터를 가져오려면이런식으로 가져와야 합니다. 그런데 이걸 상태에 어떻게 저장할 수 있을까에 대한 고민을 많이 했습니다

지난번 2022년을 맞이하여 Ecmascript2021년 버전을 보았다.⏤ 그동안 JS 기존 문법을 배우느라 급급하여 22년도였지만 21년 버전도 처음 보는 내용이었다...ECMASCRIPT 2021 버전 요약본 : 2020년 이후, 자바스크립트는 어떤 것이 변경되

함수형을 사랑하는데 요즘 class를 볼 일이 너무 많다. class는 그렇다고 치고. 타입스크립트에서 처음보는 interface, type 이 놈들은 도대체 무엇일까 ..

this 라는 놈은 꽤나 지독하다.. " IE 때문에 우시더니 외..외!!! 눈물을 흘리시ㄴr요 ..."this를 완전하게 이해하기 위해서는

Naver D2 , 2020년과 이후 JavaScript의 동향 - JavaScript(ECMAScript) 를 요약한 글입니다

Problem | 3190 뱀초기에 벽을 고려하는 편이 편할 것이라고 생각해서 벽을 두었는데,x, y의 위치가 0 이하, n-1 이상 면 벽에 부딪힌 것으로 고려해도 된다.뱀의 위치를 야매 큐로 구현했다. / 이 문제에서는 unshift 와 pop 만 사용해서 이렇게

모바일 앱으로 변환이 쉽다.웹 앱을 만들기 간편하다.npx create-react-app 플젝명 innerHtml 대신 { } 를 사용해서 변수를 대신 넣어줄 수 있다.변수, 함수 모두 가능하다.기존 스타일은이런식으로 해줘야한다. 카멜케이스 원칙이고, 차라리 변수에 넣

교체 origin (출처) 리소스를 공유하다는 의미다. origin 이 무엇일까, 💁🏼 Origin 출처란, protocol + host + port 를 하나의 출처로 인식한다. port 번호가 하나라도 다르다면, 다른 출처로 인식하는데 port 를 신경쓰지 않

Problem | 용돈 관리현우는 용돈을 효율적으로 활용하기 위해 계획을 짜기로 하였다. 현우는 앞으로 N일 동안 자신이 사용할 금액을 계산하였고, 돈을 펑펑 쓰지 않기 위해 정확히 M번만 통장에서 돈을 빼서 쓰기로 하였다. 현우는 통장에서 K원을 인출하며, 통장에서

100px 정도 스크롤을 이동했을 때 top 버튼이 생기게끔 하고 싶었다.그렇다면 현재 스크롤의 위치를 아는 함수를 사용해주어야 했다.scrollY() 와 pageYOffset()의 선택지가 존재했다.브라우저 호환성을 생각했을 때, scrollY() 보단 pageYOf

이벤트 핸들러 등록 이벤트 핸들러 등록이 왜 필요할까? 버튼을 눌러도 개발자가 언제 클릭되는지 모르기 때문에 함수를 호출해야할지 모른다. 하지만 브라우저가 알 수 있기 때문에 함수 호출을 브라우저에게 위임하는 작업이 필요하다. 1. 이벤트 핸들러 어트리뷰트 >함수