천천히 차근차근

#testModal 안에 #smallModal이 있다. #testModal이 큰 모달이고 그 안에 #smallModal이 있다. #testModal 을 닫았을 때 check 값을 true로 주고 조건을 걸어서 작업을 하려고 하는데 modal 안에 있는 작은 modal을 닫았더니 check 값이 true로 설정되어 내가 원하는 작업을 수행할 수 없었다. 방법을 찾아본 결과, 아래와 같이 해결할 수 있었다. var check = false; $('#testModal').on('hidden.bs.modal', function (event) { var target = event.target; var relatedTarget = event.relatedTarget; // 이벤트가 발생한 요소와 그의 자식 요소인지..

[제가 해결한 방법은 글 제일 하단 쯤에 있습니다.] 내가 유지보수하는 플렛폼, 1개의 서비스를 운영함에 있어 tomcat 서버 1개에 여러개의 host를 설정하여 운영하고 있다. 이미지, 은행 관련 업무 등 적절하게 프로젝트를 나눠서 관리하고 있는 셈이다. 여러개의 프로젝트를 tomcat server.xml 파일에서 host로 분기하여 관리하고 있고 프로젝트 2개에서 quartz를 돌리고 있다. A프로젝트에서는 여러 개의 trigger를 만들어 quartz를 돌려도 설정한 시간에 문제 없이 작동이 되었다. 다만,, 나머지 B프로젝트에서 돌리는 quartz는 돌릴 때마다 동일한 trigger가 1-2초 텀을 두고 또는 1초의 텀도 두지 않고 동시에 실행이 되는 문제를 보였다. B프로젝트에서 quartz가..

앱 만들기 공부를 시작하면서 알게된 사이트인데 색상이 괜찮게 커스텀 된 것 같아 포스팅 해두려 한다 :) [참고 링크] https://m3.material.io/theme-builder#/custom Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. m3.material.io

리액트에서 상태를 관리하는 가장 기본적인 방법으로 useState라는 함수를 사용하는 것이다. 리액트에는 use로 시작하는 다양한 함수가 내장되어 있는데 이 함수들을 Hook이라고 부른다. Hook을 사용하여 상태 관리, 최적화, 컴포넌트 작동 흐름 관리 등 다양한 기능을 구현할 수 있다. 그 중에서 useState는 상태 값을 관리하는 함수이다. const App = () => { const [count, setCount] = useState(0); const onIncrease = () => setCount(count + 1); const onDecrease = () => setCount(count - 1); return ( ); }; useState 함수는 위 예시처럼 다음과 같이 사용한다. con..

컴포넌트에서 Props를 조회하는 코드를 더 짧게 구현하는 방법이다. 구조 분해 할당이라는 자바스크립트 문법을 사용하는 방법으로, '비구조화 할당' 이라고 부르기도 한다. 이 문법은 객체 안에 있는 값을 더욱 짧은 코드를 사용해 밖으로 추출할 수 있게 해준다. 객체를 참조해서 콘솔로 찍어보면 아래와 같이 사용된다. function print(params) { console.log(params.name); console.log(params.descr); } 구조 분해 할당을 사용한다면 아래와 같이 사용할 수 있다. function print({name, descr}) { console.log(name); console.log(descr); } 이렇게 사용하면 매번 객체를 참조하지 않고 코드를 간결하게 사용..

React Native 기초 1. 리액트 컴포넌트를 만들 때는 아래 코드를 꼭 입력해야 한다. import React from 'react'; 2. 컴포넌트를 선언하는 방법 2가지 함수 선언 : function 클래스 선언 클래스는 2018년 전에 주로 사용하던 방법으로 지금은 잘 사용하지 않는다. 3. function, 화살표 함수 선언 기능적으로 차이는 없다. 화살표 함수의 경우, 간단하게 반환할 때 사용되며 중괄호/return 을 생략할 수 있다. 그치만 페이스북에서도 화살표 함수가 아닌 function 함수를 선언해서 리액트 네이티브를 개발한다고 한다. 4. JSX에서 자바스크립트 표현식을 보여줘야 할 때는 중괄호로 감싸서 작성해야 한다. 자바스크립트 표현식 : 연산 결과, 함수 호출, 특정 변수..

앱을 만들고 싶어서 react native 공부를 시작하려고 리액트 네이티브 프로젝트를 git에 push 했다. 알람 올 일이 없는데 알람이 보여서 확인해보니 보안이 취약하다고 친절히 안내해주는 알림이었다. 해결 방법 리엑트 네이티브 프로젝트가 존재하는 폴더에서 터미널을 열고 아래 명령어를 입력하여 해결할 수 있다. 프로젝트의 취약한 부분을 조회할 수 있다. $ yarn audit 0개의 취약한 부분을 발견했다고 한다. 업데이트 해줄 게 없는건가,, 흠... 빈 프로젝트여서 보안에 취약하다고 친절히 알려준걸까.. 만약 취약한 부분을 업데이트 해야 하는데 업데이트가 되지 않는다면 강제로 해줄 수 있다고도 한다. npm audit fix --force

