콛 다이어리

6살이었나?스크롤을 내리다가우측 하단에 화살표가 있길래무심코 눌렀는데브라우저 맨 위로 쑤욱 올라가는게너무 신기했다. 스크롤을 쭉 내리고 버튼을 누르는 것만몇 번을 했는지 모른다. 그 때는 '개발자' 라는 직업을 몰랐기에우측 하단에 있는 화살표 버튼을 누르면맨 위로 올라가게 해주는컴퓨터랑 나만의 약속인 줄 알았다. 오늘 티켓링크 개인 프로젝트 하면서그 때 그 기억이 갑자기 생각이 나기도 했고사용자 측면에서도 그 기능이 있으면좋을 것 같기도 해서(스크롤이 있어도 스크롤을 올리는 것 보다버튼을 누르는 게 더 편하다고 생각한다.)만들어 보았다. window.scrollTo 를 사용하면 된다. // 상단으로 올라가게 해주는 함수const GoToTop = () => {  window.scrollTo({ top: ..

KOR ▼ 버튼을 만들었고자식으로 ENG                JPN                CHN 버튼을 만들었다.KORBtn onClick={(e) => ShowLocalMenu(e)}>             KOR ▼            {localMenu && (              KORBtnSubUl isVisible={localMenu}>                KORBtnSubLi>                  ApplyInLinkTag to="https://www.ticketlink.co.kr/global/en">                    ENG                  ApplyInLinkTag>                KORBtnS..

로그인, 아이디 찾기, 비밀번호 찾기, 회원가입비즈니스 로직(form validation)을 만들 때내가 제일 신경쓰는 부분은마지막 텍스트 박스에서 값을 입력하고 나서enter를 쳤을 때, 버튼(로그인에서는 로그인 버튼,아이디 찾기 에서는 아이디 찾기 버튼,비밀번호 찾기 에서는 비밀번호 변경 버튼,회원가입 에서는 회원가입 버튼)이자동으로 클릭 되는 부분이다. 내가 다른 웹 사이트에서 사용하면서편하다고 생각했던 부분이기도 하고그 기능을 만들어준 개발자에게 고맙다고생각이 들기도 했기 때문이다. 그래서 오늘은마지막 텍스트 박스에서 엔터치면다음 인풋으로 focus가 돼는 방법을 배웠고추가로,조건에 부합하지 않을 경우텍스트 박스에 입력 된 값을 모두 지우는로직도 배웠다.  먼저 내가 작성한 코드는 이렇다.// 비..

오늘은 내 할 일은로그인, 아이디 찾기, 비밀번호 찾기, 회원가입ui를 구현하는 것이었다. 내가 클론코딩 하려는 사이트인'티켓링크'에 접속해서 만들 ui들을 보니모두 좌측 화면에 완전히 붙어있었다.. ui들 모두 인풋이 차지하는 부분보다빈 부분이 더 많기 때문에나도 그 사람들처럼 개발하고 싶었다. 그래서 구글에 찾아봤는데검색하는 방법이 잘못되었는지나오지 않았다..ㅠㅠ어떤 검색어로 검색했어야 하는걸까.. 결국 튜터님을 찾아뵀는데window.open함수를 쓰라고 하셨다.  window.open() 함수는웹에서 새 창을 열기 위해가장 쉽게 사용할 수 있는 방법이라고 한다. 문법은window.open(url, target, features);1. url:   1) 열고자하는 웹 페이지의 url   2) 컴포넌트..

내가 div를 가운데 정렬하는 방법은margin: 0 auto;를 주는 방법과부모 div태그를 추가해서 중앙정렬을하는 방법밖에 없었다. 오늘은 첫번째 방법이 되지 않았고,두번째는 구조상 사용할 수가 없었다. 다행히 잘 정리된 게시글이 있어서깔끔하게 배치할 수 있었다. Flexbox: 요소를 상하좌우 정중앙 정렬하는 방법 중, 가장 쉬운 방법 자식 요소를 수직과 수평으로 중앙에 정렬하려면 부모 요소에  justify-content: center와 align-items: center를 적용    출처: https://www.freecodecamp.org/korean/news/cssro-mueosideun-jungang-jeongryeolhaneun-bangbeob-div-tegseuteu-deung/

