비전공자의 IT준비

📌 공부 자료 ✏️ poiemaweb.com 기본적으로 ES6 까지만 공부하면된다고 한다. 타입스트립트도 있으니까 이것도 참고하면 좋을듯 ✏️ ko.javascript.info 여기는 자바스크립트만 집중적으로 하는 곳인데, 이전에 poiemaweb과 중복된 내용

SSAFY 1학기를 마치고, 이제야 진로를 정하게 된 나는 새로운 마음가짐으로 공부를 해야겠다고 판단했다. 그래서 방학이 마무리되고 있는 오늘부터라도 프론트엔드 공부에 전념해야겠다... 이 글이 시발점이다!HTML : tags & attributes, Semantic

사실상 복습의 내용이라서 정말로 몰랐던 태그들만 올릴 예정이다! 그러니 이 글을 참고하는 사람은 양해바람 ㅎㅅㅎHTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 조금 더 자세히 말하면 웹페이지의 내용(content)

해당 자료는 포이웹에서 학습한 자료를 타이핑해서 정리한 내용입니다.2018년 현재 전세계적으로 웹사이트는 19억개, 인터넷 사용자 수는 40억명이다.대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 Google이나 Naver와 같은 검색사이트를 이용한다. “나는 검

해당 내용은 포이웹에서 학습한 내용은 정리한 것입니다.문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다. 문서별 기술 양식은 아래와

해당 글은 포이웹에서 학습한 내용을 정리한 것입니다.최근의 웹 트랜드는 텍스트를 줄이고 이미지나 동영상 등으로 콘텐츠를 구성하는 것이지만 HTML 콘텐츠의 대부분은 텍스트로 구성된다.제목이나 본문, 글자의 형태와 중요도를 나타내는 텍스트에 관련된 태그들을 알아보도록 하

HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다.이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가

type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있다start 어트리뷰트로 리스트의 시작값을 지정할 수 있다.reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현한다.목록 태그는 내비게이션 메뉴를 만들 때 자주 사용된다.표(table)를

웹페이지에 이미지를 삽입하는 경우, img tag를 사용한다.audio 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.→ 기존 오디오 파일에서 재생버튼을 누르면 실행됨웹브라우저 별로 지원하는 음악 파일 형식이 다르다. 파일 형식에 따라

form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다.GET과 POST는 HTTP 프로토콜을

웹페이지의 레이아웃을 구성하기 위해서 공간을 분할할 필요가 있다.공간을 분할할 수 있는 태그는 div, span, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다.그런데

해당 자료는 포이웹에서 학습한 내용입니다. CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Elem

해당 내용은 포이웹에서 학습한 내용입니다. CSS(Cascading Style Sheets)는 HTML 요소(Element)의 style(design, layout etc)을 정의한다. 그리하려면 HTML이 존재하여야 하고 또한 style을 적용하고자하는 HTML 요

해당 자료는 포이웹의 내용입니다.

해당 자료는 포이웹에서 학습한 내용입니다. 모든 HTML 요소는 Box 형태의 영역을 가지고 있다. Box 형태란 물론 사각형을 의미한다. 이 Box는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)로 구성된다. 브라우저

해당 자료는 포이웹에서 학습한 내용입니다. 📌 display 프로퍼티 display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다. 모든 HTML 요소는 아무런 CSS를 적용하지 않아도 기본적으로 브라우저에 표현되는 디폴트 표시값을 가진다. HT

해당 자료는 포이웹에서 학습한 내용입니다.Background 관련 프로퍼티는 해당 요소의 배경으로 이미지 또는 색상을 정의한다.자세한 내용은 CSS Background and Borders를 참조한다.요소에 배경 이미지를 지정한다.MDN: background-image

해당 자료는 포이웹에서 학습한 내용입니다.폰트 및 텍스트 관련 프로퍼티는 폰트의 크기, 폰트의 지정, 폰트의 스타일, 텍스트 정렬 등을 정의한다.텍스트의 크기를 정의한다.font-size폰트를 지정한다. 컴퓨터에 해당 폰트가 설치되어 있지 않으면 적용되지 않는다.fon

