win won with

Session vs JWT

윈원윗 — Mon, 9 Oct 2023 09:10:32 +0900

・ Authentication(인증) : 로그인
・ Authorization(권한부여) : 로그인 후 로그인 상태 유지
로그인 상태를 유지하기 위한 기술 : Session 또는 JWT

Session: DB에 회원정보 저장, 로그인 시 유저인증하여 확인
- 모든 회원정보를 저장하기 때문에 관리(생성 및 탈퇴)에 용이
- 회원 수가 많아질수록 경우 DB가 방대해짐
JWT: DB를 거치지 않는 토큰 형식. 토큰 검증으로 로그인하기 때문에 암호화되지 않음
- 토큰이 만료되기 전까지 유효하여 강제탈퇴 등의 기능 사용 불가
- DB를 사용하지 않기때문에 속도 빠름

세션(Session)과 JWT

Authentication vs Authorization 두 개의 단어는 비슷해보이지만 엄연히 다른 프로세스이다. Authentication은 인증이고, Authorization은 권한 부여인데 로그인 시스템에서 중요한 역할을 한다. 웹사이트에

velog.io

프론트엔드 공부루틴 만들기

윈원윗 — Sat, 7 Oct 2023 19:45:58 +0900

개발 공부를 시작하기 앞서 중장기 목표와 계획을 정하고
공부 루틴을 만들기 위한 첫 발걸음을 시작해보자

이유: 프론트엔드로서의 성장 및 이직준비
중기 목표: 짱짱맨 사수되기
장기 목표: 연봉 올려서 이직하기
할일 목록
- 기본 개념: 면접 질문 답변 공부
- 업무 코드 리팩토링: 서적(클린코드, 리팩토링) 또는 스터디 활용
- OS 및 네트워크 지식: 동시성, 메모리 관리, 프로세스 vs 스레드, TCP/IP, HTTP 등
- 웹 개발 관련 공부: React, Next, TypeScript, Redux, React-Query 등
- 네트워킹 활용: IT 커뮤니티 및 뉴스레터 등
- 기술면접 대비: 알고리즘 및 자료구조
- 사이드 프로젝트
세부계획
- 출퇴근 시간을 활용하여 하루에 하나씩 정리해서 포스팅
  → 면접 질문 및 답변 3개 / OS 및 네트워크 용어 3개
- IT 커뮤니티 또는 뉴스레터 보는 습관 만들기 인상깊은 내용 포스팅
  → 일주일에 최소 3개

월	화	수	목	금	토	일
면접질문&답변 뉴스레터	OS&네트워크	면접질문&답변 뉴스레터	OS&네트워크	면접질문&답변 뉴스레터	OS&네트워크	복습 및 휴식

중요한건 하나씩 차근차근 꾸준히!
동기부여 계속 하면서 위 루틴이 익숙해지면 다음 단계로 넘어가보자

조서희 / 꾸준히 코딩하기 | 커리어리

'깃허브 잔디 매일 심기', '하루에 알고리즘 2문제씩 풀기' 같은 것들은 간단해 보이지만 막상 매일 꾸준히...

careerly.co.kr

기술 글쓰기를 통해 개인 브랜딩을 구축하는 나만의 방법 - 재그지그의 개발 블로그

기술 포스트 발행을 개인 브랜딩으로 연결시키는 방법에 대한 전반적인 노하우를 소개합니다.

wormwlrm.github.io

프론트엔드 면접준비2: 면접 질문 목록

윈원윗 — Sat, 7 Oct 2023 19:02:13 +0900

기본적인 개발 지식과 알아두면 플러스요인인 면접 질문의 대해 정리해보자

HTML이란
Hyper Text Markup Language에서 Hyper Text와 Markup Language의 의미
CSS (Cascading Style Sheet)에서 캐스케이딩의 의미
Proceed와 Thread의 차이
동기와 비동기의 차이
비동기를 처리하는 방법
SSR과 CSR의 차이
React 라이브러리가 생겨난 이유
React에서 가상돔의 역할과 생성 이유
RESTful API이란
프론트에서 보안을 신경써야할 점들은?
JavaScript에서의 이벤트(함수) 처리 방식
기타 JS 관련 질문
- 클로저
- 호이스팅
- 브라우저 동작방식
- 이벤트 버블링/캡처링
- 이벤트 델리게이션
- 실행/함수 컨텍스트
- 원시타입/참조타입
- Call by value / Call by reference
- 프로토타입

보다 더 상세하게 적혀있는 아래 링크 확인!

프론트엔드 면접 문제 은행 ★ Front-end Developer Interview Questions

A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.

h5bp.org

프론트엔드 면접 문제 은행 질문 답변

velog.io

프론트엔드 면접준비1: 자격요건, 우대사항

윈원윗 — Sat, 7 Oct 2023 15:26:20 +0900

