본문 바로가기

JavaScript26

js 에서 한글 글자 수 세기 파일을 첨부할 때 파일명을 보여주는 input 박스 길이 보다 파일명이 더 길 경우, 파일명이 오버되어 일부만 출력되는 현상이 발생했다. 파일명의 글자 수를 제한하여 파일명이 input 박스 내에서 잘리지 않게 출력해야 했다. 파일명에 한글이 있는 경우, 한글은 모음/자음 단위로 length 가 계산되고 있었다. 예를 들어, 파일명이 "아moya" 라고 한다면, 아 라는 글자의 length 는 1로 처리되어야 하지만 'ㅇ' 과 'ㅏ' 가 각각 계산되어 길이가 2로 출력된다. 파일명 값이 든 변수를 유니코드 정규화(normalize) 해주니 한글 length 길이가 1로 처리되는 것을 확인할 수 있다. // 파일명 정규화 var fileName = orgFileName.normalize('NFC'); 사용.. 2022. 10. 13.

window.postMessage 로 윈도우 컨트롤 하기 순수 js 로 작업한 A 윈도우에서 어떤 메뉴를 클릭하면 a 다이얼로그가 출력되는데, a 다이얼로그 안에 있는 확인 버튼(okBtn)을 클릭하면 B 윈도우가 팝업으로 열린다. (이때 B윈도우는 리액트로 작업한 부분) A 윈도우의 a 다이얼로그에는 취소 버튼(closeBtn) 도 있는데, 취소 버튼을 클릭하면 B 윈도우가 닫혀야 한다. 그런데 B가 윈도우 팝업이라 다른 탭에 그대로 남아있어서 해당 부분을 취소 버튼 클릭 시 자동으로 닫히게 수정해야 했다. 처음에 검색하면서 크롬 내에서는 도메인이 다른 윈도우를 닫을 수 없다는 글을 봤었는데, 그 때문에 혼란이 와서 해결할 방법이 과연 있는건지 몇 시간을 고민했다 ㅠㅠ 순수 js 기반 윈도우 내에서 리액트 윈도우를 컨트롤 할 수 있는지도 모르겠고.. 멘붕이었.. 2022. 8. 17.

window 객체란 무엇인가? 코드를 훑어보다가 아래와 같이 window 객체에 프로퍼티를 추가하는 방식으로 함수를 만든 코드를 발견했다. 보통은 변수로 함수 선언 및 호출하는 방식을 사용하는데 window 객체로 호출하는 방식이라 신기해서 한번 알아보고자 한다. window 객체란? 브라우저 전체를 담당하는 객체 모든 객체의 조상(전역 객체) 최상위에 있는 객체이기 때문에 어디서든 접근이 가능하다. 또한 전역 변수를 선언할 경우 실제로는 window.함수명이 되지만, window 가 생략되는 것이라고 한다. "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 2022. 5. 23.

조건문 줄이기(feat. 클린 코드) 오늘 회사에서 코드 리뷰? 유지보수 코드 개선 방안 회의를 했는데 신입이라서 나도 참관했다! 그 중에 기억에 남는 부분은 조건문을 줄이는 방안에 관한 것이다. 개선해야 하는 부분은 매번 같은 로직을 타지만 케이스 별로 값만 다르게 바뀌는 상태여서 케이스별로 switch-case 또는 if 문으로 작성되어서 그 안에서 값만 바꿔주고 있었다. 코드가 이렇게 작성되어 있으면 혹여나 다른 케이스가 추가되는 경우 조건문도 계속 늘어나기 때문에 효율면에서 좋지가 않다. 해당 부분에서 switch-case 문을 없애는 방안에 대해 이야기 했는데, 나도 그와 비슷한 고민을 해본적은 있지만 항상 해결책을 찾지는 않고 끝났던 것 같다. 그래서 그 말을 들어도 바로 딱 해결 방안을 얘기할 수가 없었다 ... 결론은 같은 로.. 2022. 5. 20.

