전체 오늘 어제
본문 바로가기
안녕하세요 :) FE 개발자 윤지홍입니다.
저는 리액트를 주로 사용해요.
UX/UI디자인에도 관심이 있어요.
Javascript React NextJs NodeJs Flutter HTML CSS PHP
👋
전체 글 (21)
신규 아이디 추천 알고리즘 문제 다음은 카카오 아이디의 규칙에 맞지 않을 경우 새로운 아이디를 추천해 주어야한다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. "네오"는 다음과 같이 7단계의 순차적인 처리 과정을 통해 신규 유저가 입력한 아이디가 카카오 아이디 규칙에 맞는 지 검사하고 규칙에 맞지 않은 경우 규칙에 맞는 새로운 아이디를 추천해 주려고 합니다. 1단계 new_id의 모든 대문자를 대응되는 소문자로 치환합니다. 2단계 new_id에서 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자를 제거합니다. 3..
2022년 08월 16일
React useRef 사용하기 useRef란? useRef란 원하는 특정 DOM을 직접 선택해서 컨트롤 할 수 있게 해주는 Hook이다. 예를 들면 엘리먼트의 크기를 가져오거나 스타일 변경, 포커스 등의 작업을 해야할 때 useRef를 사용하면 된다. 사용법 기본적인 사용법은 useRef로 객체를 생성하고 원하는 DOM에 ref객체를 넣어주면 ref.current가 해당 DOM을 가르키게되고 current를 사용해 DOM을 직접 조작 하면된다. import { useRef } from 'react'; const App = () => { const ref = useRef(); return ; }; 예제위에서 만든 컴포넌트를 사용해서 button 클릭 시 input 값이 초기화 되게 만들어보자. import { useRef } from ..
2022년 08월 16일
React 메모이제이션 사용하기 메모이제이션 메모제이션이란 계산된 값을 자료구조에 저장하고 이후 같은 계산을 반복하지 않고 저장된 값을 꺼내 쓰는 것을 말한다. React.memo React.memo는 의존하는 값들이 변경되었을 때만 렌더링이 일어난다.(React.memo는 훅이 아닌 HOC다.) 사용법 퍼포먼스 최적화를 원하는 컴포넌트를 React.memo로 감싸주기만 하면 된다. React.memo(Component); 아래 컴포넌트를 예시로 보면 props인 label과 onClick이 바뀌었을 때만 렌더링이 일어난다. import { memo } from 'react'; const Button = ({ label, onClick }) => { return {label}; }; export default memo(Button); ..
2022년 08월 16일
useEffect 사용법 SideEffect 란? 우선 리액트에서 컴포넌트가 렌더링된 이후에 처리 되어야 하는 것 들을 SideEffect라고 한다. 대표적으로 API 호출 같은 것들을 SideEffect라고 하는데 API를 호출하고 응답이 돌아올 때 까지 사용자는 아무런 화면도 볼 수 없다. 리액트에선 렌더링 할 수 있는 요소는 먼저 렌더링하고 그 외에 작업들은 비동기로 처리하는 것을 권장한다. useEffect란? 리액트에 함수형 컴포넌트에서 SideEffect를 사용할 수 있게 해주는 기능으로 우리가 useEffect에 넘긴 내용들이 컴포넌트가 렌더링된 이후에 처리될 수 있게 해준다. 그리고 리액트에선 useEffect가 실행되는 시점에 이미 DOM이 업데이트 됐음을 보장한다. 정리(Clean Up)가 없는 Effect 네..
2022년 08월 16일
React에서 불변성을 지켜야하는 이유 불변성이란? 불변성이란 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만드는 것을 말한다. JS에서의 불변성 우선 아래 코드로 자바스크립트에서 불변성에대해 알아보자. const userA = { name: '호롤롤', phone: '000-0000-0000', address: '대한민국 어딘가', }; const userB = userA; userA.name = 'ㅋㅋㅋㅋ'; console.log(userA.name); // result: 'ㅋㅋㅋㅋ' console.log(userB.name); // result: 'ㅋㅋㅋㅋ' userA.name을 변경 했는데 userB.name도 같이 바뀌었다. (불변성이 잘 지켜지지 않았다 - userA의 메모리 주소와 userB가 가르키는 메모리 주소 값이 같기때..
2022년 08월 15일
useState 사용법 사용법 기본적으로 아래와 같이 사용하면되고 사용 시엔 불변성을 꼭 지켜줘야한다. const [state, setState] = useState({ title: '호롤롤로롤', content: '공백', }); 상태 값 변경은 setState를 사용하면 된다. setState({ ...state, content: 'ㅋㅋㅋㅋㅋㅋㅋ', }); setState를 사용하지 않고 직접 값을 변경하게 되면 리액트가 render 함수를 호출하지 않아 상태가 변경되어도 렌더링 되지 않는다. 또한 리액트는 setState를 실행했을때 이전 값과 비교 후 리렌더링 여부를 판단하기 때문에 직접적으로 값을 변경해선 안된다. 참고 setState는 비동기적으로 동작한다. const [counter, setCounter] = us..
2022년 08월 13일
brew 설치중 xcode-select 설치 안됨 문제상황 "현재 소프트웨어 업데이트 서버에서 사용할 수 없기 때문에 해당 소프트웨어를 설치할 수 없습니다." 맥 초기화 후 brew를 설치하려고 하니 xcode-select 설치 과정에서 위와 같은 안내 문구가 떴다.. 당연히 brew 설치도 에러로 중단되었다.. 해결방법 하필 소프트웨어가 Ventura beta 버전이어서 베타버전 사용하는게 문젠가 해서 버전을 내려야 하나 싶었는데 다행히 그냥 command line tools를 아래 링크에서 최신버전으로 다운받아서 해결했다.. https://developer.apple.com/download/all/
2022년 08월 11일
HOOK 이란? 훅 HOOK 이란? Hook은 React 16.8부터 추가되었고 기존 클래스형 컴포넌트에서만 사용가능하던 상태관리, 라이프사이클 메소드 등을 사용할 수 있게 해주는 기능이다. 16.8이전 버전에서는 함수형 컴포넌트 내에서 상태관리가 불가능했다. 라이프사이클 메소드 - componentDidMount, componentWillUnmount, componentDidUpdate Hook의 장점 - 코드가 간결해진다 - 가독성이 좋아진다 - HOC 헬을 벗어 날 수 있다. HOOK 사용 규칙 훅 사용시엔 리액트에서 규정한 규칙을 지켜야 코드가 정상적으로 실행되고 코드가 꼬이지 않는다. 사용 규칙은 아래와 같다. - 컴포넌트 최상위에서만 호출해야 한다. - React 함수 내에서만 호출해야 한다. - Custom..
2022년 08월 10일
React 시작하기 설치하기 원하는 프로젝트명을 입력해주면된다. $ npx create-react-app 프로젝트명 Typescript로 시작하기 $ npx create-react-app 프로젝트명 --template typescript or $ npx create-react-app 프로젝트명 app --scripts-version=react-scripts-ts 실행 포트 변경하기 기본적으로 3000번 포트를 사용해서 구동되는데 package.json에 실행 명령어를 아래와 같이 수정해 원하는 포트를 입력하면 된다. "scripts": { "start": "npm start -p 3001" } 그리고 .evn파일로도 변경할 수도 있는데 그냥 .env 파일을 만들어 아래 내용을 추가하면된다. PORT=3001
2022년 08월 03일

티스토리툴바