멋사 프론트엔드 스쿨2기 회고

안녕하세요, Ayden 입니다.어쩌다 보니 첫 게시글이 멋쟁이사자처럼(멋사) 프론트엔드 스쿨 2기 합격 및 계획 글이 되었습니다.작년 여름부터 프론트엔드 개발자를 목표로 공부해왔는데 전 직장 퇴사 후 한 달이 지난 지금 드디어!!! 멋사 프론트엔드 스쿨 2기에 합격했습

안녕하세요, Ayden 입니다. 대학교 O.T 이후 10년이 지난 오늘 두 번째 O.T를 하게 되었습니다.🎉 먼저 간단하게 O.T 진행에 대해 말씀드리자면, 오전 9시경 모두 Zoom에 모여 부트캠프 운영 방식에 대해 듣고 Q&A 시간을 가졌습니다. 아무래도 처

안녕하세요 Ayden 입니다.오늘은 뭔가 본격적인 강의가 시작되는 느낌이었습니다. 그래서인지 이번 글은 좀 많을 것 같습니다. 많이 배운 만큼!!앞으로 학습 방법 및 일정FE 로드맵VSC extension 설치 및 단축키기초 상식1) 도메인, URL, IP, PORT,

안녕하세요 Ayden 입니다.오늘도 어제와 같이 HTML 태그 관련 내용을 학습했습니다.HTML 학습 내용1\. 텍스트 레벨 태그2\. img, picture 태그위 학습 내용 1, 2를 보시고 애걔? 이거 밖에 공부 안 했어? 라고 생각하실 수 있지만, 오늘 회고할

안녕하세요 Ayden 입니다.오늘 학습 내용은 git과 HTML 태그들입니다.형상 관리 핵심툴인 Git과 GitHub.1) git clone 2) git pull3) git add4) git commit5) git pushHTML 태그1) <ifram>2) &lt

안녕하세요 Ayden 입니다.오늘의 학습 내용은 CSS 기초입니다.inherit과 initialceter align1) margin:auto2) text-align:center3) vertical-align:middle4) transform:translate(X%, Y

안녕하세요 Ayden 입니다.지난 게시물에 form 요소에 간략하게 말씀드린 적이 있는데요.오늘은 시멘틱 태그 사용과 form 요소에 대해 더 자세히 말씀드리려 합니다.시멘틱 태그1) heading2) aside3) article4) sectionform 주변 요소1)

안녕하세요 Ayden 입니다.HTML 교육은 마무리되었고, CSS 교육이 시작되었습니다.오늘은 HTML table과 CSS, 그리고 과제 페이지 코딩 중 발생한 문제에 대해 말씀드리겠습니다.HTML table1) table 주변 요소 2) colspan, rowspan

안녕하세요 Ayden 입니다.오늘도 CSS에 대해 말씀드리려고 하는데요. inline 및 block lebel, 마진 병합 등 이미 지난 게시물에서 언급한 내용이 많아 이번 회고글은 짧게 작성하고 지난 게시물에 내용을 추가하였습니다.CSS1) Reset CSS2) px

안녕하세요 Ayden 입니다.CSS 학습 중 헷갈리거나, 새로 배운 내용에 대해 말씀드리겠습니다.vmin, vmax 단위display:none, visibility:hidden, overflow:hidden;HTML img 태그와 CSS background-image텍

안녕하세요 Ayden 입니다.회고 9일차에는 1기 선배님들 특강과 노션 특강이 있었고, 10일차인 오늘은 CSS position 관련된 내용을 학습했습니다.CSS position1). relative2). absolute3). fixed4). sticky이력서노션 특강

안녕하세요 Ayden 입니다.CSS float 그리고 로그인 페이지 과제에 대해 말씀드리겠습니다.float과제float은 요소를 띄워서 정렬을 하는 속성입니다. float: left; float:right; 로 왼쪽 오른쪽 정렬이 가능합니다. 띄워서 정렬하는 float

