이벤트 버블링(EventBubbling)은 웹 개발에서 발생하는 이벤트 처리 메커니즘 중 하나로, 특정 요소에서 발생한 이벤트가 상위 요소들로 전파되는 현상을 말합니다. 저는 이 현상을  이벤트 겹쳐있을 때 '클릭' 이벤트를 한번 클릭한 거로 겹쳐있는 리스너들이 작동해서 이 현상에 대해 공부하게 되었습니다. 이벤트 버블링의 원리이벤트 발생은 사용자가 버튼을 클릭하는 등 특정 이벤트가 발생하면, 그 이벤트는 가장 구체적인 요소에서 시작됩니다.이벤트의 Target이라고 생각하면 됩니다. 이 이벤트는 해당 요소에서 시작하여 점차 상위 요소로 전파됩니다. 이를 이벤트 버블링이라고 합니다. 이는 DOM 트리(DOM Tree)를 따라 최상위 요소까지 전파됩니다. 각 요소는 이벤트 핸들러가 연결되어 있는 경우, 이벤..

HTML문서에서 데이터를 받아오는 방법은 크게 두 가지로 나뉜다. 서버 사이드 렌더링과 클라이언트 사이드에서의 동적 데이터 로딩이다. 서버 사이드 렌더링 (SSR) 서버 사이드 렌더링에서는 서버에서 HTML 문서를 생성할 때 데이터를 함께 처리하여 최종적인 HTML 문서를 클라이언트 (브라우저)에 보냅니다. Thymeleaf, Jinja, ERB, ASP.NET Razor 등 다양한 서버 사이드 템플릿 엔진이 이 역할을 한다. 예시: Thymeleaf를 사용한 데이터 렌더링 Hello, User Name! 서버에서 userName 션수의 값을 처리하여 최종 HTML 문서에 포함시킨다. 클라이언트는 이미 데이터가 삽입된 완성된 HTML을 받게 된다. 클라이언트 사이드에서의 동적 데이터 로딩 클라이언트 사이..

node.js express를 사용해서 api를 작성 후 테스트해보려 했는데 사소한 문제가 발생했는데 원인파악이 힘들었는데 생각보다 당연한 문제여서 해결했던 경험을 공유합니다. API code //router로 get 요청받기 router.get('/', (req,res) => { const responseObject ={ key: 'value', key2: 'value2' //costom }; res.send(responseObject); }); get 요청을 주소에 localhost로 지정하고 보내면 될 줄 알았는데 axios error이 계속 떠서 뭐가 문제인지 몰랐다. // data get요청 const getData = async() =>{ const response = await axios.g..

input 입력창을 클릭하지 않고 다른 곳을 클릭해도 클릭한 것처럼 해당 인풋창으로 입력 스크롤이 지정된다거나, 버튼이나 지정 텍스트를 클릭하면 페이지 내부로 이동하는 기능 보셨을 겁니다. 요약 클릭하면 이동시킬 텍스트를 만들어 HTML태그 안에 href="#id"값을 준다. ex) 마지막으로 이동하기 이동되고 싶은 화면 쪽 태그에 id값을 move라고 지정해 준다. ex) 여기로 이동했습니다 마지막으로 이동하기 label 태그는 for속성으로 id값을 지정해 주면 같은 id값으로 이동해 스크롤을 지정할 수 있습니다. id 아이디 : id 여기 클릭해 보세요 아이디 : ↑↑↑ 여기로 스크롤 이동 될 겁니다. (회원가입 HTML 예제 만들었을 때 사용했었네요) 페이지 내 링크이동 태그 #id 값으로 해당 ..

개인적으로 IT 시대에서 검색 또한 자신의 지식이라고 생각합니다. 그러니 이래저래 공부하는 태그들은 외울 필요 없이 빠르게 공부하고 넘어가는 걸 추천드립니다. 위에 코드는 정보는 흔히 사용하는 제출 버튼을 생성하는 코드입니다. 버튼 안에 '제출'이라는 글씨를 바꾸고싶으면 value 속성을 축가 하면 됩니다. 모두 한 정보 기입 코드로 적어보면 ↓↓결과 창 ↓↓ text란에 정보를 기입하고 '전송' 버튼을 누르면 form 태그에 있는 URL로 정보가 날아가고 '버튼'이라는 버튼을 누르면 자바스크립트 코드로 hello,world가 출력되며 초기화 버튼을 클릭하면 text필드에 적은 정보가 지워지고 정보를 기입하기 전, 초기 상태로 돌아갑니다. 초기화 버튼만 작동하네요... - butten 태그는 이름이 벗기..

