Study Note ✍🏻

과제를 진행하는 중 "하이퍼링크의 보안 취약점을 보완하기 위한 속성도 선언"하라는 요구사항을 받았다. a 태그에서 target을 사용을 해보면서 처음 알게된 내용이라 무슨 이슈가 있는지를 알아보고 싶었다. MDN 문서를 보면 target 영역에 참고로 window.o

HTML/CSS 과제를 진행하면서 받았던 요구사항 중에 다음과 같은 요구사항이 있었다.스크린리더 사용자도 해당 배경 이미지에 따라 평점 점수를 이해할 수 있도록 구현해주세요.텍스트 “|”로 삽입하고 해당 문자가 화면에는 보이지만 스크린리더에서는 읽을 수 없도록 마크업해

아이콘을 가져오는 방법에는 크게 이미지 파일 (ex. jpg, png 등), Icon Fonts, SVG 파일로 나뉜다고 한다. 이미지 파일과 SVG를 이용해서 아이콘을 다루는 것은 많이 해봤는데 Icon Fonts는 처음 알게 된 내용인데 유용하게 쓰일 것 같아 기록

px이 문제가 될까? 기초적인 CSS를 배울 때면 px를 보통 사용하곤 한다. 필자는 어릴적부터 photoshop을 자주 접한 영향 때문인지 픽셀이란 단어가 굉장히 친숙하다. 대부분의 사람들도 마찬가지라고 생각된다. 하지만, 요즘 CSS에서는 px 대신 다른 단위를 사

필자는 실제로 프로젝트에서 CSS 작성할 때 제일 기억 안 나는 부분 중에 하나가 배경 속성이었음... 그렇기 때문에 배경속성을 오늘 꼭 마스터해보도록 하겠다.요소의 배경의 색상을 넣을 수 있음.아래와 같이 사용할 수도 있음.요소의 배경에 이미지를 넣을 수 있음.CSS

요소에 미세한 그림자 효과 하나만 추가되어도 디자인 퀄리티가 살아나는 느낌을 많이 받았다. 그래서 CSS 작업할 때 box-shadow 효과를 열심히 해봤는데 생각만큼 예쁘게 나오질 않았다. 예쁜 shadow 디자인을 찾으면 다 나오니 작업할 때는 이것들을 주로 사용했

이 속성을 따로 정리하고자 한 이유는 CSS를 하면서 float를 제대로 활용하지 못하고 있는 것 같다는 생각이 들어서 내가 float를 제대로 이해하고 쓰는 게 맞을까? 생각해보니 단순히 왼쪽/오른쪽에 뜬다 정도밖에 모르는 것 같아서 확실하게 정리를 해보고자 글을 쓰

레이아웃 공부를 할 때 position, flex, grid를 배웠으니 이를 이용해서만 레이아웃을 설계했는데, 강의 실습을 하다보니 수직중앙정렬이 안 돼서 한~참 헤맸는데 모범답안을 보니 vertical-align을 사용해서 정렬을 하더라. 강의에서는 못들어본 내용이고

CSS 강의를 들을 때 선택자 강의를 듣고 아주 간단하구먼? 별거없네라고 생각했는데... 제대로 공부해보니까 선택자 종류가 어마어마어마어마하더라..그래서 놓친 선택자들도 확인하고 다시 한 번 복습하고자 오늘은 선택자를 공부하도록 하겠다.특정한 HTML 태그를 선택할 때

CSS 중에 핵심은 레이아웃 페이지 내 UI를 제작하면서 제일 어려웠던 건 역시 레이아웃이었다. HTML 태그는 block / inline 두 가지로 배치가 되기 때문에 레이아웃을 대충 알고 제작한다면, UI에 시간이 매우 많이 들어가게 될 것이다. 필자 또한 레이아웃

과제를 진행하다가 아래와 같은 UI를 구현하게 되었다. 하지만, 각각의 요소들이 content 영역만큼 width를 가지지 않고 부모의 width를 따라가도록 구현이 되었다. 그 이유는 flex로 선언되면 자식의 width는 부모의 width를 따라간다는 특성 때문이었

