본문 바로가기

prev

Clone-coding "오늘의집" 회원가입 유효성 검사 구현하려는 기능 회원가입 시, 누락된 부분에 대한 유효성 검사를 진행하고 해당 부분에 테두리 색이 변경되도록 구현하려고 한다. 그리고, 해당 부분에 focus가 잡히도록 할 예정이다. 유효성 검사하기 유효성 검사를 하기 위해 validation.js 라는 파일을 생성하고 그곳에서 유효성검사를 한 후, 결과값을 리턴하도록 만들었다. export const onChangeEmail = ( value, setHandler, isHandler, messageHandler, setCheckHandler ) => { const emailRegex = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*$/i; const emailCurrent = value; setHandler(emailCurrent); i.. 더보기
onWeekCalendar 캘린더 제작하면서 애먹었던 문제 1. console.log는 렌더링이 될때의 결과를 나타낸다. 나는 31일치의 배열을 만들어 놓고, 각각의 배열안에는 3가지 의 배열을 추가적으로 입력해뒀다. 3가지의 배열은 각날짜의 스케줄이 있는지 없는지를 나타내는 boolean값으로 설정했다. 배열을 생성하고 log 값을 찍어봤더니, log 값안에는 이미 조건을 걸친 값들이 반영되어있었다. 그래서 나는 log가 정확히 어떻게 값을 반영하는지에 대해 알아봤다. log consolo.log는 참조를 로깅하기 때문에, 객체와 같이 내용물이 변할 수 있는 것들은 실시간으로 내용이 바뀐다. const returnEvent = useCallback(() => { const calendarDays = Array.from({ len.. 더보기
Event bubbling Trouble Shooting 💡 문제 인식 모달을 띄운 뒤, 모달 내부의 닫기 버튼이나 모달의 백그라운드를 누르면 모달이 닫히게 closeModal 함수를 등록해주었는데, 모달이 닫히지 않음. 아래는 문제의 코드. closeModal 함수가 modal을 닫게하는 기능을 하고, 백그라운드와 닫기 버튼에 함수를 등록하였지만 동작안함. code(문제가 발생한 곳) return ( // modal 내에서 click 이벤트 발생시, 해당위치의 click 이벤트도 발생 {modalOpen && ( )} 😵‍💫 | {file.userName} {file.enrollDay} 📎 | {file.fileName} ); Modal Open/Close 관련 코드 closeModal, Modal 나오는 조건 const closeModal = () => {.. 더보기
DropDown Component Trouble Shooting DropDown hooks 만들기 💡 문제 인식 DropDown hooks 사용시 발생하는 문제 DropDown 사용 중, 화면을 움직이면 DropDown 위치가 변경된다. DropDown 사용 중, 화면을 확대 축소하게 되면 DropDown 위치가 변경된다. scroll에 따른 DropDown 위치 변경 Modal 창에서 DropDown, 사용 시, DropDown이 보이지 않는다. DropDown이 브라우저 범위를 벗어나게 된다면 list가 보이지 않는다. DropDown position값은 어떻게 설정할것인가? 🚫 문제 분석 브라우저의 변경에 따라 DropDown이 왜 변경되는지 확인 DropDown은 position을 absolute 로 사용중이기 때문에 브라우저가 변경될 때 마다 position.. 더보기
참조형 데이터 const 시 사용시 알아보기 const 란? const 선언은 블록 범위의 상수를 선언한다. 상수의 값은 재할당 할 수 없으며 다시 선언할 수도 없다. 즉, const로 선언된 배열이나 객체의 경우, 해당 변수를 다른 값으로 재할당하는 것이 불가능하다. 또 다른 말로는, const로 선언된 변수에 다른 값을 할달하려고 하면 에러가 발생한다는 것이다. 하지만 배열이나 객체의 요소나 속성에 대한 수정은 가능하다. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유 const는 변수 자체를 불변으로 만드는 것이 아니라 변수가 참조하는 값의 변경을 막는 것이기 때문이다. 배열이나 객체는 참조 타입이고, const로 선언된 변수나 참조하는 메모리 공간 자체는 변경되지 않는다. 따라서 변수나 참조하는 배열이나 객체의 요소.. 더보기
require vs import 문법 비교하기 자바스크립트에서는 모듈을 불러오는 문법이 두가지 가 있다. 1. (require / exports ) 2. (import / export) 이 둘은 비슷하면서도 달라 가끔 자바스크립트를 사용하면서 혼동을 준다. (require / exports) NodeJS에서 사용되고 있는 CommonJS 키워드이고 Ruby 언어 스타일과 비슷하다라고 볼 수 있다. /* CommonJS */ const name = require('./module.js'); (import / export ) 는 ES6(ES2015)에서 새롭게 도입된 키워드로서 Java나 Python 언어 방식과 비슷하다. /* ES6 */ import name from './module.js' require와 import 의 주요 차이점 1. reqi.. 더보기
Position 속성 알아보기 MDN position css에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께합니다. static : 요소의 일반적인 문서 흘므에 따라 배치합니다. top, right ,bottom, left, z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다. See the Pen Untitled by ChanwooPark (@chanw9503) on CodePen. relative 요소의 일반적인 문서 흐름에 따라 배치하고, 자기 자신 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에.. 더보기
프레임워크와 라이브러리 프레임워크와 라이브러리 기준!!! 누가 누구를 컨트롤 하는가??? 내가 코드를 컨트를 하는건가? 모든 결정을 다 내리고 있는가? 아니면, 누군가 정해놓은 규칙에 따르고 있는가? 이것이 기준이다. 내가 코드를 컨트롤 하고 있다 === 라이브러리 라이브러리 정의는 개발에 필요한 것들을 미리 구현해 놓은 도구이다. 재사용이 가능한 기능을 미리 구현해놓고 필요한 곳에서 호출하여 사용 가능하도록 만들어진 집합이다. 프레임워크와의 차이는 내가 필요할 때마다 부를 수 있고, 필요없어 졌을 때, 삭제에도 전체 코드에는 문제 없는것이 라이브러리이다. 누군가의 규칙에 따라 코딩하고 있다 === 프레임워크 프레임워크의 정의는 애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 컨넥션 등의 기능들을 위해 뼈대(구조)를 제공.. 더보기

티스토리툴바