index.js 프로젝트의 엔트리 파일로, 생성한 리액트 네이티브 앱은 이 파일에서 시작한다. 여기서 import 구문을 통해 코드들을 불러와 앱을 번들링한다. @format : 코드 스타일을 자동으로 정리해주는 Prettier라는 도구와 관련이 있다. /** * @format */ import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); 간단한 설명일지라도 가장 중요한 부분이 아닐까 싶다. App이라는 컴포넌트를 불러와서 AppRegistry.registerComponent..

리엑트 네이티브 프로젝트 생성 $ npx react-native init projectName npx란? Node.js와 함께 설치되는 도구로, Node.js 환경에서 구동되는 CLI 도구들을 간단하게 사용할 수 있게 해준다. package.json package.json 파일을 열어보면 위와 같이 scripts가 설정된 것을 확인할 수 있다. 이렇게 스크립트가 설정되면 yarn을 통해 아래와 같이 원하는 명령어를 실행할 수 있다. $ yarn 스트립트 종류 android : 안드로이드 환경에서 앱을 구동하는 스크립트 ios : iOS환경에서 앱을 구동하는 스크립트 start : Metro를 구동하는 스크립트 Metro란? 리액트 네이티브를 위한 자바스크립트 번들러로, 프로젝트에 사용된 자바스크립트 파일..

아래와 같이 사용하면 html에 그리지 못한 form을 자바스크립트로 직접 만들어서 서버단으로 데이터를 전송할 수 있다. let form = document.createElement('form'); form.action = '/test/test2/test3'; form.method = 'POST'; let el = ''; el += ''; el += ''; el += ''; form.innerHTML = el; // 폼을 제출하려면 반드시 폼이 문서 안에 있어야 한다. document.body.append(form); form.submit(); html 태그에 form을 그리고 또 요소들을 찾아서 javascript로 값을 할당하고 다시 submit하는 과정이 번거로웠고 왜 때문인지 백엔드로 POST 방..

현재 페이지 URL에서 원하는 파라미터 값을 추출 하는 방법 공유드립니다! 테스트는 아래 네이버 기사 링크타고 들어가서 개발자 도구 콘솔에서 타이핑 해보았습니다. https://n.news.naver.com/article/005/0001612676?cds=news_media_pc&type=editn “세안제 위장 염산 나눠준다고?”…알고보니 ‘흑설탕물’ 31일 소셜미디어와 지역 커뮤니티 등을 중심으로 경기 의정부, 양주 지역에 “누군가 세안제를 가장한 ‘염산’을 아이들에게 나눠주고 있다”는 경고글이 퍼지며 일대 주민들을 긴장시켰다. n.news.naver.com ?cds=news_media_pc&type=editn 네이버 기사 URL 파라미터들입니다. cds와 type 파라미터 값을 제대로 출력하는지 확..

