코드캠프와 달려보자

CSS 마스터 자바스크립트 능력 및 알고리즘 풀이 능력 react, graphql 등 최신 기술 스택 활용 자유게시판, 중고마켓 포트폴리오 100% 프론트엔드 개발 지식 및 20% 백엔드 지식 졸업후는?? 스타트업및 it회사/프리랜서/스타트업/백엔드 취직 12층,13

배열 (array)나열된 여러개의 데이터들을 묶어서 저장대괄호로 묶고 , 로 구별, ""로 객체 구별배열.length기능을 사용하면배열 안에 몇개의 데이터가 있는지 확인할 수 있음중요!배열 안의 데이터들은 index 번호를 가지며 첫번째는 1이 아니라 0임length할

조건문 if()로 시작해서, 소괄호()안에 조건식이 들어간다. 조건식이 일치할경우 (=true) 로직이 실행된다. 조건식이 일치하지 않을 경우(=false) 에는 예외(else)문법의 로직이 실행된다. else 문법에 if를 추가로 적용할 수 있다. 이떄 반드시 소

너무나도 어려운 알고리즘 😭 공부하자 점수에 맞는 등급 계산하기 입력되는 score에 따라 알맞은 등급을 적어야 합니다. 100~90 → "A" 89~80 → "B" 79~70 → "C" 69~60 → "D" 59점 이하는 "F" 100점 초과나 0점 미만은 "잘못

2주 사이클 반복이니까 열심히.. 거짓, 조건부렌더링, 폴더구조 체계화, props, emotion props 코드 리딩 능력을 기르자 Optional chaining 조건을 더욱 간단히 표시해준 것 data && data.fetchProfile 앞에가 참일때

부정연산자 사용해보기 !을 앞에 붙이면 값의 반대가 됨 !True = False , !False = True, 그리고 키와 밸류가 같으면 생략할 수 있음 emotion 에서 쓰는건데 *을 써서 {}안에 넣지 않고 한번에 다 받을 수 있음 대신 이름을 붙여야됨 여기서

컴포넌트 재사용성 !!!!! 아주 중요함!!!! 이런 날짜를 구하는 함수를 만들어두면 다른페이지에서도 많이 쓰일 수 있다. commons/폴더에 만들기 수정하기 재사용 게시글 등록/수정도 똑같음 같은페이지의 component를 불러와서 약간 수정 후 등록페이지/

타입스크립트 타입스크립트? 자바스크립트의 타입을 강제시키는 언어 왜 타입을 강제시키는가?? 자바스크립트의 한계점을 극복하기 위함 자세한 설명은 https://typescript-kr.github.io/pages/tutorials/ts-for-the-new-program

early exit pattern 코드 유지보수에 도움 되는 패턴, 예외처리는 일치감치 return 으로 꺼버리기 이렇게 하지 않고 밑에 넣으면 너무 헷갈리고 유지하기 힘들다 return 기능은 아래 뭐가 있든 상관 없이 반환, 종료 해버리겠다. API 타입 스크립

State끌어올리기 https://reactjs-kr.firebaseapp.com/docs/lifting-state-up.html https://ko.reactjs.org/docs/lifting-state-up.html if(error instanceof Error)

모달 https://ant.design/components/modal/ 이렇게 쓰는 아이들이다. 누르면 알림창이 뜨는데 그걸 수정할 수 있다 modal-alert 만들기 짠 import를 한뒤 function 안에 붙여넣기를 하면 된다. modal -basic 모달 응용, 주소 넣어보기 한글 주소는 https:

페이지네이션 페이지네이션이란? 페이지를 넘겨서 출력해주는 기능을 의미함 실습 그런데 이렇게 하면 10번을 써야되니까 map을 활용해보자 이렇게 하고 이전페이지 다음페이지 기능은 어떻게 구현할까? 10개의 배열을 만들고 1로 채우는 함수 new Array(10).

State 끌어올리기 객체/배열 복사 무한 스크롤

오늘의 팁: CRUD 기반 기술을 익히고, 여기서 얼마나 더 재사용성이 높은, 간결한(리팩토링이 된) 백엔드의 개념까지 익히면 front-end에 있어서 좋다 + 오픈 api같은 것을 추가하면 더 좋음 컴포넌트 생명주기 백엔드 구조 이미지 업로드

프론트엔드 뿐만 아니고 백엔드까지 이해해야한다. 쉽게 말해서 프런트엔드상의 컴퓨터, 백엔드 컴퓨터, 데이터베이스에도 있는 컴퓨터를 생각해보고 작동구조와 원리를 이해하는것이 좋다. 웹서비스 구조 서비스를 위해선 총 세개의 컴퓨터(프로그램), 그리고 그걸 보기위한 컴퓨터

이미지 등록하기 브라우저에서 파일이 업로드 되는 과정을 알아야한다. 브라우저에서 파일을 업로드하면 (파일에 태그?) 백엔드서버에서 uploadFile을 통해서 데이터베이스가 아닌 storage에 저장이 된다. 그럼 storage에서는 주소를 준다 이후 백엔드에서

!! 이미지, 로그인, 배포 등은 가장 중요한 과정이니 프로세스를 잘 이해하는게 좋을 것 !!로그인이 어떻게 이루어지는지 과정을 알아보는 것이 중요하다브라우저에서 프런트엔드에 요청하면 HTML, CSS, JS를 가져온다데이터가 필요한부분은 백엔드로, 백엔드에서 DB를

권한분기와 관리자 로그인한사람과 안한사람, 운영자, 판매자, 구매자로 로그인한 사람들 또한 다르게 만들어줄 수 있다. 물론 페이지에서 if문으로 토큰여부를 확인해서 페이지를 다르게 보여줄 수 있지만 권한인증 페이지를 만들어서 import를 쓰는 것이 좋다. 이걸 실현하

