본문 바로가기
반응형

전체 글386

[React] 이미지 업로드 + 미리보기 구현하기 개인 프로젝트 하면서 이미지 업로드 할 일이 생겼는데 이미지 미리보기까지 구현해보고 싶어서요... 이미지 미리보기 구현 시 쌩 html 이랑 리액트랑은 조금 다른 방식으로 가야 합니당 리액트가 훨씬 쉬움 일단 이미지 하나 준비해주세여 짠 풀 코드는 깃헙에 있구여... https://github.com/minji0123/mm/blob/main/src/regPages/RegTest.js 사진업로드 하는 부분의 코드만... import { useState } from 'react'; export default () => { let [mainImg,setMainImg] = useState(""); const setPreviewImg = (event) => { var reader = new FileReader().. 2023. 2. 4.
[개발자 일기] 이직을 꿈꾸던 비전공 개발자의 약 1년치 회고 3월😀 금융권 IT 솔루션 기업에 입사합니다. 기계쪽으로는 공부했던거에 비해 취직이 힘들었는데 it는 굉장히 쉬워서 현타가 옵니다. 이제 코딩으로 먹고살아야 하니까 열심히 해야겠다는 마음가짐을 하며 회사 코드를 분석합니다. 4월😧 금융권 회사 특 : 보수적인 코드와 기술 입사 전 공부했던 컴퓨터 관련 지식들과 실무의 갭이 커서 실망아닌 실망을 합니다. (나도 회사들어가면 도커, 리액트, 쿠버네틱스 이런거 있을 줄 알았는데….) 바로 이직 준비를 시작합니다. 백단은 SpringBoot, MSA 기법을 사용했기 때문에 백엔드 위주의 공부를 합니다. 5월😨 새로운 프로젝트에 투입되게 되면서 1주일에 5번 야근, + 주말출근을 하게 됩니다. 자연스럽게 이직공부에 소홀해지면서 회사일을 하느라 바빠집니다. 회사가 .. 2023. 1. 27.
[코딩애플] 당근마켓을 만들며 배워보는 Firebase 강의 솔직 후기 (8버전임) 100퍼 아닌 이유는 사이트 배포부분 안들어서... https://codingapple.com/course/firebase-project/ 당근마켓을 만들며 배워보는 Firebase - 코딩애플 온라인 강좌 리액트 쉽게 설명하기 장인, 코딩애플입니다. '상태관리를 위해 객체를 부모 컴포넌트의 state로부터 props로 받아와서 리턴해주세요' 같은 변태 개발자용어 쓰면서 리액트 어렵게 설명하는 나 codingapple.com 파이어베이스 듣는 이유: 실무에 도움이 되어서? ㄴㄴ 배워놓으면 경쟁력이 되어서? ㄴㄴ 프론트앤드쪽 프로젝트 발전시키려구 ㅇㅇ 파이어베이스의 쿼리를 공부하고 싶다?? 코딩애플님 강의 들으세요 자세히 잘 알려주시는 편입니다. 리액트로 취직을 하고 싶은데 백앤드랑 db 도 넣어보고 싶다.. 2023. 1. 25.
[React] netlify 를 서버, db 처럼 사용할 때 cors 오류 해결 문제 발생 짠 useEffect(()=>{ axios.get(`https://teal-swan-1836fc.netlify.app/test/1/1.json`) .then((result)=>{ let copy = result.data.question[0]; setTitle(copy); console.log('성공...'); }) .catch(()=>{ console.log('실패...'); }) },[]) 이렇게 axios 를 작성했습니다. 근데 발생한 cors 문제...ㅠㅠㅠ 이런 오류가 발생했을 때 (저는 백엔드에서 일을 했었기 때무네...) 서버단에서 허용하게 바꿔주는 방법으로 cors 를 해결했는데!!! 이번에는 netlify 에게 서버를 제공받아서 머리가 새햐애지더라구요ㅠㅠ 시행착오 이런 오류를 만.. 2023. 1. 1.
[React] React-Router-Dom 버전v6 _BrowserRouter 와 HashRouter 차이 (2) BrowserRouter vs HashRouter 둘 다 리엑트가 URL주소에 따라 구성 요소를 매칭하여 렌더링 하기 위한 방법입니다. BrowserRouter React 는 Single Page Application 입니다. 하지만 BrowserRouter는 페이지를 라우팅할 때 URL을 통해 서버의 폴더를 이동하는것 처럼 보여줍니다. 그래서 Server Side Rendering 처럼 보여지게 됩니다. (당연히... 실제로 해당 URL에 html 파일이 존재하지 않습니다. SPA 이기 때문에...) BrowserRouter 를 사용해서 화면을 렌더링하면 검색엔진에서 봇으로 웹사이트 탐색 시 크롤링이 가능합니다. (SSR 처럼 보이기 때문입니다.) 또한 BrowserRouter 는 JS의 History.. 2022. 12. 28.
[React] React-Router-Dom 버전v6 과 라우터, 라우터 컴포넌트 종류 (1) react-router-dom 일반 html css js 사이트는 html 파일을 여러개 만들면 하나의 페이지가 되죠 다른 페이지를 보여줘야 할 때 만들어놨던 html 파일 중 하나를 보여주면 됩니다. 보통 만들어져있는 html 들을 2022. 12. 21.
[인프런 inflearn] 리액트 + 파이어베이스 9버전 강의 후기, 프로젝트 결과물!(구경해죠...🤗🤩) 강의이름이 많이 길어요 너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어 파이어베이스.... 실무에서 쓰지도 않을거구,,, 정말 포폴용으로만 사용할거여서..... 왠만해서는 혼자 공부하고 싶었지만ㅠㅠㅠㅠㅠ 야근 지옥으로 시간이 너무 모자랐거든요.😶😶 빠른 파이어베이스 학습을 위해서 돈주고 시간을 샀습니다. https://www.inflearn.com/course/%EC%A0%9C%EC%BD%94%EB%B2%A0-%ED%8C%8C%EC%9D%B4%EC%96%B4%EB%B2%A0%EC%9D%B4%EC%8A%A4/dashboard 너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어 - 인 프론트엔드 개발자인데 로그인 기능을 구현하지 .. 2022. 12. 17.
[코딩애플]React 강의 솔직 후기, 프로젝트 결과물!😀 저는 이 강의를 html 강의 -> js 기초강의까지 마친 후 1차 수강했구요 it 회사를 다니고 6개월정도 지난 후에 2차 수강했습니다. 1차 수강때는 코딩에 대한 이해가 많이 부족해서 따라치기에만 급급했어요 강의 중간중간 내주시는 숙제는 건들어볼 생각도 못하고 복습없기 듣기만 했습니당 2차 수강때는 그래도 코딩짬바가 늘어서 중간중간 숙제들도 풀고 작동 원리도 찾아보면서 듣게 되더라구요 학습 내용은 강의 페이지에 다 적혀있습니당!! 코딩애플 강의 특징은! 위에 적혀있는 내용들 외에도 꿀팁들을 많이 알려주신다는 점입니다. 또한 음.... 어려운 문법들을 쉽게쉽게 설명해주시죠??? 코딩애플 들어보신 분들은 99퍼 공감하실듯?? 근데 사실... 코딩애플님 강의의 가장 큰 특징은 정답을 전부 다 알려주지 않는.. 2022. 11. 13.
[JavaScript] 오늘 날짜 + 현재 시간 출력하기_new Date() 코드 /** * 오늘 날짜 + 시간 출력하는 함수 * dateFormat: 날짜 포매팅 기호 (/,-,. 같은거) * timeFormat: 시간 포매팅 기호 (/,-,. 같은거) */ function GetCurDayTime(dateFormat,timeFormat) { return this.TimeString(dateFormat,timeFormat,new Date()); } function TimeString (dateFormat='/',timeFormat=':',date) { let year = date.getFullYear(); let month = date.getMonth() + 1; // 1월=0,12월=11이므로 1 더함 let day = date.getDate(); let hour = date.. 2022. 10. 30.
[JavaScript] 오늘 날짜 출력하기, 원하는 날짜 출력하기_new Date() 코드 /** * 오늘 날짜 출력하는 함수 * format: 포매팅 기호 (/,-,. 같은거) * addMonth: 월 더하기 * addDay: 일 더하기 * addYear: 년 더하기 */ function today(format='',addMonth=0,addDay=0,addYear=0){ let date = new Date(); let year = date.getFullYear(); let month = date.getMonth() let day = date.getDate(); if(addMonth!=0){date.setMonth((date.getMonth()+addMonth))}; if(addDay!=0){date.setDate((date.getDate()+addDay))}; if(year!=0){d.. 2022. 10. 29.
[React] Google fonts icons 사용하기 프로젝트를 진행하다보면 icons 들을 사용할 일이 많은데 font awesome 은 유료버전이 너므 많아서 다시 구글 아이콘으로 회기했습니다🙄 https://fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com google font 나 google icons 들은 html 기준이여서 React 에서 사용하려면 다른 방법을 사용해야 됩니당 1. 페이지마다 import 시켜서 사용하기 .. 2022. 10. 23.
[jQuery, JavaScript]클릭이벤트 정리(addEventListener,querySelector) jQuery Click Click 1. id 값으로 $('#btn_plus').on('click',() => { // 원하는 코드 }) 2. class 값으로 $('.btn_plus').on('click',() => { // 원하는 코드 }) 3. onClick 메소드 사용 let 플러스함수 = () => { // 원하는 코드 } 바닐라 JS Click Click 1. id 값으로 document.getElementById("btn_plus").addEventListener('click', () => { // 원하는 코드 }); 2. class 값으로 let className = document.getElementsByClassName("btn_plus"); // for 문으로 for (leti = 0;.. 2022. 8. 29.
[JavaScript] Class 로 생성자 Constructor 만들기_ 생성자를 상속받아서 생성자 만들 때, extends 편 (2) 생성자가 생성자를 상속받을 수도 있습니다. 엄마토끼 생성자입니다. class 엄마토끼 { constructor(이름){ this.first = '김' this.last = 이름; } } 이제 이 엄마토끼 생성자를 상속받는 아가토끼 생성자를 만들어볼게요 엄마토끼 생성자를 상속받은 아가토끼 생성자입니다. class 아가토끼 extends 엄마토끼 { constructor(이름, a = 0){ super(이름); // super 를 꼭해줘야됨 이거는 엄마토끼의 constructor 임 this.키 = 150+a; } } 자세히 보면 여기 extends 랑 super 라는 키워드가 보입니다. extends 는 말 그대로 상속받을 대상이 엄마토끼입니다~ 라는 뜻이규여 super 는 엄마토끼의 constructor.. 2022. 8. 14.
[JavaScript] Class 로 생성자 Constructor 만들기_ 상속편 (1) 생성자 아시나요? 다른 컴퓨터 언어에도 있는 생성자요 자바스크립트로도 생성자를 만들 수 있답니당 자바스크립트의 생성자로는 Object 를 찍어낼 수 있어요ㅎㅎ ES6 Class vs 구버전 생성자 // ES6 버전 생성자 class 생성자 { constructor(){ //여기다 이제 this. 어쩌구 쓰면 됨 } } // 구버전 생성자 function 생성자(){ //여기다 이제 this. 어쩌구 쓰면 됨 } 구버전 function(){}으로 생성자를 구현하는거와 조금 다르게 생겼지만 this 키워드를 쓰는거랑 파라미터를 사용하는 거는 완전 똑같습니당 ES6 Class 생성자 class 엄마토끼 { constructor(이름,키=0,무게=0){ this.first = '김'; this.name = 이름.. 2022. 8. 13.
[JavaScript] 파라미터에 = 넣기 _ default parameter 로 NaN 오류 해결ㄱ 제가 얼마전에 냈던 실수중에 하나인데여 db 에 있는 날짜 개수만큼 행 개수를 늘려주는 함수를 만들어놨는데 안늘어나는겁니다. 왜그런지 로그 찍어봤더니 NAN 이라고 뜨더라구여 그래서 왜 NAN 이라고 뜨는지를 봤더니 글쎄 제가 파라미터에다가 값을 안넣고 있었지 뭐에여 (시뻘겋게 오류메세지라도 뜨던가...js 왕시러 😥) NaN function 함수1 (a){ console.log(a+1); } 함수1(); 이거 오류 날까여 안날까여 안나여 근데 NaN 이라고 나왔어요 NaN 은 Not a Number 라는 오류인데여 숫자형식이 다른형식이랑 연산되었을 때 나오는 오류입니당 짠 function 함수1 (a){ console.log( (a === undefined ? 0 : a)+1 ); } 함수1(); 파라.. 2022. 8. 12.
반응형

티스토리툴바