채용공고에서 많은 기업들이 공통적으로 원하는
프론트엔드로서 갖춰야할 필수요인 및 플러스요인을 정리해보자

프론트엔드 지식으로 유저경험 혹은 개발자 경험을 향상시킨 이야기를 해줄 수 있는 분
Webpack, Browserify, Vite, ESBuild 등 번들러 툴 기반 개발 경험 있는 분
Redux, Recoil 등 상태 관리 개발 경험 있는 분
Next.js 등 SPA Framework를 이용한 SSR 프로젝트에 경험이 있는 분
도메인 문제를 해결하는 것에 관심이 많고 실행하는 분
AWS를 활용한 웹 어플리케이션 개발 경험이 있는 분
AWS 환경에서의 CI / CD 경험이 있는 분
렌더링 최적화 등의 프론트엔드 성능 개선 지식 및 경험이 있는 분
RESTful API와 HTTP 요청 및 응답에 대한 이해가 있는 분
비동기 요청에 대한 경험 및 이해가 있는 분
Git, Notion 등을 활용해 코드 버전 관리 및 문서화 할 수 있는 분
오픈소스 Contribution 경험이 있는 분
UI/UX 개선과 관련된 고민을 좋아하는 분
코드 모듈화 및 디자인 패턴에 능숙한 분
D3.js, Chart.js 등의 데이터 시각화 라이브러리 경험이 있는 분
Unit, E2E 등 테스트 시나리오 수립, 작성 및 테스트 자동화 경험
자료구조, 알고리즘 등에 대한 이해가 있는 분
프로젝트의 한 사이클(서비스 설계부터 구축, 출시까지)을 경험 또는 리드 해보신 분
서버 사이드 개발 경험 혹은 백엔드에 대한 기본적인 이해가 있는 분

퍼블리싱 팁 대방출

윈원윗 — Sat, 26 Aug 2023 16:51:20 +0900

웹퍼블리셔 경력자가 정리한 실무에서 사용하는 코딩 메모장

폰트 x 라인하이트 구하기 : http://pxtoem.com/
어플에서 새창으로 열리는 이슈
a href="javascript:void(0);" -> a onclick="return false;"
메일: <a href="mailto:test@www.co.kr">test@www.co.kr</a>
전화: <a href="tel:02-123-123">02-123-123</a>
커서 방지: cursor: text;
다운로드: download=""
얼럿창
<a href="javascript:void(0);" onclick="alert('준비중입니다.')"></a>
스와이퍼 다음 슬라이드 노출