해당 자료는 포이웹에서 학습한 내용입니다.position 프로퍼티는 요소의 위치를 정의한다. top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다.static은 position 프로퍼티의 기본값으로 position 프로퍼티를 지정하지 않

해당 자료는 포이웹에서 학습한 내용입니다.float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox 레이아웃를 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레이아웃을 지원하지 않는

상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다.하지만 모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에는 상속이 되는 것

CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용하여야 한다.Can I use?에서 제공하는 브라우저별 CSS 지원 정보를 보면 텍스트와 요소의 선택을 방지하는 user-

텍스트나 요소에 그림자(Shadow) 효과를 부여하기 위한 프로퍼티를 선언한다.텍스트에 그림자 효과를 부여하는 프로퍼티이다.요소에 그림자 효과를 부여하는 프로퍼티이다.css3generator.comcss3gen.comcssmatic.com

그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다. CSS3가 이 기능을 제공하기 이전에는 포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과의 이미지를 제작하여 사용하였다. 그러나 이러한 방법은 이미지 다운로드에

트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 예를 들어 아래의 예제를 살펴보자. div 요소는 기본 상태에서 hover 상태로 변화할 때, CSS 프로퍼티 bord

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다.tr

트랜지션은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다.애니메이션은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다.트랜스폼(Transf

웹디자인 관점에서 폰트의 선택은 중요한 의미를 갖는다. 대부분의 정보는 텍스트와 이미지로 전달되고 아직은 텍스트가 주를 이루기 때문에 더욱 그러하다. 이전에는 웹에서 사용할 수 있는 아름다운 한글 폰트가 적어 포토샵 등으로 로컬 폰트를 사용하여 텍스트를 이미지로 만들어

이전에는 table을 사용하여 layout을 만들기도 하였으나 html과 css의 본연의 취지와도 맞지 않을 뿐더러 반응형 웹 페이지 작성이 곤란하며 코드의 양 또한 많아져 현재는 거의 사용하지 않는다. 모던한 웹 페이지는 style과 layout을 담당하는 CSS를

앞에서 살펴본 layout 에는 사실 몇가지 문제가 숨겨져 있다. 그 문제를 해결할 열쇠는 바로 Responsive Web Design이다.먼저 어떤 문제가 있는지 알아본다. 화면폭을 좁히면 아래 그림과 같이 화면이 망가지는데 이것는 HTML 요소에 고정폭을 지정하여

이 포스트는 Scotch.io : A Visual Guide to CSS3 Flexbox Properties를 바탕으로 작성되었다.Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이

정렬 대상 요소(텍스트 또는 링크 등의 inline 레벨 요소 또는 inline-block 레벨 요소)의 부모 요소에 text-align: center;를 지정한다.정렬 대상 요소에 너비를 명시적으로 지정하고 margin-right와 margin-left 프로퍼티에 a

컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다.이 문제가 발생하는 이유에 대해 살펴보자. 단순히 문제 해결 방법을 외우지 않고 문제가 발생하는 이유를 이해하면 문제 해결 방법을 기억하는 것에 도움이 된다.image 요소

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.Bootstrap은 빠르고 간편한 반응형 웹 디자인(res

Bootstrap은 Mobile-first 방식을 기본 지원하므로 Media query(https://poiemaweb.com/css3-responsive-web-designBootstrap은 기본적으로 4개의 breakpoint로 구간을 나눈다.@screen

Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.CSS의 간결한 문법은

SassScript는 CSS에서는 불가능한 연산, 변수, 함수 등의 확장 기능을 의미한다.프로퍼티 값으로 사용할 수 있는 값에는 각각의 데이터 타입(Data type)이 존재한다. SassScript는 7가지의 데이터 타입을 제공한다.숫자형e.g) 1.2, 13, 10

Nesting은 Sass의 유용한 확장 기능으로 선언을 중첩(nesting)하는 것이다.CSS는 후손 셀렉터(Descendant combinator)(https://poiemaweb.com/css3-selectorSass의 nesting을 사용하면 후손 셀렉터

Sass Built-in function에는 다양한 내장 함수를 제공한다. 그 중에서 활용 빈도가 높은 함수를 소개한다.zip(1px 1px 3px, solid dashed solid, red green blue)=> 1px solid red, 1px dashed gr

Webpack 개발 환경에서 Sass를 사용해보자. 먼저 다음 명령을 사용해 필요한 패키지를 설치한다.package.json은 다음과 같다. npm scripts에 build를 추가한다.프로젝트 루트에 webpack.config.js 파일을 생성하고 다음과 같이 수정한

Object.assign은 타킷 객체로 소스 객체의 프로퍼티를 복사한다. 이때 소스 객체의 프로퍼티와 동일한 프로퍼티를 가진 타켓 객체의 프로퍼티들은 소스 객체의 프로퍼티로 덮어쓰기된다. 리턴값으로 타킷 객체를 반환한다. ES6에서 추가된 메소드이며 Internet E

일단 Python은 사실 이미 싸피 1학기때 했기 때문에 문법 중에서 헷갈리는 것만 여기다가 올려 놓을 계획이다. 실력이 점차 감소하고 있어서... 글이 길어질수도 있음 ㅎa - Kima - Kim꼭 값을 출력할 때, list()로 감싸서 출력해라l - {4, 5

리액트 초반 설정에 대한 세팅 자료

📌 목적 > 프로젝트를 하면서, 여러 방식의 Axios 요청이 있었는데 이에 대한 코드를 저장하면서 앞으로 계속 참고하는 식으로 공부하려고 붙임! 📌 코드 및 코드 설명 🤞 메인 코드 - 리스트 GET 🤞 관련 코드(map) 🤞 메인 코드 - 리스트 G

📌 예제 1 📌 예제 2 📌 예제 3 📌 예제 4 📌 예제 5 📌 예제 6 📌 예제 7 📌 예제 8 📌 예제 9 📌 예제 10 📌 예제 11 📌 예제 12 📌 예제 13 📌 예제 14 📌 예제 15 📌 예제 16 📌 예제 17 📌 예제 18 📌 예제 19 📌 예제 20 📌 예제 21 ...

설명은 주석을 통해서 이해하기.

위 코드에서 주석은 코드의 각 부분에 대한 설명을 제공합니다. 이를 통해 코드를 이해하고 유지보수하기 쉬워집니다. 또한 SPDX-License-Identifier 주석을 포함하여 라이선스 정보를 명시함으로써, 코드 사용 조건을 명확하게 지정합니다.Remix 에서 첫번째

타입스크립트(enum)은 서로 관련된 상수 값을 정의하기 위한 강력한 도구입니다.enum은 열거형의 약자로, 미리 정의된 일련의 상수 값을 가지는 자료형입니다. enum은 이러한 상수 값을 열거하는 데 사용되며, 이러한 값은 enum의 멤버라고 합니다.enum을 사용하

Score라는 문자열 리터럴 타입을 정의하고, 이 타입은 'A', 'B', 'C', 'F' 중 하나의 값을 갖습니다.User라는 인터페이스를 정의하고, 이 인터페이스는 다음과 같은 속성을 가집니다.name: string 타입age: number 타입gender?: st

위 TypeScript 코드에서 add 함수는 num1과 num2 두 개의 매개변수를 받습니다. 이 두 매개변수는 모두 number 타입입니다. 이 함수는 console.log를 이용해 두 매개변수의 합을 출력합니다.리턴값이 없는 함수의 경우, TypeScript에서

해당 코드에서 리터럴 타입은 다음과 같습니다.Job 타입: "police", "developer", "teacher" 중 하나의 값을 가질 수 있습니다.HighSchoolStudent 인터페이스의 grade 속성: 1, 2, 3 중 하나의 값을 가질 수 있습니다.리터럴

먼저 주석에서 설명한 것과 같이 접근 제한자에는 public, protected, private가 있습니다. 이 코드에서는 readonly, static도 사용되었습니다.readonly: 해당 속성은 값을 읽을 수만 있고, 변경할 수 없습니다. 이 코드에서 name 속

제네릭 함수 getSize는 배열의 길이를 반환합니다.arr 파라미터는 T 타입의 배열입니다.T는 getSize를 호출할 때 타입 인자로 결정됩니다.Mobile 인터페이스는 모바일 기기를 나타냅니다.T는 option 속성의 타입입니다.m1과 m2는 Mobile 객체입니

keyof: 객체의 모든 속성 이름을 문자열 유니온 타입으로 추출합니다.Partial<T>: 타입 T의 모든 속성을 선택적(optional)으로 만듭니다.Required<T>: 타입 T의 모든 속성을 필수적(required)으로 만듭니다.Readonly&lt

별 것도 없는게 코드가 엄청 길다... 프로젝트 할때 폴더 구조를 잘 짜야할 것 같다.

일단 삭제를 했지만, 다른 액션에 문제가 발생한 상황...그래서 좀 더 잘하는 친구에게 이 에러를 맡기기로 했고...나는 일단 redux에 대해서 자료를 올려놓고, 저 에러가 해결이 된다면, 그때 다시 수정해서 올리겠다.난 항상 로직도 문제지만, redux를 어떻게 작

일단 여러 에러들을 확인했고, toggle에 대한 saga와 reducer를 작성하지 않았기 때문에 발생했던 것들이 대부분이었다.체크박스를 클릭해도, db에서는 바뀌지 않는다. \-> (toggle reducer, toggle saga 가 없었음)수정할 때, compl

📌 fetch로 해야댐(서버에서 body로 받을때) 📌 Axios 요청 시에는 안됨

📌 현재 작성중인 코드 일부분

프로젝트를 정리하면서, 팀원들의 느낀점을 보다가 데이터 캐싱이라는 단어가 자주 나와서 관심을 가지고 찾아보았다. 그러다가 데이터 캐싱과 관련된 것 중에, useMemo, useCallback 가 눈에 들어왔다. 그래서 가볍게 찾아보고 다음 프로젝트에는 이에 대한 생각을

useEnhancedEffect 는 MUI 라이브러리 사용 시, 권장되는 Hook이며, useEffect를 대신한다. 그리고 에러를 해결하기 위해서는 useEnhancedEffect 또는 useEffect를 사용하여, setState를 래핑해야 위와 같은 에러를 발생시

해당 화면을 구현하기 위한 코드이다.useRecoilState 은 useState의 업그레이드 버전이라고 생각하자. 대신 atom({ key:'key', default:'default' }) 가 필요하다.useRecoilValue 은 useRecoilState의 val

1학기 - 문과생의 IT 적응기, 2학기 - 적응 이후 보여줄 나의 퍼포먼스

면접스피치 꿀팁 정리입니다~~~!!!

직무면접에 대한 가이드 내용 정리

인성면접 가이드

저는 항상 해당 이미지를 당연하게 생각했었습니다. 근데... 오늘 한번 만들어보니 왜 해당 파일이 생성되었는지에 대한 의문이 생겼습니다. 물론 어떻게 설치하고 실행하는지에 대한 내용이라고 생각합니다. 하지만 영어로 되어있기 때문에(?) 이에 대해서 번역(?)을 해보려고

처음에는 socket.io를 구현해서 React로 채팅할 수 있는 화면을 간단히 구현해보려고 했다.그러다보니... 소켓 통신 자체를 로컬끼리해서 의미가 있나 싶었다. 그래서 배포를 해보려고 시작하는데...서버 코드랑 클라이언트 코드는 생략하겠습니다!https: