TIL Diary

ㅇ HTML : 공간을 구분하고 필요 기능을 채움 iframe 안쪾에 표시되는 내용을 다른 html로 보이게 하는 도구ㅇ CSS : 데코레이션 (link로 불러옴) space-between 끝까지 떨어뜨리기ㅇ JS : 위에서 세세하게 다루지 못하던 기능 (script)

20230222TIL 이렇게 노션을 태그해서 넣으면 되는거였다...알고리즘 공부를 맛봤다.정수 n 의 약수의 총합을 구하는 솔루션 만들기.다시 해봐야겠다.

string(문자열) “” 안에 숫자도 문자number(숫자) 모든 숫자(실수)boolean : true || false 나타내는 자료형undefined, null, 0, nan : 변수선언했으나 값 할당 x cf. null: 임의로 비워둠, 0:거짓같은 값(나머지값:

3,5 = parameter(매개변수) ;입력dataimage.png함수의 선언식 기명함수 function add(a,b){retrun a+b}함수의 표현식 익명함수익명: 호이스팅의 영향 받지 않음(<>기명) const minus = function(a, b){

이벤트 핸들러 함수 - 이벤트 처리하거나 반응 어플리케이션 - 이벤트 타입& 대상 지정 → 이벤트핸들러 함수 등록 → 지정된 대상(HTML)에서 지정된 이벤트→함수 호출. ← 이벤트 핸들러가 발생 감지document.get~ID””.setAttribute(””,~)

CSS Basic Web BrowserCascading Style Sheet스타일& 레이아웃 담당선언 = 선택자{속성: 속성값;}인라인방식 속성 적용할 태그에 직접 입력 <div style~>분리된 css 파일 연결 tag{property: value;}Unti

20230221TIL

Untitleddisplay: grid; 적용시 요소의 구조 변화Untitledgrid-container : grid 레이아웃이 적용된 요소grid-item : 자식요소grid-line : grid item 사이의 경계grid-number : 몇번째 grid-line

\*JS 를 배우기 시작변수 , 상수, 데이터타입 , 기초프로그래밍 : 데이터 조작JS? : 데이터를 담고, 꺼내 쓰는 상자console.log()\-var (자주 사용하지 않음)\-let let box(변수명=유추하기쉽게);\-const. (상수 변수) :

HTML 문서 개념 D-Day 카운터 만들기t 어떤 기능을 수행하거나 계산을 수행하는 코드의 집합const sum(함수이름) = function(){ console.log(10 + 10); //실행할 코드 let result = 10 + 10; return result

for(최초식; 조건식; 증감문){//반복을 수행할 코드}최초식 let I = 0 조건식 i<10 증감문 i = i+1(i++)let I = 0;while(I<10){// 반복을 수행할 코드I = I + 1}\*종료조건 제대로 설정하지 않으면 무한 반복 배열

geolocation ; 현재 사용자의 위치값을 얻어올 수 있는 APIgetcurrentposition()메서드 안의 변수 함수 = 콜백함수Openweather map → openAPIJSON.parse() 응답 바디만 존재할때res.json(); 헤더 바디 다 존재해

3주간의 학습 중 1,2주차 복습 1주차 : PRECAMP ( 1 ~ 5 ) 2주차 : CSS ( 1 ~ 5 )앞으로의 다짐과. 각오싸이월드 메인 홈싸이월드 게임싸이월드 주크박스타이머회원가입일기장 만들기나의 쇼핑몰 VSCode를 설치, HTML의 기본적인 내용을

변수, 변수 선언 키워드, String&Number, 배열, 배열 메소드, 객체, 객체 메소드 함수, 데이터 비교, 조건문&논리연산자 JS로 HTML, CSS 조작, 반복문, interval, 인자와 매개변수, 브라우저 저장소 DOM조작, 이벤트, addEventLi

영타실력을 늘려라 단축키를 사용하라 코드리딩 실력을 키워라 ; 합칠 때 Node.js ?? 리액트를 위한 상식 폴더 만들기 React !! 프론트엔드의 시작 CSS html, css, javascript 이외의 JAVA, Python Javascript 를 브라우저

React를 배워야 하는 이유 1\. 가장 많은 사용자 수 2\. 하나를 배우면 웹, 안드로이드, IOS, 데스크톱을 동시에React 컴포넌트클래스형 컴포넌트 vs 함수형 컴포넌트React-Hooksstate,setState,useState 1\. useState로 S

HTTP 요청과 응답 API 종류 rest-API vs graphql   1\. 함수 이름   2\. 응답 결과물   3\. 설치해야 할 프로그램   API 응답 데이터 JSON   JSON?   jSON의 특징과 응답 헤더   API와 CRUD프론트엔드(요청;req

동기 실행 & 비동기 실행VScode에서 비동기(API요청)REST-API에서 동기/비동기 실행URL,URI,URN?호이스팅함수(function)의 호이스팅변수 선언 방식(var)의 호이스팅apollo-client 세팅\_app.jsapollo-client로 graph

목차 라우터 객체와 라우팅 정적 라우팅 & 동적 라우팅 심화 : push vs replace, pathname vs asPath, React 와 Next의 라우터 비동기 통신 & 조건부 렌더링 삼항 연산자 && 연산자 옵셔널 체이닝 심화 : optional chain

INDEX **다이나믹 라우팅 리뷰 폴더 구조 Nullish-coalescing 실무용 폴더 구조(container / presenter)** container/presentational 패턴 props props를 내려주기_부모 컴포넌트 props 받아오기 reac

Index **리액트의 데이터 흐름 emotion & Props state 리렌더 -리액트가 리렌더하는 방식 컴포넌트 안에서 router 사용시 주의점 주소를 설계하는 방법** 리액트의 데이터 흐름 단방향, 부모 -> 자식으로만 전달 props : 부모 컴포넌트

filterrefetchQuerieslibrary폴더의 utils 파일 관리컴포넌트 재사용성수정한 값만 바꿔주기defaultValue & state변경된 부분만 mutation 날려주기이름 그대로 배열의 원소를 필터링 해주는 메서드filter는 조건에 따라 배열의 길이

타입스크립트타입스크립트를 사용하는 이유, 사용 방법타입스크립트 파일 확장자&실습\-타입 추론\-타입스크립트 배열, 객체 실습엄격한 타입스크립트 strict\-타입으로 뭘 받는지 잘 모를 때API응답 데이터의 타입은 어떻게 할까?graphql-codegengraphql에

readOnly, early-exit타입스크립트 심화utility type & graphql - codegenhttps://velog.io/@creyon0215/2023.-3.-23 (이어서)Intro     readOnly? defaultValue와 같은

input value 초기화\-default value\-value이벤트 전파와 버블링규칙 정하기 \-코드린터(eslint) \-코드포맷터(prettier) \-husky Outroinput tag의 두 속성 defaultValue : input tag에서 처음

Index intro UI프레임워크,라이브러리(Ant-Design, Material-UI) 모달 State, Prev 캐러셀 이미지 (React-Slick) Intro "바퀴를 재발명 하지 마라" 이미 있는 기능을 구현하는데 시간을 쏟지 마라 => 시간절약, 버그 최

intro레이아웃 구조 잡기레이아웃 hidden 영역 설정App-Apollo분리글로벌 스타일 적용폰트폰트, 이미지 다운로드 과정& 확장자별 압축률, 경량화 폰트 등레이아웃? 없으면 복붙할 뻔?글로벌 스타일로 한방에폰트 바꿔보자app.tsx의 작동 원리?레이아웃은 뭘까?

페이지네이션state끌어올리기페이지처리를 하는 방법에는 크게 일반적인 방식, 무한스크롤 방식 2개가 있다. 페이지네이션이란 페이지 번호를 클릭해 이동하는 방식의 페이지 처리 방법이다.또한 이 방법은 게시판 형태의 페이지에서 가장 일반적으로 사용된다.페이지네이션은 쉬워보

index 객체&배열 복사(객체 복사, 스프레드 연산자, 깊은 복사, lodash, 배열 복사) 무한스크롤 객체, 배열 복사 복사? 얕은 복사(Shallow Copy) & 깊은 복사(Deep Copy) 복사의 기본 개념 복사본의 값 변경, 재할당 원본aaa 변

CLASS(.bind(this))Class 컴포넌트의 생명 주기(life cycle)함수형 컴포넌트의 life CycleuseEffect(componentDidMount, componentDidUpdate, componentWillUnmount)open-APIclass

INDEX Intro 1) openAPI끌어오기 2) DataBase(DB) - SQL, NoSQL 3) DB 관리 프로그램, DBeaver 4) 백엔드 서버 구축(Node.js에서 js실행, typescript실행, 프로젝트&DB연결(typeORM, DB-백엔드 연결

이미지 프로세스 총체적인 이해

Index 검색 프로세스 이해(ES, Redis 등) 검색버튼 없이 검색 시 발생하는 문제 디바운싱&쓰로틀링 Lodash 디바운싱 구현 Intro 검색 프로세스 이해(ES, Redis 등) 평소에 사용하는 웹 서비스의 검색은 어떻게 이루어질까? Browser에서

Index 컴포넌트, props, data, prev, el, graphql-variables의 실체 함수 관련 용어 rest-api의 문제점과 endpoint 언더페칭&오버페칭 graphql - restapi 의 관계 글로벌 스테이트 fetchPolicy Recoi

index 로그인(역사, JWT 로그인) 단방향 암호화(해싱), 양방향 암호화 토큰을 같이 보내주는 방법 JWT 토큰과 조작 불가능성 이해(회원가입, 로그인 진행, JWT이상한점) 로그인과 Recoil연결 새로고침 이후 재접속 과정의 이해 브라우저에 accessTok

INDEX HOF&로컬 스토리지를 활용한 기능 만들기 (예시 코드) 코드를 구현하며 쿠키, 로컬 스토리지, 세션 스토리지 중 어떤 것을 이용해도 좋다. 각 브라우저 저장소의 특성을 고려해 기획 의도에 적합한 저장소를 선택할 것 비회원 장바구니 기능 구현 1) fet

INDEX 카카오 맵 API, 구현, script 태그의 비동기 작동 이슈, 카카오 맵 커스텀(초기 위치 설정, 마커 추가), refetch의 문제점과 개선 방법 카카오 맵 API 검색창에 주소지를 입력하면? 보통 지도가 나타나고 지도를 통해 경로, 주소를 파악할

Index 웹에디터(React-quill), react-hook-form과 함께 사용, 크로스 사이트 스크립트, OWASP TOP 10, Hydration Issue 웹 에디터 (React-quill) 게시물 등록 페이지 : 작성자, 내용 담는 부분 필요 (inpu

Index 결제 프로세스(역사, 카드사, PG, 결제솔루션, 포인트) 외부API(아임포트) 사용 결제 프로세스 인터넷에서 결제를 통해 포인트를 충전하는 일반적인 과정 1) 브라우저에서 충전하기 버튼 클릭 2) 충전하기 창에서 원하는 금액 선택, 결제 진행 3) 개인

