Yejin's Growing

리액트로 혼자 프로젝트를 진행하던 도중 여러 텍스트나 이미지를 등록하는 기능을 만들기 위해 폼을 만들어야 했습니다. 그중 이미지를 등록하는 부분에서 고민이 생겼어요. 아래는 JSX의 일부를 가져온 것인데, 이를 로컬에서 실행해보니, 이미지는 하나만 등록 가능해요. 등록된 이미지는 자동으로 대표사진으로 등록됩니다. :) 위와 같이 파일 선택 버튼이 매우 안예쁘게(...) 출력이 됐습니다. 문제는 이를 바꿀 방법이 딱히 없다는 것이었죠. 업로드 버튼 스타일도 바꾸고 이왕이면 "선택된 파일 없음"이라는 텍스트도 없애버리고 싶었어요. 😂 문제 해결: 을 사용하자!✨ 폼에서 input 태그에 빠짐없이 사용하던 을 사용해보기로 했습니다. 태그를 꾸미고 태그를 숨기는거죠! 이미지는 하나만 등록 가능해요. 파일 업로드..

오류 발생 리액트로 프로젝트를 개발하던 도중 JSX label을 사용했는데 다음과 같은 오류가 떴습니다. Warning: Invalid DOM property `for`. Did you mean `htmlFor`? 프로그램이 멈출 정도의 오류는 아니었지만 무려 콘솔창에 띄워줄 정도의 에러이니 해결해야 했어요. 물론 친절하게도 해결방법까지 추천을 해주고 있지만, 왜 오류가 떴는지 알고 싶었습니다. 오류 이유 for은 Javascript의 keyword이기 때문에 JSX에서 이를 사용할 수 없습니다. 그렇기 때문에 label에서도 for대신 htmlFor를 사용하기로 결정한 것입니다. 해결방법 label 태그에서 for 대신 htmlFor로 변경하면 됩니다. 참고 https://stackoverflow.co..

리액트 프로젝트를 진행하다보면 텍스트 태그를 사용할 일이 많은데요, 리액트에서 사용하는 JSX에서는 개행 문자 ('\n')이 적용되지 않습니다. 예를 들어 아래와 같이 작성해도 import React from 'react'; export default function Test() { return JSX에서 줄바꿈은 적용되지 않습니다. \n바로 이렇게요. } 개행문자가 그대로 텍스트로 출력된 것을 확인할 수 있습니다. 이를 해결하기 위해서 해결방법을 찾아보았는데, CSS에서 해당 태그에 white-space를 pre-line으로 설정해주면 된다고 합니다. 그러나 아무리 p 태그에 white-space: pre-line으로 설정해도 줄바꿈이 적용되지 않았는데요, 해결방법은 정말 간단했습니다. import R..

안녕하세요! 최근 가장 기초라고 볼 수 있는 바닐라 자바스크립트에 대해 학습하고 있었는데요, 어느정도 DOM 요소를 가지고 놀 수 있게 되다보니 객체지향에 대해서도 큰 관심이 생겨 타입스크립트와 객체지향에 대한 강의를 수강했습니다. 👀 연습용 프로젝트도 하고 나니 생각보다 큰 장벽은 없다는 생각이 들었어요. 항상 타입스크립트가 중요하다, 한번 쓰면 헤어나오질 못하는 매력이 있다는 것을 말로만 들어 체감이 되지 않았어요. 그러나 실제로 사용해보니 협업 시에 매우 중요한 스킬이 될 것 같다는 느낌이 들었습니다. 굉장히 많은 타입과 객체지향 개념을 적용하는데 편리했고, 무엇보다 원하는 타입을 만들어 사용할 수 있다는 점이 가장 마음에 들었습니다. 타입스크립트를 사용하니 개발자를 풀어두는 듯한 자바스크립트보다 ..

보호되어 있는 글입니다.

자바스크립트에서 style를 바꾸고 싶을 때 바로. style로 변경해도 되지만, 코드도 길어지고 무엇보다 JS파일에서 CSS를 쓰고 있다는 게 마음에 걸린다. 이럴 때는 미리 css 파일에 변경해둘 스타일을 지정된 이름으로 선언해두고 자바스크립트에서 class를 변경만 해주면 된다! 1. className className은 HTML에서 불러온 Element의 class 이름을 css에서 지정한 선택자 이름으로 변경한다. Element를 가져오는 것은 document.getElementsByClassName이나 querySelector로 가져온다. // Javascript function changeStyle() { 가져온Element.className = "변경할 이름"; } // CSS .변경할 이..