문제 클릭 이벤트를 주었다. 그런데 클릭이 두 번 된다? 클릭 이벤트를 준 모든 태그가 두 번되는 것은 아니었고, 내가 원하는 시간으로 설정한 하나의 TimePicker가 문제였다. TimePicker를 Init으로 기본 셋팅을 한다. 이 TimePicker를 원하는 시간으로 변경하고, TimePicker를 클릭 할 시에 TimePickerList가 slideDown되어 보여지게된다. slideDown될 때 원하는 시간으로 스크롤의 위치가 변경이 되었으면 했는데 클릭이 두 번씩 되면서, 스크롤의 위치가 비정상적이었다. 💡 아이디어 -> 구글링 콘솔을 찍어보니, 두 번씩 찍히는게 이상했다. 이 클릭 이벤트가 중복으로 적용될 것이라고는 상상도 못한 것이다. 그래서 구글링을 해 본 결과 내가 찾던 답이었다. https://velog.io/@heeboventure/jQuery-click-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%A4%91%EB%B3%B5-%EB%B0%…

HTML, CSS를 활용하여 화면을 그린 후, 결과물을 확인하기 위해서는, 로컬의 경로를 브라우저 주소창에 입력하면된다. 그러면, javascript를 활용하여 비즈니스 로직를 작성 한 후 결과물을 확인하기 위해서는, 어떻게 해야할까? 자바스크립트를 해석하고, 실행하기 위해서는 자바스크립트 엔진이 필요하다 자바스크립트 엔진을 내장하고 있는 브라우저와, Node.js환경에서 실행할 수 있다. 브라우저는 HTML, CSS, Javascript로 웹페이지를 화면에 렌더링하는 것이 목적이며, Node.js는 서버 개발 환경을 제공하는 것이 주된 목적이다. 따라서 브라우저와 Node.js에서 ECMAScript 이 외에 추가적으로 제공되는 기능은 호환되지 않는다. 예를들어, 브라우저는 DOM API(HTML 요소를 선택하거나, 조작하는 기능들의 집합)를 제공하지만 Node.js는 제공하지 않는다. 반대로, Node.js는 File API(파일을 생성하고 수정할 수 있는 File 시스템)를 …

플러그인을 만들려고 구글링 했더니, 계속 나오는 용어 AMD, CommonJS, UMD 플러그인이나 모듈같은 것은 다른사람의 코드나, 나의 코드를 재사용하고 싶을 때 사용한다. 처음 자바스크립트는 모듈을 가져오거나, 내보내는 방법이 없어 하나의 파일에 모든 기능이 들어가야 했다.AMD, CommonJS, UMD가 등장한 이 후 모듈화 개발을 할 수 있게 되었다. 여러 모듈을 불러온 경우, 각 모듈에서 같은 변수를 사용할 때 변수 충돌이 일어나는데, 이 충돌 문제를 해결하기 위한 방법으로 AMD, CommonJS, UMD… 이 있다. 즉, 모듈화 개발을 하거나, 변수 충돌 문제를 해결하기 위해 사용하는 방식이다. AMD(Asynchronous Module Definition) AMD는 비동기 상황에서 자바스크립트 모듈을 사용하기 위함이다. AMD는 브라우저를 중점을 두어, 네트워크 모듈들을 다 내려받은 후 비동기적으로 동작하므로, 클라이언트 사이드 개발에 적합하다. AMD 모듈 방…

늘 그렇듯, 갑자기 app을 개발 하게 되었다. 늘 그렇듯, 나의 의사와는 관계없이 하이브리드 앱을 개발하게 되었다. 내가 담당을 하게 되었으니, 내가 가장 잘알아야한다. 빠른 기간내에 앱을 구축해야 하고, 앱 개발 경험이 전무하기 때문에 우리는 선택한다. (우리가 아니고 부장님이) ‘하이브리드 앱’으로 역시 용어를 모를 땐 비교대상의 용어와 함께 이해하면 쉽다. Native App Android 또는 iOS 같은 어떤 구체적인 플랫폼만을 위해 만들어진 응용 프로그램을 네이티브 앱(Native App)이라고 한다. Android - Java, Kotlin iOS - Swift, Objective C Hybrid App HTML, Javascript 및 CSS와 같은 웹 개발 시 사용하는 언어로, 프레임워크를 사용하여 다양한 플랫폼에서 사용이 가능한 앱을 하이브리드 앱 (Hybrid App)이라고 한다. 크로스플랫폼 관련 내용 추가 ProgressiveWeb App 웹과 네이티브앱…

