# front end

67개의 포스트
post-thumbnail

어떻게 로그인을 처리할까?-1.JWT 이해하기

시스템을 구현하기 위해서 JWT (JSON Web Token)을 사용한다. JWT 는 데이터가 JSON 형식으로 이루어진 토큰을 의미하며, 두 개체가 서로 안전하게 정보를 주고받을 수 있도록 웹 표준으로 정의된 기술이다. 사용자의 로그인 상태를 서버에서 처리하기 위한

약 11시간 전
·
0개의 댓글

웹 프론트엔드 개발에 도전하다 2편

지난 2 주간 React 라이브러리를 공부하면서 리액트 컴포넌트의 라이프사이클과 메소드의 동작방식, 그리고 api를 사용해 클라이언트와 데이터를 연동시키는 작업을 했습니다. 이번 편에서는 리액트 컴포넌트의 라이프사이클에 대해 자세히 풀어보려고 합니다.리액트의 라이프사이

어제
·
0개의 댓글
post-thumbnail

Front-End RoadMap - 1

프론트엔드 로드맵 정리2020 프론트엔드 로드맵을 기준으로 틈틈히 정리하고 있다 ㅠ-ㅠ

어제
·
0개의 댓글
post-thumbnail

개발자 도구

mac: cmd + option + i or F12 key Elements pannel 페이지와 스타일 검사 및 편집, url이나 img 따오기 좋음. 스타일 수정 좌측 html 우측 css select element button 을 통해 원하는 요소의 코드를 곧바로

2020년 7월 27일
·
0개의 댓글
post-thumbnail

웹 프론트엔드 개발에 도전하다 1편

주니어 개발자의 리액트 라이브러리를 사용한 웹 프론트엔드 공부 기록

2020년 7월 24일
·
0개의 댓글

Typescript의 type정리와 사용

타입스크립트의 여러가지 타입 먼저 타입스크립트에서 자주 사용되는 몇 가지 기본 타입을 알아보자. 위의 코드는 타입스크립트의 기본 타입들을 나열한 것이다. 코드에 어떤 내용이 들어갔는지 한 번 알아보자. 위의 코드를 보면 배열 타입은 두 가지 방법으로 정의할 수 있

2020년 7월 20일
·
0개의 댓글
post-thumbnail

border-box VS content-box

css box-sizing border-box 와 content-box 의 차이를 설명한다.

2020년 7월 20일
·
0개의 댓글

TypeScript의 시작

자바스크립트는 동적 타입 언어다. 따라서 변수의 타입은 런타임에 결정된다. 이와 반대인 정적 타입 언어도 존재한다. 정적 타입 언어는 변수의 타입이 컴파일 타임에 결정된다. 동적 타입 언어에는 파이썬(Python), PHP 등이 있고, 정적 타입 언어에는 자바(Java

2020년 7월 19일
·
0개의 댓글
post-thumbnail

[Front-end] Web Font 웹 폰트

웹 폰트 웹 폰트란? 로컬의 폰트 설치 상황에 상관없이 웹에서 항상 원하는 타이포그래피를 사용할 수 있게 하는 기술 사용법 CSS의 @font-face 규칙을 사용하여 적용한다. font-family : 사용할 웹 폰트의 이름 src : 폰트 파일의 경로와 폰트의

2020년 7월 15일
·
0개의 댓글
post-thumbnail

Google Fonts 적용하기

개인 포트폴리오 사이트를 만들기로 결정했다. 폰트가 깔끔해야 가독성이 높아지는 건 당연지사, 물론 유료폰트도 좋겠지만 아직까진 무료를 써야하는 경제적 상황..😭 https://fonts.google.com/ 여기로 들어가자사이트에 들어가면 이와 같은 화면이

2020년 7월 12일
·
0개의 댓글
post-thumbnail

프론트엔드 공부 순서

이 글은 '프론트엔드 공부 순서, 높은 연봉 받는 프론트엔드 개발자 되기'의 영상 내용을 바탕으로 정리한 내용입니다.이 로드맵은 developer-roadmap 에서 가져왔습니다. 정말 많군요 😆😆 내가 웃는게 웃는게 아니야HTML : 기본중의 기본CSS : Flo

2020년 7월 12일
·
0개의 댓글

front-end tips

이 글은 '유튜버 프론트엔드 개발자 김버그님'의 영상 내용을 바탕으로 정리한 내용입니다.예전부터 봐왔던 유튜버 김버그님이다. 🥰 우연히 유투브 알고리즘으로 접하게 되었는데 너무 매력적이고 내 스타일이여서 당시에 영상을 하루종일 봤었던 기억이 있다. 최근에 또 영상을

2020년 7월 4일
·
0개의 댓글
post-thumbnail

First Project part-2

상태관리의 중요성을 느꼇 던 것 같다. 리액트의 상태는 상위컴포넌트에서 관리하고 하위컴포넌트에게 프롭스로 전달하는 흐름인데하위 컴포넌트에서는 절대 직접 상태를 관리할수가 없다 . 그러하여 파일이 복잡해질수록 , 많아질수록 상태관리를 여간 까다로운게 아니다 . 사실 처음

2020년 6월 27일
·
0개의 댓글

프론트엔드 기술 문제

1. window 객체가 무엇일까요? 브라우저 객체 모델(BOM)의 핵심이자 브라우저의 인스턴스 > 브라우저 객체 모델(BOM)이란, 브라우저 창에서 접근하고 조작할 수 있게 하는 인터페이스 브라우저 객체 모델(BOM)은 브라우저 창과 보이는 영역인 window를

2020년 6월 24일
·
0개의 댓글
post-thumbnail

고대하던 three.js 와의 첫 만남

HTML을 처음 배우기 시작했던 작년 여름, 해외 웹사이트들을 눈팅하다가 한눈에 반해버렸던 2D/3D WebGL 라이브러리 - three.js 🤩시각적인 결과물을 내는 작업을 좋아하는 나에게는 아주아주 매력적인 도전 과제였다.현란한 애니메이션과 3D 요소들이 너무 복

2020년 6월 21일
·
0개의 댓글
post-thumbnail

First Project part-1

1. 컴포넌트 설계 나의 첫번째 프로젝트를 시작하였다 . 프로젝트 내용은 코로나 사태로인한 경기도 긴급재난자금 사용처를 알려주는 웹사이트이다 https://mask-nearby.com/ 마스크알리미 웹을 모티브 삼았다. 내가 맡은역할은 Front-end 이다 우선

2020년 6월 14일
·
0개의 댓글
post-thumbnail

Sapper IE 11 Support

Sapper에서 IE 11 지원이 안되는 상황을 정리한다.

2020년 6월 13일
·
0개의 댓글
post-thumbnail

[error] React에서 static file 불러오기

CRA로 만들어진 리액트 앱에서 public 폴더를 이용하면 간단하게 정적 파일들에 접근할 수 있다. 예를 들어 로컬에 있는 이미지를 이용하고자 한다면, public 폴더 내에 images라는 폴더를 만들고 이미지들을 넣는다. 그리고 리액트 컴포넌트에서 해당 상대경로를 넣으면 정적 파일에 쉽게 엑세스할 수 있다. 참고 자료 https://stackov...

2020년 6월 13일
·
0개의 댓글