양갱의 개발 블로그

Redux란? Redux란 JavaScript 애플리케이션에서 클라이언트 사이드의 상태를 관리하기 위한 오픈소스 JavaScript 라이브러리입니다. 주로 React나 Angular와 같은 사용자 인터페이스 라이브러리/프레임워크와 함께 사용되며, 애플리케이션의 상태를 예측 가능하게 만들어줍니다. React나 다른 뷰 라이브러리와 함께 사용할 수 있습니다. Redux는 매우 작지만 사용 가능한 애드온이 많습니다. Single Source of Truth(진실의 단일 출처) : Redux는 애플리케이션의 전체 상태를 하나의 JavaScript객체 트리로 저장합니다. 이 객체 트리는 "Store"라고 부르며, 이것은 앱 내에서 유일합니다. State is Read-Only(상태는 읽기 전용) : Redux에서..

AJAX를 이야기는 많이 들어봤는데 어떤 것인지 확실하게 몰라서 공부 겸 포스팅하게되었습니다! AJAX란? AJAX (Asynchronous JavaScript And XML)의 약자로, 웹 페이지를 새로고침하지 않아도 서버에 데이터를 요청하거나 보낼 수 있게 하는 기술입니다. 이를 통해 사용자 경험을 향상시키며, 서버와 비동기적 통신을 할 수 있습니다. 기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출하는 방식이었습니다. 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려 줍니다. 하지만 코드를 수정하거나 결과물로써 되돌려 받은 페이지는 유사한 내용을 가지고 있습니다. 이렇게 되면 HTML 코드를 모두 다시 한번 전송해야하므로 낭비가 될 ..

면접 준비를 하면서 공부하는 겸 블로그 정리하려고 합니다. 면접 질문 목록에서 자바스크립트와 React같은 프론트엔드 개발 질문 목록이다 보니 개념이 중요한 것같습니다. 그래서 기본적인 Javascript의 동작원리에 대해 공부하고 포스팅했답니다 자바스크립트( Javascript )의 동작 원리 자바스크립트 ( javascript )는 싱글 스레드 기반 원리로, 한번에 하나의 작업만 처리할 수 있습니다. 그러나 비동기 처리를 통해 여러 작업을 '동시에' 처리하는 것처럼 보일 수 있습니다.(Async인가요..?) Javascript 엔진은 Call Stack, Web API(블라우저 제공), Task Queue(Event Queue), Event Loop로 구성됩니다. ** JavaScript 엔진 : 자..

var, let, const javascript를 구현할 때 사용하는 변수입니다. 세개 모두 다른 특징이 있는데 미리 알아두고 코드를 구현하면 좋겠죠? var var 변수가 함 수 내에서 선언 될 때는 함수 범위로 지정합니다. 하지만 블록({ }) 내부에서 선언한 var 변수는 블록 밖에서도 접근이 가능합니다. 한번 선언한 후에도 값을 변경할 수 있습니다. * 원래 알던 변수와 다른 점으로는 블록 내에서 선언한 값을 밖에서도 접근 가능합니다! let let으로 선언된 변수는 { }로 구성된 코드 블록 내부에서만 접근 가능하며 그 외부에서는 접근할 수 없습니다. 우리가 흔히 알고 있는 변수의 특징입니다. 한번 선언한 후에도 값을 변경할 수 있습니다. const const로 선언된 변수는 { }로 구성된 코..

컴포넌트를 추가하려면 []배열에 넣으면 된다 ​ 내가 하고 싶은 부분은 ​ 버튼은 클릭할 때마다 컴포넌트를 추가해주고 싶다 즉 버튼을 클릭할 떄마다 컴포넌트 내가 만든 태그들을 추가할 수 있다ㅏ ​ 가장 중요한 부분은 useState와 어디에 넣을지가 중요하다! 배열을 넣어주는 concat이 있다! const [insertTag, setInsertTag] = React.useState([]); useState를 꼭 [] , 배열로 해줘야 한다 그래야지 추가가 된다!! ​ 그리고 버튼을 클릭하면 onPress안에 set을 넣으면 된다ㅏ ​ concat은 해당 배열에 추가 또 추가 붙여넣기 라고 볼 수 있다 ​ setInsertTag 에 insertTag.concat으로 계속 추가해준다 {insertTag}..

//전화번호 정규식 const validatePhone = phone => { const regex = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/; return regex.test(phone); } //생일 정규식 const validateBirth = aBirth => { const regex = /^([0-9]{4})-?([0-9]{2})-?([0-9]{2})$/; return regex.test(aBirth); }​ //시간 정규식 const validateTime = time => { const regex =/^([01][0-9]|2[0-3]):([0-5][0-9])$/; return regex.test(time); } 팀원이 작성한 정규식이다! ​ 처..

toFixed(숫자) ​ ex) ​ number = 123456.78901234567 ​ number.toFixed(5) ​ 소수점 아래 5개만 두고 나머지 자르기 ​ result = 123456.78901 ​ 변수1 = 12.321654987 변수2 = 변수1.toFixed(5) console.log(변수2) // 12.32165 이렇게 출력될 것입니당 https://squll1.tistory.com/entry/javascript-%EC%86%8C%EC%88%98%EC%A0%90-%EC%9E%90%EB%A6%AC%EC%88%98-%EC%A7%80%EC%A0%95%EC%9E%90%EB%A5%B4%EA%B8%B0 [javascript] 소수점 자리수 지정(자르기) toFixed() toFixed()함수를 ..

로딩창 만들기 페이지 변환하거나 글을 작성했던 것을 저장할 때!! 아무것도 없으면 사용자 시점에서는 변화하고 있는게 없어 보이기 때문에 해당 시스템을 꺼버리기 마련이다! 이런 휴먼에러를 줄이기 위해서!! 로딩창을 만들어 진행중임을 사용자에게 보여준다ㅏ 그럴때 사용하는 것이 로딩임ㅁ 로딩 화면 만들기 위해서는 react native에 있는 값이 있긴하다! 내 snack에서 실행 코드가 있음!! 참고하시구 https://snack.expo.dev/@yeonji1013/activity-indicator 학교에서 수업 들으면서 실습했던 코드이당 이런 식으로 결과값이 나오고 하단에 있는 저 로딩창이 있다 저저 파란거ㅎㅎ,, 색도 변화할 수 있는데 좀 맘에 안들면!! 구글링해서 무료 gif 값을 넣어도 무방하다아 ..