Babel 이란? 프로젝트 할 때 babel.config.js 파일을 보면서 이게 뭐지 싶어 검색해본 적이 있다. 그런데 이게 문법도 아니고 언어도 아니라 그런지 계속 그 의미를 잊게 되는 마성의 babel .... 그래서 오랜만에 자바스크립트 공부를 다시 하던 중에 babel 키워드를 발견해서 정리해보려고한다. babel 이란 무엇인가 ··· 자바스크립트의 변수 타입에는 var / let / const 가 있다. var 사용을 지양한다고는 하나, let / const 변수의 경우 IE9, IE10 에서 사용이 불가하다. 그러면 IE9, IE10 환경에서는 var 타입의 변수만 선언할 수 있는 걸까? 결론은 아니다! 왜냐하면 babel 이 존재하기 때문 ··· 구형 브라우저에서도 코드가 돌아갈 수 있게끔 도와주는 도구가 .. 2022. 5. 11.

addEventListener 이벤트 (input & change) 자바스크립트에서 input 태그에 텍스트가 입력이 되면 버튼을 활성화하도록 만드는 작업을 하다가 Input 이벤트와 change 이벤트의 차이점을 알게 되어서 기록해둔다. 작동 방식 인풋 박스 두 개에 모두 텍스트가 입력되면 "확인" 버튼의 비활성화가 활성화로 바뀌는 로직 1. 먼저 두 개의 input 요소를 각각 element.getElementById 로 가져온다. 2. 각 요소에 대해 addEventListener 를 걸어서 어떤 이벤트가 발생할 때마다 어떤 동작이 수행되도록 만든다. 이때 input 에 입력되는 값 변화를 실시간으로 알기 위해서 처음에는 onChange 즉 , "change" 이벤트를 넣었다. 그러나, change 이벤트를 사용하면 input 의 값 변화가 커서를 input 태그 .. 2022. 4. 25.

[React] SPA 란? SPA(Single Page Application) : 한 개의 페이지로 이루어진 애플리케이션 전통적인 웹 방식(SSR : 서버 사이드 렌더링) 은 사용자가 다른 페이지로 이동할 때마다 새로운 html 을 받아오고 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주는 방식이었다. 즉, 사용자에게 보여주는 화면은 서버에서 준비했다. 이처럼 전통적인 웹 대부분은 서버 사이드 렌더링 방식이다. 그러나 요즘에는 웹에서 제공하는 정보가 정말 많기 때문에 새로운 화면을 보여줄 때마다 서버에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다. (트래픽, 서버에 높은 부하 등) 그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고 우선 애.. 2021. 11. 8.

[React-Native] 컴포넌트 스타일링 💡 인라인(inline) 스타일링 컴포넌트의 태그에 직접 스타일을 적용하는 방식이다. // src/App.js import React from "react"; import { View, Text } from "react-native"; const App = () => { return ( Inline Styling - Text Inline Styling - Error ); }; export default App; 💡 클래스 스타일링 컴포넌트 스타일에 StyleSheet 에 정의된 스타일을 적용하는 방식이다. import React from "react"; import { StyleSheet, View, Text } from "react-native"; const App = () => { return ( I.. 2021. 11. 4.

[React-Native] React Native 에서 컴포넌트란 💡 컴포넌트란? 재사용할 수 있는 조립 블록으로, 화면에 나타나는 UI 요소이다. 그러나 단순히 UI 역할만 하는 것이 아닌 부모로부터 받은 속성이나 자신의 상태에 따라 표현이 달라지고 다양한 기능을 수행합니다. 💡 JSX JSX 는 마치 HTML 을 작성한 것 같은 코드이다. 이러한 JSX 는 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 리액트 프로젝트에서 사용된다. export default function App() { return ( Open up App.js to start working on your app! ); } 여러 개의 요소를 표현할 경우 하나의 부모로 감싸야 한다. 위의 경우 Text 와 StatusBar 태그를 View 태그로 감싸고 있다. V.. 2021. 11. 3.

이전 1 2 3 다음

티스토리툴바