scrollHeight returns 0 javascript파일에서 jquery를 사용하여, element를 가져와 scrollHeight를 얻고자 함. $(element).prop(‘scrollHeight’); 그런데 계속 0이 찍히는 것이다. 문제의 상황 그림과 같이 scrollBox는 TimePickerBox를 클릭할 때 열렸다 닫히는데, scrollBox의 display가 none인 상황에서 scrollHeight를 check했다. 해결의 과정 a. 구글링을 한다. https://stackoverflow.com/questions/8100099/checking-for-scrollheight-of-an-element-sometimes-returning-0 b. stack overflow의 답변 요약 It had to do with the what I was trying to check after different elements were set to display none.…

누가 나 요즘 개발하는 거 다큐멘터리로 찍는다면 ‘송은지의 개발언어는 역행한다.’ (feat. 벤자민의 시간은 거꾸로간다.)로 타이틀을 지으리라. ECMAScript6 명세 또는 스펙을 따라 개발하던 javascript를 이젠 ECMAScript5를 따르게 되며, 정말 많은 불편함을 몸소 겪고 있다. 그동안 컴포넌트, 모듈에 대한 용어를 많이 이야기했다면, 이젠 플러그인이 자주 등장할 것 같다. 불편하지만, 레트로 정신승리를 해본다. 최신의 편리함을 느끼며 최신에 대한 공부를 게을리 하지 말아야겠다. 그저 플러그인만 알고싶었을 뿐인데 계속해서 따라오는 용어들 때문에, 4탄으로 나누어 정리를 해본다. 1탄_jQuery 플러그인 2탄_AMD,CommonJS,UMD 3탄_용어_플러그인, 컴포넌트, 모듈 4탄_용어_프레임워크, 라이브러리 1탄_jQuery 플러그인 jQuery 플러그인이란? jQuery 플러그인 작성 a. 기본적인 플러그인 만들기 b. 옵션을 받아서 사용하기 jQuery …

무작정 CSS를 적용하고자 했을 때 가장 헷갈렸던 두 가지의 속성을 정리해보려고 한다. 퍼블리싱을 하고자 한다면 display와 position을 보게 될 것이다. 보지 못했다면 퍼블리싱을 한 것이 아니다. display는 웹페이지의 레이아웃을 결정하는 CSS의 중요한 속성이고, position은 레이아웃 안에서 HTML요소의 구체적인위치를 결정하는 속성이다. 그러면 두 가지 속성을 조금 자세히 살펴보자. display display속성의 값으로는 아래 세 가지 뿐이다. block inline inline-block HTML의 모든 요소는 display의 속성 값을 가지는데 대부분, 1. block 혹은 2 inline을 가진다. block 의 경우 등이 있다. block은 말 그대로 레이아웃이 하나의 블럭(라인)을 차지한다. 즉 해당 라인의 너비를 모두 차지한다. inline 의 경우 가 있으며, 하나의 라인을 차지하지 않고, HTML요소가 가진 너비만큼만 차지한다. in…

이론 -> 실무의 케이스로 CSS를 공부한게 아니여서, ‘CSS 박스 모델’개념이 얼마나 기초 중의 기초인지 몰랐다. 매우 매우 타이니한 UI화면을 만들 때 조차도(!!) 무조건 알아야 한다는 것을 세상 사람들에게 알리는 바이다. 이 내용을 블로깅한다는 것이 굉장히 쑥스러우나, 쑥스러움은 잠깐뿐. 왜 필요하냐하면, 한 div걸러 div에 주는 속성인 width와 height가 대체 어떤 영역에 주는 것인지는 알아야한다. 박스 모델은 (바깥부터) margin, border, padding, content영역으로 나눌 수 있다. 여기서 width와 height에 속성 값을 주면, 파란색 영역인 content영역의 너비와 높이에 적용된다. 그래서 이 박스의 너비 사이즈 측정하려면 content(1294) + padding(25) + border(25) 값을 구해야한다. 💡 결론: 그래서 이 지식을 어디에 써먹을 것인가? box-sizing속성에 ‘border-box’값을 준다. …

