728x90 반응형 전체 글145 [React+TS] textarea 줄바꿈하는 법, 입력한 값만큼 height 늘어나게 하는 법 문제점 react로 프로젝트를 진행하면서 글쓰기를 구현하고 있었다. textarea를 사용했는데, 원하는 텍스트를 입력했을 때 줄바꿈이 되지 않고 스크롤러가 생기는 문제점이 있었다. 결과 화면 내가 원하는 것은 이런 것이 아니라 작성된 글의 높이만큼 textarea의 height이 늘어나길 바랬다! 바로 이렇게 말이다! 해결 방법 및 코드 설명 해결한 방법은 아래와 같다. const [text, setText] = useState(''); const textarea = useRef(null); const resizeHeight = ( textarea: React.RefObject, e: React.ChangeEvent ) => { if (textarea.current) { textarea.current... 2023. 2. 27. 홀수 번째 또는 짝수 번째에만 지정된 CSS 적용하기 프로그래머스 데브매칭을 구현하다가 정리를 해두면 좋을 거 같아서 정리했다! 그리고 예전에 혼자 진행한 미니 프로젝트에서도 이러한 CSS 적용을 했었는데 노션에 정리를 해놨던지라 티스토리로 이동이동~ 홀수 번째에만 CSS 적용하는 법 :nth-child(odd) { background-color: skyblue; } 짝수 번째에만 CSS 적용하는 법 :nth-child(even) { background-color: skyblue; } 질문이나 잘못된 점은 댓글로 남겨주세요 :)💖 2023. 2. 25. [React+CSS] 구분선 만드는 가장 쉬운 방법 사진처럼 구분선을 만들고 싶을 수 있다. 가장 쉬운 방법은 를 사용하는 것이다! 거두절미하고 코드를 보면 된다. 진짜 별거없다! ㅋㅋㅋ 그래도 은근 사용할 일이 많기 때문에 기록했다. border와 width를 주어 조절해주면 원하는 구분선을 만들 수 있다! 질문이나 잘못된 점은 댓글로 남겨주세요 :)💖 2023. 2. 24. [프로그래머스/2022 상반기 프론트엔드 데브매칭] 프로그래밍 언어 검색 답안코드 + 코드 분석 제공되는 정답지(?)보다 더 깔끔하게 코드를 작성할 수 있을 거 같아서 도움이 되면 좋을 거 같아서 코드 첨부합니다. 저는 class를 사용하여 코드를 작성했습니다. 문제 프로그래머스 > 코딩 테스트 연습 > 과제 테스트 연습 > 프로그래밍 언어 검색 index.html부터 코드 흐름을 읽어나가면 됩니다! 답변 코드 // index.html // index.js import App from './App.js'; new App(document.querySelector('.App')).render(); // src/api/api.js const BASE_URL = 'https://wr4a6p937i.execute-api.ap-northeast-2.amazonaws.com/dev'; // keyword를 qu.. 2023. 2. 23. [제로초 토크] "신입 이력서는 포트폴리오보다 더 중요한 걸 보여줘야 합니다" 후기 저같은 취준생(신입 개발자)을 위한 좋은 영상인거 같아 공유합니다. 제로초님 쨩 요약하자면, 1. 만들면서 했던 노력과 고민을 더 중점으로 적기 2. 포트폴리오는 소스코드이고, 너무 허접하면 오히려 마이너스가 된다. 보통 사람의 노력으로는 택도 없다가 현실 나도 여러개를 만들고 있는데, 하나를 중점적으로 파서 완벽하게 만들어 볼 수 있도록 해야겠다. (2023 상반기 목표!) 질문이나 잘못된 점은 댓글로 남겨주세요 :)💖 2023. 2. 22. [JS] JSON(JavasScript Object Notation)에 대해 알아보자 JSON(JavasScript Object Notation)은 자바스크립트의 객체를 문자열로 표현하는 방법이다. 매우 직관적이고, 사람이 읽고 쓰기에도 편하다는 장점이 있다. JSON 데이터를 사용하는 과정 1. 서버는 브라우저로 데이터를 보낼 때 JSON 형태로 전송한다. 2. 데이터를 수신한 브라우저는 자바스크립트를 통해 파싱하고 문서에 반영한다. 객체를 문자열로 변경하는 법 => JSON.stringify() let pi = 3.14; let str = 'string'; JSON.stringify(pi); // "3.14" JSON.stringify(str); // ""string"" 문자열로 값이 반환되는 것을 확인할 수 있다. 배열을 JSON.stringify() 하면 어떻게 될까? let ar.. 2023. 2. 22. [React] 클릭한 <Button> 색상 변경하기 프로젝트를 진행하면서 버튼을 클릭하면 해당 버튼의 색상을 변경하고 싶었다. useState와 onClick 이벤트를 사용하면 아주 쉽게 원하는 동작을 구현할 수 있다. 나는 참고로 tailwind-css를 사용하고 있다. 작성된 코드를 보는게 이해하기 쉬워 밑에 코드를 참고하는 것이 좋다. import { useState } from 'react'; function Button({ name, className }) { const [clicked, setClicked] = useState(false); const onClick = () => setClicked(!clicked); return ( onClick()} > {name} ); } export default Button; useState를 사용하여.. 2023. 2. 22. [Redux] redux-toolkit state 초기화하는 방법 state를 초기화시키는 액션이 자주 사용되어 정리를 해두려고 한다. reducers의 액션이 () => initialState 할 수 있도록 코드를 작성해주면 된다. import { createSlice } from '@reduxjs/toolkit'; interface IInitialState { array: [category: string, type: string]; } const initialState: IInitialState = { array: ['', ''], }; export const selectSlice = createSlice({ name: 'select', initialState: initialState, reducers: { reset: () => initialState, }, }).. 2023. 2. 21. [React] react-select 사용해서 select 만들기 + select 전부 초기화하는 법 react-select 설치하기 npm i react-select Select 사용하기 import Select from 'react-select'; import { useState } from 'react'; function CustomSelect() { const options = [ { value: 'CS', label: 'CS' }, { value: '프론트', label: '프론트' }, ]; const placeholder = '카테고리 선택'; const [selected, setSelected] = useState(''); const onChangeSelect = (e: any) => { if (e) setSelected(e.value); else setSelected(''); }; ret.. 2023. 2. 21. [JS] 데이터 속성 사용하기 (data-) data-{어쩌구} 속성은 HTML 요소에 추가 정보를 저장할 수 있게 해준다. HTML 문법 어느 엘리먼트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다. 화면에 보이지 않게 글이나 추가 정보를 엘리먼트에 담아둘 수 있다. ... JS에서 접근하는 법 값을 읽기 위한 완전한 HTML 이름에 dataset 속성을 사용하면 된다. dataset 객체를 통해 data 속성을 가져오기 위해서 속성 이름의 data- 뒷 부분을 사용한다. 참고로 대시들은 camelCase로 전환된다. 각 속성은 문자열이고, 읽고 쓸 수 있다. 만약 article.dataset.columns에 5를 할당하면 해당 속성은 "5"로 변경된다. Let article = document.getElementById('electr.. 2023. 2. 20. 이전 1 ··· 9 10 11 12 13 14 15 다음 728x90 반응형
