yeeed_log

리액트에서 조건문 사용하는 방법 알아보기. 개발을 하다 보면 조건문을 사용하는 경우가 아주 많은데 나의 경우 JSX에서 if문, switch문으로 조건문을 사용하려 하니 오류가 났다. JSX에서 조건문 사용하기 상황 발생 - map메서드를 사용해서 li 컴포넌트를 렌더링 해주고 있었는데 button 안에 name이라는 props를 받는 아이콘을 상황에 맞춰 렌더링 해주고 싶었다. Object.values(Categories).map((item, idx) => { return ( ) } 첫 번째 시도: if문 사용하기 {Object.values(Categories).map((item, idx) => { return ( if(true) aaa ) } 우선 if문이 잘 나오는지 확인하기 위해 true 값을 주..

이전에 만들었던 리액트 프로젝트 파일을 재사용하려고 봤더니 콘솔에 이런 오류가 떴다. 리액트 18에서는 더 이상 ReactDOM.render을 사용하지 않으니 createRoot를 사용하라는 말 공식문서에도 아주 잘 나와있다. 공식문서 예제를 살펴보면 // Before import { render } from 'react-dom'; const container = document.getElementById('app'); render(, container); // After import { createRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = createRoot(container)..

회원가입 폼을 react-hook-form을 이용하여 개발하던 도중 만난 에러 일전에 validation을 직접 useState로 상태 관리를 하며 개발한 적이 있었는데 코드도 너무 길어지고 복잡해 보여서 간편한게 없나 찾다 리액트 훅 폼을 발견하고 적용해봤지만 적용이 되지 않았다... 정확히는 register를 사용하려했는데 register로 전달된 data값이 콘솔에 찍히지 않았다 ㅜ const Input = ({ id, type, ...props }: InputProps) => { return ; }; 내가 작성했던 Input 컴포넌트. 알고보니 register에는 onChange, onBlur, ref, name 을 props로 전달하고 있었는데 일반적인 사용법처럼 props로 register을 ..

타입스크립트를 갓 배우고있는 요즘. tsconfig.json 설정을 하면서 잊지않기 위해 or 다시보기위해 정리하는 글 compilerOtions 컴파일 속성을 설정 target - 어떤 버전의 자바스크립트로 컴파일할건지 지정 lib - 어떤 환경에서 동작할건지 지정 allowJs - js 파일을 허용할지 결정 - 타입스크립트는 .js 파일을 허용하지 않는데 이걸 예외처리해줌 module - 모듈 내보내기, 불러오기 코드가 어떤 방식의 코드로 컴파일 될지 결정 moduleResolution - 모듈 해석 전략지정 - Node.js 방식으로 해석하려면 node를, 1.6버전 이전의 타입스크립트에서 사용했던 방식으로 해석하려면 classic을 입력 baseUrl - import형식의 모듈을 가져올때 경로 지..

vscode로 웹을 개발하면서 무조건적으로 로컬을 열어 확인하게 된다. 이를테면 Live Server, npm을 사용한다면 npm start 같은 명령어를 사용해서 로컬 환경을 열게 된다. 하지만... 반응형을 고려한 웹사이트를 제작 중일 때, 혹은 모바일 환경에서 어떻게 보이는지 궁금할 때! 그럴 때 모바일로 로컬을 여는 방법에 대해서 작성해보려고 한다. pc에서도 확인할 수 있지만 실제 모바일 환경에서 보는 것과 조금 차이가 있기 때문에 웹 개발을 할 때 실제 모바일 환경에서 어떻게 표시되는지 확인 작업은 필수라고 볼 수 있다. 그럼 어떻게 모바일로 보는데? 1. PC와 모바일이 같은 와이파이를 잡는다. 이때 와이파이든 핫스팟이든 동일한 와이파이, 핫스팟을 잡아한다. 2. PC에서 와이파이 설정창을 ..

사건의 발단 styeld-components를 사용해서 스타일을 진행하던 중 갑자기 알 수 없는 경고 문구를 마주했다. 엥? 왜 갑자기... 이런 문구가 뜨는 거지?! 싶었지만 스타일드 컴포넌트를 함수 내에 작성하지 말라는 것 같다... 예를 들면 아래와 같이 작성해야 하는데, import styled from 'styled-components' const StyledSpan = styled.span` color: blue; ` const MyExampleComponent = () =>{ return Test } 바보처럼 함수 내에 작성하고 있던 것~~^^ import styled from 'styled-components' const MyExampleComponent = () =>{ const Styl..

import 경로가 신경 쓰이는 1인 리액트로 프로젝트 작업 중 import 하는 부분이 신경 쓰였다. (나만 신경 쓰이는 걸까?) 뎁스가 깊어지면 깊어질 수록 경로 참조하는 게 길어지니 너무너무너무너무 보기 싫은 것... 하지만 언제나 해결책은 있다. 찾다 보니 jsconfig.json 설정을 통해 import 경로를 설정할 수 있다고 한다! jsconfig.json 가 뭐냐고 jsconfig.json란? > 해당 프로젝트 디렉토리에 jsconfig.json 파일이 있으면 루트 디렉토리임을 명시. > 소스파일을 어떻게 해석하고 처리하는지에 대해서도 설정 가능. 여기서는 경로 설정만 다룰 예정이니 자세한 내용은 링크 참고! jsconfig.json Reference View the reference fo..

Welcome to Front-End world 시간을 거슬러 2월 초로 돌아가 보자. 멋쟁이사자처럼에서 프론트엔드스쿨 2기를 모집한다는 글을 보게 되면서 지원서 작성과, 1차 합격, 2차 사전과제 및 영상 과제를 모두 수행하고 프론트엔드스쿨에 최종합격하며 프론트엔드 과정을 시작하게 된다. 이 선택은 올해 들어 내가 제일 잘한 선택이라고 자부할 수 있다. 함께, 함께, 함께 모든 교육과정을 수료하고 난 뒤 지금의 나는 무엇이 달라졌나? 고작 HTML과 CSS, 자바스크립트의 변수 선언 정도만 할 줄 알던 내가 기어코 팀 프로젝트까지 성황리에 마무리하고 수료까지 했다. 적어도 코딩의 코 정도는 안다고 말할 수 있게 된 것 같다. (아직도 코린이는 여전하지만...) 멋쟁이사자처럼은 함께 성장하는 커뮤니티를 ..