본문 바로가기

전체 글

 (359)
리엑트 이미지 사용법(간단함) https://www.youtube.com/watch?v=8fIc1qCJ5HM
마크다운(Markdown) 마크다운이란? 웹상에서 글을 쓰는 사람들을 위한 글쓰기 도구(서식, 포맷, 양식)이다. 마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업 언어이다. 마크업 언어란, 태그 등을 이용하여 문서나 데이터의 구조 등을 명시하는 언어의 한 가지이다. 텍스트만으로 서식이 있는 문서들을 작성할 때 자주 사용되며, 다른 마크업 언어들에 비해 문법이 쉽고 간단한 것이 특징. HTML 등의 서식 문서들로 쉽게 변환되기 때문에 README 파일이나 온라인 게시물 등에 사용된다. (멀티잇 깃헙 2/17일 동영상 내용중) Markdown사용시 좋은점. 1. 사용하는 프로그램에 따라 특정 언어 명시하면 구문강조(Syntax Highlighting)지원(일반 텍스트와 달리 코드를 이쁘게 출력함) 예시) ```code b..
[Github] Repository 생성 및 내 작업 폴더 연동하기(가장 초기작업) 출처: https://velog.io/@zangsu/Github-Repository%EC%99%80-%EB%82%B4-%EC%9E%91%EC%97%85-%ED%8F%B4%EB%8D%94-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0 ✒️ 서론 오랜만에 Github Repository를 새로 만들었더니 세달만에 다시 연동 방법을 잊어버렸습니다! 항상 연동은 프로젝트 시작때만 웹 서핑 하면서 여차저차 해결 해 두니까 여러번 해도 체화 되지가 않아 이참에 제가 사용하던 방법을 정리 해두고자 글을 적기로 하였습니다. 글을 적는 김에 처음 Github을 사용하시는 분들 참고하실 수 있게 차근차근 글 작성하였으니 따라오시면 됩니다. 📁 Github Repository 생성하기 저의 Github ..
React의 css적용 styled와 Emotion 라이브러리 (@emtion/styled에 관한 자세한 내용은 https://www.inflearn.com/course/lecture?courseSlug=%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%EC%8B%A4%EC%8B%9C%EA%B0%84%EC%B1%84%ED%8C%85&unitId=71103&tab=community 에서 확인할수 있음) ( styled, Emotion라이브러리를 알아보기 전에!!! 물론 리엑트에서도 지금 배우려는 css in js의 방식과는 달리 1. 컴포넌트의 속성을(style) 인라인형식으로 아래와 같이 할수도 있습니다(가장 기본적인 html에 css적용하는 방식). 2. 다음으로는 css모듈을 활용하여 css라이브러리를 import하여 컴포넌트의 속성에 clas..
리엑트 이미지, 폰트 loader문제 해결 리엑트를 사용하여 나만의 프로젝트를 하는중 아래와 같은 에러를 만났다. ERROR in ./src/img/timeTable.jpg 1:4 Module parse failed: Unexpected character '�' (1:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders 요약하면 이미지를 사용하기위해서는 loader가 필요하다는 것이다. 어떻게 문제를 해결해야 할지 gpt에게 물어 보았고 그 결과는 아래와 같았다. 이에 따라 "리엑트 이미지 loader" 라..
리엑트 이미지, 폰트 loader문제 해결 리엑트를 사용하여 나만의 프로젝트를 하는중 아래와 같은 에러를 만났다. ERROR in ./src/img/timeTable.jpg 1:4 Module parse failed: Unexpected character '�' (1:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders 요약하면 이미지를 사용하기위해서는 loader가 필요하다는 것이다. 어떻게 문제를 해결해야 할지 gpt에게 물어 보았고 그 결과는 아래와 같았다. 이에 따라 "리엑트 이미지 loader" 라..
React is not defined 에러 해결 참고: https://velog.io/@sooyun9600/React-is-not-defined-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0 기존의 문서를 리엑트 형식으로 일일히 변환하는 과정에서 React is not defined라는 에러를 만났다. react 변환해주는 과정에서의 문제는 bable-loader에서 문제가 있다는 것을 의미한다는 것을 알게 되었다. 아래의 코드를 다음과 같이 변형하였더니 문제는 해결되었다. //문제의 코드 { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use : { loader: 'babel-loader', options:{ presets: [ "@babel/preset-env",..
HTML, CSS 잡다하지만 꼭 알아야 할 것 여기다 정리 웹에서 개발자 도구 켜놓고 화면에서 ctrl+shift+c 하면 해당 화면에 대응되는 코드 블럭 처리되어 알려줌 title앞에 나오는 아이콘 그림을 파비콘(favicon)이라고함

티스토리툴바