1) 태그\[title="선택자"]타이틀 속성 값이 "선택자"인 태그를 선택합니다.2)태그\[title^="선택자"]타이틀 속성 값이 선택자로 시작하는 태그를 선택합니다.3)태그\[title$="선택자"] 타이틀 속성 값이 선택자로 끝나는 태그를 선택합니다.4)태그\[

1). flex-grow는 flex 아이템의 여백 비율을 정할 수 있는 속성입니다. 왼쪽 상단 첫 번째 이미지에서 "Good job" 아이템은 grow:1, "A" 아이템은 grow:1, "Hello world" 아이템은 grow:2 입니다.2). flex-shrin

🕵️‍♀️ OOCSS란?UI에 있는 것들을 모두 객체로 생각하고 여러가지 모듈로 만들어 조립하는 기법입니다. 같은 형태의 UI 에 스킨만 다르다면 구조와 스킨을 분리하여 조합 합니다.구조에 해당하는 btn 클래스에는 width, height, padding, marg

웹접근성을 고려하여 input 태그를 IR 기법으로 숨기고 label 태그를 스타일링 하는 방법이 있습니다. 단순하게 이미지를 삽입하는 방법보다 더 나은 코드라고 볼 수 있습니다.select box도 위에 input box와 마찬가지로 h2 태그를 IR 기법으로 처리해

최신 확장자를 사용 할 때는 위에 소스코드 처럼 기본적으로 동작 가능한 이미지(jpeg)를 브라우저에게 제공하고 최신 기술을 사용할 수 있는 환경에서는 최신 기술(webp, avif)을 제공하여 더 나은 사용자 경험을 제공할 수 있는 점진적 향상기법이 중요하다.몰랐던

원본 클래스와 나의 거리는 400px이고 회전 패널이 Y축으로 45도 회전되어 있다. deg를 조금씩 증가시키면 애니메이션 처럼 패널이 회전하는 결과를 볼 수 있다. 캐릭터와 물체가 400px 거리에 있고 y축으로 회전한다. x축은 물체를 가로로 관통 시킨다음 회전,

🕵️‍♀️Sass란?Sass는 CSS전처리기 종류 중 하나이다. 유지보수가 어려운 CSS 때문에 사용한다고 볼 수 있다. Sass의 variable, nesting, mixin, import, extend 등의 기능들이 유지보수를 돕는다. 유명한 전처리기로는 오늘 학

1) 사용법2) layout3) img4) table5) form6) card🕵️‍♀️Bootstrap이란?웹 프레임워크 중 하나이다. 손쉽게 웹 스타일링이 가능하고 jQuery 플러그인 사용이 가능하다는 게 장점이다.Bootstrap 사용법에는 크게 두 가지가 있다

1) 사용법2) box-size3) font-size4) list-style5) flex6) grid7) responsive8) Bootstrap과 Tailwind1) 사용자 상호작용2) 간단한 DOM 조작3) 변수(const, let, var)🕵️‍♀️Tailwin

JavaScript 자료형1-1 원시자료형과 객체자료형1-2 Number1-3 Boolean1-4 Object🕵️‍♀️JavaScript 자료형?변수의 자료형은 다양한 데이터를 용도에 맞게 쓰기 위해 필요한 개념이다. 보통 언어에서는 변수의 자료형과 함께 변수를 선언

오늘은 오전부터 PC Users에 있는 폴더명을 변경했다가 PC 계정이 해당 폴더를 참조하지 못해 파일을 싹다 날리는 경험을 했다.교육 내용은 블로그에 저장되어 있고, 과제나 프로젝트는 git에 있어 불행 중 다행이다...😂백업의 중요성을 다시 한 번 느꼈고 앞으로

JavaScript 변수 자료형1-1 함수, 메소드, 속성1-2 실무 사용 함수, 메소드🕵️‍♀️함수, 메소드, 속성 차이는?객체에는 순서 상관 없이 모든 자료형을 저장할 수 있다. 자료형이 대부분이 그렇듯 객체 또한 연관된 것들끼리의 집합체이다.함수는 그 자체로도

JavaScript 배열1-1 splice1-2 slice1-3 sort🕵️‍♀️배열이란?여러개의 연관있는 데이터 값을 하나의 이름으로 묶어 사용할 수 있는 데이터 타입이다.splice(0, 1, 2)는 (시작 index, 삭제 count, 추가 데이터)로 0번 인덱