콜백과 비동기 처리나만의 axios매크로 태스크 큐 vs 마이크로 태스크 큐await과 마이크로큐의 관계콜백함수란? 함수의 인자로 들어가는 함수위와 같은 코드에서, aaa 함수의 인자에 들어가는 \*\*function(){}\*\*를 callback 함수라고 부른다.표

RefreshToken - 마이크로 서비스 아키텍쳐새로고침 시 토큰 유지promise&observableflatmapAccessToken 은 사용자의 로그인 정보를 담고 있는 JWT토큰 데이터, 로그인 인증/인가 과정은 ?AccessToken 데이터는 일정 시간 동안만

Index 성능최적화 - react developer tools memoization(useCallback,useMemo) map,memo(key-uuid?) CRP(Critical Rendering Path) Reflow, Repaint prefetch, preloa

스크래핑 vs 크롤링 scraping(스크래핑) 스크래핑을 한국어로 번역하면 ‘긁다’라는 뜻이 되는데, 이 의미처럼 ‘특정 사이트를 스크래핑을 한다’ 라고 하면 특정 사이트의 한 페이지를 쭉 긁어와 1번 가져오는 것을 뜻한다. crawling(크롤링) 크

테스트코드(jest)단위테스트 snapshot testTDD테스트코드 : 내가 만든 코드를 한번 더 검사하는 코드TDD : 기능도 없이 테스트?테스트라고하면 마우스로 클릭을 통해 api를 요청하는 작업같은 것들을 대신해주는 것버그잡는 과정을 테스트코드는 조금 더 수월하

