웹개발
-
Next.js Version 11 업데이트 사항 정리개발 블로깅/Next.js 2021. 6. 19. 16:58
21년 6월 16일에 Vercel에서 Next.js의 버전11 업데이트된 사항에 대해 공개했다. perfomance 최적화 이런건 물론이고(?), Conformance랑, Image 최적화 관련, Webpack5 관련 요소들이 새롭게 업데이트 됐다..🙌 Next.js가 갈수록 SEO 전용 프레임워크로 거듭나는 것 같다. 웹 바이탈(Web vital) 개선 요소들을 계속해서 공략해 나아가는 느낌이다. 업데이트 사항 Conformance: 최적의 UX를 제공할 수 있는 최적화된 솔루션을 제공하는 시스템 Improved Performance: Cold Start up Time(Next.js 빌드 및 실행할 때 걸리는 시간?) 최적화. `next/script`: 성능 향상을 위한 third-party 우선순위 ..
-
[2020.08.04] 브라우저 동작원리개발 블로깅/기타 개념 2020. 8. 4. 18:20
현재 정보화 사회에 이제는 없어서는 안 될 프로그램. 프론트엔드 개발자라면 무조건 다룰 수밖에 없는 도구이자, 끝없는 정보 바다에 접속하기 위한 필수 도구. 웹 브라우저. 우리가 평소에 접하는 이 화면은 도대체 어떻게 나타나게 되는 것일까? 우리는 평소처럼 당연하게 인터넷 주소창에 주소를 입력하고 거기에 해당되는 홈페이지 화면을 접하며 사이트를 돌아다니기만 했지, 이렇게 화면이 보여지는 과정이 어떻게 동작하는지는 생각해보지 못했을 것이다. (사실 그렇게까지 생각해 볼 필요도 없겠지만...) 프론트엔드 개발자 역시, HTML과 CSS 문서를 작성하고 Javascript 코드를 짜면서 기대하던 동작을 확인하며 웹 개발을 했을 것이고, 실제로 이 HTML문서가 어떻게 자리를 잡아서 웹 페이지에 각자 자리에 D..
-
[2019.11.23] DevFest WebTech 2019 컨퍼런스~!경험치 쌓기/일상 일기 2019. 11. 24. 13:48
오늘은 구글 캠퍼스에서 진행한 DevFest WebTech 2019 컨퍼런스에 다녀왔다. 이번 컨퍼런스는 웹 성능 최적화를 주제로 한 다양한 발표가 진행되었다. # 컨퍼런스가 진행된 구글 캠퍼스 지하 2층 컨퍼런스를 듣기 위해 모인 사람들이 꽤 많았다. 역시나 구글캠퍼스라 그런지 내부 시설이 놀이문화 느낌(?)으로 가득했다. 이번 컨퍼런스에 참석한 사람들은 아래 두 세션 중 하나를 선택해서 들었어야 했다. #세션 1 오픈소스 기여한 내용 ES6, ES7 맛보기 [코드랩] #세션 2 코드의 메인스레드 위치에 대한 내용(?) ES8, ES9, ES10 [코드랩] #세션 3 HTTP/3의 웹 성능 최적화 Rx.JS를 이용한 간단한 검색 기능 만들어보기 [코드랩] 사실 전부 듣고 싶은 욕심이 엄청났지만, 각 시..
-
[2019.11.17] ES2019(ES10) 새로운 기능을 습득하자~!개발 블로깅/Modern script 2019. 11. 17. 17:31
# Object.fromEntries 배열로 가지고 있던 값을, 알맞게 매칭시켜서 obj 형식으로 변환시킨다. 첫 번째 배열 인자를 key, 두 번째 배열 인자를 value로 한다. 기존의 Object.entries 기능의 반대 기능을 한다. const entry = Object.entries({name:'inyong', age: 27, family: ['father', 'mother', 'brother', 'sister']}); console.log(entry); // [['name','inyong'],['age',27],['family',['father','mother','brother','sister' ]]]; const fromEntry = Object.fromEntries(entry); cons..
-
[2019.06.01] 오늘의 TIL - passport 세팅 후 LocalStrategy 호출이 안되는 현상개발 블로깅/오늘의 TIL 2019. 6. 1. 14:14
어제 하루종일 passport를 익히고, 우리 프로젝트에 브랜치를 하나 따서 passport 환경을 세팅 후 postman으로 호출을 해 보았다. 그런데 localStrategy에 놔둔 콘솔로그가 계속 찍히지 않는 것이다... 시간을 많이 뺏길 위기를 느끼고 긴장상태에 들어갔다.. 문제를 해결하기까지 결린 시간은 40분 정도... 해결한 과정은 다음과 같다. 해결 과정 4주 프로젝트 코드의 LocalStrategy에 콘솔로그가 찍히지 않음. 라우터 연결부분이 문제라고 판단. 라우터에 passport 설정 대신, 일반 funciton(req,res) 함수로 콘솔로그 실행. 아주 잘 찍힘. 그러면 미들웨어 실행순서에 문제가 있다고 판단하여, 어제 passport 구현해본거랑 확인해봄. 순서 차이 없음. 남은..
-
[2019.05.28] TypeScript 사용법 (TypeScript+Express 구현)개발 블로깅/Modern script 2019. 5. 28. 20:17
기존의 자바스크립트는 컴파일을 돌리지 않고 브라우저 상에서 돌아가는 언어여서 데이터 타입이 정말 느슨하다. 변수 타입이나 파라미터에서도 제한되는 것이 없고 너무나도 자유롭다 보니, 개발할 때 데이터 타입에 대한 오류사항이 정말 많이 일어나기도 한다. 그러나 실제 컴파일 환경에서 돌리듯 자바스크립트 문법에 데이터 타입을 하나하나 명시를 해 줌으로써 이를 방지할 수 있는 방식이 타입 스크립트이다. 4주 차 프로젝트를 진행하면서 백엔드 역할을 맡게 되었는데, 이번 기술 스택에 typescript를 사용하도록 되어있다. 이번 기회에 typescript를 손에 익힐 기회가 왔다. 백엔드 파트를 맡았으므로, typescriptfh express환경을 구성하는 방법을 정리해보려고 한다. # typeScript 기본적..
-
[2019.05.12] 컨테이너 방식 독립환경 - Docker 개념개발 블로깅/기타 개념 2019. 5. 12. 21:50
개발을 하다 보면 하나의 환경에 여러 가지 기술을 쓰게 되는 경우가 많다. mysql을 돌리며 node를 돌리는 것과 같이... 그러나 이렇게 하나의 환경에 실행시키는 것보다, 환경을 서로 분리시켜서 따로따로 돌릴 수 있다면 어떨까? 서로 돌아가는 환경의 의존성이 사라지고, 개발환경 구성을 더욱 최적화 시킬 수 있을 것이다. Docker는 이러한 독립적인 환경으로 돌릴 수 있는 기술을 제공해준다. 하나하나의 환경을 컨테이너처럼 독립적인 환경으로 만들어서 사용할 수 있다. # 컨테이너 Docker에서는 각 각의 가상 환경을 컨테이너라고 부른다. 어떻게 보면 VMware나 VirtualBox와 같이 가상 OS를 생성하여 독립적인 개발환경을 만드는 것과 같다고 볼 수도 있다. 컨테이너와 가상OS의 차이 우선 ..
-
[2019.05.10] JWT-Token 방식의 정보 인증 [사용법]개발 블로깅/기타 개념 2019. 5. 10. 22:24
사용자가 로그인 후, 유저 정보를 cookie,Session 방식이 아닌 token 방식으로 안전하게 관리하는 방법이 있다. # token 방식의 특징 사용자 정보를 일일히 서버의 세션에 저장하지 않고, 사용자의 로컬에 저장. 사용자가 요청을 보낼 때마다 유저 정보 확인을 일일히 하지 않아도 됨. 웹 표준 기반 기술로써, 여러 환경에서 지원 이러한 토큰 방식을 사용하기 위해서는 JWT(Json Web Token) 기술을 사용한다. # JWT 모듈 설치법 npm i -D jsonwebtoken 모듈을 설치한다. # token 생성법 토큰을 생성하는 방법은 아래와 같다. const jwt = require('jsonwebtoken'); var userInfo = {id: 1, username: 'inyong..