코드캠프 22일)JWT를 처음보고 존맛탱으로 읽은 저를 개발자로 키워주고 계셔서 감사합니다/Token/Encoded/ Decoded Code-Camp FE 6기 간략히 요약하면, Backend는 어떤 사람이 api를 요청하는지 알 수 없기 때문에 유저의 모든 api 요청에 accessToken을 함께 보내줬습니다! 이 토큰을 받은 Backend는 accessToken을 열어서 그 안에있는 객체(JSON)의 내용물을 보고 누가 요청을 한건지 구분 할 수 있던 것이였습니다! 이 방식으로 Browser에서 요청이 들어오면 더 이상 DB에서 토큰을 찾지 않... 코딩부트캠프개발자취업accesstokenJWTauthorization코드캠프Hashing프론트엔드개발자EncodedbearerjsonDecoded코딩Decoded [코드캠프 5주차]권한 분기 권한 분기란 말 그대로 권한에 따라서 화면을 렌더링 해주는 페이지를 분기 한다는 뜻이다. 로그인페이지를 구현했다면 생각해야 하는것이 관리자 권한을 가진 사람은 어떤 페이지를 보여줘야 하는지, 허용된 페이지가 아니라면 어떻게 처리해줘야 하는지를 생각해야 한다. 작게는 비회원, 회원 크게는 비회원, 구매자, 판매자, 관리자 등등 여러가지의 회원 유형이 있을수 있고 해당 회원마다 볼수있는 페이지의... 코드캠프코드캠프 [코드캠프 5주차]React HOC vs HOF HOF 는 고차 함수 이다. 고차 함수는 함수를 인수로 취하고 새로운 함수를 반환 하는 함수 이다. 자바스크립트의 함수는 일급 객체이다. 함수를 하나의 변수로 사용할 수도 있거나,파라미터로 사용할 수도 있고 리턴도 할 수 있기 때문에 자바스크립에서 함수는 일급 객체 이다. HOF 는 High Order Function 의 줄임말이다. 간단한 코드 설명을 붙여보자면, aaa라는 함수를 선언만 ... 코드캠프코드캠프 20) 검색할때 바로바로 안걸러주면 한국인은 답답해서 못살아 🤯 검색 프로세스 이해, Tokenizing, inverted index.. Debouncing / Throttling 원두멘토님의 열정을 이어받아 다 이해한날 !!!!!! 먼저, 백엔드의 검색 시스템 구조에는 가장 기본적으로 테이블을 풀 스캔하는 방식(full table scan)으로 전체 테이블 로우를 조회하는 방법이 있었습니다! 이 방법을 개선하기 위해 데이터베이스에 저장할 때, 문장을 키워드 단위로 토크나이징(컴퓨터에게 이해 시키기 위해 우리의 언어를 의미가 있는 가장 작은 단어로 나누는 것)하고, 역인덱스(inverted index)를 만들어서 저장했습... 쓰로틀링table fullscanDebouncing개발자메모리기반 데이터 베이스replaceAll토크나이징elasticsearchuuid코딩부트캠프검색프로세스개발자취업역색인프론트엔드Throttlinginverted index디스크기반 데이터 베이스코드캠프tokenizing디바운싱lodash코딩Debouncing [코드캠프 5주차]React Currting 커링(Currying) 기법은 인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법이다. 간단한 설명을 위해서 아래의 코드를 예시로 들자면 간단하게 단어와 이름을 파라미터로 받아서 콘솔로 찍어주는 함수가 있다. 이 함수에서 커링의 개념을 접목시켜 본다면 아래와 같이 될것 이다. 즉 helloFunc 에서 하나의 hello 라는 인자값만 받고 변수에 함수를 할당 하고, 함수... 코드캠프코드캠프 5) 오오..라우팅..조건부렌더링..graphql... 이게 되네 ... (Code Camp FE 6기) 이동된 페이지에서 router.query를 활용하여 게시물ID 또는 게시물 번호를 가져올 수도 있었어요! 또한, 가져온 게시물ID와 게시물번호를 활용하여 데이터를 조회했습니다! 하지만 이로 인해 발생하는 문제가 있었고, 이를 해결하기 위해 조건부 렌더링을 사용했습니다. 조건부 렌더링에는 &&연산자와 삼항연산자를 사용하는 방법이 있었죠? 또한, &&연산자를 사용하는 경우엔, 옵셔널체이닝을 사용... graphql mutation조건부렌더링코딩부트캠프tryCatch개발자취업코드캠프비동기 통신연산자개발자templete literalrouteroptional chainingApollo client삼항연산자routing코딩Apollo client 코드캠프 6일차 실무적인 폴더구조(Container/Presenter) 컴포넌트분리 및 데이터전달(Props) 둘다 값이 비어있음을 나타낸다. null은 개발자가 일부러 해당 부분을 비웠음을 의미하는 암묵적 룰로 사용되며 폴더구조 체계화 여러 사람들이 사용할 경우 필요한 부분을 찾기 힘들고 읽기가 힘들어진다. 그렇게 때문에 폴더구조를 바꿔주어 이를 해결한다. 컴포넌트분리 및 데이터전달 Container/Pr... setStatePropscontainer/presenter코드캠프폴더구조Props [코드캠프 2주차]Map,Filter 흔히 For문으로 통한 반복문 보다 JS에서는 Map 함수를 사용하는 것이 훨씬 더 유용하다. Map 함수의 뜻은 각각의 element들을 Mapping 해서 값을 배열해 준다는 것과 같다. For문에서는 값을 return을 해줄수 없지만 Map에서는 값을 리턴해 줄수 있다. 또한 JSX 또한 함께 return 해줄수 있다! 주로 For문으로 원본배열을 강제로 push 해서 원본의 배열을 수... 코드캠프코드캠프 코드캠프 8일차 new Date() = 현재날짜를 가져오는 내장함수 getMonth는 0부터 시작하기에 +1을해준다. 같은 방법으로 날짜를 지정해도 가능하다. 하나의 컴포넌트 가 있고 페이지가 두 개 있을 때 props로 내보내주는 값에 의해 컴포넌트의 값을 조절할 수 있다.... 코드캠프코드캠프 220401 TIL 코드캠프 백엔드2기 15일차 벌써 15일 차이다. 많은 인풋들이 여전히 헷갈리고 어렵당. 그중에서도 여전히 작은 설정들로 애를 먹고 있다. ESLint : Delete cr eslint(prettier/prettier) 발생하며 빨간줄 Nestjs 설치하면 기본적으로 ESLint 와 Prettier가 설치 되어 있다. 이게 개발자들끼리 협력할 때 코드를 획일화 하기 위함이라고 한다. 그런데 ... 코드캠프gitESLintTILESLint [코드캠프 벨류업]Scope 스코프란 영어의 뜻으로 범위라는 뜻을 가지고 있다. 즉 JS에서는 변수에 접근할수 있는 범위라고 생각하면 편하다. 자바스크립트에서는 Global(전역)과 local(지역)이 있다. 전역 스코프는 말그대로 전역에서 어느 곳에서든 해당 변수에 접근이 가능한 범위 이다. 가장 최상위에서 변수를 선언함 으로써 어느곳에서나 해당 변수에 접근이 가능하다. 지역 스코프는 해당 지역에서만 접근할 수가 있어... 코드캠프 벨류업코드캠프코드캠프 [코드캠프 4주차]State LifeCycle 쉽게 생명주기를 생각했을떄 1.render(그리기) 2.componentDidMount(그리고 난뒤) 3.componentDidUpdate(그리고 난 뒤 변경됬때) 4.componentWillUnmount(그리고 난뒤 사라질때) 이렇게 총 크게 4가지로 구분이 된다. 가장먼저 화면에 렌더가 진행되고,componentDidMount 에서 최초 1회 실행을 해주며,componentDidUpdat... 코드캠프코드캠프 코드캠프 4주 1일차 Class-Component Class-Component class component-Lifecycle react에서는 주로 Component기능 안에서 사용할 때 사용한다. 또한 this는 실행시킨 대상에 따라 값이 달라지며 동적 스코프 라고도 한다. 즉 this는 실행하는 요소/환경 에 따라 값이 변하며 이를 언어적으로 통합하기위해선 화살표함수를 사용하며 혹은 .bind(this)를 통해... 코드캠프코드캠프 웹 에디터 try{}~ catch(){}~ finally{}: 실패했든 성공했든 마지막에 실행을 하고 끝낸다 yarn add react-quill import 'react-quill/dist/quill.snow.css'; next에서 사용할 때 FE에서 한번 그리고 Br에서 한번 그리기때문에 Fe에서는 html이 없어서 에러가 발생한다. 이를 위해서 Dynamic Import를 이용해서 ssr(serv... TIL코드캠프TIL [TIL] 9월 8일 파일의 컴포넌트화 기존에 폴더구조를 (container/presenter ) 구조로 변경한 내용을 기반으로 실습을 하였다. 하나의 페이지로 2개의 페이지 만들기 (등록하기, 수정하기) 기존 포트폴리오 과제에서 등록하기 페이지를 구현했다. 이페이지와 동일한 레이아웃을 가지고 있는 수정하기 페이지를 하나더 만들어야 한다. 먼저 등록하기 페이지의 폴더구조를 보면 src>components>commons>units>... CodeCamp코드캠프CodeCamp 코드캠프 Day 13 잠과의 싸움이다. 월요일 화요일은 버틸만한데, 수요일부턴... 힘들다... 알고리즘 테스트가 있었다. 문제를 풀다가 약간 위기를 느끼긴 했지만? 무사히 해냈다. 레이아웃과 글로벌 스타일, 폰트, 배너(캐러셀)을 배웠다. 페이지 전역적으로 쓰이는 레이아웃을 만들어서 app.tsx에 지정해놓으면 어느 페이지에 들어가도 같은 레이아웃을 볼 수 있었다. 만약 특정 페이지에서는 보이지 않기를 원하면 ... TIL코드캠프TIL React와 기타 등등 캠프시작 1일차 오전까지만 해도 구멍이 뚫려 침몰해가는 통나무배에 탄 기분이었는데, 오후에 갑자기 대형 선박이 오더니 나를 구출해 줬다. 조금의 도움을 받으니 통나무배가 아닌 카누였던 것 같기도..! 아직은 복잡한 머릿속이라 코드를 짜며 의문인 점과 궁금한 점 위주로 적고 완벽 이해하기! 1. 이미지 태그걸기 1) 이미지를 넣을 때 상위 폴더 링크를 따오는 ../ 이 부분 명확하게 이해하기 ... terminal코드캠프FlexReactFlex {코딩일기 4일차🦾} 오늘 학습한 내용 🎁동기와 비동기 동기는 응답이 모두 끝난후 요청을 하는것이다. 비동기는 응답과 동시에 요청을 하는것이다. Javascript는 비동기방식으로 운용된다. 또한 이메일 전송이나 게임 다운 받으면서 카톡하는 경우는 비동기방식이다. 🎁비동기를 동기로 바꿔주는 명령어 🎁Git hub에 올리는법 git add. git commit -m '아무말' git pull origin maste... 부트캠프코드캠프TLTTLT
22일)JWT를 처음보고 존맛탱으로 읽은 저를 개발자로 키워주고 계셔서 감사합니다/Token/Encoded/ Decoded Code-Camp FE 6기 간략히 요약하면, Backend는 어떤 사람이 api를 요청하는지 알 수 없기 때문에 유저의 모든 api 요청에 accessToken을 함께 보내줬습니다! 이 토큰을 받은 Backend는 accessToken을 열어서 그 안에있는 객체(JSON)의 내용물을 보고 누가 요청을 한건지 구분 할 수 있던 것이였습니다! 이 방식으로 Browser에서 요청이 들어오면 더 이상 DB에서 토큰을 찾지 않... 코딩부트캠프개발자취업accesstokenJWTauthorization코드캠프Hashing프론트엔드개발자EncodedbearerjsonDecoded코딩Decoded [코드캠프 5주차]권한 분기 권한 분기란 말 그대로 권한에 따라서 화면을 렌더링 해주는 페이지를 분기 한다는 뜻이다. 로그인페이지를 구현했다면 생각해야 하는것이 관리자 권한을 가진 사람은 어떤 페이지를 보여줘야 하는지, 허용된 페이지가 아니라면 어떻게 처리해줘야 하는지를 생각해야 한다. 작게는 비회원, 회원 크게는 비회원, 구매자, 판매자, 관리자 등등 여러가지의 회원 유형이 있을수 있고 해당 회원마다 볼수있는 페이지의... 코드캠프코드캠프 [코드캠프 5주차]React HOC vs HOF HOF 는 고차 함수 이다. 고차 함수는 함수를 인수로 취하고 새로운 함수를 반환 하는 함수 이다. 자바스크립트의 함수는 일급 객체이다. 함수를 하나의 변수로 사용할 수도 있거나,파라미터로 사용할 수도 있고 리턴도 할 수 있기 때문에 자바스크립에서 함수는 일급 객체 이다. HOF 는 High Order Function 의 줄임말이다. 간단한 코드 설명을 붙여보자면, aaa라는 함수를 선언만 ... 코드캠프코드캠프 20) 검색할때 바로바로 안걸러주면 한국인은 답답해서 못살아 🤯 검색 프로세스 이해, Tokenizing, inverted index.. Debouncing / Throttling 원두멘토님의 열정을 이어받아 다 이해한날 !!!!!! 먼저, 백엔드의 검색 시스템 구조에는 가장 기본적으로 테이블을 풀 스캔하는 방식(full table scan)으로 전체 테이블 로우를 조회하는 방법이 있었습니다! 이 방법을 개선하기 위해 데이터베이스에 저장할 때, 문장을 키워드 단위로 토크나이징(컴퓨터에게 이해 시키기 위해 우리의 언어를 의미가 있는 가장 작은 단어로 나누는 것)하고, 역인덱스(inverted index)를 만들어서 저장했습... 쓰로틀링table fullscanDebouncing개발자메모리기반 데이터 베이스replaceAll토크나이징elasticsearchuuid코딩부트캠프검색프로세스개발자취업역색인프론트엔드Throttlinginverted index디스크기반 데이터 베이스코드캠프tokenizing디바운싱lodash코딩Debouncing [코드캠프 5주차]React Currting 커링(Currying) 기법은 인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법이다. 간단한 설명을 위해서 아래의 코드를 예시로 들자면 간단하게 단어와 이름을 파라미터로 받아서 콘솔로 찍어주는 함수가 있다. 이 함수에서 커링의 개념을 접목시켜 본다면 아래와 같이 될것 이다. 즉 helloFunc 에서 하나의 hello 라는 인자값만 받고 변수에 함수를 할당 하고, 함수... 코드캠프코드캠프 5) 오오..라우팅..조건부렌더링..graphql... 이게 되네 ... (Code Camp FE 6기) 이동된 페이지에서 router.query를 활용하여 게시물ID 또는 게시물 번호를 가져올 수도 있었어요! 또한, 가져온 게시물ID와 게시물번호를 활용하여 데이터를 조회했습니다! 하지만 이로 인해 발생하는 문제가 있었고, 이를 해결하기 위해 조건부 렌더링을 사용했습니다. 조건부 렌더링에는 &&연산자와 삼항연산자를 사용하는 방법이 있었죠? 또한, &&연산자를 사용하는 경우엔, 옵셔널체이닝을 사용... graphql mutation조건부렌더링코딩부트캠프tryCatch개발자취업코드캠프비동기 통신연산자개발자templete literalrouteroptional chainingApollo client삼항연산자routing코딩Apollo client 코드캠프 6일차 실무적인 폴더구조(Container/Presenter) 컴포넌트분리 및 데이터전달(Props) 둘다 값이 비어있음을 나타낸다. null은 개발자가 일부러 해당 부분을 비웠음을 의미하는 암묵적 룰로 사용되며 폴더구조 체계화 여러 사람들이 사용할 경우 필요한 부분을 찾기 힘들고 읽기가 힘들어진다. 그렇게 때문에 폴더구조를 바꿔주어 이를 해결한다. 컴포넌트분리 및 데이터전달 Container/Pr... setStatePropscontainer/presenter코드캠프폴더구조Props [코드캠프 2주차]Map,Filter 흔히 For문으로 통한 반복문 보다 JS에서는 Map 함수를 사용하는 것이 훨씬 더 유용하다. Map 함수의 뜻은 각각의 element들을 Mapping 해서 값을 배열해 준다는 것과 같다. For문에서는 값을 return을 해줄수 없지만 Map에서는 값을 리턴해 줄수 있다. 또한 JSX 또한 함께 return 해줄수 있다! 주로 For문으로 원본배열을 강제로 push 해서 원본의 배열을 수... 코드캠프코드캠프 코드캠프 8일차 new Date() = 현재날짜를 가져오는 내장함수 getMonth는 0부터 시작하기에 +1을해준다. 같은 방법으로 날짜를 지정해도 가능하다. 하나의 컴포넌트 가 있고 페이지가 두 개 있을 때 props로 내보내주는 값에 의해 컴포넌트의 값을 조절할 수 있다.... 코드캠프코드캠프 220401 TIL 코드캠프 백엔드2기 15일차 벌써 15일 차이다. 많은 인풋들이 여전히 헷갈리고 어렵당. 그중에서도 여전히 작은 설정들로 애를 먹고 있다. ESLint : Delete cr eslint(prettier/prettier) 발생하며 빨간줄 Nestjs 설치하면 기본적으로 ESLint 와 Prettier가 설치 되어 있다. 이게 개발자들끼리 협력할 때 코드를 획일화 하기 위함이라고 한다. 그런데 ... 코드캠프gitESLintTILESLint [코드캠프 벨류업]Scope 스코프란 영어의 뜻으로 범위라는 뜻을 가지고 있다. 즉 JS에서는 변수에 접근할수 있는 범위라고 생각하면 편하다. 자바스크립트에서는 Global(전역)과 local(지역)이 있다. 전역 스코프는 말그대로 전역에서 어느 곳에서든 해당 변수에 접근이 가능한 범위 이다. 가장 최상위에서 변수를 선언함 으로써 어느곳에서나 해당 변수에 접근이 가능하다. 지역 스코프는 해당 지역에서만 접근할 수가 있어... 코드캠프 벨류업코드캠프코드캠프 [코드캠프 4주차]State LifeCycle 쉽게 생명주기를 생각했을떄 1.render(그리기) 2.componentDidMount(그리고 난뒤) 3.componentDidUpdate(그리고 난 뒤 변경됬때) 4.componentWillUnmount(그리고 난뒤 사라질때) 이렇게 총 크게 4가지로 구분이 된다. 가장먼저 화면에 렌더가 진행되고,componentDidMount 에서 최초 1회 실행을 해주며,componentDidUpdat... 코드캠프코드캠프 코드캠프 4주 1일차 Class-Component Class-Component class component-Lifecycle react에서는 주로 Component기능 안에서 사용할 때 사용한다. 또한 this는 실행시킨 대상에 따라 값이 달라지며 동적 스코프 라고도 한다. 즉 this는 실행하는 요소/환경 에 따라 값이 변하며 이를 언어적으로 통합하기위해선 화살표함수를 사용하며 혹은 .bind(this)를 통해... 코드캠프코드캠프 웹 에디터 try{}~ catch(){}~ finally{}: 실패했든 성공했든 마지막에 실행을 하고 끝낸다 yarn add react-quill import 'react-quill/dist/quill.snow.css'; next에서 사용할 때 FE에서 한번 그리고 Br에서 한번 그리기때문에 Fe에서는 html이 없어서 에러가 발생한다. 이를 위해서 Dynamic Import를 이용해서 ssr(serv... TIL코드캠프TIL [TIL] 9월 8일 파일의 컴포넌트화 기존에 폴더구조를 (container/presenter ) 구조로 변경한 내용을 기반으로 실습을 하였다. 하나의 페이지로 2개의 페이지 만들기 (등록하기, 수정하기) 기존 포트폴리오 과제에서 등록하기 페이지를 구현했다. 이페이지와 동일한 레이아웃을 가지고 있는 수정하기 페이지를 하나더 만들어야 한다. 먼저 등록하기 페이지의 폴더구조를 보면 src>components>commons>units>... CodeCamp코드캠프CodeCamp 코드캠프 Day 13 잠과의 싸움이다. 월요일 화요일은 버틸만한데, 수요일부턴... 힘들다... 알고리즘 테스트가 있었다. 문제를 풀다가 약간 위기를 느끼긴 했지만? 무사히 해냈다. 레이아웃과 글로벌 스타일, 폰트, 배너(캐러셀)을 배웠다. 페이지 전역적으로 쓰이는 레이아웃을 만들어서 app.tsx에 지정해놓으면 어느 페이지에 들어가도 같은 레이아웃을 볼 수 있었다. 만약 특정 페이지에서는 보이지 않기를 원하면 ... TIL코드캠프TIL React와 기타 등등 캠프시작 1일차 오전까지만 해도 구멍이 뚫려 침몰해가는 통나무배에 탄 기분이었는데, 오후에 갑자기 대형 선박이 오더니 나를 구출해 줬다. 조금의 도움을 받으니 통나무배가 아닌 카누였던 것 같기도..! 아직은 복잡한 머릿속이라 코드를 짜며 의문인 점과 궁금한 점 위주로 적고 완벽 이해하기! 1. 이미지 태그걸기 1) 이미지를 넣을 때 상위 폴더 링크를 따오는 ../ 이 부분 명확하게 이해하기 ... terminal코드캠프FlexReactFlex {코딩일기 4일차🦾} 오늘 학습한 내용 🎁동기와 비동기 동기는 응답이 모두 끝난후 요청을 하는것이다. 비동기는 응답과 동시에 요청을 하는것이다. Javascript는 비동기방식으로 운용된다. 또한 이메일 전송이나 게임 다운 받으면서 카톡하는 경우는 비동기방식이다. 🎁비동기를 동기로 바꿔주는 명령어 🎁Git hub에 올리는법 git add. git commit -m '아무말' git pull origin maste... 부트캠프코드캠프TLTTLT