리액트 라우터 돔도 설치했고,import도 해줬고,내 VSCode에는 에러가 뜨지 않는데 브라우저는 흰 창만 띄운다.. 구글에 검색해보면 다'링크 태그로 연결하세용!','이렇게 연결하세용!'이래서 챗gpt한테 물어봤다.또,t="_blank" 및 rel="noopener noreferrer"외부 링크는 보안과 성능을 위해target="_blank"와 rel="noopener noreferrer"를 포함하는 것이 좋습니다.Link로 외부 URL 연결하기 (비추천)기술적으로는 Link에 to 속성으로 외부 URL을 지정할 수도 있지만,권장되지 않으며 예기치 않은 동작이 발생할 수 있습니다  라고 말 했다. 근데 전에 a태그를 사용했고a태그보다 Link태그를 사용하는 것이좋다고 배워서 사용하고 싶었다. 그래서 ..

스타일 컴포넌트로 만든 컴포넌트에링크 태그를 넣으려고 했다. 리액트 돔 설치도 해줬는데브라우저 화면에 흰 화면만 보여준다. 내 VSCode에서 보이는 에러도 없고개발자 도구를 확인해 봐도내가 잘못한 건 없어보인다. 계속 아무것도 출력이 안 되니까신경질이 나서 튜터님을 찾아갔다. 역시 내가 틀렸다. 개발자 도구 열어보라고 하셔서열어보니까빨간색이 엄청 많다고 하셨다......힉?이유는 내가 Link태그를 사용하면서최상위 컴포넌트 (App.jsx)에를 입력해주지 않아서 그런거였다!

어제 KOR 버튼을 onClick 하면,ENG, JPN, CHN 버튼이 내려오는기능을 만들었는데 뭐가 잘못됐는지 우측에 태그로 만든리스트 까지 같이 출력이 됐다..심지어 PAYCO 텍스트는 더 밑으로 출력이 됐다.. 마음 같아서는 싸그리 지우고 싶었지만그러기에는 이미 입력한 코드가 너무 많았다;;이번 기회에 하나씩 보면서 뭐든 얻어갈까 싶어코드를 좀 검토를 해봤는데 정말 아닌 것 같았다.지금 시간적 여유가 없었다. 튜터님께 날아가서이 컴포넌트에 있는 코드만 싹- 지워서처음부터 다시 해아할 것 같은데입력한 코드를 검토하는게 나을까요,처음부터 갈아버리는 게(?) 나을까요?? 하고여쭈어보았다.. 튜터님이 막 웃으시더니튜터님께서도 전에 그런 적이 몇 번 있으셨다면서그렇게 하는 게 빠를 수도 있고그런 과정에서 얻..

주말에 push를 했는데커밋 메시지가 마음에 들지 않아서push를 취소하는 방법을 찾아보았는데두 가지 방법이 있었다. reset:되돌리고 싶은 시점의 커밋 이력으로 돌아가는 것(시간여행) revert:현재까지 남긴 이력들을 유지한 채 되돌리고 싶은 commit을 원상복귀시키는 것(복구commit이 추가됨) 나는 revert를 선택해서 입력했다. 분명히 깃에 저장되어 있는걸 봤는데코드를 보니까 방금 작성한 내용이 전부사라져 있었다. 다시 깃에 들어가서 복사해서 입력한 뒤,푸시를 하려니까 오류가 뜬다.자꾸 머지를 하라고 한다;;갑자기..?? 내 노트북이 잘못인가 싶어서비주얼스튜디오 코드도 껐다가 켜보고새 파일에서도 열어보고노트북을 잠궜다가 열어보고껐다가 켜봤지만 달라지는게 없었다.계속 오류가 나니까 신경질이..

어제, 폰트어썸에 있는 아이콘을 사용했다. 클릭했을 때 자동으로 맨 위로 올라가는버튼을 만들기 위해서 사용했다. 폰트어썸 이미지를 import할 때 svg라는 알파벳?이 있는데 그냥 알파벳이구나~ 하고 넘겼다. 오늘은 div태그에 border: 3px solid red;를 적용하고그 div태그 사이에 아이콘을 넣었고아이콘 뒤에는 회색 원형 div가 있었다. 그러면 당연히 빨간색 직사각형 안에 아이콘이위치해야 한다고 생각하는데 빨간색 짧은 선 우측에버튼이 위치해 있었다......;; 그 때 튜터님께서"왜지? svg 이미지라 그런가??" 라고 하셨다. 버튼이 저렇게 위치했던 이유는버튼을 div로 감싸주지 않아서 였다.(버튼이 div없이 혼자 있으면top, right, right, bottom이런 값을 아무리..