JavaScript 배열1-1 find1-2 from1-3 map1-4 filter1-5 유사배열 객체🕵️‍♀️배열이란?여러개의 연관있는 데이터 값을 하나의 이름으로 묶어 사용할 수 있는 데이터 타입이다.find(i => i > 5)는 배열 요소 처음부터 끝까지 순차

JavaScript 반복문1-1 for1-2 for in1-3 for of1-4 while1-5 break, continue, label🕵️‍♀️반복문이란?간단하게 설명하자면 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 명령문이다.for(let i=0;

JavaScript 함수1-1 호이스팅1-2 재귀함수1-3 call by value, reference구조 분행 할당, 스프레드 문법2-1 스프레드 문법2-2 구조 분해 할당🕵️‍♀️함수란?입력, 출력, 기능을 하나로 묶어 재사용 할 수 있도록 만드는 것이다.유사한

JavaScript 함수1-1 클로저(Closure)1-2 생성자 함수Map, Setthis3-1 bind3-2 call3-3 applyJSON🕵️‍♀️클로저(Closure)란?위 소스코드를 예제로 클로저를 다음과 같이 정의할 수 있다.첫 번째, 폐쇠된 공간 안에서

JavaScript DOM1-1 DOM1-2 innerText VS textContent1-3 append VS appendChild1-4 innerHTML VS insertAdjacentHTML1-5 캡처링 이벤트 VS 버블링 이벤트1-6 target VS curre

Node.js 는 자바스크립트 런타임이다.이벤트 기반, 논 블로킹 I/O 모델을 사용해 가볍고 효율적이다.Node.js 때문에 자바스크립트 언어 구동 환경이 확장되어 머신러닝, 서버, 데스크탑 앱까지 자바스크립트 활용 가능하다.장점 :1\. 싱글 스레드, 논 블로킹 I

carousel1-1 CSS1-2 JavaScriptpreventDefault🕵️‍♀️carousel이란?캐러셀은 컨베이어 벨트라는 뜻으로 컨텐츠를 슬라이드 형태로 구현하는 것이다.위치와 크기에 대한 스타일링은 제외하고 캐러셀에 대한 스타일만 작성했을 때 위와 같은

stopPropagation객체지향 프로그래밍2-1 생성자2-2 prototype2-3 객체 상속🕵️‍♀️ stopPropagation이란?지난 게시물에 포스팅한 event.preventDefault는 이벤트 동작 자체를 막을 수 있지만 이벤트 전파를 막을 수는 없었

생성자 함수1-1 사용자 정의 패턴1-2 모듈 패턴1-3 모듈 패턴 + 사용자 정의 패턴클래스2-1 클래스 상속2-2 비공개(private) property이전 게시물에 포스팅한 생성자 함수 패턴은 사용자 정의 패턴으로 외부에서 데이터를 쉽게 관리할 수 있다.중요한 정

최적화웹페이지 렌더링2-1 파싱2-2 스타일 계산2-3 레이아웃2-4 페인트2-5 컴포지팅반응 시간3-1 requestAnimationFrame 3-2 Document fragment메모리4-1 메모리 생명 주기4-2 메모리 누수와 Garbage Collection🕵

정규식 표현promise / async, await🕵️‍♀️정규식 표현이란?문자열을 표현하는 데 사용하는 형식 언어이다. 예를들어 "AbbCd123" 이라는 문자열이 있을 때 숫자만 뽑아내거나 대문자, 소문자, 알파벳 등등 필터링해서 결과를 얻고 싶을 때 사용한다.어

localStorage🕵️‍♀️localStorage란?웹 스토리지 중 하나로 key와 value 형태의 데이터이며, 페이지 새로고침, 재실행해도 데이터가 사라지지 않는다. 아래 사용법을 보면 알겠지만, Map 자료형과 흡사하다.✍ 사용법localStorage.set

jQuery🕵️‍♀️ jQuery란?자바스크립트의 유명한 라이브러리로 프로그래밍 효율을 높여준다. 다만, 더 좋은 라이브러리, 프레임워크가 많기 때문에 예전에 비해 사용이 많이 줄었다.✍ jQuery를 사용하는 이유1\. 빠르고 작다. 2\. 요소 선택과 제어 방법이

Ajax자료구조와 알고리즘🕵️‍♀️ Ajax(에이작스)란?자바스크립트를 이용하여 브라우저가 서버에게 비동기적으로 데이터를 요청하고, 응답 받은 데이터를 동적으로 페이지 렌더링 하는 방식을 Ajax(Asynchronous Javascript and XML)라고 한다.

three.js🕵️‍♀️three.js란?웹 페이지에서 3D 효과를 표현할 수 있게 해주는 자바스크립트 라이브러리이다.Scene : 전체 공간Mesh : 실제 오브젝트들(캐릭터, 바닥 등)Camera : 사용자가 실제로 보는 화면(Rederer)을 담는 녀석Light

멋사 FE 스쿨 2기 교육받은 지 절반이 되었다. 지금까지 지각 한번 없다는 거에 나름대로 자부심이 있어 사진을 올렸다.🤣교육받은 지 절반 되었겠다 중간 회고 글을 작성하려던 차에 멋사에서 보내주신 굿즈를 받았다. 뭔가 멋있어 보이는 박스 포장에 소소한 감동을 하

Linked List정렬2-1 선택 정렬2-2 삽입 정렬2-3 병합 정렬🕵️‍♀️Linked List(연결 리스트)란?각 노드가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 방식으로 데이터를 저장하는 자료 구조이다.위 코드는 오늘 강의 시간에 학습한 연결 리스트의

페이지 교체 알고리즘트리와 그래프2-1 트리2-2 그래프🕵️‍♀️페이지 교체 알고리즘이란?새로운 값을 메모리에 추가해야 될 때 이미 값이 할당된 메모리 중에서 어느 것과 교체할지를 결정하는 것이라고 생각한다.✍ Hit & Miss메모리에 해당 값이 있다면 cache

Test간단한 Vi command 명령서버 관련 용어정리서비스 배포 절차React추후 프로젝트 진행 시 협업할 반을 공정하게 배정하기 위해 테스트를 진행했고 점수를 받았다. HTML, CSS, JavaScript에 대한 전반적인 개념 문제가 19문제이고, DOM 제어

React1-1 위니브 사이트 (with React)1-2 프로젝트 생성 및 배포body 라는 변수에 JSX 형식으로 Main, Product 함수의 결과를 넣는다.위 소스코드에는 data라는 객체가 없지만 있다고 가정하고 Product 함수에item이라는 변수에 da

React1-1 useState🕵️‍♀️ useState란?변수 값이 바뀌는 경우, 변경된 값을 동적으로 화면에 보여줘야 할 때 사용한다.num이라는 변수와 setNum이라는 함수가 선언되었고, 초기값이 설정되었다.setNum(1)로 num의 값을 변경할 수 있으며,

CSS in JS 단어 그대로 자바스크립트 코드에서 CSS를 작성하는 방식을 말합니다. 리엑트 훅(중요) Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. 16.8 version에 도입 us

React1-1 개념 복습1-2 React 과제💬 React에서 재랜더링 되는 기준 3가지1\. 해당 컴포넌트가 가진 변수가 useState로 수정될 때.2\. 해당 컴포넌트의 부모가 재랜더링 될 때.3\. 해당 컴포넌트의 props가 변경되었을 때.💬 컴포넌트는

React1-1 Route에서 match1-2 useEffect1-3 useRef1-4 useMemo1-5 정리1-6 useEffect와 useMemomatch는 보통 동적인 URL를 렌더링할 때 사용한다.path="/blogdetail/:id" 에서 /:변수명은 동적

📖 오늘 학습 뽀인트! React 1-1 useContext 1-2 Lifecycle, Hook Flow 1-3 useEffect와 useLayoutEffect 1-2 LifeCycle, Hook Flow > 🕵️‍♀️ React의 생명 주기란? LifeCycle

Redux🕵️‍♀️Redux란?state 상태 관리 라이브러리이다. 즉, React의 useState, useEffect 처럼 데이터들의 값이 바뀌었을 때 그 값들을 컴포넌트들에게 전달해주고 그 값들을 다시 화면에 보여준다.💬 지금까지의 오해React와 Redux는

김태곤님 특강figma 특강오전에는 현 Automattic 소속이신 김태곤님의 "프론트엔드 개발자로 취업하기 전에 알았으면 좋았을 것들" 이라는 주제로 특강이 있었다. 실례일 수 있지만, 친한 형이 몇년 더 살아 본 입장에서 진심으로 조언해주는 느낌의 특강이었다.가장

React1-1 Redux1-2 Axios지난 포스팅의 연장인 Redux이다. 다만, 지난 포스팅에서는 Vanilla JS에서의 Redux 사용이고, 이번 포스팅의 주제는 React에서의 Redux사용이다.✍ React에서 Redux 사용Type을 생성하는 함수초기값

코딩 테스트 문제면접 질문 대비카카오 2020년 공채문제로 프로그래머스 lv.4 문제이다. 트라이 알고리즘을 모르는 상태에서 풀이를 보고 트리 형태와 유사하다는 느낌을 받았다.프로그래머스 문제 링크🕵️‍♀️ Trie 란? 문자열을 저장하고 효율적으로 탐색하기 위한 트

면접 질문 대비✍ 기술 면접 질문1\. DTD란 무엇인가요?2\. GET, POST 방식에 대해 설명해주세요.3\. CSS Sprite 기법에 대한 정의와 장단점에 대해 설명해주세요.4\. 형상관리도구(버전 관리 시스템)에 대해 전반적인 설명을 해주세요.(주 5\. p

Github1-1 branch1-2 실습 문제브랜치는 독립적인 작업을 할 수 있는 공간이다. 즉, A 기능을 a 브랜치에서 개발하고 B 기능을 b브랜치에서 각각 개발할 수 있다.main branch : \-readme 파일 'hello world'a branch

Git 장애 대응팀 프로젝트A, B, C 라는 사람이 있고 각자 clone을 받아 작업을 할 때, 순서대로 push 한다면 C에서 오류가 발생한다.B push 이후 C에서 pull, push를 했다면 문제될 부분이 없다.즉, 오류 원인은 A, B에서 작업한 내용이 C에

SEO1-1 구글 검색 작동 방식1-2 SEO 기본 가이드면접 대비🕵️‍♀️ SEO 란?검색 엔진 최적화라는 뜻이다. 구글 검색, 네이버 검색 등 다양한 검색엔진에 제작한 사이트를 빠르게 상위에 노출시키는 방법들을 웹사이트에 적용하는 것을 검색엔진 최적화라고 한다.✍

TDD1-1 Jasmine1-2 Jest(React)면접 대비🕵️‍♀️ TDD 란?테스트 주도 개발이라는 뜻으로 말그대로 테스트 코드를 먼저 작성하여 의도한대로 동작하는지 확인한 뒤에 기능을 구현하는 개발 프로세스이다.✍ TDD 단계1\. 실패하는 작은 단위 테스트

webpack라이브러리 설치접근성🕵️‍♀️ 웹팩이란?모던 JavaScript 애플리케이션을 위한 모듈 번들러이다. 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이들을 조합해서 하나의 결과물로 만

firebase클라우드 서비스🕵️‍♀️firebase란?보통 Front-end <-> Back-end <-> DB 로 서버를 구축하고 데이터를 주고 받는다. 하지만, firebase를 사용하면 서버 없는 개발을 가능하게 하기 때문에 백엔드 없이도 웹 서비스

최근 약 한달 동안 팀 프로젝트를 하면서 블로그 작성을 못 했고수료를 했기 때문에 오랜만에 작성해 본다.성장:1\. 중간 회고 때 벤딩 머신 프로젝트를 스스로 할 줄 안다고 적었었는데 전체 회고인 지금은 API를 활용하여 어느정도의 프로젝트는 가능할 것 같다는 자신감이