프로젝트를 하면서 레이아웃을 구현할 때 아래와 유사한 레이아웃을 구현할 필요가 생겼다.여기서 sidebar는 고정되어 있고, content만 scroll이 작동하도록 구현되어야 했다. 최종적으로는 fixed 속성을 이용해 top/right 값으로 해당 위치에 고정시켜주

자식 요소의 크기가 부모 요소의 크기를 초과했을 때 자식 요소들의 출력 방식과 스크롤바 생성을 제어할 수 있다.수직과 수평 방향은 각각 제어할 땐 oveflow-x, overflow-y로, 두 개를 동시에 제어할 때에는 overflow 속성을 사용한다.visible :

CSS는 단순히 디자인 수준이라고만 생각했는데 점점 배워갈수록 기본 레이아웃을 설정할 수 있는 것 외에도 여러 기능을 할 수 있다는 걸 배워가는 것 같다. 그렇기 때문에 CSS 공부는 스스로 요구사항을 구현해나가면서 이것도 가능할까? 라는 생각을 계속 해나가야 하는 것

이번에 새로운 프로젝트를 진행하면서 UI를 구현하고 있는데 요구사항 중에 "게시글 목록 중 완료 상태인 게시글의 썸네일 이미지를 흑백으로 나타낸다"가 있었다. 처음 해당 요구사항을 보고 이미지 위에 검은색을 올려 opacity를 적용시키면 되겠다라고 생각했는데, CSS

한 달이 훌쩍 넘은 과제 요구사항으로 제시됐던 내용인데 업로드를 까먹고 있다가 임시저장 글에서 발견해서 뒤늦게나마 정리하는 글!! 과제에서 요구했던 내용은 `텍스트는 스크린리더에서는 읽을 수 있지만 화면에는 보이지 않도록 구현해 주세요.` 였다. 텍스트를 화면에서 숨

이번에 프레임워크 과제에서 다크/화이트 테마를 구현해야 했다. 처음에는 테마 상태에 따라 조건부 렌더링하는 식으로 구현을 했는데 찾아보니 tailwindCSS에서 쉽게 다크 테마를 구현할 수 있는 방법이 있었다.Tailwind는 기본적으로 다크 모드를 두 가지 방식으로

이전 프로젝트에서 사용해본 방식인데 편리함이 진짜 넘사수준으로 좋아서 제일 만족했던 기술이었기 때문에 다음 프로젝트에서는 조금 더 공부를 해보고 응용해보려고 한다. 이전에는 공부 하나 없이 바로 사용했던터라 기초부터 심화까지 제대로 공부해보고자 한다.React, Vue

기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹 문서 또는 이를 위해 사용하는 기법현재 화면에 보여지고 있는 영역.기기 별로 뷰포트가 다르므로, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 발생.HTML

완전 기초적인 사용방법을 정리하는 게시글은 아닙니다. 개인의 강의와 공부를 통해 배운 것들을 정리하는 게시글입니다.시간과 장소에 관계없이, 인터넷과 컴퓨터만 있으면 곧바로 자유롭게 사용할 수 있는 디자인 툴. 현재 모든 UX 디자인 툴 중 가장 핫함.온라인에서 사용할

자바스크립트가 아니더라도 언어를 배운 사람이라면 삼항 연산자와 논리 연산자를 잘 알 것이다.React 개발을 하다보면, 삼항 연산자를 굉장히 자주 쓰게 되고, 논리 연산자는 평소 알던 방식과는 다른 방식으로 사용을 하게 된다. 논리 연산자의 정확한 의미를 몰랐기 때문에

