티스토리

주발이의 개발새발

검색하기

블로그 홈

주발이의 개발새발

0lrlokr.tistory.com/m

조개껍데기는 녹슬지 않는다

구독자: 6

방명록 방문하기

주요 글 목록

[React] 리액트 이벤트 캡처링 💥 FullCalendar작업을 하고 있는데 발생한 문제 이벤트가 부모 > 자식에게 적용되지 않는다 ! 날짜를 선택했을 때, 적용되는 이벤트(dateClick) 작성해두었었다. 그런데 날짜를 선택하면 잘 적용이 되었지만, 날짜 안에 자식 요소인 일정이 들어간 경우는 적용이 되지 않았다..즉, 일정(하위요소)가 추가되면 상위 요소에 적용되던 이벤트의 가용범위가 너무 작아진다는 문제 발생 !! ✔️ 해결 방법 문제를 해결하기 위해 GPT 교수님께 여쭤보니 '이벤트 캡처링' or '이벤트 버블링'을 사용하라고 하심 ! * 이벤트 캡처링 : 이벤트가 최상위 부모 요소에서 시작해 이벤트가 발생한 요소까지 내려온다. * 이벤트 버블링 : 이벤트가 발생한 요소에서부터 다시 최상위 부모 요소까지 올라간다. 이.. 공감수 0 댓글수 0 2024. 8. 18.
[React] 리액트 App.js 화면에 꽉 차게 설정 💥 트러블 슈팅 문제점 : 개발 중 굉장히 거슬리는 문제 하나가 발생하였다.. 맨 위 헤더 컴포넌트의 border를 설정했는데.. 저렇게 hr처럼 나온다. 확인해보니 화면에 꽉 차지 않는 이유 때문 ! 아니 왜 App.js가 화면에 꽉 차지 않지? 그래서 style에 width : 100%도 추가해주었는데.. 되지 않았음 😭 하지만 문제는 생각보다 간단히 해결된다. 해결방법 - 기본 스타일 초기화브라우저의 기본 스타일이 영향을 미칠 수 있다고 한다. CSS 리셋이나 노말라이즈 CSS를 사용하여 기본 스타일을 초기화하자 ! npm install normalize.css // index.jsimport 'normalize.css'; 이렇게 간단하게 해결 가능 ~ 공감수 0 댓글수 1 2024. 6. 12.
[React] 하단 네비게이션 만들기 만든지는 한~ 참 되었지만 까먹기 전에 얼른 써야겠다 ✅ 하단 네비 커스텀 요구사항 1. 클릭 시, 페이지 이동(기본)2. 페이지에 맞는 Footer메뉴 선택 3. 페이지 바닥에 고정 👩🏻‍💻 하단 네비 만드는 과정 1. App.js에 페이지 Router 생성 기본적으로 페이지를 이동하기 위해서는 페이지 라우팅이 필요하다. 하단 네비에서 react-router-dom의 Link를 사용할 계획이었기에 App.js에 이러한 라우터를 추가해주었다. } /> }/> }/> }/> }/> }/> 2. Footer.jsx 생성 - Link로 경로를 주고, 메뉴들을 생성해주었다. impo.. 공감수 2 댓글수 1 2024. 6. 11.
[React] FontAwesome 사용하기 (내가 잘 까먹어서 올려두는) 리액트에서 폰트 어썸 사용하기 폰트어썸을 모를땐 파일에 jpg를 추가해서.. 하나씩 넣었다. 블로그에 올리고 img주소를 복붙했다. 이 얼마나 고된 작업이던가 하지만 폰트어썸을 만나고 난 뒤, 내 인생은 360도 변했다. 폰트어썸.., 나의 빛(까진 아님), 폰트어썸, 나의 구원 ! 어쨌든 정말 간편하다! 1. fontAwesome설치 $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/react-fontawesome 2. FontAwesome.jsx 파일 만들기 import { library } fro.. 공감수 1 댓글수 0 2024. 4. 17.
[React] Snippets/ 리액트 단축키 사용법 1. Sinppets란 Sinppets : 코드 조각이나 코드 템플릿 소프트웨어 개발에서 일정한 패턴이나 반복되는 코드를 빠르게 작성할 수 있도록 도와주는 기능 2. 사용 방법 리액트 개발을 할 때 효율적으로 작업하기 위해 사용하는 단축키가 몇가지 있다. Visual Studio Code에선 "ES7 React/Redux/GraphQL/React-Native Snippets"이라는 확장팩을 설치해서 사용할 수 있다. 확장팩 설치 > react sinppets 검색 3. 자주쓰는 단축키 1. 함수형 React 컴포넌트 생성 - rfc // rfc import React from 'react' export default function Home() { return ( Home ) } 2. 기본적인 클래스형 .. 공감수 0 댓글수 0 2024. 3. 25.
[React] 리액트 배너 슬라이드 만들기(Swiper) 우리 프로젝트 웹 화면이 정적인 느낌이 강해서 .. 로딩 페이지에 이어 이번에는 홈 화면에 배너 슬라이드를 추가하였다. Swiper 사용하기 Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 여기서 다양한 방법을 만나볼 수 있다 ~ ! Swiper 설치 npm i swiper Swiper 사용법 // Import Swiper React components import { Swiper, SwiperSlide } from 'swiper/react'; // Import Swiper st.. 공감수 1 댓글수 0 2023. 5. 29.
[React] 리액트 로딩 페이지 만들기 (react-spinners) 프론트에서 API를 호출하여 가져오는 동안 페이지에 아무런 변화가 없으면 사용자들은 당황한다 .. `어 ..? 이게 되고 있는 것 맞나 ? ` 그래서 로딩 화면을 넣는데 .. 리액트에서 어떻게 넣을까 ! 고민하고 있었는데 라이브러리만 잘 쓰면 뚝딱하고 만들어진다 (라이브러리 최고 ~ ) React spinner 설치하기 npm install react-spinners 또는 npm install react-spinners --save 사용법 - Spinner 모양 선택하기 https://www.davidhu.io/react-spinners/ React Spinners www.davidhu.io 이 사이트에 들어가서 여러가지 스피너 중 마음에 드는 스피너를 선택하면 된다. 가장 기본적인 BeatLoader와.. 공감수 1 댓글수 0 2023. 5. 24.
[React Native] 맥 OS 개발환경 설정중 발생한 오류 react-native를 설치해서 사용할 수 있는 방법은 크게 react-native-cli를 설치하거나 expo-cli를 설치하는 것인데 expo 설치는 처음이 쉽지만 여러가지 제약이 있어 불편한 점이 있다. 따라서 react-native-cli를 설치해서 사용했다. 이 자식은 처음 설치가 굉장히 굉장히 복잡하고 .. 번거롭다 . 1. homebrew 설치 2. rbenv 설치 3. node.js 설치 4. watchman 설치 5. react-native-cli설치 6. xcode 설치 7. cocoapods 설치 8. jdk설치 9. 안드로이드 스튜디오 설치 이렇게 9개를 설치했는데 오류가 많이 떴다 컴퓨터를 Expo로 갈아타고 싶었으나 .. 어찌저찌 해냈다 .. 휴 ~ 설치과정은 프로젝트가 끝나면.. 공감수 0 댓글수 0 2023. 4. 22.
[React] 리액트 입문 - 생명주기 함수 사용하기 (변경 과정) 생명주기 함수 2번째 시간 ~ [React] 리액트 입문 - 생명주기 함수 사용하기 (생성 과정) 생명주기란( in react ): component의 생성, 변경, 소멸 과정을 뜻한다 ~ ! 더보기 앞서 배웠던 리액트에서 component를 App.js에 import하여 화면에 rendering하였다. import React from 'react' export default function R004_Lif 0lrlokr.tistory.com 앞서 우리는 생명주기 함수 중 '생성'하는 함수들을 살펴보고 왔다 이번 포스팅에서는 생명주기 함수 중 '변경'하는 함수인 shouldComponentUpdate()함수에 대해서 알아보겠다 ! 이 때 '변경'이란 props나 state의 변경을 말한다. App.js .. 공감수 0 댓글수 0 2023. 3. 29.
[React] 리액트 입문 - 생명주기 함수 사용하기 (생성 과정) 생명주기란( in react ): component의 생성, 변경, 소멸 과정을 뜻한다 ~ ! 더보기 앞서 배웠던 리액트에서 component를 App.js에 import하여 화면에 rendering하였다. import React from 'react' export default function R004_LifecycleEx() { return ( R004_LifecycleEx ) } 방식이 아니라 render()함수를 사용하여 html 코드를 return 하는 방식에 대해서 자세히 알아보겠다 필자는 앞선 방식에 익숙해서 render함수 배움의 필요성을 느껴서 접은 글에 언급해본다. rfc+enter에 대해 알지 못하는 분들은 혼란을 피하기 위해 넘어가는 것이 좋을 것 같다 ! component의 생성 .. 공감수 0 댓글수 0 2023. 3. 29.
[React] 리액트 입문 - jsx, component 사용하기 집나간 리액트가 돌아왔다 ~ 유후 오랜만에 리액트 포스팅.. 리액트를 처음 하시는 분들이라면 다음 링크를 참고하여 개발환경을 구축하시길 바란다 ! [리액트 실습] 영화 앱 만들기 2 (리액트 개발환경 구축) [리액트 실습] 영화 앱 만들기 1 (tmdb api 발급) 1. 실습 영상 찰스님의 실습 영상을 보고 공부했다 !! 따라가기도 쉽고 설명도 잘해주셔서 도움이 많이 된 실습이었다 . 2. 완성된 페이지 상영중인 0lrlokr.tistory.com 지금까지 jsx를 이용한 리액트를 사용해보았다면 js문법 리액트부터 차근차근 다루어보겠다. 리액트 → 자바스크립트 → 리액트 기초 순서로 이상하게 배우고 포스팅하고 있긴한데 저는 선샌님들을 믿습니다. 자 그럼 ~ 개발환경이 모두 구축된 상태에서 ! creat.. 공감수 0 댓글수 0 2023. 3. 29.
[리액트 실습] 로그인 화면 구성 1 (컴포넌트 뼈대 잡기) *유튜브 인브로즈님의 실습 영상을 참조하여 작성한 포스팅입니다. [리액트 실습] 로그인 화면 만들기 0 (React Hooks - useEffect, useState ) * 유튜브 인브로즈님의 실습 영상을 참조하여 작성한 포스팅입니다. 드디어 영화 앱 실습 포스팅을 끝내고 '로그인 화면 만들기' 포스팅을 가져왔다. 우선 개발에 앞서 이번 포스팅에서는 리액 0lrlokr.tistory.com 이번 포스팅에서는 Login컴포넌트의 뼈대를 잡아보려한다. useState, useEffect와 같은 함수는 쓰이지 않을 예정이며 리액트의 CSS, HTML의 기초적인 부분에 대해 다루어볼 것이다. 1. 뼈대잡기 우선 create-react-app을 활용하여 login-review 디렉토리를 만들어주었다. (복습 겸 .. 공감수 0 댓글수 3 2023. 3. 6.
[리액트 실습] 로그인 화면 만들기 0 (React Hooks - useEffect, useState ) * 유튜브 인브로즈님의 실습 영상을 참조하여 작성한 포스팅입니다. 드디어 영화 앱 실습 포스팅을 끝내고 '로그인 화면 만들기' 포스팅을 가져왔다. 우선 개발에 앞서 이번 포스팅에서는 리액트 Hooks에 대해서 '간단히' 다루어보겠다. 추후에 hooks의 많은 함수를 공부하고 Hooks를 자세히 정리해서 작성해보도록 하겠다. 1. React Hooks Hooks - 리액트의 새로운 기능 : React 16.8 버전에 새로 추가 - function 컴포넌트에서도 state를 관리할 수 있다. - React의 여러 기능을 함수형 프로그래밍으로 사용할 수 있다. - lifecycle(라이프 사이클, 생명 주기)를 사용할 수 있다. Hook의 개요 – React A JavaScript library for bui.. 공감수 1 댓글수 0 2023. 2. 28.
[리액트 실습] 간단 영화 앱 만들기 7 (상세 페이지 만들기) * 유튜브 인브로즈님의 실습 영상을 학습한 뒤 작성하는 포스팅입니다. [리액트 실습] 간단 영화 앱 만들기 6 (헤더 만들기) [리액트 실습] 간단 영화 앱 만들기 5 (React Routing) [리액트 실습] 간단 영화 앱 만들기 4 (1-3 코드) [리액트 실습] 간단 영화 앱 만들기 3 (components와 props) [리액트 실습] 영화 앱 만들기 2 (리액트 개 0lrlokr.tistory.com 아마 간단 영화 앱 만들기는 7편을 마지막으로 끝나지 않을까 싶다. 하지만 필자가 좀 더 배워서 TV프로그램 , 등장인물 등등 여러 페이지를 만들 수 있는 능력과 글을 쓸 수 있는 여유가 된다면 다시 돌아오도록 하겠다 .. 이번 포스팅에서는 이렇게 영화가 정렬된 화면에서 영화 화면을 누르면 클릭한.. 공감수 0 댓글수 0 2023. 2. 27.
[리액트 실습] 간단 영화 앱 만들기 6 (헤더 만들기) [리액트 실습] 간단 영화 앱 만들기 5 (React Routing) [리액트 실습] 간단 영화 앱 만들기 4 (1-3 코드) [리액트 실습] 간단 영화 앱 만들기 3 (components와 props) [리액트 실습] 영화 앱 만들기 2 (리액트 개발환경 구축) [리액트 실습] 영화 앱 만들기 1 (tmdb a 0lrlokr.tistory.com 5에서 이어진다 ~ 이번 포스팅에서는 '헤더'부분에 대해서 코드를 짜 볼 예정이다. 아마 마켓컬리 클론코딩 헤터 포스팅과 유사한 부분이 많을 것이다. [리액트 실습] 마켓컬리 클론코딩 1. 헤더 만들기 3주차 과제는 ~~~ 마켓컬리 클론 코딩이다 ! 3주차에서는 SPA, routing에 대해서 배웠다. React Routing - Rising Camp 12th.. 공감수 1 댓글수 1 2023. 2. 26.
[리액트 실습] 간단 영화 앱 만들기 5 (React Routing) [리액트 실습] 간단 영화 앱 만들기 4 (1-3 코드) [리액트 실습] 간단 영화 앱 만들기 3 (components와 props) [리액트 실습] 영화 앱 만들기 2 (리액트 개발환경 구축) [리액트 실습] 영화 앱 만들기 1 (tmdb api 발급) 1. 실습 영상 찰스님의 실습 영상을 보 0lrlokr.tistory.com 헤더 + 상세페이지가 있는 앱을 만들어볼 예정이다. 1. SPA vs MPA 이번에는 지난번까지 만들었던 간단 영화 앱에서 최신 영화 목차에서 더 나아가 클릭하면 영화의 일부 정보가 뜨는 '상세 페이지'와 페이지 이동까지 만들어 볼 예정이다. 리액트에서는 페이지 이동을 위해 react-route-dom을 활용한다. ** react-route-dom : SPA방식의 애플리케이션에.. 공감수 0 댓글수 1 2023. 2. 26.
[리액트 실습] 간단 Todo-List 만들기(추가, 삭제) 1. 구현 화면 첫화면 추가기능 삭제기능 2. 요구사항과 컴포넌트 구조작성 스터디를 진행하며 가장 많이 배운 것은 개발하는 마음가짐과 단계였다. 개발을 진행하기 앞선 단계를 거의 안하고 바로 코딩을 시작하면서 어떻게 할 것인지 머리속으로만 구상했던 과거를 반성하며 .. 이번에는 요구사항을 분석하고 컴포넌트 구조를 먼저 잡아보았다. 아직 내가 짤 수 있는 기능들에 대해서 자세히 몰라 1, 2 단계로 구성해보았다. 1단계에서는 가장 근본적으로 요구하는 사항 -> TodoList에 내가 할 일을 추가하는 것과 일을 끝내면 삭제할 수 있는 기능을 넣는 것에 집중해보았다. 그렇게 1단계까지 선배림과 여러가지 레퍼런스의 도움을 받아 완성해보았다. (구글과 선배림은 신이야 .. ) 아무튼 결론은 어떤 개발을 하더라도.. 공감수 0 댓글수 1 2023. 2. 5.
[리액트 실습] 마켓컬리 클론코딩 1. 헤더 만들기 3주차 과제는 ~~~ 마켓컬리 클론 코딩이다 ! 3주차에서는 SPA, routing에 대해서 배웠다. React Routing - Rising Camp 12th WEB SPA 방식의 어플리케이션에서 여러 페이지를 처리할 수 있도록 도와주는 react-router-dom 라이브러리를 활용해보며, 리액트 라우팅에 대해 이해해봅시다. inbroz-charles.gitbook.io 개인적으로 리액트에서 가장 큰 장점이라 생각되는 부드러운 넘어감(?)을 구현해보는 시간이었다. 1. header 완성화면 페이지 각각은 아직 구현중이다. Kurly홈 이미지를 누르면 Main화면으로 넘어온다. 다른 버튼들도 마찬가지로 누르면 각각 이동한다. 2. 구현 리액트의 react-route-dom을 활용했다. 지금까지 작성한 .. 공감수 1 댓글수 0 2023. 2. 3.
[리액트 실습] 간단 영화 앱 만들기 4 (1-3 코드) [리액트 실습] 간단 영화 앱 만들기 3 (components와 props) [리액트 실습] 영화 앱 만들기 2 (리액트 개발환경 구축) [리액트 실습] 영화 앱 만들기 1 (tmdb api 발급) 1. 실습 영상 찰스님의 실습 영상을 보고 공부했다 !! 따라가기도 쉽고 설명도 잘해주셔서 도 0lrlokr.tistory.com 1. 코드 src/components/Movie.jsx import React from 'react' const IMG_BASE_URL = "https://image.tmdb.org/t/p/w1280/"; export default function Movie({title,poster_path,vote_average,id}) { return ( //movie components내 v.. 공감수 0 댓글수 0 2023. 2. 2.
[리액트 실습] 간단 영화 앱 만들기 3 (components와 props) [리액트 실습] 영화 앱 만들기 2 (리액트 개발환경 구축) [리액트 실습] 영화 앱 만들기 1 (tmdb api 발급) 1. 실습 영상 찰스님의 실습 영상을 보고 공부했다 !! 따라가기도 쉽고 설명도 잘해주셔서 도움이 많이 된 실습이었다 . 2. 완성된 페이지 상영중인 0lrlokr.tistory.com 이렇게 간단한 웹 프로그램도 쓰려니 몇개의 포스팅이 나온다 .. !!!! 나중에 프로젝트를 하면 얼마나 많은 양을 해야할 지 .. 미리미리 공부해야겠다 😂 넷플릭스도 js프레임워크가 리액트였ㄷ ㅏ (스터디 가르쳐주시는 분이 알려주신 wrapplayer이라는 크롬 확장 프로그램 ! ) 언젠가 넷플릭스 클론 코딩 꼭 해보고 싶당 넷플릭스 짱 !! 이제 헛소리는 그만하구 ~ 1. API 가져오기 우선 com.. 공감수 0 댓글수 1 2023. 1. 24.
[리액트 실습] 영화 앱 만들기 2 (리액트 개발환경 구축) [리액트 실습] 영화 앱 만들기 1 (tmdb api 발급) 1. 실습 영상 찰스님의 실습 영상을 보고 공부했다 !! 따라가기도 쉽고 설명도 잘해주셔서 도움이 많이 된 실습이었다 . 2. 완성된 페이지 상영중인 영화 + 제목 + 평점을 나타낸 리액트 웹 !! 사실 0lrlokr.tistory.com API를 발급받았으니 이제 본격적인 개발(?)을 할 차례다 ~~! 간단한 리액트 실습이기에 과정은 어렵지 않았다. 이전 게시물에서 쓴 API 줄바꿈으로 컴포넌트가 잘 먹지 않았던 문제만 있었을 뿐 코드만 잘 따라 적으니 화면이 잘 떴다. 1. 터미널을 이용해 vscode띄우기 (리액트 개발환경 구축은 추후 포스팅을 작성해야겠습니다 ! ) (React)리액트 설치 및 실행법 상세하게(window & Mac) 리.. 공감수 0 댓글수 0 2023. 1. 22.
[리액트 실습] 영화 앱 만들기 1 (tmdb api 발급) 1. 실습 영상 찰스님의 실습 영상을 보고 공부했다 !! 따라가기도 쉽고 설명도 잘해주셔서 도움이 많이 된 실습이었다 . 2. 완성된 페이지 상영중인 영화 + 제목 + 평점을 나타낸 리액트 웹 !! 사실 영상을 따라가면 다 나온다. 하지만 공부하고 기록하기 위한 블로그니까! 내가 직면했던 어려움도 적어볼 예정이다. 3. API 발급받기 The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 1. 회원가입> 로그인 > 설정 > API 에 들어간다. 2. API 키 요청을 클릭한 뒤 Developer / Professional 선택사항이 뜨는데 Dev.. 공감수 0 댓글수 0 2023. 1. 20.
[백준/Python] 14681 사분면 고르기 1.문제 14681번: 사분면 고르기 점 (x, y)의 사분면 번호(1, 2, 3, 4 중 하나)를 출력한다. www.acmicpc.net 2. 코드 x=int(input()) y=int(input()) if x>0 and y>0: print(1) elif x0: print(2) elif x 공감수 0 댓글수 0 2022. 9. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.