티스토리

차곡차곡 개발일지

검색하기

블로그 홈

차곡차곡 개발일지

hunffy.tistory.com/m

초보 개발자의

구독자: 0

방명록 방문하기

728x90

주요 글 목록

CSS - display(grid) 여태까지 레이아웃을 나눌 때 display:flex를 사용하여 레이아웃을 나누곤 했다. 이번엔 grid를 간단하게 사용해보았다. HTML 1째줄 왼쪽 1째줄 가운데 1째줄 오른쪽 2째줄 왼쪽 2째줄 가운데ㄴ 2째줄 오른쪽 레이아웃을 나눠보기위해 간단하게, header div를 생성하고, 명시적으로 보여주기위해, 1째줄왼쪽부터 2째줄 오른쪽이라는 글자를넣어주었다. CSS .header { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "left center right" "left-2 center-2 right-2" "left-3 center-3 right-3"; } .lef.. 공감수 0 댓글수 0 2024. 3. 24.
Vue.js 특징 및 차이점 기본정보 SPA(Single Page Application)기반 프레임워크이다. 페이지 전환없이 동적으로 콘텐츠를 로드/업데이트 하는 웹 어플리케이션이다. HTML마크업 기반의 템플릿 문법을 사용한다. 다른 프레임워크들처럼 CLI 툴을 제공한다. 단방향 데이터바인딩과 양방향 데이터바인딩을 모두 지원한다. 양방향 데이터 바인딩 - 뷰가 변경되면 모델도 변경, 모델이 변경되면 뷰도 변경되는 처리방식. 단방향데이터 바인딩 - 상대적으로 예측이 쉬워 코드가 더 안정적이지만 양방향 데이터바인딩에 비해 코드작성에 시간이 더 걸린다. Vue.js 장점 유연하고 쉽게 배울수 있다. 다른프레임워크에 비해 상대적으로 쉬운 학습곡선을 가지며, 간단한 문법과 유연성으로 빠르게 개발할 수 있다. 강력한 커뮤니티 및 생태계 : .. 공감수 0 댓글수 0 2023. 9. 18.
리엑트 기본구조 및 작동 구조 및 작동원리를 이해해서 효율적으로 코드를 작성해봐야겠다고 생각했다. -프로젝트 구조 현재 진행중인 프로젝트의 리엑트 구조이다. 아토믹 디자인을 최대한 활용하려고 해서, 컴포넌트, 타입, api, hook, util(axios)등 폴더를 따로 설정하여 import해오기로 했다. 리엑트 타입스크립트, 장고를 이용하여 팀 프로젝트를 진행중에 있다. root.tsx import Header from '../components/header' import { Outlet } from 'react-router-dom' const Root = () => { return ( {/* */} ) } export default Root 어플리케이션의 주요 레이아웃을 설정해준다. 헤더컴포넌트를 고정으로 상단에 설정해주어 .. 공감수 0 댓글수 0 2023. 9. 1.
SCSS파일 index.scss로 관리해주기 개요 기존에 css를 사용했다면, 이번엔 SCSS를 사용해봤다. 그리고, 컴포넌트에 직접 scss들을 일일이 import해줘야했지만, index.scss에 해당 scss들을 import해주어 관리하도록해주었다. 사용하기전에.. scss(sass)란? Syntactically Awesome StyleSheet의 약어. CSS를 효율적으로 작성할 수 있도록 도와주는 전처리기이다. sass는 css의 전처리기, 즉 해석되어 css로 컴파일되는 스크립트 언어이다. mixin,function등 여러기능을 제공한다. 또한 변수 정의도 가능한데, $기호로 시작되고, 변수 할당은 콜론(:)으로 마무리한다. sassScript는 4가지 자료형을 지원해준다. int,string,color,boolean을 지원한다. scs.. 공감수 0 댓글수 0 2023. 8. 23.
[CSS] em 과 rem 반응형 웹을 px로써 설정을하다가, 주변지인의 도움으로 em 과 rem을 사용하면 더 매끄럽게 구현할수있다고 얘기를들어, 찾아보게되었다. 상대단위 상대(relative)단위는 고정되지 않고 어떤 기준에 따라 유동적으로 바뀔수 있는 길이를 나타낸다. em 과 rem이 여기에 해당한다. 절대(absolute)단위는 어떤 상황에서든 항상 고정된 길이를 나타낸다. px 과 pt 등이 여기에 해당한다. 공통점 em과 rem은 css의 font-size 속성값에 비례해서 단위가 결정된다. ex) font-size:16px 0.5em = 16px x 0.5 = 8px 1em = 16px x 1 = 16px 2em = 16px x 2 = 32px 3ex = 16px x 3 = 48px 차이점 rem은 최상위 요소의 f.. 공감수 0 댓글수 0 2023. 8. 2.
SASS란? 프로젝트를 하면서, SASS를 도입하기로 팀원들과 협의가 되었다. 그래서, SASS란 무엇일까? SASS Syntactically Awesome StyleSheet 의 약어 CSS를 효율적으로 작성할 수 있도록 도와주는 전처리기이다. 기존의 CSS의 기능 부재의 단점을 보완한 다양한 기능이 추가되었다. SASS는 중괄호( { , } ) 와 세미콜론 ( ; ) 을 사용하지 않고, 들여 쓰기 + 줄 바꿈 형식으로 문법을 사용한다. 그리고 변수 정의를 허용한다. 변수는 $ 기호로 시작되고 변수 할당은 콜론(:) 으로 마무리한다. 그렇다면, SCSS란? css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다. sass기능을 갖고, 대신 중괄호와 세미콜론을 사용해 css문법과 거의 같다.. 공감수 0 댓글수 0 2023. 7. 31.
Next.js란?? 리엑트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크이다. 서버 사이드 렌더링(Server side rendering) 과 여러가지 기능들을 제공한다. 작동방식 Next.js는 기본적으로 서버측에서 React코드를 실행한다. React.js를 서버측에서 pre-rendering하여 html을 생성하고, 브라우저에게 보내준다. 그 후, 브라우저에서 React를 사용해 웹 페이지를 완성한다. 서버 사이드 렌더링 로딩 - 클라이언트 사이드 렌더링의 경우에는 모든 js파일을 로드하고나서 사용자가 웹을 보게되는데, 이때까지 사용자는 많은 시간을 대기해야한다. 하지만 서버 사이드 렌더링을 사용하게되면 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 자바스크립트를 로딩하는 시간이 줄어들게 된다. SEO - 클.. 공감수 0 댓글수 0 2023. 7. 18.
[리엑트]리덕스,리듀서 이해하기 상태관리 라이브러리이다. store에 state(변수)를 저장하고 관리한다. index.tsx import { Provider } from 'react-redux' import { createStore } from 'redux' import rootReducer from './reducers' const store = createStore(rootReducer, composeWithDevTools()) root.render( ) 사용하기 위한 import와 설정을 해준다. provider의 역할은 우리의 App이 Redux.store에 접근을 할 수 있게 도와준다. reducers/index.tsx import { combineReducers } from 'redux' import headerReduce.. 공감수 0 댓글수 0 2023. 7. 11.
버튼 클릭시 색상을변경하기(feat. 리엑트) 버튼 클릭을 할때마다 버튼의 색상이 바뀌는것을 작업하는것이 목표이다. 먼저 flaticon에서 아이콘들을 가져와, 해당아이콘을 클릭했을 때 색상이 변하는 작업을 할 것이다. mui를 이용해서 기본적인 구조를 잡았었지만, html 의 숙련도(?)를 위해 html로 수정하였다. import {useState } from 'react'; 먼저, 클릭했을 때 상태를 관리하기위해 useState를 import해온다. const [food1, setFood1] = useState(false); const [food2, setFood2] = useState(false); const [food3, setFood3] = useState(false); const [food4, setFood4] = useState(fals.. 공감수 0 댓글수 0 2023. 7. 5.
리엑트 버튼클릭 시 컴포넌트 숨기기,나타내기 버튼 클릭시에 랜더링을 껏다 켰다 할수 있게 구현해보기 "조건부랜더링" 이번 기능에서 중요한것은 , 논리연산자 논리곱(AND, &&)를 이용하는것이다. location_search.tsx import { TextField,Stack} from "@mui/material"; const Location_search:React.FC = () => { return( A동 B동 C동 D동 ); } export default Location_search; 버튼을 클릭시 나타날 컴포넌트를 만들어주었다. App.tsx // ./ 의 위치: frontend/src/ // ../의 위치: frontend/ import React from 'react'; import './App.css'; import { Route, R.. 공감수 0 댓글수 0 2023. 6. 30.
리엑트 Mui의 TextField에 아이콘넣기 , Button에 아이콘넣기 TextField에 아이콘을 넣어야했는데, 구글링을 통해 알게 된 방법을 정리해두자! 먼저, 원하는 아이콘과 InputAdornment 를 import해준다. import {Stack,Typography,Box,Button,TextField,InputAdornment} from '@mui/material' import GpsFixedIcon from '@mui/icons-material/GpsFixed'; import LocationOnIcon from '@mui/icons-material/LocationOn'; 내가 선택한 아이콘! 그리고 이 아이콘을 적용하기위해서, ImputProps는 Mui에서 제공해주는 TextField 컴포넌트의 속성 중 하나이며, 이 속성은 TextField 컴포넌트 내부에 .. 공감수 0 댓글수 0 2023. 6. 29.
리엑트 기본문법과 핵심개념(생활코딩) 생활코딩님의 강의를 통해 부족한 리엑트 기초를 다지기. L출처:생활코딩님 수업을 통해 배울 점 리엑트는 사용자 정의 태그를 만드는 기술이다. Props는 컴포넌트의 내부에서 사용하는 값이다. State는 컴포넌트 내부에서 사용하는 값이다. 이벤트는 Props를 이용한다 event.preventDefault()를 사용하여 기본동작을 비활성화 할 수 있다 form을 변경할 때는 Props를 State로 전환 후 onChange를 이용한다. npm run build : 배포를 하기위한 셋팅을 도와준다(명령어) npx serve -s build : 사용자가 어떤 경로로 들어오든 build폴더의 index.html 을 실행한다. build>index.html을 실행할수있는 웹서버가 실행된다. 서비스에서 사용할 수.. 공감수 0 댓글수 0 2023. 6. 28.
리엑트의 기본 프로젝트 구조 프로젝트를 하면서 기본 구조를 제대로 알지않고 하니 이해도 잘 되지않고 진행이 더뎌지는걸 느꼈다. 그래서 정리를 한번하고자한다. 기본 프로젝트를 생성하게 되면 public>index.html에 가 있는데, 이 div 엘리먼트를 src>index.tsx에서 사용하게된다. const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); getElementById('root')를 통해서 해당 dom을 사용한다. 마지막으로 App을 가져와서,root에 *랜더링을 해준다. *렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다 root.render( ); : 리엑트에서 앞으로 없앨 기능들을 사용할 경우 알려주는.. 공감수 0 댓글수 0 2023. 6. 27.
Material UI(Typography) Material UI는 현재 가장 많이 쓰이고 있는 React UI 컴포넌트 라이브러리 중 하나이다. 텍스트 크기 조절 hi hi hi hi html에서 사용했던 h1~h5 태그들을 속성으로 사용할 수 있다. 색상부여 파랑 빨강 색상 색상 정렬 가운데 오른쪽 왼쪽 공감수 0 댓글수 0 2023. 6. 27.
리액트 Formik / Yup 일단 Validation 이란 서버에 데이터를 제출하기 전에 양식이 올바른지 확인하는 과정이라고 할 수 있다. 사용자가 데이터를 목적지로 보내기 전에, 올바른 데이터를 입력했는지, 유효성을 체크해주는 것이다. Formik? ● 리엑트에서 간단하게 form을 만들 수 있게 해주는 Node.js 패키지 recat-hook-form과 달리 조건을 한군데에 모아서 적어줄 수 있다. 특징 가장 많이 사용되는 라이브러리이다. 사용하기 쉽다 provider 방식으로 form 내에 있는 모든 컴포넌트들이 동일한 상태를 공유한다. 유효성 체크를 위해 yup와 함께 사용한다. 단점 복잡한 form을 다루기 어렵다 특정 state만 watch할 수 없고 전체를 업데이트한다. 불필요한 re-rendering 발생한다. YUP.. 공감수 0 댓글수 0 2023. 6. 26.
usequery란(querykey, queryfunction)? 서버로부터 데이터를 조회하여 가져올 때 사용한다. DB로 비유하자면, select의 기능을 한다고 볼 수 있다. usequery를 사용할 때는 querykey, queryfn 개념을 이해해야한다. ● 사용 예 ) ● const 변수명 = usequery( 'querykey', queryfn ) ● const 변수명 = usequery({ 'querykey' : queryfn, 'querykey2' : queryfn2 }) 2가지의 형태로 사용할 수 있다. ● querykey는 문자열과 배열의 형태로도 표현할 수 있다. 문자열// const 변수명 = usequery( 'number' , queryfn) 배열// const 변수명 = usequery(['number'] , queryfn) querykey .. 공감수 0 댓글수 0 2023. 3. 3.
타입스크립트 프로그래밍 -4 number let a = 1234 // number var b = Infinity * 0.10 // number const c = 5678 // 5678 let e : number = 100 // number let f : 26.218 = 26.218 // 26.218 let g : 26.218 = 10 // 에러 TS2322: '10' 타입을 '26.218'타입에 할당할 수 없음. 1. 타입스크립트가 값이 number임을 추론하게 해준다(a,b) 2. const는 number의 값이 특정값임을 타입스크립트가 추론하게 한다.(c) 3. 값이 number임을 명시적으로 타입스크립트에 알린다(e) 4. 타입스크립트에 값이 특정 number임을 명시적으로 알린다(f,g) 숫자분리자 : 긴 숫자를 처리할 때 .. 공감수 0 댓글수 0 2023. 2. 20.
타입스크립트 프로그래밍-3 타입의 관하여 타입(type): 값과 이 값으로 할 수 있는 일의 집합 ex1) Boolean 타입의 경우 모든 불(참과 거짓 중 하나)과 불에 수행할 수 있는 모든 연산의 집합. => 연산(||, &&, ! 등) ex2) number 타입은 모든 숫자와 숫자에 적용할 수 있는 모든 연산, 숫자에 호출할 수 있는 모든 메서드의 집합. => 연산(+,-,*,/,%,||,&&,? 등) , 메서드(.toFixed, .toPrecision, .toString 등) ex3) string타입은 모든 문자열과 문자열에 수행할 수 있는 모든 연산 문자열에 호출할 수 있는 모든 메서드의 집합. => 연산(+,||,&&,등) , 메서드(.concat, .toUpperCase 등) function plus(n) { retu.. 공감수 0 댓글수 0 2023. 2. 17.
타입스크립트 프로그래밍-2 타입 시스템 ● 타입시스템(typesystem): 타입 검사기가 프로그램에 타입을 할당하는 데 사용하는 규칙 집합 타입시스템은 보통 두가지로 분류된다. 명시적으로 알려주는 타입시스템, 자동으로 타입을 추론하는 타입시스템 타입스크립트는 개발자가 직접 선택할 수 있다. 어노테이션을 이용하면 타입스크립트에 명시적으로 타입을 지정할 수 있다. 어노테이션은 'value:type' 형태로 쓰이며 타입검사기에 value는 타입은 type이야. 라고 알리는 역할을 한다. ● 어노테이션을 사용하여 명시적으로 타입을 알려줄 때 let a : number = 1 // a는 number let b: string = 'hello' // b는 string let c : boolean[] = [true,false] // c는 bo.. 공감수 0 댓글수 0 2023. 2. 14.
타입스크립트 프로그래밍-1 장점: ● 타입스크립트는 흔히 발생하는 실수를 방지한다. ● 문서화를 제공하고, 리팩터링을 쉽게 만들며 단위 테스트의 숫자를 반으로 줄임으로 더 안전한 프로그램을 구현할 수 있게 보장해준다. ● 프로그래머의 생산성을 배로 늘려준다 ● 타입 안전성(type safety) : 타입을 이용해 프로그램이 유효하지 않은 작업을 수행하지 않도록 방지한다. ● 타입스크립트는 개발자가 텍스트편집기에 코드를 입력하는 순간 곧바로 에러 메시지를 발생시킨다. (에러를 알려주는 시점!) 타입스크립트에서 유효하지않은 동작의 예. 1) 숫자와 리스트 곱하기 2) 객체 리스트를 인수로 받는 함수에 문자열 리스트를 인수로 전달해 호출하기 3) 객체에 존재하지 않는 멤버 함수를 호출하기 4) 최근에 다른 곳으로 이동된 모듈 임포트하기.. 공감수 0 댓글수 0 2023. 2. 14.
리엑트-렌더링이란? ● 렌더링이란? 컴포넌트가 현재의 프롭스와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업. 쉽게말해, html요소(element) 또는 react 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링이라고 한다. 엘리먼트는 react의 가장 작은 단위이며 화면에 표시할 내용을 담고있다. ● 렌더링을 실행하는 과정 : react 컴포넌트가 렌더링을 수행하는 시점: 1. Props가 변경되었을 때 2. State가 변경되었을 때 3. 부모 컴포넌트가 렌더링되었을 때 ●ReactDom.render() 이란? ReactDom.render() 함수를 통해 Web Api를 사용하여 웹 브라우저에 그려주는 함수입니다. React.createElement를 통해 Object를 생.. 공감수 0 댓글수 0 2023. 2. 9.
리엑트 모달창 drag구현! 1. 먼저 react_spring을 사용하여 요소의 이동, 애니메이션 등 시각적 요소를 적용하기 쉽게해주는 패키지를 설치해준다 npm i react-use-gesture --save( 시각적 요소를 적용하게 해주는 패키지) npm i react-spring --save ( 좌표값의 변화를 가지고있게, 해주는 패키지) 설치가 다 됐다면 import{useSpring, animated} from 'react-spring; import{useDrag} from 'react-user-gesture'; 을 해준다. 2.useState 대신 useSpring을 사용해준다. x,y는 좌표값, offset값은 초기 위치로부터 떨어진 값을 의미한다. set() 메소드로 x,y의 offset 변경이 가능하다. 3.x와 y.. 공감수 0 댓글수 0 2023. 2. 8.
리엑트 Hook useState 1. useState를 사용하기위해서 import를 해준다. 2.변수를 선언해준다. const[변수명,set변수명] = useState(초기값);으로 선언해준다. 3.변수 재선언 초기값인 ' ' 에서 변경 될 , newValue를 setPwValue의 인자로 넣어준다. setPwValue를 통해 pw값을 변경해주면, 해당 컴포넌트는 화면에 다시 랜더링되며 pw값이 변경 될 때마다 화면이 업데이트가된다. 공감수 0 댓글수 0 2023. 2. 1.
리엑트의 기본적인 Hooks 1.useState 컴포넌트의 state(상태)를 관리 할 수 있다. 상태에 따라 다른화면을 출력해준다. ●사용법: 리엑트에서 사용자의 반응에 따라, 화면을 바꿔주기(랜더링)위해 사용하는 트리거역할을 하는 변수. 리엑트가 state를 감시하고, 바뀐 정보에 따른 화면을 표시해준다. (state와 setState함수의 반환값을 비교) ex) import {userState} from "react" const [state, state변경함수] = useState(기본 State값); const [isloggedIn, setIsLoggedIn] = useState(false); ==>state 변경하기 state의 값을 기본값인 false에서 true로 변경한다 setIsLoggedIn(True); 2.use.. 공감수 0 댓글수 0 2023. 1. 29.
리덕스와 리듀서의 개념 프로젝트를 리엑트,타입스크립트,플라스크레스트엑스로 진행하게되었다. 리엑트부분에서 리덕스와 리듀서를 사용하게 되었는데 개념이 잘 정리가되지않아서 정리하게되었다. ● 리듀서(Reducer) ○ 이전 상태와 동작을 받아 새 상태를 리턴한다. ○ 외부의 데이터 구조를 변형하는 호출은 X ○ 기존의 상태를 변형하지않는 선에서 새상태를 리턴해준다. ○ 리듀서가 포함하고 있는 3가지는 다음과 같다. - Action(할 일을 정의) - 애플리케이션의 모든데이터를 저장하고있는 state - state와 action을 받아 새 상태를 리턴해주는 Reducer ● 리덕스(Redux) 1. 자바스크립트 상태관리 라이브러리이다. 2. 리덕스의 본질은 Node.js모듈 3. 리덕스에서는 상태를 저장소(store)에 보관한다. 4.. 공감수 0 댓글수 0 2023. 1. 19.
2023년 1월 5일 리액트 리덕스 개념정리 component가 store에 저장되어있는 정보를 가져와서 사용한다. 만약, component에서 값이 변경이되면, update되는 과정은 다음과같다. 1.component에서 dispatch를 통해 action으로 호출을한다. 2.action에 정의되어있는 내용이 reducer에의해 핸들링이되고 3.핸들링에 따라서 상태값이 store에 update가 된다. 4.update된 내용을 subscribe를 통해 실시간으로 받아와서 component에서 사용가능하다. dispath 출처:데브리님 유튜브. 공감수 0 댓글수 0 2023. 1. 5.

728x90

문의안내

티스토리
로그인
고객센터

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