우선 Next.js는 자체 서버 위에서 돌아가니 server와 관련된 폴더에 관련된 코드가 있을 것이라고 생각했다. Next.js 레포를 들어가서 찾아보니 packages/next/src/server/lib/start-server.ts 파일을 발견할 수 있었다. 아래

이전 블로그에서 글 옮김코드의 실행환경에 대한 여러가지 정보를 담고 있는 개념 으로, 간단히 말하자면 자바스크립트 엔진에 의해 만들어지고 사용되는 코드 정보를 담은 객체의 집합이라고 할 수 있다.자바스크립트의 코드는 3가지 종류로 이루어지는데, 글로벌 스코프에서 실행하

이전 블로그에서 글 옮김가비지컬렉터의 역할은 자바스크립트 엔진이 메모리 할당을 모니터링하고 할당된 메모리의 블록이 더 이상 필요하지 않은 시점을 확인하여 회수하는 것이다.가비지컬렉터는 Reference-counting알고리즘과 Mark-and-sweep 알고리즘에 따라

이전 블로그에서 글 옮김프로세스는 운영체제 위에서 연속적으로 실행되고 있는 프로그램이다. 지금 내가 글을 쓰고 있는 웹스톰도 하나의 프로세스이 글을 읽을 수 있는 크롬도 하나의 프로세스 이다. 현재 실행중인 프로그램 모두 프로세스를 가지고 있다.각 프로세스는 메모리 위

이전 블로그에서 글 옮김각설하고 이렇듯 브라우저라는 것이 웹에 있어서 뗄래야 뗄 수 없는 그런 존재이다. 그럼 과연 브라우저는 어떻게 동작을 하는지 알아보자.브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML

이전 블로그에서 글 옮김이번에 알림톡을 이용해서 휴대폰 인증번호를 보내는 기능을 구현하기 위해 찾아보다 네이버 NCP(Naver Cloud Platform)을 이용해 알림톡 보내기가 가능하다 해서 작업해봤습니다.카카오 비즈니스에 따르면 알림톡 기능을 이용하기 위해서는

이전 블로그에서 글 옮김해시테이블은 Key, Value 페어로 데이터를 저장하는 자료구조의 유형 중 하나로 빠르게 데이터를 검색할 수 있는 자료구조 입니다.해시테이블이 빠른 검색속도를 제공하는 이유는 내부적으로 배열(버킷)을 이용하여 데이터를 저장하기 때문입니다. 해시

이전 블로그에서 글 옮김요즘 나의 상태와 딱 맞는 짤...오늘이 프론트엔드 개발자로서 일을 시작한지 정확히 1년째 되는 날이다.블로그 글을 너무 오랫동안 안썼는데 회고록을 쓰면서 다시 한 번 써보자고 다짐해본다.짧다고 생각하면 짧고 길다고 생각하면 긴 1년인데, 나에게

이번에 이직을 하게 되면서 오늘 드디어 출근을 해서 첫 업무를 시작하였다. 사실 지금 다니는 회사는 IT회사가 아니라 개발문화나 환경이 제대로 구축이 되어 있질 않은 상태이다. 그래서 동기와 함께 개발문화를 새로 만들어 나가기로 마음먹고 회사 github 계정을 만들어 Organization을 생성하였다. 테스트용 repository를 만들어 여러 ...

취업 후 4달만에 쓰는 블로그라니.. 😱 그 동안 바쁘다는 핑계로 너무 소홀했던 것 같다. 매일매일은 아니더라도 꾸준히 글을 써야겠다는 다짐(작심삼일)을 하면서 오랜만에 글을 써본다. 성능 최적화에 대해 설명하기에 앞서 React에서 렌더링이 일어나는 이유에 대해 알아야 한다. React에서 렌더링을 실행하는 과정 React에서 렌더링을 수행하는...

!youtube[Z6GMY6O-1yQ] WeCode Class101 클론코딩 프로젝트 (Front-End) 프로젝트 소개🙌 '준비물까지 챙겨주는 온라인 클래스'라는 슬로건을 포함해 공격적인 마케팅으로 최근 떠오르는 취미 플랫폼 Class101 클론 코딩 개발 기간📆 2020년 8월 3일 ~ 2020년 8월 14일(12일) 팀원🐙 프론트 3명...