현실 flex는 못해도 css flex는 해야지~

계속해서 추가됩니다. 이 페이지를 보면 알 수 있는 것 1. 웹 폰트 적용 2. 웹 폰트 굵기 적용 — 웹 폰트 적용 Google Font https://fonts.google.com/ 링크 태그로 해당 웹폰트 가져오기 css 적용하기 — 웹 폰트 굵기 적용 link태그의 href속성에 wght@400;600 지정을 해주어야 함. 웹 폰트 적용

flatform: flat(편평한) + form(형식)의 합성어 하드웨어나 소프트웨어의 분야에서는 “기반 환경”이나 “기술 환경”을 의미한다. 하드웨어에서 플랫폼이란 표준공정을 통해 다양한 제품을 만들어내는 기반과 도구를 지칭한다. 예를들어, 애플의 A지사와 B지사에서 만들어내는 프로세스와 물리적 장치가 같은 것이 플랫폼인 것이다. 소프트웨어 플랫폼이란 공통 실행환경을 플랫폼이라고 한다. 예를들어, 크롬 브라우저라는 “플랫폼”에서 여러가지 기능을 제공해주어, 전 세계의 front-end 개발자들은 크롬 브라우저에서 제공하는 기능을 가지고 개발을 한다. 서비스 플랫폼이란 다른 서비스들이 내 서비스를 쉽게 활용할 수 있도록 해주는 인터넷 기반의 기술환경을 말한다. 예를들어, 네이버가 네이버 지도 API를 제공함으로써 전국의 개발자들은 네이버 지도 기술을 구현할 수 있다. 더 나아가 플랫폼의 의미가 확장되고 사람들은 다양한 현장에서 “플랫폼”이라는 용어를 사용하기 시작하는…

🤷🏻‍♀️ 엄마 가지 - 1월 06일에 작성한’(React) 렌더링을 언제 하길래 데이터 변경이 안돼?’ 포스팅에서 렌더링의 뜻을 정의하였다. 렌더링이란 ‘리액트 앨리먼트를 html 형태로 변환하여 화면에 그려지는 것.’ 정확히 앨리먼트라는 게 뭘까?하면서 알아보는 글 Element와 React Element Element란 html에서 태그로 적은 노드들을 지칭한다. React Element는 React내에서 html에서 태그로 적은 노드를 지칭한다. 궁금증 해결 이렇게되면 렌더링의 정의가 틀린 것이다. 신뢰성을 블로그를 봐야하는 이유이다. 다시 렌더링을 다시 정의하면 ‘HTML파일을 읽어 브라우저에 출력하는 과정’이다. ❓ 추가 궁금증 - Html파일을 읽어와서 화면에 띄워주는 과정 브라우저가 HTML과 CSS를 파싱하여 화면에 어떤 것이 보여지게 되는지 결정하는 과정 브라우저가 렌더링을 하는 과정 1번 과정을 거치면 렌더트리가 만들어진다. 렌더트리는 화면에 보여지게되는 HTML…

누군가 나한테 물어본 질문 👨🏼‍🦱 : JSX를 쓰면 새로고침이 안되니까 이 JSX를 이용해서 데이터를 묶어둘 수 있지않아? 🙋🏻‍♀️ : 네??? JSX는 그냥 문법일 뿐인데 까지 얘기함; 새로고침은 JSX와 관련이 없습니다.하고 SPA를 멋드러지게 설명 하고싶었어요. SPA(Single Page Application) 모든 정적 리소스를 최초 접근 시 단 한 번만 다운로드 한다. 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만 JSON으로 전달받아 페이지를 갱신한다. 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만 갱신하므로 새로고침이 발생하지 않는다. SPA를 더 자세히 설명하기 위해서는 SPA의 반대인 MPA와 비교하여 설명하면 이해가 쉬울 것 같다. MPA(Multi Page Application) 새로운 페이지 요청 시 페이지 갱신에 필요한 완전한 리소스를 클라이언트에 응답한다. 응답을 받아, 렌더링하는 과정에서 새로고침이 발생한다. 각 페이지마다 고유의 URL이 존재한다…

