프론트엔드
[코드스테이츠]SEB FE 39 Section 3 회고
섹션 회고 - SEB FE 39 section 3 회고 1. 배운 것 1.1 커리큘럼 재귀함수 UI/UX Storybook Redux 상태관리 웹 표준 & 웹 접근성 네트워크 인증/보안 1.2 개인 공부 알고리즘 three.js axios 2. 느낀점 2.1 좋았던 점 슬럼프 탈출 개인프로젝트 시작 2.2 아쉬웠던 점 백엔드 코드 네트워크 지식 알고리즘 섹션2를 마치면서 회고를 작성할 땐 슬럼프가 심했었는데, 섹션 3때는 약간 해탈한 느낌이 되어버려서 과제가 아무리 어렵고 내용이 이해가 안되더라도 이전처럼 스트레스 받지는 않았다. 이해를 해서가 아니라 그냥 그러려니 하는 마음이랄까? 페어프로그래밍 전에 완벽하게 준비를 해야된다라는 강박을 내려놨다. 그냥 내 프로젝트에 커리큘럼에서 배운 걸 복습해보며 내 ..
12주 4일차 - Auth Basic
12주 4일차 - Auth Basic 1. 배운 것 2. 내용 정리 프록시란, 클라이언트와 서버 사이에 대리로 통신을 수행하는 것을 가리켜 ‘프록시(Proxy)’, 그 중계 기능을 하는 서버를 프록시 서버라고 합니다. 클라이언트, 혹은 반대로는 서버가 다른 네트워크에 간접적으로 접속할 수 있기 때문에, 보안, 캐싱을 통한 성능, 트래픽 분산 등의 장점을 가집니다. HTTPS 왜 HTTPS가 HTTP보다 안전한 지 이해한다. HTTPS의 암호화 방식에 대해 이해한다. HTTPS에서 사용하는 대칭키, 비대칭키 방식에 대해 이해한다. 직접 로컬에서 HTTPS 인증서를 발급할 수 있다. Hashing이 필요한 이유에 대해 이해한다. 데이터베이스에 유저의 비밀번호와 같이 민감한 정보를 평문으로 저장하지 않는 이유..
12주 3일차 - 네트워크, CRUD, Authentication
12주 3일차 - 네트워크, CRUD, Authentication 1. 배운 것 useEffect의 종속성 배열 복습 서버 api 구현방법 복습 2. 내용 정리 네트워크 체크리스트 Chapter1. TCP/IP 패킷교환 방식의 이점에 대해 이해한다. IP의 비순서성, 비신뢰성에 대해 이해한다. TCP의 3 way handshake 및 그와 비교되는 UDP에 대해 이해한다. Chapter2. 네트워크 계층 모델 네트워크 통신을 계층별로 나눈 이유에 대해 이해한다. 통신 과정에서 일어나는 데이터 캡슐화에 대해 이해한다. Chapter3. HTTP HTTP 메세지 구조를 이해한다. HTTP의 무상태성과 비연결성에 대해 이해한다. HTTP 헤더 중 바디를 설명하는 헤더인 표현헤더에 대해 이해한다. HTTP 헤더..
12주 2일차 - 웹 접근성, 서버 복습
12주 2일차 - 웹 접근성, 서버 복습 1. 배운 것 jsx 내에서 label태그의 for 속성은 htmlFor 로 써야 한다. for는 반복문이라서. 몽고디비 콜렉션, 모델, 스키마 클라이언트의 수정내용을 서버에도 반영하려면 build 다시 해준다. drop database가 안되는 경우 권한 설정 문제이다. 몽고디비 아틀라스 홈페이지에서 security 탭으로 가서 권한 변경하기. 2. 내용 정리 useEffect 복습 어떠한 상태(state)의 값이 바뀌었을때 동작할 함수를 작성할 수 있다. 첫번째 인자 콜백함수: 가장 처음에 앱이 실행될 때의 첫 렌더링 또는 state변경 후 재렌더링 종료시 실행됨. 두번째 인자 Dependency Array: 의존성 배열이다. 첫번째 매개변수인 함수가 두번째 ..
12주 1일차 - 데일리코딩 뜯어보기
12주 1일차 1. 배운 것 데일리코딩 12, 13 문제 레퍼런스 코드 이해 2. 내용 정리 12번 uglyNumbers const uglyNumbers = function (n) { const uglyNumArr = [1]; let idx2 = 0; let idx3 = 0; let idx5 = 0; for(let i = 0; i < n; i++) { const mulBy2 = uglyNumArr[idx2] * 2; const mulBy3 = uglyNumArr[idx3] * 3; const mulBy5 = uglyNumArr[idx5] * 5; let nextUglyNum = Math.min(mulBy2, mulBy3, mulBy5); // 나중에 중복을 제거하는 대신 미리 걸러서 // 오름차순으로 p..
11주차 마무리 - 힐링
1. 배운 것 styled-component 전역 스타일 적용 styled-component 구글 폰트 적용 column-gap, row-gap 2. 내용 정리 styled-component 전역 스타일 적용 참고: https://www.daleseo.com/styled-components-global-style // components > GlobalStyle.js import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Noto Sans KR', sans-ser..
11주차 토요일
11주차 토요일 1. 배운 것 mern스택 crud 연습 2. 내용 정리 [Express] res.sendFile 서버에서 응답으로 보내 줄 index.html 파일은 client에서 npm run build 하여 build 폴더에 압축된 index.html 파일을 보내주어야 한다. // client npm run build 클라이언트: 리액트 앱 빌드하기 서버: path모듈 설치 서버: static 폴더 사용하기 (app.use) path모듈 사용하면서 join메서드로 sendFile 경로지정. // server > server.js // npm i path const express = require('express'); const path = require('path'); const app = exp..
11주 4일차 - Cmarket Redux 2
11주 4일차 - Cmarket Redux 2 1. 배운 것 배열 메소드 콜백함수 축약 Array.prototype.fill() 2. 내용 정리 2.1 Cmarket Redux 과제 복습 reducer 함수는 항상 새로운 state를 반환해야 한다. 따라서 초기값이 원시값이면 그냥 복사본을 만들어서 복사본으로 값의 변경을 다루면 되고 객체일 경우 깊은복사한 복사본으로 값의 변경을 다룬다. 타입 값 으로 쓸 문자열을 변수화 해두는게 재사용성이 좋다. 할당을 안하고 useDispatch로는 사용 불가. 상태도 useState() 해줘야 쓸 수 있는 것처럼 디스패치도 가져와야 한다. Action src > actions > index.js : action 객체를 생성하는 함수를 정의한다. 프로퍼티의 key와 ..
11주 3일차 - Cmarket Redux 1
11주 3일차 - Cmarket Redux 1 1. 배운 것 2. 내용 정리 Redux 사용시 리액트 앱 파일 구조 src > store > index.js src 폴더의 하위 폴더로 리덕스 관련 코드 파일을 저장할 store 폴더를 생성하고 index.js 파일을 생성하여 리덕스 관련 로직들을 관리한다. index.js에서 store 생성, reducer 함수 정의. (참고 강의와 다르게 과제 코드는 reducer와 store 별도 폴더로 분리됨. 미들웨어 사용 때문인지?) Store 제공하기 src > index.js render함수 안에서 App 컴포넌트를 Provider 컴포넌트로 감싼다. (전역 상태를 관리하기 위해 App 컴포넌트를 감싼다.) 이 때 Provider 컴포넌트의 속성으로 반드시 ..
11주 1일차 - react custom components 리팩토링, BFS
11주 1일차 - react custom components 리팩토링, BFS 1. 배운 것 css - transition onFocus, onBlur 데일리코딩 8번 - BFS 트리 순회 종합 퀴즈 7번 - styled component 재사용 2. 내용 정리 onFucus: 포커싱 된 경우 이벤트 설정 onBlur: 포커싱 해제된 경우 이벤트 설정 데일리코딩 8번 - BFS 트리 순회 let bfs = function (node) { let queue = [node]; // root(시작 노드)를 배열에 넣은 상태로 큐를 선언, 초기화. const visitedNodeValues = []; // 방문한 노드의 정보를 담을 배열 선언. while (queue.length > 0) { // 큐에 요소가 ..