내가 보려고 쓰는 기록

드디어 타입스크립트 시작! 요즘 프론트엔드 채용공고에 아주아주 많이 보이기때문에 타입스크립트는 꼭꼭 공부해야겠다고 생각했었다. typescript란? javacript + type 문법 (자바스크립트 업글버전) 1. node.js 최신버전으로 설치 2. 터미널 오픈 후 npm install -g typescript 3. 작명.ts 파일 생성 4. tsconfig.json 파일 생성 후 아래의 코드 복붙 *컴파일시 옵션설정이 가능한 곳 { "compilerOptions": { "target": "es5", "module": "commonjs", "noImplicitAny": true, "strictNullChecks": true } } ts파일은 웹브라우저가 읽을 수 없다. 브라우저는 js만 읽을 수 있기..

CSR(클라이언트 사이드 렌더링) 이란? 클라이언트에서 렌더링 되는 것! HTML, CSS, JavaScript 파일이 클라이언트에게 전송되면 클라이언트에서 JavaScript(index.js)가 실행되고, 동적으로 페이지의 내용이 생성되고 렌더링된다. 클라이언트에서 데이터를 비동기적으로 가져와서 페이지를 업데이트하거나 추가적인 뷰 변경을 수행할 수 있다. 단점 - 사용자가 첫화면을 보기까지 시간이 오래걸림 SSR(서버 사이드 렌더링) 이란? 서버에서 렌더링 되는 것! 서버에서 이미 잘 만들어진 index.html을 받아온다. 클라이언트 요청 시에 서버는 필요한 데이터를 가져와서 완전한 HTML 페이지를 동적으로 생성하여 클라이언트에게 반환한다. 클라이언트는 받은 HTML을 단순히 표시하고, 추가적인 데..

var 학생1 = { name : 'Kim', age : 15 }; var 학생2 = { name : 'Park', age : 15 }; ... 반복되는 object를 계속 만드는 것은 너무 비효율적! constructor(생성자) 사용해서 오브젝트를 복사할 수 있다 //var 학생1 = { name : 'Kim', age : 15 }; function 기계(){ this.name = 'Kim'; this.age = 15; } constructor(생성자)를 오브젝트 복사 기계라고 생각하면 된다. function이라는 함수 키워드를 사용하면 되고 그 안에 this.name과 this.age를 넣으면 오브젝트 복사 기계가 완성 된다. this는 새로 생성되는 오브젝트를 뜻한다(멋진 개발자 용어로 인스턴스라..

redux안에 있는 state가 array/object 인 경우 원래 state가 array/object인 경우에는 복사본을 만들어서 수정해야하지만 redux 사용하는 경우 state 직접 수정해도 잘 변경 됨 (Redux 설치하면 자동으로 딸려오는 lmmer.js 라이브러리 때문! state 만들 때 문자나 숫자 하나만 필요해도 redux에선 일부러 array/object에 담는 경우도 있다고함 수정이 편리해서) 위의 array에서 count만 +1씩 증가하는 변경함수 만들고 싶으면? increase라는 함수 만들고 export 해서 *파라미터로 들어간 state는 state의 초기값 필요한 컴포넌트에서 import 하고 dispatch( ) 안에 increase 함수 넣으면 완성~ state 변경함수..

1. store 내에서 변경함수 만들기 let user = createSlice({ name:'user', //이름 initialState:'kim', //초기값 //변경함수 만들기 reducers:{ setUser(state){ //state : 기존 초기값 state를 의미 return 'john' + state } } }) 위의 코드에서 reducers : 이부분이 변경함수 만드는 곳 이다 reducers 안에서 setUser라는 이름의 변경함수 만들면 그 안의 return이 출력되는 것! 변경함수의 파라미터로 들어가있는 state는 초기값 ' kim '을 의미 2. 만든 변경함수 export 해야함 함수이름.actions 라고 쓰면 변경함수인 reducers가 남음 //export let {변경함..

◾ map 함수 array의 데이터 갯수만큼 가져오고 싶으면 i는 0부터 시작하는 정수로 i를 가지고 array를 인덱싱할 수 있음 array.map(function(a,i){ return( //반복하고 싶은 코드 블라블라 ) }); ◾ props 문법 ◾ router 리액트 페이지 나누는법 index.html만 사용함 1. 컴포넌트 만들어서 내용 채우고 2. /경로 접속하면 그 컴포넌트 보여줌 → 조건문 사용하기엔 너무 코드 길어져서 router 라이브러리 사용 라우츠 안에 라우터 라우터가 페이지 페이지도 컴포넌트로 만들면 좋음 Route element={여기에 컴포넌트 이름만 넣으면 코드 짧아지고 편함} 페이지 이동버튼은 태그 ◾ useNavigate, Outlet useNavigate( ) : 페이..

//브랜치 만들기 git branch test //브랜치로 이동 git switch test //브랜치 원격저장소에 올리기 git push origin test 협업을 할때는 브랜치를 merge하기 전에 코드를 확인해야함 Pull Request는 협업 프로젝트에서 변경사항을 다른사람(ex 상사)에게 검토받고 merge 하기 위해 사용되는 기능 1️⃣ 메뉴에서 Pull requests 선택하고 New pull request 클릭 2️⃣ merge할 브랜치 선택하고 commit 메시지 확인 후 Create pull request 클릭 3️⃣ create a merge commit squash and merge rebase and merge 세 옵션중 마음대로 택 1 결론 : 협업을 할때 브랜치를 만들고 me..

비밀번호는 반드시 안보이게 암호화 해야됨! 암호화 종류 암호화 복호화 암호화 방식 단방향 가능 불가능 해시 양방향 가능 가능 대칭키(비공개키) 비대칭키(공개키) 단방향 암호화를 일반적으로 사용한다 왜? 복호화할 수 없는 암호화 방법으로 암호문을 다시 원본 데이터로 복원하는 것은 매우 어렵거나 불가능하기 때문 단방향 암호하는 해시함수를 사용하는데 해시함수는 입력 데이터를 해시값으로 변환하여 원본 데이터를 숨기고 안전하게 저장하는 역할을 한다. *복호화 - 암호화된 문자열을 다시 원래 문자열로 돌려 놓는 것 *해시함수 - 입력데이터를 받아서 일정 길이의 해시값으로 변환하는 함수, 입력데이터의 작은 변화도 결과 값에 큰 차이를만들어 내는 것이 특징이며 동일한 입력에 대해서는 항상 동일한 해시값이 생성 Cryp..