사용해 본 내비게이션은 stack, bottomtab, drawer 세 가지를 사용해 봤는데 그중 stack 내비게이터를 사용해 보겠습니다. (공식문서 링크) React Navigation reactnavigation.org 리엑트 내비게이션 설치 npm install @react-navigation/stack 버튼을 눌러서 스택내비게이터로 game이라는 화면으로 넘어가게 만들어보겠습니다. 폴더 생성 이름도 그럴싸하게 지어서 screens 폴더에 뒀습니다. 원리는 Screen컴포넌트들이 Stack에 의해 name 이 지정되면 navigation 이름을 바꿔줘 화면을 스택을 쌓아 이동하는 방식입니다. stacknavigation을 화면을 이동하면서 props로 navigation을 전달해 화면을 표시해 주..

배열이나 컴포넌트를 사용하면서 반복되는 return값을 map()이라는 함수를 많이 사용하실 텐데 이때 state나 배열에 데이터가 없다면 에러가 납니다. "데이터가 없는데 어떻게 데이터를 부르겠다는 거냐" 그럴 때는 state가 갖는 특성인 리렌더링을 이용하셔서 데이터가 들어왔다면 return값을 바꿔주는 삼학 연산자를 더해주면 됩니다. randomDiaryData.map((my, index) => { return ( ); }) 직접 만든 카드 컴포넌트에 randomDiaryData라는 배열을 map을 돌려 순서대로 출력하는 코드입니다. 이때 randomDiaryData에 값이 없다면 map() 함수에서 에러가 납니다. 이럴 때 삼학연산자를 사용해서 randomDiaryData [0] 안에 데이터값이 ..

리엑트 네이티브(React Native)란 리액트 네이티브(React Native)는 페이스북에서 만든 모바일 애플리케이션 개발 프레임워크입니다. 리액트 네이티브를 사용하면, 웹 기술(HTML, CSS, JavaScript)로 ios나 안드로이드 앱을 개발할 수 있습니다. 웹앱을 모바일 환경에서도 동일하게 동작하도록 해주는 기술입니다. 기존 안드로이드나 ios에서는 앱을 개발하기 위해서 Java 언어를 이용해서 코드를 짰는데요, 이 과정에서 많은 시간과 노력이 소요됩니다. 하지만 react native는 자바스크립트만으로 모든 작업을 수행할 수 있어서 훨씬 효율적이고 빠르게 앱을 개발할 수 있게 되었습니다. JavaScript는 웹 브라우저 안에서 주로 사용되는 언어였는데요, 이제는 브라우저 밖에서도 많..

사용자에게 데이터를 받을 때 여러 데이터 중 한 가지를 선택받거나 여러 개를 선택받을 수 있는 input type이 존재합니다. 웹 페이지 안에서 여러가지 항목들을 선택하거나 수정 또는 삭제 등의 작업을 수행해야 하는 경우에 자주 사용됩니다. type="radio" 같은 value 중 한가지만 선택가능, 단일 선택 type="checkbox" 같은 value 중 다중 선택 가능, 다중 선택 radio button(라디오 버튼) name, value 속성을 사용해서 서버로 보낼 값을 정해주면 한 개만 선택할 수 있는 라디오 버튼이 만들어집니다. 예시로 성향검사 할때 사용했었습니다. 검정 : 빨강 : 파랑 : 속성 중 checked를 적용시켜 두면 위에 사진처럼 사용자에게도 미리 선택돼 있는 모습입니다. c..

drop down이라고 불리는 이 기능은 여러 가지 선택지 중 하나를 선택하게 하는 dropdown List 제한된 공강에서 여러개를 선택하게 하는 기능으로 select와 option으로 이루어져 있습니다. 일 이 삼 위에 코드를 입력하면 밑에처럼 보입니다. 선택하면 밑으로 펼쳐지죠. 사용자에게는 일,이,삼 으로 보이지만 실제로 넘어가는 데이터와 다루는 데이터는 1,2,3 인것이죠 (value가 넘어갑니다) multiple 속성 숫자 일 이 삼 색깔 검정 주황 흰 multiple 속성이 붙으면 사용자가 ctrl키를 누르고 선택 항목에서 다중 선택을 할 수 있습니다. 생활코딩님에게 배운 바로는 백엔드 개발자가 여기 url로 정보 보낼 수 있게 해 주세요~라고 하면 으로 태그 안에 있는 사용자가 기입한 정보..