axios를 이용해 이미지 업로드 해보기라고 적었지만 fetch를 이용하는 것도 방법은 똑같다. 둘 다 multipart/form-data를 이용하면 간단하게 할 수 있다. multipart/form-data는 파일 업로드가 있는 양식요소에 사용되는 encType 속성의 값중 하나이고, multipart는 form data가 여러 부분으로 나뉘어 서버로 ...

2차 프로젝트 도중 한 페이지에서 여러 개의 API 요청을 해야 했는데 Promise.all의 존재를 모르고 아주 끔찍한 짓을 저지르고 말았다. 물론 위 코드는 예시지만 저런식으로 보기 거북한 코드를 짜고 말았다. 결국 코드 리뷰에서 지적을 받았고 그 때 처음으로 Promise.all에 대해서 알게 되었다. 덕분에 코드가 좀 깔끔해지긴 했지만 아직까지 제...

위 사진은 클론코딩을 진행한 클래스101의 클래스 상세페이지이다. 각각의 탭을 클릭하면 해당하는 위치로 이동을 하는데 처음에는 바로 화면이 바뀌길래 active tab인줄 알았다. 클론코딩을 진행하면서 이 부분이 조금 불편하다고 생각되어서 스크롤 이동을 부드럽게 만들어주었다. 각 탭에 해당하는 element는 각자 ref를 가지고 있었고 이동을 하려면 하...

이번 프로젝트때 소셜 로그인을 구현해봤다. 물론 시간부족으로 직접 구현해보지는 못하고 외부 라이브러리를 이용했다. 사용한 라이브러리는 여기 카카오 소셜 로그인을 사용하기 위해서는 먼저 카카오 개발자 페이지에 등록을 해야 한다. 간단하게 정보를 등록하고 키를 발급받으면 된다. ![](https://images.velog.io/images/syj9484/...

이번에 1차 프로젝트를 하면서 가장 해보고 싶었던 Image Lazy Loading을 구현해봤다. 처음에는 라이브러리를 사용하려고 했으나 멘토 종택님께서 Intersection Observer API라는것을 알려주셔서 한 번 적용해봤다. 이게 없었다면 아마 하루종일 scroll 수치 계산을 하고 있었지 않을까 생각한다. 그만큼 간단하게 lazy loadin...

!youtube[B1zIDV3b9lA] 프로젝트 소개🙌 에스티로더가 아시아 뷰티 브랜드를 인수한 첫 사례의 대표적인 국내 화장품 브랜드 Dr.Jart+ 클론코딩 개발 기간📆 2020년 7월 20일 ~ 2020년 7월 31일(2주) 팀원🐙 프론트엔드(2명), 백엔드(2명) 프론트엔드 github 백엔드 github 개발 목적🧾📈 Dr....

리액트 공식문서에 따르면 dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 리액트의 대체 방법이라고 한다. 일반적으로 코드에서 HTML을 설정하는 것은 cross-site scripting(XSS) 공격에 쉽게 노출될 수 있기 때문에 위험하다고 한다. 그래서 XSS공격을 막기 위해, 렌더링 메서드 내부에서 h...

WeCode 인스타그램 클론코딩 프로젝트 (Front-End) 프로젝트 소개🙌 전 세계 최다 사용자를 보유하고 있는 SNS인 인스타그램 클론 코딩 개발 기간📆 2020년 7월 6일 ~ 2020년 7월 16일(2주) 팀원🐙 10기 신영재 10기 김효식 10기 권한성 10기 이병수 10기 윤지영 개발 목적📑📈 Vanilia JS로만 구현...

개발인생 한달차라고 적었지만 사실 위코드에 들어오기전 코드스테이츠에서 3개월 정도 독학을 한 상태였다. 그때 공부한 것이 많이 도움이 되긴 했지만 정말로 내가 뭔갈 만들어 보고 개발을 하고 있다고 느껴진 것은 위코드에 들어오고 난 후다. 좋은 멘토, 좋은 동기를 만나서 힘들지만 행복한 시간을 보내고 있다. 프로젝트가 끝나서 조금 여유로워졌다. 그래서 지난 ...