Index 클라이언트 배포 기초(AWS 배포 흐름 & 역할, 배포 방식&데이터 흐름) 배포(Next.js 프로젝트 빌드, Trailing Slash, S3, 도메인 연결) 와이어샤크(SSL, HTTPS - 3wayhandshake, 4wayhandshake) HT

프론트엔드의 미래 & 나의 방향 웹 -> 모바일 웹 -> ReactNative, Flutter [크로스플랫폼] 코드를 직접 작성하는 것이 아니라 불러옴! 1) PWA : 모바일 앱의 기능을 웹서비스로 구현하는 것, 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수

Git을 협업에 알맞게, 커뮤니케이션에 유용하게, 깔끔한 가독성을 가지도록 사용하기 위해서 좋은 커밋 메시지를 사용하는 것이 중요하다. 그러기 위해서 커밋 컨벤션을 정리할 필요성이 있다.제목 ( Type: Subject )(한 줄 띄어 분리)본문 (Body)(한 줄 띄

git 협업하기

PWA

next 프로젝트를 진행하며 흔히 로그인을 구현하는 방식이라 하면 두가지를 말할 수 있다.세션 방식과 JWT 방식인데 로그인 방식을 입장권에 빗대고 로그인하는 웹 사이트를 영화관에 비유한다면세션 방식의 로그인은 입장권에 거의 아무런 정보도 없는 것이고 확인을 영화관에서

팀 프로젝트 진행중...우리는 ec2 프리티어 (기본형) 을 이용해우리의 웹사이트를 배포했고이제 프로젝트를 테스트성으로 build하는 과정에서용량 부족으로 인한 에러가 발생했다.단순히 용량이 큰 것이 문제였다.처음엔 빌드 명령어에 GENERATE_SOURCEMAP =

next.js 프로젝트를 pwa를 이용해 마켓에 배포하기 신청하는데까지 완료했다...아예 몰랐던 쪽이라 간단한 것도 꽤나 어려웠다.pwa빌더를 활용해 마켓 배포에 필요한 파일을 만들고(zip파일)거기 담긴 assetlink가 그렇게 중요한지도 몰랐다.assetlink