성장하는 개발자가되자!
-
Vue.js 특징 및 차이점프론트엔드/Vue 2023. 9. 18. 14:54
기본정보 SPA(Single Page Application)기반 프레임워크이다. 페이지 전환없이 동적으로 콘텐츠를 로드/업데이트 하는 웹 어플리케이션이다. HTML마크업 기반의 템플릿 문법을 사용한다. 다른 프레임워크들처럼 CLI 툴을 제공한다. 단방향 데이터바인딩과 양방향 데이터바인딩을 모두 지원한다. 양방향 데이터 바인딩 - 뷰가 변경되면 모델도 변경, 모델이 변경되면 뷰도 변경되는 처리방식. 단방향데이터 바인딩 - 상대적으로 예측이 쉬워 코드가 더 안정적이지만 양방향 데이터바인딩에 비해 코드작성에 시간이 더 걸린다. Vue.js 장점 유연하고 쉽게 배울수 있다. 다른프레임워크에 비해 상대적으로 쉬운 학습곡선을 가지며, 간단한 문법과 유연성으로 빠르게 개발할 수 있다. 강력한 커뮤니티 및 생태계 : ..
-
리엑트 기본구조 및 작동프론트엔드/리엑트 2023. 9. 1. 17:33
구조 및 작동원리를 이해해서 효율적으로 코드를 작성해봐야겠다고 생각했다. -프로젝트 구조 현재 진행중인 프로젝트의 리엑트 구조이다. 아토믹 디자인을 최대한 활용하려고 해서, 컴포넌트, 타입, api, hook, util(axios)등 폴더를 따로 설정하여 import해오기로 했다. 리엑트 타입스크립트, 장고를 이용하여 팀 프로젝트를 진행중에 있다. root.tsx import Header from '../components/header' import { Outlet } from 'react-router-dom' const Root = () => { return ( {/* */} ) } export default Root 어플리케이션의 주요 레이아웃을 설정해준다. 헤더컴포넌트를 고정으로 상단에 설정해주어 ..
-
SCSS파일 index.scss로 관리해주기프론트엔드/HTML,CSS 2023. 8. 23. 15:49
개요 기존에 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..
-
CORS와 SOP란?개발/알아둘 기본 개념 2023. 8. 19. 12:56
CORS란? CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원들을 공유한다는 뜻. 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다. CORS는 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 어플리케이션은 리소스가 자신의 출처(도메인,프로토콜 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다. 출처란? 예를들어 , https://hunffy.github.io:123/abcd/svelte?page=4#orgin protocol Host Port. Path Query Fragment 생략가능 String 위의 구성 요소 중에서 ..
-
JWT란?개발/알아둘 기본 개념 2023. 8. 18. 19:51
JWT(Json Web Token)의 줄임말 으로써, 정보를 비밀리에 전달하거나, 인증할때 주로 사용하는 토큰으로, Json객체를 이용한다. 클라이언트와 서버사이에서 통신할 때 권한을 위해 사용하는 토큰이다. 웹에서 정보를 Json형태로 주고 받기 위해 표준규약에 따라 복잡하고 읽을수 없는 String형태로 생성한 암호화된 토큰으로 통신을한다. 구성요소 header , payload , signature 세 파트로 나뉘어져 구성되어있다. 헤더(header) 어떠한 알고리즘으로 암호화 할 것인지, 어떠한 토큰을 사용할 것 인지에 대한 정보가 들어있다. 정보(payload) 전달하려는 정보(사용자 id나 데이터들 이것들을 클레임이라고도 부른다)가 들어있다. 정보는 수정이 가능하여 더 많은 정보를 추가할 수 ..