본문 바로가기
환영합니다. 이 블로그 번째 방문자입니다.

프론트엔드

  (11)
[🐾 일지] 리액트 달력 만들기 프로젝트에서 그림 일기를 달력으로 보여주는 기능이 필요해서 달력을 제작하게 되었다. 라이브러리를 사용해도 되지만 달력의 셀 안에 이미지를 넣어야 하기 때문에 직접 그리기로 했다. 그럼 시작! ↓ 스크롤 달력은 아래에 2022.06.27 - [프로젝트 일지] - [🐾 일지] 리액트 스크롤 달력 만들기 [🐾 일지] 리액트 스크롤 달력 만들기 하이... 블로그 오랜만... 한 4일 동안 인생 첫 면접(심지어 취업도 아니고 교육 면접...)에 멘탈도 털리고 누가 봐도 불합격을 치르고 와서 정신줄 놓고 지내고 있었다..ㅎ 면까몰이지만...아니 제 sennieworld.tistory.com 0️⃣ 뼈대 만들기 1️⃣ header 만들기 (오늘 날짜, 달력 이동 아이콘) header를 div 안에 직접 작성하지 않고..
[🐾일지] Axios Network Error (Failed to load resource: net::ERR_CONNECTION_REFUSED) 프로젝트 서버 연결할 때 무조건 한 번은 눈에 보이는 에러다. 에러 주저리가 너무 길어서 읽을 염두도 안 나는... 그런 에러다. 👇🏻 에러 풀 소개 Access to XMLHttpRequest at 'http://localhost:3000/api/user/login' from origin 'http://localhost:5000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the reque..
[🐾 일지] 리액트 프로젝트 회원가입 서버 연결 (Axios 400번 에러) 원래 fetch()를 썼었으나 axios를 많이 쓴다고 해서 처음으로 사용하게 되었다. axios 공식문서를 보고 처음에 호기롭게 시도했으나 콘솔에 가득한 빨간줄...프로젝트 생명이 위험함 제일 많이 났던 400번 에러에 대해 작성해보려고 한다. 일단, 내가 하는 프로젝트는 회원가입 로직이 조금 복잡하다. 사실 복잡하지 않은데 처음해봐서 복잡하게 느껴졌다. [로직] step 1 회원가입시 보내는 정보 url method data (body) http://localhost:3000/api/user/create post nickName, email, pw, profilePicture, location 회원가입 서버 연결 시 반환된 상태와 메세지에 따른 다음 수행작업 status message next ste..
[Javascript] 객체와 프로퍼티 (1) 출처 : "Javascript: The Definitive Guide, by David Flanagan(O'Reilly). Copyright 2011 David Flanagan, 978-0-596-80552-4" ♦️ 객체란 객체 : 자바스크립트의 기본 데이터 타입으로 이름과 값으로 구성된 프로퍼티들의 정렬되지 않은 집합 자바스크립트에서는 문자열(string), 숫자(number), true/false, null/undefined를 제외한 나머지는 객체이다. 자바스크립트의 객체는 객체가 가진 고유 프로퍼티를 유지하는 것 외에 '프로토타입'이라고 하는 다른 객체의 프로퍼티를 상속받는다. 객체로 가장 많이 하는 작업은 객체 생성, 프로퍼티 추가, 질의, 삭제, 테스트, 열거이다. 자바스크립트에서 맨날 하는 ..
[🐾 일지] 리액트에서 <img> 경로가 안 불러와질 때... 가끔씩 개발을 하다보면 가장 기본적인 단계에서 태그가 안 보이거나 적용이 안 되거나 하는 경우가 있다. 고구마 이만 이천개정도를 물 없이 먹는 답답함에 비례하는... ⚈ ̫ ⚈ 아니 오늘은 갑자기 태그에 src 경로 설정에 파일이 분명 있는데! 안 불러와지는 것이었다..ㅎ 드디어 세상에서 가장 멍청한 사람이 된 것인가 싶었지만 다양한 방법을 시도해봤다. 1. 태그 src 상대경로, 절대경로 다 해보기 2. image 폴더를 바로 하위로 옮겨보기 3. 로 해서 background-image로 넣기 아니 근데 다 안되네... 싶을 때 뜻하지 않게 되버렸다. import Image from 'layouts/About/logo-design.png'; const logo = ; const Header = () =..
[🐾 일지] create-react-app에서 전체 화면 css 주는 법 이제 개발을 슬슬 시작하려고 해서 css로 영역 확인 좀 하려고 했더니;; 내 프로젝트는 전체 페이지를 써야 되는데... 이게... 안 된다? 인터넷을 급하게 찾아보니 1. width:100vw; height:100vh; 2. width:100%; height:100%; 이거 두 개 중에 하나라 vw, vh를 먼저 사용해봤더니 되긴 하는데 이 놈의 스크롤... 부랴부랴 %로 바꿨는데 안 된다..ʕ•̠͡•ʔ ? create-react-app으로 프로젝트를 하게 되면, 생성이 되어 있던 index.html 의 html, body를 먼저 width, height: 100%로 설정을 해 주고 나서 해당되는 컴포넌트의 css를 100%로 하면 될 줄 알았다. 근데 왠 걸... 내 App.js 파일은 아래와 같았다..
[🐾 일지] react-router-dom v6 내가 작년 12월에 팀플 할 때까지만 해도 이게 잘 먹혔다. 역시나 react-router-dom을 설치한 뒤에 저렇게 쓰니깐.. 안되네..? (◕‿◕) 로 embed를 안 해주어서 그런가 하고 공식 문서를 찾아보니 역시나 프로그래밍 세상은 너무나 빨리 변한다. 조금만 관심갖지 않으면 바로 나가리 ʕ •ᴥ•ʔ react-router-dom@v6 에서는 저 방법이 먹히지 않고 다음과 같이 해 주어야 한다. 내가 깨달은 것들 ✅ 꼭 있어야 함 ✅ component -> element 이거 말고 공식문서를 돌아다녀 보니 눈에 띄게 바뀐 것들만 아래에 정리해보도록 하겠다. 공식문서 증후군 있는 당신들을 대신 내가 후훗 ✓ 태그 안에 태그 사용 X -> 를 를 랜더링해서 사용해야 한다. # v5 # v6 }/> ..
DOM & BOM DOM이라는 단어를 처음 들었을 때가 xml 프로그래밍 수업을 들었을 때다. 아마 html을 배우면서 들었을 가능성이 매우 높지만, xml ㅇㅇㅇ교수님이 DOM구조를 매우 강조하셔서 더욱 기억에 남는 것일수도 있다. 간단한 html 파일을 한 번 만들어보자. 안녕 여러분s 사실 DOM구조가 궁금하지는 않아 그래도 똥멍청이가 될 수는 없잖아? 이 파일을 실행시켜 보면 아래와 같이 브라우저에 나타날 것이다. 이게 어떻게 가능할까. 우리는 고작 코드 덩어리 몇 줄을 적었을 뿐인데 어떻게 브라우저는 이것을 내가 쓴 대로 보여주는 것일까. 웹 브라우저(Chrome)는 HTML 코드를 해석해 화면을 통해 보여준다 (이것을 렌더링이라고 부른다). 브라우저는 HTML을 해석할 때, 오른쪽 그림과 같이 요소들을 트리형태..
[리액트 공식문서 파헤치기] 리액트 시작하기 새로운 프로젝트를 시작하게 되었다. 리액트 공식문서도 자세히 다시 볼 겸 포스트를 작성해 본다. 더보기 https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 리액트 앱을 만드는 방법은 super simple이다. 맥북을 열고 F4를 누른 후 Terminal을 열어보자. 터미널 프로젝트를 만들고 싶은 파일 경로에 아래와 같이 입력해주면 된다. npx create-react-app project-name cd project-name npm start 만약, node가 설치되어 있지 않다면 설치를 한 후 실행해야 한다. 나는 no..
Prototype, 프로토타입 👇🏻 참조 수준이 아니라 그대로 갖다가 글로 옮긴 거기 때문에 꼭 영상보기를 강추한돠 더보기 https://www.youtube.com/watch?v=wUgmzvExL_E 설명의 신... Prototype 프로토타입 | 제품이 출시되기 전의 원래의 형태 또는 전형적인 예, 기초, 표준 나는 프로젝트를 할 때 필요에 의해서 종종 UI를 디자인하는 경우가 있다. 디자인할 때, 피그마를 이용하는데 여기에서 Prototype이라는 단어가 굉장히 많이 쓰인다. UI 디자인은 웹 서비스나 어플을 출시하기 전에 사용자가 보게 될 화면을 만드는 것인데 이것을 '프로토타입을 작성한다'라고 한다. 그러면, 프로그래밍 언어에서 Prototype이란 무엇일까. 사실, 프로토타입은 거지같게도 자바스크립트에만 있는 특이한 문법이..
Javascript 공식문서 정리 [개요] 👇🏻 참조문서 https://developer.mozilla.org/ko/docs/web/javascript/a_re-introduction_to_javascript JavaScript 재입문하기 (JS ​튜토리얼) - JavaScript | MDN 어째서 재입문일까요? 왜냐하면, JavaScript는 세계에서 가장 오해받고 있는 프로그래밍 언어로 악명이 높기 때문입니다. 종종 장난감같다고 조롱당하기도했지만, 이 거짓말같은 단순함 아래에 developer.mozilla.org εїз 이 문서에 어떤 방식으로 도달했던 간에, 나는 자바스크립트를 1년 동안 필요에 의해 구글링하며 사용한 사람이다. 애초에 제대로 기초부터 공부하지 않는다면 이 꼴이 날테니 제대로 공부하는게 중요하다는 오지랖을 부리며 기본부터 ..

티스토리툴바