프론트엔드 [패스트캠퍼스 FE MGS 3기] - 5일차 HTMl의 기본구조 HTML의 규칙들 HTML → 구조적인 객체를 정적으로 찍어냄 JS → 데이터에 대해 반복, 비교, 평가, 저장하는 일들이 가능 함수 (function) → 일단 만들어만 놓고 실행은 ()문에서 됨. 자바스크립트 변수 별 특징 const : 변하지 않을 것들 let, var : 변할 것들 프로토 타입 객체 자바스크립트에서 모든 생성자는 모든 프로토타입 객체를 가지고 있음 ... 패스트캠퍼스outlinehtmljs메가바이트스쿨프론트엔드html [패스트캠퍼스 프론트엔드 과정] 5~10일차(2주차 - 2022.04.15~20) 시맨틱 웹이란 무엇인가? 시맨틱 웹은 의미로 적인 웹이라는 뜻으로 웹 상의 정보에 잘 정의된 의미 를 부여함으로써 사람뿐만 아니라 컴퓨터도 쉽게 문서의 의미를 자동화 하여 처리 할 수 있도록 한 것이다. 시맨틱 웹의 목적 시맨틱 웹의 목적은 검색엔진이 크롤링 할 때 , HTML 코드 만으로 그 의미를 인지하게 하기 위함이다. HTML 로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사... WIL국비지원프론트엔드WIL 웹 개발일지-4주차 1일차 (서버) 우선 파이참에 flask 패키지를 설치한다. 많은 개발자들이 서버를 만들 때 프레임워크를 가져다 쓴다. 남이 짜둔 규칙 아래에서 틀 안에서 코딩을 자유롭게 하는 것. 라이브러리-내가 내 맘대로 짜는데 남이 만들어 둔 것을 안에다가 가져다 쓰는 것 프레임워크는 1개를 가져와서 짜고 그 안의 라이브러리는 100개든 1000개이든 쓸 수 있는 것. -> 내가 지금 내 컴퓨터에서 을 돌리고 있는 것... 서버스파르타코딩클럽프론트엔드서버 [HTML/CSS] Day20. Flex(2) 🤷♂️ 아래의 소스 코드에서는 자식 요소에 height:100px를 주고 요소에 각각 width:200px과 flex-basis:200px을 적용시켜보았다. 하지만 아래 이미지에서 볼 수 있듯 .box2는 flex-basis:200px가 적용된 기본 너비 '200px'(빗금친 부분)보다 더 많은 영역(화살표 부분)을 차지하는 것을 볼 수 있다. 이를 보면 width를 적용하면 강제적인 고정값으로 딱... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss SPA 비동기 데이터 흐름 결국, 프론트엔드는 백엔드의 데이터를 받은 후, 이를 가공하여 사용자에게 어떠한 방식으로 전달하느냐에 따라 달려있다고 볼 수 있으므로 궁극적으로 전체적인 프론트엔드 개발을 관통하는 주제라 생각하게 되었고 이를 주제로 정리하려 합니다. 가장 큰 장점으로는 SPA 자체라기보다는 화면과 데이터 서비스의 분리라고 할 수 있는데, 이렇게 되면 하나의 서버 기능을 통하여, 그 데이터를 가공하여 무수한 ... 데이터flowspa프론트엔드비동기flow 22일)JWT를 처음보고 존맛탱으로 읽은 저를 개발자로 키워주고 계셔서 감사합니다/Token/Encoded/ Decoded Code-Camp FE 6기 간략히 요약하면, Backend는 어떤 사람이 api를 요청하는지 알 수 없기 때문에 유저의 모든 api 요청에 accessToken을 함께 보내줬습니다! 이 토큰을 받은 Backend는 accessToken을 열어서 그 안에있는 객체(JSON)의 내용물을 보고 누가 요청을 한건지 구분 할 수 있던 것이였습니다! 이 방식으로 Browser에서 요청이 들어오면 더 이상 DB에서 토큰을 찾지 않... 코딩부트캠프개발자취업accesstokenJWTauthorization코드캠프Hashing프론트엔드개발자EncodedbearerjsonDecoded코딩Decoded [프론트엔드] CORS의 유래 및 특징, 활용 1. 동일 출처 정책 (Same-Origin Policy) 어떤 웹 컨텐츠에 접근하려고 할 때 사용하는 URL의 스킴(protocol), 호스트명(domain), 포트번호를 출처(Origin) 라고 함 Access-Control-Request-* 헤더는 Preflight 요청에서만 보내고 실제 요청을 보낼 때는 포함시키지 않음 클라이언트는 서버가 어떤 origin 요청을 허용하는지는 알 수 ... 네트워크프론트엔드네트워크 [HTML/CSS] Day18. Position 🪑 이미지를 보면 가장 밑에 normal flow, 중간 쯤 float, 가장 위의 position이 자리잡고 있다. 위의 코드의 결과는 block level Elements은 전체 영역을 다 차지하고, 바로 아래에 inline Elements 2개가 나란히 나열되는 것이 normal flow라고 생각하면 된다. 하지만 float과 position 속성을 사용하면 normal flow보다 더 높... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss 20) 검색할때 바로바로 안걸러주면 한국인은 답답해서 못살아 🤯 검색 프로세스 이해, Tokenizing, inverted index.. Debouncing / Throttling 원두멘토님의 열정을 이어받아 다 이해한날 !!!!!! 먼저, 백엔드의 검색 시스템 구조에는 가장 기본적으로 테이블을 풀 스캔하는 방식(full table scan)으로 전체 테이블 로우를 조회하는 방법이 있었습니다! 이 방법을 개선하기 위해 데이터베이스에 저장할 때, 문장을 키워드 단위로 토크나이징(컴퓨터에게 이해 시키기 위해 우리의 언어를 의미가 있는 가장 작은 단어로 나누는 것)하고, 역인덱스(inverted index)를 만들어서 저장했습... 쓰로틀링table fullscanDebouncing개발자메모리기반 데이터 베이스replaceAll토크나이징elasticsearchuuid코딩부트캠프검색프로세스개발자취업역색인프론트엔드Throttlinginverted index디스크기반 데이터 베이스코드캠프tokenizing디바운싱lodash코딩Debouncing [패스트캠퍼스 FE MGS 3기] - 2일차 Git 마스터를 향하여... CLI로 git 사용해보기 git 꿀팁들 최우영 강사님과 함께 했는데, 굉장히 실무적으로 잘 알려주셨다. 오늘 배운것은, CLI(git bash)를 활용해서 git을 다루는 방법이였다. CLI(command line interface) 나도 github desktop 을 맨 처음부터 이용했었는데, git add . 이나 git commit -m 'message' ... 패스트캠퍼스git메가바이트스쿨프론트엔드git [HTML/CSS] Day19. Flex(1) 😎 flex-direction은 Main-axis의 방향만 정할 뿐 Cross-axis에는 변화를 주지 않는다. 또한 만약 컨테이너 요소 내부에 있는 자식요소에게 width를 주지 않으면 아래의 이미지처럼 한 줄의 영역을 모두 차지하게 되는 특징이 있다. flex-direction의 기본값인 row가 적용되었을 때는 column과 반대로 한 줄 영역을 차지하지 않고 콘텐츠의 영역만큼만 차지하고 ... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss [패스트캠퍼스 FE MGS 3기] - 3일차 협업을 위한 Git 활용법 Git license Git ignore Git Branch - git flow ❓ Git ignore ❓ Git license Git Branch git switch ‘branch abc’ : branch abc로 branch 전환 git merge ‘branch abc’ : 현재 branch 와 branch abc 를 합친다. git branch -D ‘bran... 패스트캠퍼스git메가바이트스쿨프론트엔드git [패스트캠퍼스 FE MGS 3기] - 4일차 웹 프로그래밍 이란? 인터넷의 연결 방식 간단한 코드 실습 기타 추가로 공부할 것들 오늘부터는 정을수 강사님이 html, css 강의를 시작 해주셨다! 화려한 스킬 중심이 아니라, 근본적인 방향으로 알려 주는 것을 지향 한다고 하셨다. 그래서 오늘은 타 강의들처럼 명령어들을 그저 실습해가며 익히는게 아니라, 근본적인 코드의 동작 원리들을 deep 하게 배웠다. 💻 컴퓨터 메모리에 있는 dat... 패스트캠퍼스html메가바이트스쿨프론트엔드CSSCSS [ TIL ] 프로그래머스 DAY 15 : To Do List 만들기 ( Component + SPA 구조) 지금 정리하는 내용은 일부 오타나 잘못된 내용이 기입되어 있을 수 있습니다. ES6 이후 나온 신문법으로 함수의 인자값을 바로 정의해 넣어주어 초기값에 대한 방어 코드를 실행문 하단에 작성하지 않아도 되는 장점을 줄 수 있습니다. 위처럼 인자에 바로 값을 할당하여 만일 Fuc1()로 호출했을때 오류로 이어지는 것이 아니라 {...this.state, add : ""}로 실행되어 빈값이 sta... 프론트엔드프로그래머스데브코스TILTIL [백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기 v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페이지에서 사용자가 입력한 데이터(텍스트, 선택값 등등)를 Vue로 읽어오려면 v-model 디렉티브를 사용하면 됩니다. Vue 관점에서 봤을 때 웹 페이지로부터 데이터를 읽어오기도... vue.js프론트엔드vue.js Mutation..니가 뭔데..날울려..? 백엔드와의 통신을 위해 성장한 프론트엔드 개발자 아름이의 4일차 (Code Camp FE 6기) - 동기 vs 비동기 (async-await) 게시글 불러오기 같은것은 동기를 써야함 왜냐면 비동기는 이렇게 돼 이렇게 될수 있기 때문에 아래처럼 등록이 된 다음에 불러줘야 한다! 비동기 ( 요청들이 서로 기다릴 필요가 없을때 쓴다) 그래서 비동기는 이렇게 다 겹쳐버려도 돼 ! -const data = axios.get ( ' ) (데이터를 줘 하고 요청하고 안기다리고 바로 data에 저장하... GRAPHQL_APImutationaxios코드캠프6기프론트엔드202203Apollo clientawaitrestapiTDZ(Temperal Dead Zone)async202203 브라우저 렌더링 과정과 최적화 위 표는 Max Connection per Domain으로 하나의 도메인으로부터 다운로드 받을 수 있는 모듈의 개수이다. 브라우저는 보통 한번에 6개의 모듈을 하나의 도메인으로부터 다운로드 받을 수 있다. 따라서 동시 연결 제한을 우회하는 방법으로 여러 서브 도메인으로부터 모듈을 다운로드 받는 방법이 있다. 동시에 요청을 처리하기 때문에 마지막 요청이 끝나기까지의 시간을 대폭 줄일 수 있다.... 브라우저 렌더링 과정브라우저 렌더링Browser Renderingbrowser브라우저 렌더링 최적화프론트엔드브라우저 최적화frontendBrowser OptimizationBrowser Optimization 개발일지-(JS공부중, 스파르타 코딩클럽에서 다뤄본 ajax와 jQuery) 그래서, 자바스크립트에서 좀 길게 작성해야하는 코드들을 보다 직관적이고 덜 복잡하게 작성할 수 있는 장점이 있다. 그리고, 이런 제이쿼리가 들어가 있는 상태에서만 다음 형식의 ajax를 사용할 수 있는데, 이를 통해 서버에 데이터를 요청 할 수 있다. 그리고 그 아래 url에는 데이터를 요청할 주소를 적으면 된다. 을 통하여 작성할 수 있다. 이렇게 위의 내용들을 함수에 더하여, 무언가를 누... JavaScriptjquery프론트엔드독학개발일지ajax인강JavaScript [수업 2째주 4일차] JavaScript-2 : style tag에 적는게 가장 좋고, 특정 tag에도 스타일을 따로 적어 줄수 있으나, 만약 조건(condition)이 참일 경우 실행할 코드 대신 실행할 다른 코드 하나의 흐름이 아닌 다른 조건에서도 실행되게끔 해주는것을 조건문이라 한다. 만약 else에도 조건을 붙이고 싶다면, else가 아닌 else if 로 바꾸고 조건문을 넣어야 한다. 어떤 프로그래밍 언어에도 존재하는 자료형,... 대구 A.i. 스쿨js프론트엔드Javascipt초보코딩Javascipt 💻 TIL 02 | 프로토타입이란? 📃 오늘 공부한 것 프로토타입 처음 들어볼 수도 있겠지만 개발을 할 때 한번쯤 아래 사진과 같은 [[Prototype]]을 본 적이 있을 것이다! 그리고 concat 함수를 구글에 검색하면 mdn사이트에서 Array.prototype.concat()이 제목인 것을 볼 수 있다 new 키워드를 사용해서 Array라는 객체를 arr로 선언했다! 우리가 arr로 concat, fill, find와... 정규표현식프로그래머스프로토타입프론트엔드데브코스TIL자바스크립트TIL [데브코스] TIL - 4일차 큐(Queue) [실습] 프린터 프린터 문제풀이 해시 테이블 [실습] 베스트 앨범 베스트 앨범 문제풀이 - 큐(Queue) 먼저 들어간 값이 먼저 나오는 FIFO(First In First Out)인 선형 자료구조! 배열 또는 연결 리스트로 구현할 수 있다. 자바스크립트로 큐 구현할 때 shift/unshift 사용하면 선형시간(O(n))이 소요되므로 큐를 올바르게 사용하기 위해서는 fron... 프로그래머스데브코스TIL프론트엔드TIL [백견불여일타/Vue.js] 5장 - 이벤트 처리 이벤트 v-on 지난 장에서는 v-model를 활용해서 페이지에서 데이터를 가져오는 법에 대해 공부했습니다. 이번 시간에는 vue에서 v-on을 활용하여 이벤트 처리하는 법에 대해 공부합니다. v-on 디렉티브는 Vue 메소드를 실행시키는 이벤트 핸들러입니다. 여기서 이벤트란 사용자로부터의 키 입력, 클릭 등의 조작을 의미합니다. 사용자의 조작을 감지하여 특정 메소드를 실행시켜주는 것이 v-... vue.js프론트엔드vue.js [ TIL ] 프로그래머스 DAY6 : DFS, BFS, 그리디 지금 정리하는 내용은 일부 오타나 잘못된 내용이 기입되어 있을 수 있습니다. BFS, DFS 실습 여행경로 깊이우선탐색으로 보통 재귀 또는 스택으로 구현합니다. 따라서 문제의 전체적인 부분에서 최적의 해를 구하지는 못할 수도 있지만 직관적으로 처리가 가능하고 최적해를 주어진 조건과 기준에서만 구해도 예외가 없는 경우 사용하면 n 또는 n * log( n )의 시간복잡도를 얻을 수 있습니다. ... 프로그래머스데브코스TIL프론트엔드TIL [Web] Day2. IP/Domain/URL/Port IP/Domain/URL의 기본 개념과 구조 🧬 IP란 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이다. URL의 안에 포함되는 도메인(Domain)은 IP를 가지는 서버를 사용자가 쉽게 기억하고 찾을 수 있도록 만들어 주는 서비스이다. 컴퓨터와의 통신에서는 숫자로 이루어진 IP를 사용하기 때문에 변환을 시켜주는 도메인 네임 서버(DNS)라는 것이 필... 제주코딩베이스캠프web프론트엔드멋쟁이사자처럼htmlcsshtmlcss [HTML/CSS] Day3. Embedded Contents(1) "웹 접근성"이란 말그대로 "웹에 접근할 수 있는 것"을 말하는데 이는 비장애인은 웹에 접근하는데 문제가 없지만 "시각장애인"이나 "몸이 불편한 장애"인 같은 경우는 웹에 접근하는데 어려움을 겪을 수 있다. <img>태그는 반드시 src(source의 약자)와 alt라는 속성을 반드시 입력을 해야한다. 모든 이미지에 alt의 값이 들어있다면 스크린리더를 이용하는 장애인들은 혼란스러울 수 있다... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day1. 간단한 이력서 만들기 오늘은 OT와 기초적인 HTML/CSS를 배울 수 있는 코드라이언의 [일단 만드는 HTML/CSS]를 수강했다. 기초적인 HTML/CSS만 알면 스스로 만들 수 있는 것이라 바로 작성해보았다. HTML 문서의 기본 형태와 태그 ✏️ 기본적으로 HTML이 가지는 형태인데, 크게 <html> <head> <body> 태그로 나눌 수 있다. 최신 브라우저(크롬 등)에서는 <!DOCTYPE html... 코드라이언멋쟁이사자처럼htmlcss프론트엔드htmlcss 멋쟁이사자처럼 프론트엔드스쿨 2기 TIL (3월 29일) URL, IP, PORT 정리 HTML Living Standard란? HTML/CSS HTML의 정의 HTML(뼈대) + CSS(살) + JavaScript(근육) 2. URL, IP, PORT(과제 2) 프로토콜 종류, 자원이 있는 IP 주소, 도메인 주소, 포트 주소, 자원 위치로 구성되어 있어 3. HTML Living Standard(과제 1) XHTML과 HTML living st... LIKELION프론트엔드멋쟁이사자처럼프론트엔드스쿨2기TILhtmlLIKELION [HTML/CSS] Day5. CSS Basic 🌷 이러한 불편함을 없애기 위해 태그가 가지고 있는 브라우저별 기본값을 초기화 시켜주는 것이 "reset CSS를 설정한다." 라고 한다. 자세히 배경을 보면 바둑판식으로 배경 이미지가 반복되어 있는 것을 볼 수 있다. 물론 배경이 바둑판식으로 반복되어 적용이 되는 것은 background-repeat:no-repeat로 해결할 수 있으나 background-size:cover를 통해 문제를 바... 빔캠프제주코딩베이스캠프프론트엔드멋쟁이사자처럼htmlcsshtmlcss [Git] Day4. 멘붕의 연속, Git과 github 💾 터미널에 git --version을 입력 후 엔터를 눌려보면 현재 설치되어 있는 버전이 나온다. git add README.md는 commit 파일을 추가하는 것이다. git commit -m "First-commit은 commit을 하고 메세지를 "First-commit"로 하겠다는 뜻이다. 들어가면 아래처럼 파일명을 만드는 입력창과 마크다운을 할 수 있는 영역이 나온다. 파일명을 만드는 ... 제주코딩베이스캠프github프론트엔드멋쟁이사자처럼gitgit 이전 기사 보기
[패스트캠퍼스 FE MGS 3기] - 5일차 HTMl의 기본구조 HTML의 규칙들 HTML → 구조적인 객체를 정적으로 찍어냄 JS → 데이터에 대해 반복, 비교, 평가, 저장하는 일들이 가능 함수 (function) → 일단 만들어만 놓고 실행은 ()문에서 됨. 자바스크립트 변수 별 특징 const : 변하지 않을 것들 let, var : 변할 것들 프로토 타입 객체 자바스크립트에서 모든 생성자는 모든 프로토타입 객체를 가지고 있음 ... 패스트캠퍼스outlinehtmljs메가바이트스쿨프론트엔드html [패스트캠퍼스 프론트엔드 과정] 5~10일차(2주차 - 2022.04.15~20) 시맨틱 웹이란 무엇인가? 시맨틱 웹은 의미로 적인 웹이라는 뜻으로 웹 상의 정보에 잘 정의된 의미 를 부여함으로써 사람뿐만 아니라 컴퓨터도 쉽게 문서의 의미를 자동화 하여 처리 할 수 있도록 한 것이다. 시맨틱 웹의 목적 시맨틱 웹의 목적은 검색엔진이 크롤링 할 때 , HTML 코드 만으로 그 의미를 인지하게 하기 위함이다. HTML 로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사... WIL국비지원프론트엔드WIL 웹 개발일지-4주차 1일차 (서버) 우선 파이참에 flask 패키지를 설치한다. 많은 개발자들이 서버를 만들 때 프레임워크를 가져다 쓴다. 남이 짜둔 규칙 아래에서 틀 안에서 코딩을 자유롭게 하는 것. 라이브러리-내가 내 맘대로 짜는데 남이 만들어 둔 것을 안에다가 가져다 쓰는 것 프레임워크는 1개를 가져와서 짜고 그 안의 라이브러리는 100개든 1000개이든 쓸 수 있는 것. -> 내가 지금 내 컴퓨터에서 을 돌리고 있는 것... 서버스파르타코딩클럽프론트엔드서버 [HTML/CSS] Day20. Flex(2) 🤷♂️ 아래의 소스 코드에서는 자식 요소에 height:100px를 주고 요소에 각각 width:200px과 flex-basis:200px을 적용시켜보았다. 하지만 아래 이미지에서 볼 수 있듯 .box2는 flex-basis:200px가 적용된 기본 너비 '200px'(빗금친 부분)보다 더 많은 영역(화살표 부분)을 차지하는 것을 볼 수 있다. 이를 보면 width를 적용하면 강제적인 고정값으로 딱... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss SPA 비동기 데이터 흐름 결국, 프론트엔드는 백엔드의 데이터를 받은 후, 이를 가공하여 사용자에게 어떠한 방식으로 전달하느냐에 따라 달려있다고 볼 수 있으므로 궁극적으로 전체적인 프론트엔드 개발을 관통하는 주제라 생각하게 되었고 이를 주제로 정리하려 합니다. 가장 큰 장점으로는 SPA 자체라기보다는 화면과 데이터 서비스의 분리라고 할 수 있는데, 이렇게 되면 하나의 서버 기능을 통하여, 그 데이터를 가공하여 무수한 ... 데이터flowspa프론트엔드비동기flow 22일)JWT를 처음보고 존맛탱으로 읽은 저를 개발자로 키워주고 계셔서 감사합니다/Token/Encoded/ Decoded Code-Camp FE 6기 간략히 요약하면, Backend는 어떤 사람이 api를 요청하는지 알 수 없기 때문에 유저의 모든 api 요청에 accessToken을 함께 보내줬습니다! 이 토큰을 받은 Backend는 accessToken을 열어서 그 안에있는 객체(JSON)의 내용물을 보고 누가 요청을 한건지 구분 할 수 있던 것이였습니다! 이 방식으로 Browser에서 요청이 들어오면 더 이상 DB에서 토큰을 찾지 않... 코딩부트캠프개발자취업accesstokenJWTauthorization코드캠프Hashing프론트엔드개발자EncodedbearerjsonDecoded코딩Decoded [프론트엔드] CORS의 유래 및 특징, 활용 1. 동일 출처 정책 (Same-Origin Policy) 어떤 웹 컨텐츠에 접근하려고 할 때 사용하는 URL의 스킴(protocol), 호스트명(domain), 포트번호를 출처(Origin) 라고 함 Access-Control-Request-* 헤더는 Preflight 요청에서만 보내고 실제 요청을 보낼 때는 포함시키지 않음 클라이언트는 서버가 어떤 origin 요청을 허용하는지는 알 수 ... 네트워크프론트엔드네트워크 [HTML/CSS] Day18. Position 🪑 이미지를 보면 가장 밑에 normal flow, 중간 쯤 float, 가장 위의 position이 자리잡고 있다. 위의 코드의 결과는 block level Elements은 전체 영역을 다 차지하고, 바로 아래에 inline Elements 2개가 나란히 나열되는 것이 normal flow라고 생각하면 된다. 하지만 float과 position 속성을 사용하면 normal flow보다 더 높... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss 20) 검색할때 바로바로 안걸러주면 한국인은 답답해서 못살아 🤯 검색 프로세스 이해, Tokenizing, inverted index.. Debouncing / Throttling 원두멘토님의 열정을 이어받아 다 이해한날 !!!!!! 먼저, 백엔드의 검색 시스템 구조에는 가장 기본적으로 테이블을 풀 스캔하는 방식(full table scan)으로 전체 테이블 로우를 조회하는 방법이 있었습니다! 이 방법을 개선하기 위해 데이터베이스에 저장할 때, 문장을 키워드 단위로 토크나이징(컴퓨터에게 이해 시키기 위해 우리의 언어를 의미가 있는 가장 작은 단어로 나누는 것)하고, 역인덱스(inverted index)를 만들어서 저장했습... 쓰로틀링table fullscanDebouncing개발자메모리기반 데이터 베이스replaceAll토크나이징elasticsearchuuid코딩부트캠프검색프로세스개발자취업역색인프론트엔드Throttlinginverted index디스크기반 데이터 베이스코드캠프tokenizing디바운싱lodash코딩Debouncing [패스트캠퍼스 FE MGS 3기] - 2일차 Git 마스터를 향하여... CLI로 git 사용해보기 git 꿀팁들 최우영 강사님과 함께 했는데, 굉장히 실무적으로 잘 알려주셨다. 오늘 배운것은, CLI(git bash)를 활용해서 git을 다루는 방법이였다. CLI(command line interface) 나도 github desktop 을 맨 처음부터 이용했었는데, git add . 이나 git commit -m 'message' ... 패스트캠퍼스git메가바이트스쿨프론트엔드git [HTML/CSS] Day19. Flex(1) 😎 flex-direction은 Main-axis의 방향만 정할 뿐 Cross-axis에는 변화를 주지 않는다. 또한 만약 컨테이너 요소 내부에 있는 자식요소에게 width를 주지 않으면 아래의 이미지처럼 한 줄의 영역을 모두 차지하게 되는 특징이 있다. flex-direction의 기본값인 row가 적용되었을 때는 column과 반대로 한 줄 영역을 차지하지 않고 콘텐츠의 영역만큼만 차지하고 ... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss [패스트캠퍼스 FE MGS 3기] - 3일차 협업을 위한 Git 활용법 Git license Git ignore Git Branch - git flow ❓ Git ignore ❓ Git license Git Branch git switch ‘branch abc’ : branch abc로 branch 전환 git merge ‘branch abc’ : 현재 branch 와 branch abc 를 합친다. git branch -D ‘bran... 패스트캠퍼스git메가바이트스쿨프론트엔드git [패스트캠퍼스 FE MGS 3기] - 4일차 웹 프로그래밍 이란? 인터넷의 연결 방식 간단한 코드 실습 기타 추가로 공부할 것들 오늘부터는 정을수 강사님이 html, css 강의를 시작 해주셨다! 화려한 스킬 중심이 아니라, 근본적인 방향으로 알려 주는 것을 지향 한다고 하셨다. 그래서 오늘은 타 강의들처럼 명령어들을 그저 실습해가며 익히는게 아니라, 근본적인 코드의 동작 원리들을 deep 하게 배웠다. 💻 컴퓨터 메모리에 있는 dat... 패스트캠퍼스html메가바이트스쿨프론트엔드CSSCSS [ TIL ] 프로그래머스 DAY 15 : To Do List 만들기 ( Component + SPA 구조) 지금 정리하는 내용은 일부 오타나 잘못된 내용이 기입되어 있을 수 있습니다. ES6 이후 나온 신문법으로 함수의 인자값을 바로 정의해 넣어주어 초기값에 대한 방어 코드를 실행문 하단에 작성하지 않아도 되는 장점을 줄 수 있습니다. 위처럼 인자에 바로 값을 할당하여 만일 Fuc1()로 호출했을때 오류로 이어지는 것이 아니라 {...this.state, add : ""}로 실행되어 빈값이 sta... 프론트엔드프로그래머스데브코스TILTIL [백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기 v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페이지에서 사용자가 입력한 데이터(텍스트, 선택값 등등)를 Vue로 읽어오려면 v-model 디렉티브를 사용하면 됩니다. Vue 관점에서 봤을 때 웹 페이지로부터 데이터를 읽어오기도... vue.js프론트엔드vue.js Mutation..니가 뭔데..날울려..? 백엔드와의 통신을 위해 성장한 프론트엔드 개발자 아름이의 4일차 (Code Camp FE 6기) - 동기 vs 비동기 (async-await) 게시글 불러오기 같은것은 동기를 써야함 왜냐면 비동기는 이렇게 돼 이렇게 될수 있기 때문에 아래처럼 등록이 된 다음에 불러줘야 한다! 비동기 ( 요청들이 서로 기다릴 필요가 없을때 쓴다) 그래서 비동기는 이렇게 다 겹쳐버려도 돼 ! -const data = axios.get ( ' ) (데이터를 줘 하고 요청하고 안기다리고 바로 data에 저장하... GRAPHQL_APImutationaxios코드캠프6기프론트엔드202203Apollo clientawaitrestapiTDZ(Temperal Dead Zone)async202203 브라우저 렌더링 과정과 최적화 위 표는 Max Connection per Domain으로 하나의 도메인으로부터 다운로드 받을 수 있는 모듈의 개수이다. 브라우저는 보통 한번에 6개의 모듈을 하나의 도메인으로부터 다운로드 받을 수 있다. 따라서 동시 연결 제한을 우회하는 방법으로 여러 서브 도메인으로부터 모듈을 다운로드 받는 방법이 있다. 동시에 요청을 처리하기 때문에 마지막 요청이 끝나기까지의 시간을 대폭 줄일 수 있다.... 브라우저 렌더링 과정브라우저 렌더링Browser Renderingbrowser브라우저 렌더링 최적화프론트엔드브라우저 최적화frontendBrowser OptimizationBrowser Optimization 개발일지-(JS공부중, 스파르타 코딩클럽에서 다뤄본 ajax와 jQuery) 그래서, 자바스크립트에서 좀 길게 작성해야하는 코드들을 보다 직관적이고 덜 복잡하게 작성할 수 있는 장점이 있다. 그리고, 이런 제이쿼리가 들어가 있는 상태에서만 다음 형식의 ajax를 사용할 수 있는데, 이를 통해 서버에 데이터를 요청 할 수 있다. 그리고 그 아래 url에는 데이터를 요청할 주소를 적으면 된다. 을 통하여 작성할 수 있다. 이렇게 위의 내용들을 함수에 더하여, 무언가를 누... JavaScriptjquery프론트엔드독학개발일지ajax인강JavaScript [수업 2째주 4일차] JavaScript-2 : style tag에 적는게 가장 좋고, 특정 tag에도 스타일을 따로 적어 줄수 있으나, 만약 조건(condition)이 참일 경우 실행할 코드 대신 실행할 다른 코드 하나의 흐름이 아닌 다른 조건에서도 실행되게끔 해주는것을 조건문이라 한다. 만약 else에도 조건을 붙이고 싶다면, else가 아닌 else if 로 바꾸고 조건문을 넣어야 한다. 어떤 프로그래밍 언어에도 존재하는 자료형,... 대구 A.i. 스쿨js프론트엔드Javascipt초보코딩Javascipt 💻 TIL 02 | 프로토타입이란? 📃 오늘 공부한 것 프로토타입 처음 들어볼 수도 있겠지만 개발을 할 때 한번쯤 아래 사진과 같은 [[Prototype]]을 본 적이 있을 것이다! 그리고 concat 함수를 구글에 검색하면 mdn사이트에서 Array.prototype.concat()이 제목인 것을 볼 수 있다 new 키워드를 사용해서 Array라는 객체를 arr로 선언했다! 우리가 arr로 concat, fill, find와... 정규표현식프로그래머스프로토타입프론트엔드데브코스TIL자바스크립트TIL [데브코스] TIL - 4일차 큐(Queue) [실습] 프린터 프린터 문제풀이 해시 테이블 [실습] 베스트 앨범 베스트 앨범 문제풀이 - 큐(Queue) 먼저 들어간 값이 먼저 나오는 FIFO(First In First Out)인 선형 자료구조! 배열 또는 연결 리스트로 구현할 수 있다. 자바스크립트로 큐 구현할 때 shift/unshift 사용하면 선형시간(O(n))이 소요되므로 큐를 올바르게 사용하기 위해서는 fron... 프로그래머스데브코스TIL프론트엔드TIL [백견불여일타/Vue.js] 5장 - 이벤트 처리 이벤트 v-on 지난 장에서는 v-model를 활용해서 페이지에서 데이터를 가져오는 법에 대해 공부했습니다. 이번 시간에는 vue에서 v-on을 활용하여 이벤트 처리하는 법에 대해 공부합니다. v-on 디렉티브는 Vue 메소드를 실행시키는 이벤트 핸들러입니다. 여기서 이벤트란 사용자로부터의 키 입력, 클릭 등의 조작을 의미합니다. 사용자의 조작을 감지하여 특정 메소드를 실행시켜주는 것이 v-... vue.js프론트엔드vue.js [ TIL ] 프로그래머스 DAY6 : DFS, BFS, 그리디 지금 정리하는 내용은 일부 오타나 잘못된 내용이 기입되어 있을 수 있습니다. BFS, DFS 실습 여행경로 깊이우선탐색으로 보통 재귀 또는 스택으로 구현합니다. 따라서 문제의 전체적인 부분에서 최적의 해를 구하지는 못할 수도 있지만 직관적으로 처리가 가능하고 최적해를 주어진 조건과 기준에서만 구해도 예외가 없는 경우 사용하면 n 또는 n * log( n )의 시간복잡도를 얻을 수 있습니다. ... 프로그래머스데브코스TIL프론트엔드TIL [Web] Day2. IP/Domain/URL/Port IP/Domain/URL의 기본 개념과 구조 🧬 IP란 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이다. URL의 안에 포함되는 도메인(Domain)은 IP를 가지는 서버를 사용자가 쉽게 기억하고 찾을 수 있도록 만들어 주는 서비스이다. 컴퓨터와의 통신에서는 숫자로 이루어진 IP를 사용하기 때문에 변환을 시켜주는 도메인 네임 서버(DNS)라는 것이 필... 제주코딩베이스캠프web프론트엔드멋쟁이사자처럼htmlcsshtmlcss [HTML/CSS] Day3. Embedded Contents(1) "웹 접근성"이란 말그대로 "웹에 접근할 수 있는 것"을 말하는데 이는 비장애인은 웹에 접근하는데 문제가 없지만 "시각장애인"이나 "몸이 불편한 장애"인 같은 경우는 웹에 접근하는데 어려움을 겪을 수 있다. <img>태그는 반드시 src(source의 약자)와 alt라는 속성을 반드시 입력을 해야한다. 모든 이미지에 alt의 값이 들어있다면 스크린리더를 이용하는 장애인들은 혼란스러울 수 있다... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day1. 간단한 이력서 만들기 오늘은 OT와 기초적인 HTML/CSS를 배울 수 있는 코드라이언의 [일단 만드는 HTML/CSS]를 수강했다. 기초적인 HTML/CSS만 알면 스스로 만들 수 있는 것이라 바로 작성해보았다. HTML 문서의 기본 형태와 태그 ✏️ 기본적으로 HTML이 가지는 형태인데, 크게 <html> <head> <body> 태그로 나눌 수 있다. 최신 브라우저(크롬 등)에서는 <!DOCTYPE html... 코드라이언멋쟁이사자처럼htmlcss프론트엔드htmlcss 멋쟁이사자처럼 프론트엔드스쿨 2기 TIL (3월 29일) URL, IP, PORT 정리 HTML Living Standard란? HTML/CSS HTML의 정의 HTML(뼈대) + CSS(살) + JavaScript(근육) 2. URL, IP, PORT(과제 2) 프로토콜 종류, 자원이 있는 IP 주소, 도메인 주소, 포트 주소, 자원 위치로 구성되어 있어 3. HTML Living Standard(과제 1) XHTML과 HTML living st... LIKELION프론트엔드멋쟁이사자처럼프론트엔드스쿨2기TILhtmlLIKELION [HTML/CSS] Day5. CSS Basic 🌷 이러한 불편함을 없애기 위해 태그가 가지고 있는 브라우저별 기본값을 초기화 시켜주는 것이 "reset CSS를 설정한다." 라고 한다. 자세히 배경을 보면 바둑판식으로 배경 이미지가 반복되어 있는 것을 볼 수 있다. 물론 배경이 바둑판식으로 반복되어 적용이 되는 것은 background-repeat:no-repeat로 해결할 수 있으나 background-size:cover를 통해 문제를 바... 빔캠프제주코딩베이스캠프프론트엔드멋쟁이사자처럼htmlcsshtmlcss [Git] Day4. 멘붕의 연속, Git과 github 💾 터미널에 git --version을 입력 후 엔터를 눌려보면 현재 설치되어 있는 버전이 나온다. git add README.md는 commit 파일을 추가하는 것이다. git commit -m "First-commit은 commit을 하고 메세지를 "First-commit"로 하겠다는 뜻이다. 들어가면 아래처럼 파일명을 만드는 입력창과 마크다운을 할 수 있는 영역이 나온다. 파일명을 만드는 ... 제주코딩베이스캠프github프론트엔드멋쟁이사자처럼gitgit 이전 기사 보기