일단 필자는 JS 전공 수업으로만 들어보고 거의 사용하지 않긴 했다. 그 이유는 모든 언어를 JAVA로만 해결하고자 하는 안 좋은 습관 때문었는데, 수업에서 다른 언어를 사용하라고 하지 않는다면, 항상 JAVA를 선택했기 때문에 (JAVA로 알고리즘이 먼저 떠올라서 그

요즘 JS 공부를 정~말 많이하고 있는데, 어제 공부한 챕터가 "프로토타입"이었다. 내가 알고있는 프로토타입은.... 이건데?당연히 이걸 의미하는 건 아니고.. 자바스크립트에서 객체를 상속하기 위해 사용하는 방식이라고 하더라.. 낯선 용어에 일단 공부를 진행했다. 하지

JS 공부를 Deep Dive를 통해서 하고 있고 지금 30% 정도 정독을 했는데... 지금부터 한 챕터마다 고난을 맞이하는 것 같다... 내가 알던 자바스크립트가 이렇게 어려운 것이었나... 벌써 또 막혀버렸단 말이지...갈 길이 구만리 그 이상인 것 같으니 사족 없

코딩 문제를 풀이하다보면 10문제 중 9문제는 배열을 사용한다해도 과언이 아닌데, 배열 관련해서 정말 많은 함수들이 있는데 이들의 사용방법들을 제대로 공부한 적 없이 거의 감으로 사용했던 적이 많다. 그렇기 때문에 간혹 의도했던 방법과 다르게 구현될 때가 많았고, 오류

element : 해당 이벤트를 적용할 DOMevent : 이벤트 타입 (대표적으로 click, DOMContentLoad, scroll, submit)callback : 이벤트를 발생시켰을 시 호출될 함수options : (선택) 이벤트의 추가 설정하나의 이벤트 대상

과제에서 커스텀 이벤트와 관련된 내용이 있었다. 커스텀 이벤트 구현해본 건 처음이었고, 유용하게 쓰일 수 있을 것 같아 정리하고자 한다. # Custom event JS의 내장 이벤트(click, scroll 등)가 아닌 사용자가 생성한 이벤트로 Event 혹은 Cu

자바스크립트 과제를 하면서 모든 과제에 공통적으로 요구된 내용 중에 하나가 가급적 이벤트 위임(event delegation)을 통해 이벤트 핸들러를 등록한다. 였다.강의를 들으면서 이벤트 위임에 대해서는 배웠지만, 이에 대해서 정확하게 왜 이벤트 위임이 존재하는지 왜

우선순위 작업이 끝날 때까지 기다리는동안 준비상태가 되기 때문에 다른 작업을 할 수 없다.특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성. 동시에 여러가지 작업을 처리할 수 있고 다른 함수를 호출 할 수도 있다.

동적 웹 사이트를 만들기 위해서는 비동기적으로 서버의 request를 보내고 response를 받아와야 한다. AJAX는 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. (요즘은 XML보다는 JSON을 주로 사용한다.)AJAX를 구현하기 위해서 브라

여러 기능들에 관한 코드가 모여있는 하나의 파일스크립트의 크기가 점차 커지고 기능이 복잡해지자 자바스크립트 커뮤니티는 라이브러리를 만들어서 필요한 모듈을 언제든지 불러올 수 있도록 하거나 모듈로 쉽게 분리 할 수 있는 방법들을 제시했다.유지보수성 : 기능들이 모듈화가

작성하는 코드는 문법을 설명하기 위해 필요한 일부분만 보여주고 있습니다. 참고바랍니다.XML과 유사한 구문을 사용하여 문서 개체 모델 트리를 생성할 수 있는 JavaScript 확장 문법.UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장.브

React는 하나의 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 때 props를 사용. (부모 컴포넌트->자식 컴포넌트 : 단방향 데이터 흐름).데이터 흐름을 동적으로 만들고 싶을 때 유용.부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이기 때문에 자식 컴포넌트에서는

React의 Component 선언 방식은 함수형 Component랑 클래스형 Component로 나뉜다. 현재는 대부분 함수형 Component로 개발을 한다.state, life cycle 관련 기능을 사용할 수 없음. (현재 Hook을 통해 해결 됨)클래스형 Co

이전 프로젝트를 진행하면서 useEffect를 사용했을 때 오류가 발생했던 부분이 있었다. 이를 해결하기 위해 구글링을 해본 결과 해당 부분에서는 useCallback을 사용해야 한다는 걸 알게 되었다. 그당시 useCallback은 사용해본 적도 없고, 자세하게 알고

React로 개발을 하다보면 거의 항상 마주하게 되는 warning이 있다.해당 문구를 처음 봤을 때는 warning이기도 하고 오류가 발생하는 것은 아니라서 크게 신경을 안 쓰게 됐는데 프로젝트를 하게 될 때마다 이 오류가 났고, useCallback을 사용하면서 대

전역 데이터(Global Data)를 props와 State만을 사용하게 되면 props를 여러번 내려주어야 한다. 이를 Prop Drilling이라고 한다. 이를 해결하기 위해 React에서는 Context를 사용한다.Context.Provider 컴포넌트를 통해 데

useReducer는 State(상태)를 관리하고 업데이트하는 Hook에만 useState를 대체할 수 있는 Hook. 즉, useState처럼 State를 관리하고 업데이트할 수 있다.useReducer는 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을 그

useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻한다. 자바스크립트에서 특정 DOM 을 선택하기 위해서 querySelector 등의 함수를 사용했다. React에서도 DOM을 직

클라이언트 사이드 렌더링을 하는 SPA(Single Page Application)의 특징을 가지는 React에서 다른 URL마다 다른 컴포넌트 뷰를 보여주려면 React-Router 라이브러리가 필요하다. 또한 클릭이벤트가 발생할 때 페이지를 새로고침 없이 이동하기

렌더링은 HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 사용자가 눈으로 볼 수 있도록 시각적으로 출력하는 것을 의미한다.프리렌더링이란 웹 페이지를 로딩하기 이전에 이루어지는 렌더링을 의미한다. 프리렌더링을 하게 되면 초기 로딩이 빨라지고 검색 엔진 최적화

Next.js를 써보면서 가장 크게 느낀 건 CSR, SSR을 잘 이해하고 있다고 생각했는데, 실제로는 그렇지 않았다는 것이다. Next.js의 관점에서 CSR, SSR을 어떻게 봐야할지를 다시 한 번 공부해볼 필요가 있다고 생각됐다. 그래서 오늘은 CSR, SSG,

해당 게시글에서 작성되는 코드는 필자의 이전 프로젝트에서 사용했던 코드의 일부를 이용하여 작성하였으며, 불필요한 부분은 생략하여 작성되었음을 알립니다.인증 (Authentication)과 인가 (Authorization)을 합쳐서 말함.인증 : request를 보낸 사

이전 프로젝트에서 실시간 채팅을 구현하기 위해 WebSocket과 SSE를 이용하여 채팅과 알림 서비스를 구현해보았다. 프로젝트 초기 계획은 WebSocket만 사용하여 채팅을 구현하려고 했는데, socket이 채팅 페이지에서만 연결 되다보니 다른 페이지에서 새로운 채

SPA (Single Page Application)은 파일 하나와 다수의 자바스크립트 코드 그리고 CSS 파일로 구성된다. 수백, 수천 개의 컴포넌트를 작성할 때 만들어진 자바스크립트 파일은 모두 빌드 과정을 거쳐서 하나 또는 몇 개의. js 파일로 빌드된다. 브라우

하나의 통합된 코드 베이스로 여러 비즈니스 기능을 수행하는 전통적인 아키텍처 스타일. 즉, 단일 애플리케이션 내에 서비스의 모든 로직이 들어가 있는 구조이다. 프로젝트 규모가 작을 때, 빠른 MVP 개발이 필요할 때, 복잡한 비즈니스 로직이 필요하지 않을 때, 변경이

컴퓨터 시스템은 크게 하드웨어와 소프트웨어로 나뉜다.소프트웨어는 운영체제(Windows, Linux, Mac OS)와 응용 프로그램(운영체제 위에서 돌아가는 여러 가지 프로그램)으로 구분되고, 하드웨어는 CPU(중앙처리장치(필수)), Memory, Storage(SSD

커널과 쉘 쉘 (Shell) 사용자가 운영체제 기능과 서비스를 조작할 수 있도록 인터페이스를 제공하는 프로그램 터미널 환경(CLI), GUI 환경 두 종류로 분류된다. System call 운영체제가 운영체제 각 기능을 사용할 수 있도록 명령 또는 함수를 제공 API 내부에는 필요시 해당 운영체제의 시스템 콜을 호출하는 형태로 만들어짐. 이중 모드 (d...

원소개 n개인 배열의 일부 원소를 골라내서 만든 부분 수열 중, 각 원소가 이전 원소보다 크다는 조건을 만족하고, 그 길이가 최대인 부분 수열을 최장 증가 부분 수열이라고 한다.해당 문제에 가장 유명한 문제는 가장 긴 증가하는 부분 수열이다. 실제로 LIS 알고리즘을

연결 관계를 표현하기 위해 사용. 단순히 노드(N, node)와 그 노드를 연결하는 간선(E, edge)을 하나로 모아 놓은 자료 구조.Node와 Node 사이에 Edge가 있는 경우, 서로 인접해있다고 표현할 수 있다.Node와 Node를 잇는 길을 경로라고 한다.

PWA는 웹과 앱의 장점을 결합한 기술로, 모바일에서 앱과 같은 사용자 경험을 제공한다. 모바일 웹앱처럼 쉽게 개발하고 네이티브 앱과 똑같은 사용자 경험을 제공하는 것이 궁극적인 목표로 한다. 즉, 본질은 웹이지만 모바일 이용자들이 앱을 설치하지 않고도 모바일 웹에서도

프로젝트에서 검색을 구현하던 중 검색 결과로 나온 검색 리스트를 클릭할 경우, 해당 URL로 이동하지 않는 오류가 있었다.검색 리스트를 Link로 설정해두었음에도 클릭 시 리스트가 닫히도록 구현이 된 것이다. 원인을 다음과 같이 생각해봤다.외부 영역을 클릭할 때 리스트

추후 면접에 대해 회고를 따로 가질 수도 있...지만? 면접 중 받았던 질문 중에 답변하기 어려웠던 내용을 정리해보고자 했다. React가 최신 기술이고 대부분의 프론트엔드 직무에서 최소 스펙으로 요구하는 것은 React이기 때문에 당연히 React가 JavaScrip

HTML5 Canvas는 웹 페이지에서 그래픽을 그리기 위한 HTML 요소다. JavaScript를 사용하여 동적으로 그래픽을 생성하고 조작할 수 있는 강력한 도구로, 다양한 웹 기반 그래픽 애플리케이션을 만들 수 있도록 지원한다. 2D 그래픽, 애니메이션, 인터렉션,

이전까지 도형을 그리고, deltaTime을 활용해 중력과 가속도를 고려한 애니메이션을 그리는 법에 대해서 공부했다. 이번에는 키보드와 마우스 입력을 통해 화면이나 오브젝트에 변화를 주는 방법에 대해 정리할 것이다.키보드 입력에 따라 사각형이 움직이도록 해볼 것이다.k

취업하고 첫 글이 옵니다... 현생이 너무 바빠서 차마 글을 쓸 수가 없어서 블로그를 몇 달 유기했는데 그래도 기록해야 이것들도 유의미할 것 같아서 중간중간 쓰려고 합니다.. 화이띵띵!입사하고 프로젝트 하나 중간에 넘겨받은 것 마무리하고, 현재는 새 프로젝트를 시작했는

이번 프로젝트에서 관리자의 게시글 작성 기능을 추가해야 한다. 다만, 단순히 textarea 태그로 해결하기에는 사용성적인 측면에서도 아쉽지만, 가독성을 챙길 수 없다는 큰 단점을 가지고 있다.이전 프로젝트에서 React-Quill 위지윅 에디터를 사용해본 경험이 있었

항상 프로젝트를 시작하면서 하는 생각은 아... 이번 프로젝트로 새로운 걸 배우지는 못하겠네...인데, 또 막상 프로젝트를 하면 항상 새로운 것들을 배운다. 아주 간단하게라도?그리고 또 요즘 느끼는 건 취준을 오래하진 않았지만, 취준을 하기 위한 과정을 나름 오래 거치

지금까지 거의 대부분에 프로젝트에서 이미지 업로드를 구현을 했어야 했다보니까 input 태그를 활용해서 파일을 업로드하고, formData에 넣어서 서버로 요청보내는 로직들은 여러번 경험 해봤다.이번 프로젝트는 거래처에게 제공할 파일들을 제공하기 위한 자료실을 구현했어

오랜만입니다.. 꾸준히 써보려고 하고는 있는데 귀찮음이 너무 크네요.매번 비슷한 무언가를 하다보니 사실 발전이 더딘 것 같다는 생각도 들고, 취준 시절의 이것저것 시도해보고 싶었던 것들을 할 수는 없는 것 같으면서도 그 안에서도 계속 배워나가는 게 있는 것 같아서 나는