렌더링이란? 리액트 앨리먼트를 html 형태로 변환하여 화면에 그려지는 것 렌더링 이슈 리덕스를 사용해서 state 상태관리를 하는데, setState로 렌더링을 한 번 더 하게하는 코드를 발견했다. setState를 지우니 자식컴포넌트 그리드의 데이터가 바인딩이 되지 않는다. (!?) 문제의 코드 AComponent 🥊 React가 렌더링을 실행할 때 props가 변경되었을 때 state가 변경되었을 때 forceUpdate()를 실행하였을 때 부모 컴포넌트가 렌더링 되었을 때 해결의 과정 a. 4번과 같이 부모 컴포넌트가 렌더링이 되면, 자식 컴포넌트가 렌더링이 된다고 인지 b. 리덕스 라이브러리를 사용하지 않은 순수 리액트에서만 해당되는 이야기 c. 리덕스 라이브러리를 사용한 경우는 1~3번만 렌더링이 됨 d. 현재는 setState로 상태변경이 이뤄져야 자식 컴포넌트에서의 렌더링이 제대로 됨. e. setState({ bState: true }) 상태변경을 하면 렌더링이 되…

얕은 복사(Shallow Copy) 객체가 담겨있는 변수를 다른 변수에 할당하면 call by reference (참조)가 일어난다. 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복사한다. 복사된 객체는 원본 객체의 주솟값을 참조하고 있는 것이다. 깊은 복사(Deep Copy) 독립적인 메모리에 값 자체를 할당하여 생성하는 것으로, 깊은 복사를 통해 원본의 객체와는 다른 고유한 객체를 생성한다. Object.assign() 사용법 Object.assign(생성할 객체, 원본 객체) 메서드의 첫 번째 인수로 빈 객체를 넣어주며, 두 번째 인수로 할당할 객체를 넣어준다. … (Spread Operator) 사용법 …연산자를 사용하여 고유한 객체를 생성한다. 깊은 복사의 방법 Object.assign()과 …는 1레벨 깊이에서는 우리의 생각대로 깊은 복사가 가능하지만, 그 이상 레벨의 복사에서는 아래의 방법을 통해 복사를 진행해야 한다. 완벽한 Deep Copy를 위한 방법…

문제 부모로부터 내려받은 props의 값을, 자식의 componentWillReceiveProps 함수에서, this.props와 nextProps의 값을 디버깅해보면 언제나 똑같다. 💡 구글링 https://stackoverflow.com/questions/47227329/componentwillreceiveprops-this-props-and-nextprops-always-the-same 🔨 stackOverFlow 문제 요약 👉 부모 컴포넌트인 ProductText는 단방향으로 공급되는 state를 가진다. 👉 부모 컴포넌트에서 배열이 변경될 때, 자식 컴포넌트에서 변경된 배열 prop를 감지해 callback 함수를 호출하고 싶다. 👉 하지만 자식의 componentWillReceiveProps 함수에서 this.props와 nextProps 언제나 같아 변화를 감지할 수 없다. 🔨 해결책 👉 부모의 state가 불변하도록 변경되지 않았다. 👉 그 이유는, 같은 메모리 …

비동기 처리 생각대로 되지않아 열받을 찰나 비동기 처리에 대한 문제임을 발견하고, 각성하는 바 정리해본다. 1️⃣ 첫 번째 사례 ajax 콘솔 창 로그는 undefined가 찍힌다. 왜그럴까? 비동기 처리의 문제이다. 서버와 통신하는 ajax 객체가 응답을 받아오기 전에 출력한다. 2️⃣ 두 번째 사례 setTimeout(); 비동기 처리 개념을 모르고 해당 코드를 본다면 콘솔 창에는 “1”, “2”가 찍힌다고 생각할 것이다. 그런데 “2”, “1”이 찍힌다. setTimeout() 함수에서 3초 후에 “1”을 찍게 되어있는데, 이 로직을 기다려주지 않고 나머지 코드를 먼저 실행한다. javascript에서의 비동기 처리 위의 사례에서 살펴봤듯이 서버 통신 혹은 시간 지연 함수와 같이 실행결과를 기다리지 않는다. 비동기 처리가 필요한 이유는 사용자 경험이다. 대량의 데이터를 처리하는 서버 통신에서 응답을 받아올 때까지 나머지 로직을 멈춘다면 사용자는 무한의 시간을 기다려야 한다. 비동기 …