loopAdditionalSlides : 1,
다중 탭 내에 스와이퍼 (참고: https://sir.kr/qa/364981)
observer: true;
observeParents: true;
스와이퍼 방향 반대로
<div class="swiper-container" dir="rtl">
페이지 이동 소스

<META http-equiv="Refresh" content="0;URL=/product/project.html?cate_no=120">
테이블 초기화

table { width:100%; border-collapse: collapse; border-spacing: 0;}
스크롤 이동

var offset = $("#div").offset();

$('html, body').animate({scrollTop : offset.top}, 400);

return false
로드되기 전에 / 후에

$(document).ready(function(){
$(window).on("load", function(){
유튜브 자동재생 (음소거만 가능)
?rel=0&autoplay=1&mute=1
input 가운데 맞추기, 브라우저 호환
input[type=text]{line-height:60px;}
input::placeholder,
input:-mos-input-placeholder,
input::-webkit-input-placeholder,
input:-ms-input-placeholder{opacity:1;color:#000;}
input[type=text]::-ms-clear { display:none; }
1줄 이상 말줄임표 ... 표시
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
2줄 이상 말줄임표 ... 표시
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
HTML 검사: https://validator.w3.org/nu/
CSS 검사: http://www.css-validator.org/validator.html.ko#validate_by_uri+with_options
특수문자 코드: https://entitycode.com/
CSS 모양 참고
http://css3generator.com/
https://css-tricks.com/the-shapes-of-css/
https://stackoverflow.com/questions/7433454/html-css-hexagon-with-image-inside
폰트 설명
https://www.font.co.kr/webfont/os_support.asp
폰트 변환
https://onlinefontconverter.com/
https://www.fontconverter.org/
주소 줄이는 사이트: https://bitly.com/
스크롤 효과: https://michalsnik.github.io/aos/
퍼블리싱 스킬: http://heroyooi.ivyro.net/admin/jQuery/index.html
글자 타이핑 효과: https://gahyun-web-diary.tistory.com/2
jQuery easing 효과: https://superkts.com/jquery/@easingEffects
익스에서 background-image fixed 움직이는 문제
https://stackoverflow.com/questions/27966735/why-does-a-fixed-background-image-move-when-scrolling-on-ie
패럴랙스 참고 사이트
https://speckyboy.com/css-javascript-parallax-scrolling/
jQuery 플러그인 효과
https://m.blog.naver.com/PostView.nhn?blogId=pcwpower&logNo=220488446989&proxyReferer=https:%2F%2Fwww.google.com%2F

유용한 참고 사이트를 알아봅시다!

윈원윗 — Sat, 26 Aug 2023 16:36:00 +0900

제이쿼리 API참고: https://jquery.com/
기능참고: http://www.htmldrive.net/
프로토타입(벡터): https://www.figma.com/
참고사이트: http://www.gdweb.co.kr/
트윈맥스: https://greensock.com/
글자 쪼개주는 사이트: https://splitting.js.org/
fullpage.js: https://alvarotrigo.com/fullPage/ko/
pagepiling.js: https://alvarotrigo.com/pagePiling/
particles.js: https://vincentgarreau.com/particles.js/
필터,정렬: https://isotope.metafizzy.co/
이미지 정렬: https://masonry.desandro.com/
셔틀: https://vestride.github.io/Shuffle/
팬시: https://fancyapps.com/fancybox/3/
카카오개발자: https://developers.kakao.com/
공공데이터포털: https://www.data.go.kr/ (나라에서 제공하는 데이터를 json파일로 받아 사용, 날씨, 버스오는시간..)
카카오맵: https://apis.map.kakao.com/
aos js: https://michalsnik.github.io/aos/ (간단한 스크롤 라이브러리)
scrollmagic: https://scrollmagic.io/.
팝업사용시 쿠키: https://github.com/js-cookie/js-cookie
컬러관련: https://cssgradient.io/
가로스크롤 적용사이트: https://dept.galleria.co.kr/
이미지 한쪽으로 슬라이드로 없어지기:https://hcc.hanwha.co.kr/ko/
pointer-events: none; (커서를 뒀을 때 이벤트를 막는것)

VScode 참고 플러그인

Illustrator: Basic Icon Pack 1

윈원윗 — Tue, 12 Feb 2019 19:13:39 +0900

Basic_Icon_Pack_1.ai

다운로드

Illustrator: 아이콘의 황금비율에 대해서 알아봅시다!

윈원윗 — Tue, 12 Feb 2019 19:12:53 +0900

UI/UX: 정보 설계하기

윈원윗 — Thu, 10 Jan 2019 15:25:56 +0900

정보 설계하기

결정된 콘텐츠와 기능에 따라서 정보 구조를 설계할 수 있다.

정보구조 설계에서의 모호성 : 이용자들이 한번에 인식을 할 수 있는 직관적인 단어를 선정하여 정보의 그룹을 나타내는 단어로 사용하는 것이 중요
정보구조 설계에서의 이질성 : 홈페이지의 이질적인 본성 때문에 일관성 있고, 체계적인 정보구조 설계를 하는데 어려움이 많음
정보구조 설계에서의 시각차이 : 자신만의 관점에서 벗어나 이용자의 시각에서 객관적으로 바라보는 것이 중요
정보구조 설계에서의 내부정책 : 내부정책은 홈페이지를 구축 운영하는데 있어 시작부터 마무리까지 지속적인 영향을 미치게 됨
주제별 체계 : 주제나 화제에 따라 구분하는 방법. 윤곽이 분명하지 않은 주제를 잡다보면 나중에 주제별로 나눈 영역이 서로 겹쳐 이용자에게 혼돈을 줄 수 있으니 유의
작업 지향형 체계 : 정보 컨텐츠와 서비스 컨텐츠를 프로세스와 기능 그리고 업무의 집합으로 나누어 편성
이용자 구분형 체계 : 홈페이지를 이용하는 이용자를 두 분류 이상으로 명확히 구분할 수 있을 때 적합한 방법
은유형 체계 : 이용자가 쉽게 연상할 수 있는 것을 바탕으로 정보체계를 만드는 방법이다. 휴지통이나 폴더 등과 같이 우리가 데스크톱 화면상에서 많이 보아서 익숙해진 아이콘 개념들을 적용하여 정보를 체계화하는 방법
계층구조 : 일반적으로 가장 많이 사용되는 구조로서 정보설계가 잘된 홈페이지의 기본구조.
하이퍼텍스트 구조 : 계층 구조에 비해서 비선형적인 구조를 가지는 것. 단위정보와 단위정보 간의 링크라는 두 가지 주요 요소를 포함
데이터베이스 구조 : 세부내용을 묶을 수 있는 레코드와 그와 관련 있는 세부항목들을 필드로 정리하는 방법

CSS: 애니메이션 샘플 - ROCKET

윈원윗 — Thu, 10 Jan 2019 12:31:28 +0900

Animation Sample - Rocket

애니메이션 효과를 이용한 로켓입니다.

See the Pen Animation - Rocket by Jiwon Son (@jiwonson) on CodePen.