여러가지 쿼리방식 Query기능이 단순 조회만 있는게 아니고 다양한 방식으로 쓰인다. UseQuery를 페이지가 열릴때만 불러오는게 아니라 버튼을 누르고나서나 특정 장소에 값을 담는데 쓰일수도 있다. useQuery, useLazyQuery, useApolloCli

구조분해할당(=비구조화할당) Disructuring name, age, school을 name, age, school이라는 박스에 담고싶다. 근데 이걸 축약시키는게 된다 이게 비구조화 할당, 구조분해할당이다 연습을 직접 해보자 (크롬 부라우저에서 간단하게 해볼

REST 파라미터 money랑 hobby를 지우고 싶다면?? 기존 지식으로는 이렇게 바꿀수는 있었지만 지우는건 몰랐음 > delete child.money delete child.hobby 이렇게 하면 지울 수 있음 , 자바스크립트에서는 완전 좋은 방법은 아님

웹에디터 https://www.npmjs.com/package/react-quill https://www.npmjs.com/package/react-draft-wysiwyg 대표적인 두가지 웹에디터다 여기서는 react-quill을 써보자 yarn add react-quill 그리고 페이지를 한번 만들어보자 컴포넌트를 import 해와야한다 ...

결제 또한 프론트엔드의 구현기능이고 굉장히 도움이 되는 기능이다. 꼭 알아두긔 결제 프로세스 구조 결제에는 일반결제, 정기결제가 있다 일반 결제 : 그냥 한번 내기 -> 카드 결제, 계좌이체, 무통장 입금, 모바일페이 정기 결제 : 구독서비스 같은거 (넷플릭스)

우리는 물론 카카오지도를 써보겠으나 구글, 네이버, 카카오 지도 세가지가 있다. 국내에서는 지금 카카오맵을 쓰는게 좀 더 부드럽다(구글의 경우는 조금 더 비쌈) 각각 사이트들은 개발자 사이트가 따로 있다. Meta의 개발자 사이트(페이스북) 네이버 개발자 사이

JWT토큰을 이용해서 accesstoken으로 사용했었음근데 토큰을 탈취해서 주인행세를 하는 사람에 대비해서 만료시간을 30분-2시간으로 설정해둠그래서 시간이 지나면 토큰이 만료되서 재로그인을 해야하거나 localstorage의 토큰을 삭제하고 다시 로그인을 해야했음근

이제 기본기능 + 성능개선 부분을 배우면 된다.방문한 페이지 기능게시판, 중고마켓, 마이페이지를 들어갔을 경우 저장하는 기능을 이렇게 만들 수 있고타입은 이렇슴getString에 철수를 담았고 result1안에 그 값을 담은 것.result1의 타입까지 설정하고싶다면이

FileReader자바스크립트에 있는 기능이다. 미리보기를 할 수 있지만 내 컴퓨터에 저장되는 거기 때문에 다른사람은 못본다. 이후 fileReader.readAsDataURL(파일) 을 하면 파일에서 URL을 만들어준다. fileReader.onload로 불러온다.그

state가 바뀌면 안의 컴포넌트가 다시 만들어지면서 화면이 다시 그려지는데그 안에 있는 자식, 변수, 함수는 다시만들어지나??이론상으로는 된다고 했는데 실제로 한번 보자 + 이게 메모가 되는가 <- 이걸 메모이제이션이라고한다한번 코드들을 통해서 보자 Cotain

Graphql의 실체 graphql도 사실은 Rest-api다??? rest-api사용할때를 생각해보자 게시글 조회 : axios.get(API주소) 게시물 등록 : axios.past(API주소, {데이터}) 그래서 api주소를 우리는 endpoint라고 불러

여태까지 yarn dev해서 우리컴퓨터에서 봤지만따로 서버로 쓸 컴퓨터를 쓰거나 만들어서 yarn dev를 시켜놓고 거기에 접속하면 된다. 근데 결정된 서버를 초과하는 사람들이 들어오면 서버를 늘려야하는데 서버 늘리는게 하루이틀안에 되는게 아니다 -> 그럼 우리가 빌려

배포의 기본프런트엔드(ssr) 다이나믹한 부분스토리지에 올릴 (ssg) 다이나믹 하지 않은 부분이걸 로드밸런서로 묶어서 프런트엔드로 배포해야한다.(이미 백엔드와 디비는 올라가져있음)그래서 로드 밸런서에 아이피가 달려있는데 아이피주소로 들어갈 수 없으니까 우리가 구입한

이름짓기프런ㅡ엔드구성을 ip및 포트로 만들기백엔드는 아까 만든 버킷을 연결하기인증서만들기구글관리 인증서 만들기도메인엔 내가구매한 도메인을 올림호스트 및 경로 규칙은 알아서 설정되어있음인증서를 들어가서 확인해보면 아직 도메인상태에 회색이 되어있음프로비저닝에 10-30분정

저번시간에 배포하면서 못마친게 있음 구글컴퓨터 왜 도커를 쓰는가

모바일과 웹의 가장 큰 차이는?1\. 주소의 유무웹 : 주소가 있음 그래서 웹은 내가 원하는 페이지를 그냥 주소를 쳐서 들어갈 수 있다앱 : 앱은 주소가 보이지 않음 못감(조금 더 어려움) 하지만 주소처럼 자동으로 넘어가서 원하는 페이지를 보이게는 할 수 있다. 주소만

React Native의 힘든점 디버깅이 힘들다!!그래서 크롬 디버거를 쓰는걸 추천한다. command + m또 네트워크 부분이 안보임 + 네트워크 부분을 보기 위해서는 react native flipper를 써야함이렇게 네트워크 부분도 확인 할 수 있게 된다. 주소가