전체 글53 JavaScript, React 텍스트 입력시 줄바꿈 적용 없이 작성되는 이유? 자바스크립트 텍스트 입력시 줄바꿈 적용 없이 작성되는 이유? 자바스크립트 input 또는 textarea로 텍스트를 작성하고 데이터를 보낼떄 줄바꿈 없이 하나의 이어지는 텍스트로 가게된다. 이 현상을 해결하기 위해서 줄바꿈 하는 부분에 특정 문구를 넣어주면 해결될수있다. 텍스트 줄바꿈하는 부분에 특정 문구 추가하는 코드 (텍스트 입력받을떄) // React const onChangeContent = useCallback((e) => { setContent(e.target.value.replace(/(?:\r\n|\r|\n)/g, "\n")); }, []); // javascript const text = document.querySelector('textarea'); const result = text... 2021. 12. 29. 웹에서 아이폰사진 확장자 .HEIC사진 파일 업로드하기 웹에서 아이폰 사진 업로드가 안되는데!!! 토이프로젝트를 만들며 만난 문제가있다. 아이폰에서는 사진 확장자가 .HEIC파일이라 업로드가 되지않는 것이다. 찾아보니 아직 브라우저에서는 .HEIC 파일을 읽지 못하고있어 .HEIC 파일을 업로드 못하게 하던가 업로드전에 사진을 변환해 주는 작업을 해야된는거 알게 되었다. 개인적으로 고민 하면 2가지 해결 방법이 나왔다 1. 업로드 하기전에 .heic파일을 업로드 하지 못하게 막는다 2. 업로드 하기전에 .heic를 브라우저가 읽을수 있는 파일로 바꿔준다 나는 해결 방법을 2번을 선택하였다. 선택한 이유는 지금 만들고있는 프로젝트의 타겟 유저들이 대부분 아이폰 유저이기 떄문에 .HEIC파을을 못올리게 막는다면 UX측면에서 접근성이 현저하게 떨어지게 된다고 생각.. 2021. 12. 25. React 에 typescript 적용 후 webpack에 react-refresh 세팅하는법 webpack에 react-refresh 적용하기 1) 리엑트에 타입스크립트 적용한후 파일을 고칠떄마다 계속 빌드해줘야하는 번거로움이 있어 리엑트 핫 로딩기능을 적용하려한다. npm i -D @babel/core @types/webpack @types/webpack-dev-server ts-node fork-ts-checker-webpack-plugin babel-loader react-refresh webpack-dev-server @pmmmwh/react-refresh-webpack-plugin @types/webpack @types/webpack-dev-server @babel/core : babel-core: 웹팩용 바벨(?)이다. 터미널에서 쓸 때 babel-cli를 썼는데 이걸 웹팩에서 사용하.. 2021. 12. 10. React 에 TypeScript 적용하기 준비 단계 1. React에 TypeScript를 적용하는 이유? 컴포넌트별로 분리되어있는 리액트의 장점이 단접이 된다고 느꼇다. 상위 컴포넌트에서 하위 컴포넌트로 정보를 내려줄떄 정확하게 확인할 방법이 없기 떄문에 처음부터 어떤 값이 들어갈지 정해주는게 좋다고 느껴 타입스크립트를 적용해보자라고 생각하게 되었다. 2. TypeScript적용하는 방법 리액트 타입스크립트 패키지 설치하기 npm i react react-dom typescript 리액트와 타입스크립트를 설치해준다. 이후 tsconfig.json파일을 만들어 프로젝트를 컴파일러 옵션을 지정해준다. tsconfig.json { "compilerOptions": { "strict": true, "lib": ["es2020", "dom"], "target":.. 2021. 12. 10. Typescript Cannot find name 'target' 이벤트 객체 오류 해결 자바스크립트를 하다보면 항상 이벤트를 줄떄가 많다. 이벤트를 사용하면 event 객체를 이용해 조작을 많이하는데 typescript 에서는 이벤트에 타입을 지정해줘야 오류 없이 이용할수 있다. 이벤트에 타입을 지정하는 방법과 내가 사용하면서 헤결한 오류를 확인해보려합니다. 1. 이벤트 객체 document.querySelector(selecter).addEventListener('click', (event) => {}); 위에 코드처럼 이벤트를 주는데 ts에서는 event에 타입을 지정해주면된다. document.querySelector(selecter).addEventListener('click', (event: Event) => {}); 여러가지 이벤트들이있지만 우선 Event로 타입을 지정해주면된다.. 2021. 11. 29. Typescript 에러 Object is possibly 'null' 타입 스크립트를 배우고나서 적용해보면서 나는 문제들을 하나씩 해결하고 기억하기 위해 블로그를 작성해보려한다. 1. querySelector()에러 document.querySelector(selecter).option 을 사용하는 경우가 많이있다. 그럴떄마다 Object is possibly 'null'. 는 경고가 뜨게 된다. 이 경고가 뜨는 이유는 개발자의 입장에서는 DOM이 당연이 있다고 생각하지만 ts는 있는지 없는지 확실하지가 않다. 그렇게 떄문에 개발자가 확실하게 알려줄 필요가 있다. if문으로 null 걸러냄 const DOM = document.querySelector(selecter) if (!DOM) { return; } DOM.option; if문으로 null을 판별해주는 방법입니다.. 2021. 11. 29. 배열 메소드 map 사용시 쉼표가 반복되어 나오는 현상?? map 메소드를 사용할떄 , (쉼표)가 반복되어 나오는 상황이 생겼다, 리엑트만 이용할떄는 항상 쉼표없이 출력이 되었는데 순수 자바스크림만 활용해서 사용하는데 쉼표가 출력되는 현상이 있어 글로 남기고자한다. 의도치 않은 현상 const template = [축구, 농구 ,족구 ,배구] ($('#root') as HTMLUListElement).innerHTML = data .map(v) => { return `${v.name}`; }) 출력되는 화면 쉼표가 생기는 윈인 map 함수가 문자열 형태로 값을 리턴할 때는 (template literals로 결합한 내용도 문자열 형태로 리턴된다고 한다) 기본적으로 쉼표(,) 로 묶어서 리턴이 된다고 한다. 해결 해결 방법은 정말 간단하다 map함수 끝나는 뒷부분.. 2021. 11. 28. sequelize에서 CRUD 사용하기 Sequelize의 CRUD 시퀄라이즈에서 CRUD(Create, Read, Update, Delete) 작업은 sql문을 자바스크립트를 통해 만든다. SQL 쿼리와 비교하면서 시퀄라이즈 쿼리를 알아보자. Create 프론트로 부턴 받은 데이터 저장한는 방법은 create 메서드를 사용하면 된다. /* SQL */ INSERT INTO users (name, age, married) VALUES('honey', 26, 0); /* 시퀄라이즈 */ User.create({ name: 'honey', age: 26, married: false }); 조회시 없으면 생성해주는 메서드 : findOrCreate /* 시퀄라이즈 */ User.findOrCreate({ where: { name : 'honey'}.. 2021. 11. 27. sequelize sequelize란? sequelize란 nodeJS에서 mysql을 사용할 때 raw Query문을 사용하지 않고 더욱 쉽게 다룰 수 있도록 도와주는 라이브러리이다. sequelize는 ORM(Object-Relational Mapping)로 분류가 됩니다. ORM이란 객체와 관계형 데이터베이스의 관계를 매핑 해주는 도구이다. sequelize를 사용하면 raw Query문을 사용하지 않고 자바스크립트를 이용해서 mysql을 사용할 수 있다. sequelize 설치 npm i sequelize // 시퀄라이즈 설치 npm i mysql2 // mysql2 설치 npm i sequelize-cli // sequelize-cli 설치 설치후 sequelize init 시퀄라이즈 기본 세팅이 완료된다. se.. 2021. 11. 26. 이전 1 2 3 4 5 6 다음