See the Pen Untitled by hyeryeonkim (@khr777) on CodePen. var 변수 선언은 전역 변수 또는 함수 내에서 사용하기 위해 선언하죠. let과 const 변수가 나오기 전에는 모두 var 변수를 사용했는데 var 변수가 갖는 문제가 많다보니 let과 const를 접한 이후로는 자연스럽게 let과 const를 사용하게 되더라구요. var변수는 재선언이 가능하며 값도 다시 설정할 수 있습니다. 물론 여기에서 발생하는 문제가 흔히 알고 있는 var의 문제점이죠. var mung = 3; mung = 4; console.log(mung); function method_1() { mung = '사람'; console.log(mung); //사람 var mung = '강아..

최근에 회사에서 운영하는 플랫폼 앱이 안드로이드 최신 기종에서 다운로드 되지 않는 문제가 발생했었다. 그래서 targetSdkVersion을 31로 업데이트해서 다시 배포한 적이 있었다. 2023.05.11 - [IT 유용한 정보 모음/IT 유용한 정보] - [Android] How to import a project that another person was working on into Android Studio / 안드로이드 스튜디오로 다른 사람이 작업하던 프로젝트 import하는 방법 [Android] How to import a project that another person was working on into Android Studio / 안드로이드 스튜디오로 다 회사에서 운영하는 플렛폼은 웹..

이번에 회사에서 운영하는 서비스의 결제 방식을 나이스페이먼츠에서 토스페이먼츠로 변경하게 되었다. 그래서 토스 연동을 시작하며 관련 자료를 포스팅 하려던 찰나, 연동 테스트 API를 호출하려고 간단한 테스트 코드를 삽입했는데 오류가 발생했다. 대체, 왜? 구글링을 하다가 다행히 문제를 해결할 수 있는 팁을 얻어 나도 기록해보려 한다. 사실 문제를 해결하기까지도 대체 뭐 때문인지,. 망연자실 하고 있었던 나였다. , . 일단 해당 오류 원인은 이러했다. 카카오에서 제공하는 카카오 맵 SDK 에서 javascript native Map을 활용하고 있는데, 또다른 스크립크에서 Map객체를 덮어 씌워서 문제가 발생한 것이라고 한다. 해결 방법은, 카카오 맵 SDK보다 우선적으로 import하니 오류 없이 정상적으..

box-shadow: 2px 2px 2px 2px; box-shadow: 3px 3px 3px 3px; box-shadow: 4px 4px 4px 4px; box-shadow: 5px 5px 5px 5px; 각각 다르게 px을 적용해서 그림자 효과를 줄 수 있다. 박스가 조금 더 아름다워 보이는 효과 🤩

프론트 작업을 하다가 특정 클래스를 많은 요소에 심어두고 한번에 제거해서 다른 클래스를 추가하고 싶은 상황이 생겼다. 어떻게 할 수 있을까 생각을 하다가 foreach, each 다른것도 약하지만 프론트에 한없이 약하기에(본인은 굉장한 노력파) 또 열심히 찾아본 결과 나름 나쁘지 않은 해답을 찾았다. 본인은 요소들을 찾아서 값을 변경하거나 하는 등의 중요한 작업을 하는게 아닌 A클래스를 가진 요소를 찾아서 A클래스를 제거하고 B클래스로 변경해주고 싶었다. 이런 경우 아래와 같이 처리하면 아주 간단히 처리할 수 있다. // 특정 클래스를 가진 요소 선택 var elements = $(".특정클래스"); // 선택한 요소의 클래스 변경 elements.removeClass("기존클래스").addClass("..

우선 쿠키란 무엇인지 간략하게 알아보자 쿠키는 웹 사이트에서 사용자의 컴퓨터에 저장되는 작은 데이터 조각이다. 쿠키는 사용자와 웹 사이트 간의 상호작용을 기록하고 유지하는 데 사용된다. 쿠키는 웹 사이트가 클라이언트를 식별하고 상태를 추적하는 데 사용되며 클라이언트가 웹 사이트에 방문하면 서버에서 쿠키를 생성하고, 그 후 클라이언트의 브라우저에 저장된다. 클라이언트가 같은 웹 사이트를 방문할 때마다 해당 쿠키가 서버로 전송되어 서버는 클라이언트를 식별하고 상태를 추적할 수 있다. 쿠키에는 이름, 값, 만료일, 도메인 등의 정보가 포함되어 브라우저에 저장된다. 필요한 script 모음 cookie 생성 $.cookie('name', 'value', { expires: 1, path: '/' }); 'nam..

회사에서 사용하는 협업툴 Slack을 이용하다보면 알게모르게 신기한 기능들을 하나씩 접하게 된다. 예를 들자면.. 뭐, 워크플로부터 시작해서 지금 소개할 상태 편집하는 방법이랄까? 워크플로 생성하는 방법은 조만간 소개하도록 하겠다. 회사에서 사용하고 있는 Slack이다보니 상세하게 노출할 수 없기에 많은 부분을 가릴 수 있는 점 이해 부탁드리겠습니다 :) 내가 공유하고자 하는 Slack 상태 편집 결과물을 먼저 보여주려 한다. 화살표를 따라서 요기 조기 보면 'ON 업무중' 이라고 표시된 나의 Slack 상태를 확인할 수 있다. 분명 많은 사람들이 사용하고 있을테지만 아직 상당히 모르는 사람이 많아서 먼저 사용해본다면 아주 재미있을 것이다. 사이드바 다이렉트 메시지에서 보면 이렇게 작성자 본인과 다른 동..

회사에서 협업툴로 Slack을 사용하고 있다. 현란한 손놀림으로 Slack을 사용하고 싶지만 그래도 나름 자주 사용하는 기능들은 손쉽게 이용하고 있는 것 같아 정리해보려고 한다. window 사용자의 경우 command를 ctrl로 입력해주면 된다. 검색 command + G 현재 대화에서 검색 command + F 사이드바 표시 / 숨기기 Shift + command + D 상태 설정 열기 Shift + command + Y 오른쪽 창 닫기 또는 다시 열기 command + . 텍스트를 코드로 형식 지정 Shift + command + C 번호 매기기 목록으로 형식 선택 Shift + command + 7 글머리 기호 목록으로 형식 선택 Shift + command + 8 인용으로 형식 선택 Shift..

용자는 껌을 물고 놓지를 않아 😌 껌먹고 자니.. 자니? 자니?????? 또 ..... 자...................? ,,,, 그래 자라 자... 🥸 누나는 일하는데 너는 계속 자........................... 그만 자 이제......................... 🤥 그래 !!!! 이제 누나한테 좀 와봐 용자야 !!!!!!!!!!!!!!!!!!!!!! 😀 우리 용자 이렇게 털 예쁘게 길었는데,,, 너 더울까봐 잘라준거야,,,, 너무 상심치마........... 나름 괜찮아... 나쁘지 않아.. 제법 괜찮아 잘 어울려 누나의 가위컷............................................................................... 🙃..