웹개발을 하던 중 우연히 알게 된 overflow (때는 바야흐로 웹을 구현하던중 공백 또는 여백이 발생해 구글링을 하며 알게 되었다..)    그때는 대충 공백을 없애주는 속성으로만 알고 있었는데 CSS를 입힐수록많은 overflow를 접하게 되어 정리해보려고 한다!   1. Overflow란 무엇인가?overflow는 요소의 크기보다 내부 콘텐츠가 더 많을 때 어떻게 처리할지를 결정하는 CSS 속성이다. 콘텐츠가 박스 밖으로 넘치는 경우 이를 어떻게 표시할지 설정할 수 있다. 주로 레이아웃을 짤 때,텍스트나 이미지 같은 요소들이 부모 요소를 벗어나는 상황을 제어하는 데 사용된다.     2. Overflow의 기본 값들overflow 속성에는 몇 가지 중요한 값들이 있다. 각각 어떻게 동작하는지 살펴..

리액트를 사용해보면서, 공부하면서 궁금한 했던 부분이 props,state,가상돔코드,map함수 적용하기 등등이 있었다. 그중에 오늘은 공부하면서 알게된 state에대해 정리해보려고한다. State 란? UI에 변경되는것이 반영되고, 컴포넌트 함수가 다시 실행되어 UI가 다시 그려져도(리렌더링) 데이터가 유지되는값 이라고 한다. const [상태, 상태설정하는 함수] = useState(초기값) state는 이런식으로 사용한다. -상태를 설정하는 함수를 보통 "set+상태명"으로 변수명을 작성한다. -상태 업데이트 함수를 호출하면 컴포넌트는 해당 상태의 변경을 감지하고 리렌더링 한다. 여기서 use- 는 react에서 hook 훅함수 또는 훅이라고 불리고, function 키워드나 화살표 함수로서 선언된..

오늘은 실습교육시간에 배운 CRA에 대해 정리하고 프로젝트 초기 세팅을 해보려고 한다! CRA란? Create React App : Set up a modern web app by running one command. [출처 : React 공식 문서] CRA란 리액트 프로젝트를 시작할 때 기본 개발 환경설정을 간편하게 해 줄 수 있는 방법이다. CRA를 사용하면 바벨, 웹팩 등 복잡한 설정들을 세팅해 주고 필요한 기본 패키지등을 설치해주기 때문에 매우 간편하게 리액트를 사용할 게 있게 해 준다! 일단 프로젝트를 생성할 폴더를 설정하고 터미널을 열어 npx create-react-app "프로젝트명" 을 입력하면 설치가 완료된다.( 중간에 y를 눌러주면 계속 진행된다.) 근데 나는 설치도중 오류가 발생해서..

어찌어찌 1차 프로젝트가 끝이 났다.... 후회도 많이 남고, 아쉬움도 많이 남는 거 같다. 개인적으로 가장 큰 아쉬움은 아무래도 계획한 기능을 구현하지 못한 것이 아닐까 싶다. 처음 계획한 기능 중 로그인 성공 시 일반유저의 헤더 변경, admin계정의 헤더 변경 기능을 끝내 구현하지 못하고 프로젝트 제출을 하고 말았다.... 이 과정에서 나는 내가 쏟은 시간과 기능구현율은 반드시 비례하지 않는다는 것을 알게 되었다. 너무 아쉬웠고, 제출하는 순간에도 팀원들에게 미안한 마음이 많았다. 나의 프로젝트 과정을 돌이켜보니, 나의 실수를 알 것 같았다. 처음 계획한 핵심기능구현을 첫째 목표로 설정하고, 이행할 것! css 또는 자잘한 기능구현은 나중일 인 것 같다. 결국 앞 글에서 기술한 2023.11.08 ..

내가 담당했던 로그인창과 회원가입창을 어느정도 구현을 완료하니, 눈에 보이지않던 이상한 코드들이 눈에 띄기시작했다. 그리하여 오늘은 코드를 리팩토링을 진행하려고 한다 기능은 잘되서 얼렁뚱땅 넘어갔지만 인터넷검색중 html안에 script문으로 기능을 구현하게되면 내 로컬에서는 잘되다가도, 안될수도 있고, 무거워지는 문제도 생기며 여러가지문제가 생긴다고 배웠다. (추가: HTML 코드가 js에 의존적인 웹사이트라면 사용자가 의미없는 화면을 볼 수 있다. 즉, 의미있는 화면을 보기까지에는 똑같이 오랜 시간이 걸릴 수 있다) 그래서 script문 자체를 javascript로 옮겨버리기로 결정했다! import "../../index.css" function validateForm(e) { e.preventDe..

어제 회원가입창의 동적요소를 구현완료하고 오늘은 이미 만들어놓은 로그인창의 동적요소를 구현하였다. 일단 내가 생각한 기능은 회원가입창과 마찬가지로 형식제한이나 글자수 제한을 넣고 싶었다. 그리고 로그인에 성공하면 메인화면으로 이동하는 기능까지 계획했다. 일단 회원가입창에 구현했던 이 코드를 불러와서 var password = document.getElementById("password").value; if (password.length < 8) { alert("비밀번호는 최소 8자 이상이어야 합니다."); return false; } 여기서 alert문을 빼고 const loginId = document.getElementById('loginId'); const loginPw = document.getE..