TIL

오늘 배운 것 1. HTML HTML의 정의 block / inline 태그 2. CSS 선택자 박스 모델 flex position 1. HTML (Hyper Text Markup Language) 웹 페이지 구성 언어 태그(tag)를 통해 웹 페이지에 보여질 내

오늘 배운 것 1. Javascript Javascript 정의 변수와 상수 변수 선언 방법(var, let, const) 배열 (인덱스, 배열 메서드) 객체 (key, value) Javascript Javascript란? 작동방식은 이벤트가 발생(예: 클릭)

오늘 배운 것 1. Javascript 데이터 타입과 연산자 조건문 반복문 수학 객체 Dom 1. 데이터 타입과 연산자 데이터 타입 문자 : 영문과 한글. 따옴표로 감싸야 한다 숫자 boolean : true, false 객체 { } : 객체도 데이터 타입이다.

오늘 배운 것 1. Javascript 함수 (함수선언식, 함수표현식, 화살표함수) 내장함수 3:00 타이머 만들기 실습 1. 함수 함수는 Javascript에서 사용자가 직접 만들고 사용할 수 있는 기능이다. 함수 작성 방법 1) 함수 선언식 함수 이름을

오늘 배운 것 1. 이벤트 감지 2. 실습 3:00 타이머 만들기 (조건문 사용) 간단한 회원가입 창 (조건문 사용) 핸드폰 번호 입력 창 (focus) 3. Git과 Github 1. 이벤트 감지 페이지에 무언가 입력되거나 변경되었을 때 자바스크립트에서 이벤트가

오늘 배운 것 - CSS 1. CSS 정의와 작성법 2. CSS 적용 방식 3. 선택자 태그 선택자 id 선택자 class 선택자 자손 선택자 다중 선택자 전체 선택자 그룹 선택자 가상 클래스 선택자 4. font 기본 속성 5. 박스 모델 6. Inline 요소와

오늘 배운 것 - CSS 1. 가상 클래스 선택자 first-of-type active focus visited 2. 가상 요소 선택자 before after 3. 형제 요소 선택자 4. flex 추가 내용 flex-wrap align-content flex-flow 5. CSS 상속 6. 웹 폰트 7. font 속성 8. 단위 1. 가상 클래...

오늘 배운 것 - CSS 1. Cascading 캐스케이딩 (Cascading) 이란? 수 많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 css의 우선순위 적용 원리이다. Cascading 기준 1) 중요도 2) 구체성 (명시도) 3) 선언 순서 1) 중요도 CSS가 선언된 위치에 따라 우선순위가 결정된다. 브라우저 스타일 시트...

오늘 배운 것 - CSS 1. Transform 요소에 이동, 회전, 확대축소, 비틀기 등의 변형 효과를 줄 수 있다. transform 변환함수 1) translate(x,y) 요소의 좌표를 움직일 수 있다. x축으로 x만큼, y축으로 y만큼 이동시킨다. 양수/음수 입력이 가능하다. x/y축 한방향으로만 움직이고 싶을때는? translateX(n...

오늘 배운 것 - CSS 1. flex와 grid의 차이점 flex와 grid는 서로 다른 특징을 가지고 있기 때문에 상황에 따라 혼용한다. flex 비교적 작은 단위의 레이아웃 구성에 적합하다. 가로/세로로 한 방향으로만 쪼개서 구성을 짜줄 수 있고, 1차원 레

오늘 배운 것 - Javascript 변수와 변수 선언 방법 (var, let, const) 문자열 / 숫자열 데이터 타입 배열 객체 1. Javascript 란? Javascript는 Html,Css로 꾸며진 웹페이지를 동적으로 조작하기 위해 만들어진 프로그래밍 언어로서, 다양한 연산이 가능하다. server구축, streaming, game등 에도...

오늘 배운 것 - Javascript 1. 함수 2. 실습) D-day 카운터 만들기 input의 값 가져오기 new Date() : 현재시간을 알려주는 함수 (D-day - 현재시간) / 1000 = D-day까지의 시간 Math.floor()로 D-day까지의

오늘 배운 것 - Javascript 1. 파싱 과정 2. 반복분 for 문 while 문 for in 문 (객체) for of 문 (배열) 3. setTimeout() 4. setInterval() 5. clearInterval() 6. 매개변수, 전달인자 7. Web Storage Session Storage Local Storage 실습) D-...

오늘 배운 것 - Javascript 1. DOM (Document Object Model) 2. onkeydown 3. window.event 4. addEventListener 5. remove 6. Scope (스코프) 전역 스코프 지역 스코프 7. var

오늘 배운 것 - Javascript 1. Geo loaction 2. API 3. HTTP 4. 동기, 비동기 5. call stack, callback queue 6. Promise 객체 7. then(), catch() 8. 구조분해할당 9. spread 연산자

