Web9 [HTML] <a href > 새 탭에서 링크 열기 태그안에 target='_blank' 속성을 추가해주면 링크를 클릭했을때 새탭에서 열 수 있습니다. See the Pen Untitled by Su Yong Park (@parkkingcar) on CodePen. 2023. 4. 12. React에서 input value 값 수정 안될 때 리액트에서 input에 text로 값을 입력받을 때 value값은 기본으로 들어가는 값이 되고, onChange를 통해 이벤트값을 호출합니다. value값에 sessionStorage에 저장된 titleModify의 값을 할당하였습니다. 이때 값은 입력창에 들어오지만 수정이 안되는 상황입니다. 기본 HTML 문법에서는 value값이 잘 수정되지만 위와 같이 리액트에서 동작을 안하는 경우가 있습니다. 해결방안 Value를 defaultValue로 바꿔주면 우리가 알고 있던 것처럼 수정 가능한 value 값을 지정해줄 수 있습니다. 참고자료 [React] input요소에 value와 defaultValue의 차이점 https://reactjs-kr.firebaseapp.com/docs/uncontrolled.. 2023. 1. 30. [TS] 타입스크립트 기초 - 1 (개인소장) 기본 타입형 number, string, boolean arrays, objects +함수타입, 파라메터 타입 1) 기본 let age: number = 24; let name: string; let check boolean = true; 타입 대문자 쓰지마라 2) 문자열배열? let name: string[]; name = ['a', 'b']; 이렇게 배열안에 문자열만 드감 3)객체형태 정의 let person; person = { name: 'max', age: 32 } 디폴트는 any로 저장(대체로 안씀) 따라서 let person{ name: string, age: number }; person = { name: 'max', age: 32 } 위 2,3 합쳐서 let person{ name: st.. 2023. 1. 12. JSON.stringify()와 JSON.parse() JSON이란? JSON은 JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용됩니다. { name: "PSY", age: 25, job: null } 중괄호 안에 위와 같은 형태로 표현할 수 있습니다. 이름이 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만, 현재는 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포멧입니다. 특히, 네트워크상에서 데이터를 주고 받을때 많이 사용됩니다. JSON 뿐 아니라 통신 객체에는 XML, YAML 등이 있지만, 가독성이 뛰어난 JSON이 현재는 주로 사용되고 있습니다. JSON.stringify() JavaScript 객체를 JSON 문자열로 변환할 때는 JSON 객체의 string.. 2022. 10. 6. 두 번 렌더링되는 리액트 템플릿 리액트를 사용하여 프로젝트 진행 중 이슈를 발견했습니다. 리액트 템플릿을 가져와서 프로젝트를 구현하는 중, useEffect를 사용하여 페이지 렌더링 시 함수를 호출하는데 자꾸 오류가 발생하여 console.log(1)를 사용해보니 1이 두번 출력되는것을 확인하였습니다. 원인 개발모드에서 (개발 단계시 오류를 잘 잡기위해) 프로젝트의 src/index.js에서 태그로 을 감싸 두 번씩 렌더링한다고 합니다. src/index.js의 코드를 확인해보니 태그로 감싸져 있었습니다. import React from 'react'; import App from './App'; import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(docu.. 2022. 9. 20. 카카오 소셜 로그인 보호되어 있는 글 입니다. 2022. 9. 18. [html/css] 클릭 전/후/마우스오버, 하이퍼링크(a href) 글자 색 바꾸기, 밑줄 없애기 HTML에서 하이퍼링크는 유저가 링크 클릭으로 방문 전과 후의 색이 다르게 나타나고 밑줄이 생기기도 합니다. 이 하이버링크의 색깔을 바꾸는 방법과 밑줄을 없애는 방법에 대해서 정리하겠습니다. 하이퍼 링크 밑줄 없애기 먼저, 밑줄 없애기 입니다. HTML에서 링크를 생성하면 기본적으로 아래에 밑줄이 표시됩니다. See the Pen tistory_css1 by Su Yong Park (@parkkingcar) on CodePen. (css를 적용하지 않은 하이퍼링크) 이제 밑줄을 없애기 위해서 'text-decoration-line' 속성을 none으로 입력해주면 됩니다. text-decoration-line 속성은 다음의 4가지 값을 가질 수 있습니다. - none : 선 없음 - underline : .. 2022. 9. 15. [Javascript] ES6 문법 Javascript의 표준을 나타내는 ES의 버전6에 대해 알아보겠습니다. ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어입니다. 뒤에 숫자는 버전을 뜻하고 ES5는 2009년, ES6는 2015년에 출시되었습니다. ES6를 기점으로 매년 문법 변경 사항을 발표하고, 새로운 문법 상세에 대해서도 활발한 논의가 이루어지고 있다고 합니다. 1. let, const 키워드 - 블록스코프를 가지고 재선언 불가 재할당 가능한 let 변수 선언 키워드와 상수 선언 키원드 const가 추가되었습니다. - 기존 var 키워드만 있었을 때 보다 예측 가능한 코드를 작성 할 수 있게 되었다. if (true) { var x = 'var로 선언한 변수입니다.'; } console.log(x.. 2022. 7. 19. css 다크모드 다크모드란? 다크 모드(dark mode)는 야간에 눈을 편안하게 하고 작업의 집중도를 높을 수 있도록 사용자 인터페이스에서 밝은 화면에 검은 글자 대신 어두운 화면에 흰 글자를 나타내는 테마입니다. 현재 대부분의 OS에서 지원을 하고 있으며 많은 앱과 웹사이트가 운영체제의 모드에 맞추어 어두운 계열의 스타일을 추가하고 있습니다. 웹 페이지를 다크모드로 만들려면 다음과 같은 클래스명을 만들어 js로 적용시켜주면 됩니다. .dark{ background: #212529; color: white; } 미디어쿼리 문법을 사용하면 더욱 편리하게 다크모드를 적용할 수 있습니다. @media (prefers-color-scheme : dark) { .nav{ background: #212529; color: whi.. 2022. 7. 8. 이전 1 다음