오늘 배운 것 Html, Css, Javascript 강의 복습 오늘의 회고 오늘은 지금까지 배운것을 모두 복습하는 날이었다. 마지막으로 간단한 테스트를 봤다.

오늘 배운 것 node.js node.js는 웹 페이지 밖, 로컬에서도 자바스크립트를 실행할 수 있는 실행기이다. Javascript 런타임 매니저 런타임이란, 프로그램이 실행되고 있는 환경을 의미한다. Javascript 런타임 매니저에는 npm, yarn이

React 여러 페이지들을 부품(Component)단위로 만들어 조립할 수 있다. State는 리액트 전용 변수 node_modules 폴더는 yarn install로 언제든지 설치 가능하다. -> 굳이 github에 업로드 안함 React.js 웹 React-Na

통신 전송 파일 : FTP 간단한 메일 : SMTP 텍스트/하이퍼텍스트(HTML) : HTTP HTTP 두 컴퓨터 간 텍스트 데이터를 주고받기 위한 통신규약이다. http 통신을 위한 프로그램 설치가 필요하다. request(요청)과 response(응답)이 있

오늘 배운 것 동기 / 비동기 1) 비동기 실행 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신으로 서버에 요청(등록, 수정, 삭제 등)이 저장될 때까지 기다리지 않고 다른 작업을 진행한다. 요청들이 서로 기다릴 필요 없을때, 여러가지 요청을 동시에 처

Routing 라우터(router) 객체란, 페이지 이동 및 주소와 관련된 기능을 가지고 있는 객체이다. router를 사용해서 A 페이지에서 B 페이지로 이동할 때, "B 페이지로 라우팅한다" 고 말한다. next.js에서 useRouter를 제공해준다. 정적

폴더 구조화 서비스의 규모가 커질수록 기능이 많아지기 때문에 폴더가 굉장히 많아지게 된다. 파일을 큰 그룹으로 묶어주면, 관련 기능이 모두 해당 폴더 안에 들어있기 때문에 유지보수에 유리하고 주소는 가독성이 좋아진다. 예시로 boards (게시판 기능)을 살펴보자

State 리렌더 setstate는 비동기로 작동한다. setState가 동기로 작동하게되면 변경될때마다 바로 바로 렌더링을 하기 때문에 비효율적이다. 따라서, 임시 저장소에 모아두었다가 코드를 끝까지 읽고 한번에 바꿔서 렌더링한다. > 📌 리렌더 되는 상황

library폴더의 utils 파일 관리 실무용 폴더구조로 Container, Presenter 방식으로 파일을 분리하고, styles, queries 파일 또한 분리해 주었다. 여기서 더 추가하여, 공통적으로 쓰이는 함수를 한 곳에 저장하여 사용할 수 있다. l

포트폴리오 수정 초기값 업데이트 수정하기 버튼을 눌렀을때 기존 내용 가져와 보여준다. 수정페이지에서 fetchBoard props로 write container에 넘겨준다. presenter에서 input태그에 defaultValue="" 적용 -> defaultV

포트폴리오 댓글기능 만들기 - 등록, 댓글 목록조회 (+ 별, 댓글수정, 댓글삭제) -> 게시글 변형해서 만들기 댓글 등록 비밀번호 필요 삭제 시 비밀번호 입력해야 삭제 가능하게 -> const mypassword = prompt("비밀번호를 입력해 주세요")

event.target.id없는 경우도 있음자식에 onClick이벤트가 있을 경우, 자식을 클릭할 경우 부모 까지 클릭이벤트가 전파된다.부모에 클릭이벤트가 있을 경우 click이벤트가 다중으로 발생함\-> 이벤트 전파에 의해 버블링이 발생함event.currentTar

라이브러리 가져와서 리팩토링하기UI 프레임워크시간절약버그 최소화라이브러리 사용 시 다운로드 수 확인하기설치yarn add antd아이콘 설치yarn add @ant-design/icons 아이콘은 글자\-> font-size 가능import "antd/dist/antd

react-player 라이브러리\-> width, height 옵션으로 (css 안됨)모달 오픈댓글 id 저장readonly : input 입력 불가defaultvalue : 초기값 / value : 고정값 \-> 초기값이 없고 나중에 값을 넣어주는 경우 value를

코드 리팩토링 Pagination Lifting-State-Up

페이지네이션 -> 컴포넌트로 분리 -> boardList.container에서 refetch를 props로 넘겨줌 -> fetchboardscount의 useQuery는 boardlist container에 작성 refetch는 pagination container

isEditdefaultvalue \-> el={props.el}defaultvalue 주기props.setIsEdit?.(false) : 수정하고 수정 화면 사라지게 하기\-> props.setIsEdit이 있으면(?.) false로 해줘 \-> BoardCommen

open API 사용 map : return이 있고 속도가 forEach 보다 느림 forEach : return이 없고 반복용, 속도가 map보다 빠름 -> forEach로 9번 요청 -> 기존에 있는 이미지를 덮어쓰게 되므로 setImgUrls에 prev와 스프

rest-api 서버 : expressgraphql-api 서버 : apollo-serverapollo-server, graphql 설치yarn add @apollo/server graphql서버API-Docs 타입API 함수하나의 함수로 실행하면 url이 만들어지고,

이미지 업로드

BoardWrite.containerBoardWrite.presenter이미지 uploads 폴더를 따로 분리해준다.onChangeFileUrls에서 index를 사용하는 이유\-> 이미지 등록 부분이 3개\-> fileUrls state에서 배열 안에 3개가 존재하기

검색어 결과 페이지 보여주기\-> 페이지네이션에서 boards count를 가져와서 count로 넘겨준다.페이지네이션, 검색창, 이미지 업로드 폴더 나누어주기count에는 page가 없음\--함수형 컴포넌트는 원래 함수prev도 매개변수이기 때문에 이름 변경이 가능하다

로그인 기능

로컬스토리지 저장 시 객체를 넣지 못하므로, JSON.strigify해서 문자열로 넣어주고,다시 가져올 때 JSON.parse해준다이렇게 하면 localstorage가 undefined 라고 오류가 발생한다.Next.js는 총 두 번 렌더링 된다.브라우저에서 주소를 입

폼 자동으로 만들기validation 라이브러리재사용을 위한 공통 컴포넌트 만들기

구조분해할당(비구조화할당)객체의 구조분해할당에서 순서는 중요하지 않다.대신, 이름(키 값)이 중요하다.배열의 구조분해할당에는 이름은 상관없지만, 배열이기 때문에 순서가 중요하다.\-> 사용하지 않는 변수는 ,를 사용해서 빈값을 입력해줘야 순서에 맞게 적용시킬 수 있다.

카카오 지도 연동하기import Head from "next/head";html의 Head부분에 적용됨script태그를 통해 다운로드 받으면 window에 저장된다.\-> window.kakao그러나, 다른 페이지에서 위의 코드가 있는 페이지로 버튼 클릭으로 이동시 k

텍스트 말고 웹에디터로 꾸미기react-quill 라이브러리설치yarn add react-quillreact-quill을 사용하면 pre-rendering으로 인한 document is not defined 문제가 발생함ssr: false\-> 프론트엔드 서버사이드에서

PG사 (Payment Gateway) 결제 대행사 <-> 카드사PG사마다 PDF를 만들어 가이드를 제공했으나, 너무 번거로움결제솔루션 : PG사로 부터 pdf를 받아 결제 API 코드를 만듦\-> 결제 연동이 편리해짐\-> 아임포트 / 부트페이브라우저에서 상품

callback함수 : 함수의 인자로 들어가는 함수api 요청 -> callback함수콜백 지옥코드 유지보수가 어렵다.콜백 지옥을 개선하기 위해 Promise가 나타남axios 요청\-> return 값이 new Promise()\-> 원래 .then, .catch을

refreshToken은 accessToken을 1시간마다 자동으로 인가해준다.accessToken을 만드는 과정에서 accessToken과 똑같지만, 2주 정도의 기간을 유지하는 refreshToken을 생성함accessToken은 payload로 전달, refres

countState를 버튼을 클릭해서 값을 변경하면 화면이 리렌더가 되면서 let으로 선언한 변수는 초기화가 된다.자식 컴포넌트가 return에 있을 경우, 부모가 리렌더 될때마다 자식도 같이 리렌더 되기 때문에 비효율적이다.useMemo로 변수를 기억한다.컴포넌트 리

페이지네이션에서 lastPage 계산 부분 -> useMemouseEffect에서 setState 부분이 있으면 useMemo로 변경해보기이미지 불러오기기존 이미지 업로드 방식을 효율적으로 개선브라우저에서 파일을 업로드 하고 백엔드에 전송 -> 백엔드에서 스토리지를 통

기능 구현시 테스트 코드는 필수클릭해주는 기능마우스로 클릭하는거 대신해주는 코드 작성API 요청 등버전 업데이트 시, 이전 버전에서 테스트하던 페이지에 문제가 발생 (현재 기능들과 연관된 페이지들)\-> 이전 버전의 버튼들을 다시 테스트 해봐야 함\-> 테스트 코드로

모바일 앱(React-Native) 보다 PWA를 사용하면 모바일 페이지를 쉽고 빠르게 효율적으로 만들 수 있다홈페이지 만들기모바일 웹 만들기모바일 웹에 PWA 추가\-> 앱을 다운로드 받지 않고 접속하기만 해도 바탕화면에 아이콘 생성, push알림, 로고, 오프라인