7월 원티드 프리온보딩 프론트엔드 챌린지 사전과제에 대한 답을 나름대로 적어놓은 글입니다. 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. 기존 방식인 서버에서 웹 페이지를 렌더링하는게 아닌 클라이언트 측 사

이 글은 DEVOCEAN 세미나를 들었던 내용을 개인적으로 정리한 글이다. 영상의 길이가 길어 다시 보기에는 번거로운 분들이 보면 좋을꺼 같습니다 :) 목차 왜 웹 성능 최적화를 해야할까? 그럼 웹 성능을 측정하는 방법은 어떤게 있을까? CWV를 이용해 어떻게 최적

typeScript를 작성하다보면 type과 interface의 사용 용도가 비슷하고 문법도 거의 비슷하게 생겼다 그럼 어떤 문법을 어느 순간에 사용해야 공식문서에 의도에 맞게 사용하는지 궁금해서 이를 구글에 검색해봤던 경험이 다들 있을꺼라고 생각한다 아마도...?위

데이터안에 각 노드들이 있고 각 노드마다 데이터와 포인터가 존재하는 자료구조이다. 각 노드의 포인터가 다음 노드의 주소를 가리키고 있다. 그리고 각 노드는 메모리상에 연속적인 주소에 할당이 되는게 아닌 개별적으로 남는 공간에 할당이 된다. 이런 특징에의해 필요한 데이터

배열은 연관된 데이터들을 모아서 관리하기 위해서 사용하는 자료구조이다. 그래서 모든 배열의 원소의 타입이 같아야한다.메모리상에 특정 공간을 미리 점유하고 이 공간에 배열에 있는 데이터들을 순서대로 배치해 메모리를 관리한다. 배열은 선언할 때 미리 크기가 정해지기 때문에

자료구조와 알고리즘을 왜 공부하는지 의문을 갖지않고 맹목적으로 코테를 풀기 위해서만 공부를 했지만 이번 기회에 한번 왜 자료구조를 공부해야하는지 정리를 하고 필수적인 자료구조의 특징에 대해서 정리하는 글을 작성해보려고 한다. 내가 어떤 문제를 해결하려고 할 때 데이터를

이 글은 React Hook Form이 무엇이고 왜 사용했는지를 정리한 글이다. 팀 프로젝트에서 Auth 구현을 맡아서 진행하던중 Form을 이용해서 로그인과 회원가입등을 만들어야 하는 상황이였다. 저번 프로젝트에서는 form 태그만을 이용해서 구현 했었는데 유효성

팀 프로젝트 진행시 로그인 구현에대한 고민을 적은 글이다. 문제상황 팀 프로젝트에서 회원가입 로그인 로그아웃 로직의 구현을 맡았다. 프로젝트 요구조건에 JWT를 통한 로그인 구현이 있었지만 다른 로그인 방식은 어떤게 있고 만일 더 좋은 방법이 있다면 다른 방식으로

이 글은 'Inside look at modern web browser' 를 번역한 Naver D2 글을 일고 정리한 글이다.이 글에서는 렌더러 프로세스가 어떤 과정을 거쳐서 페이지를 렌더링 하는지 과정과 어떤 성능 이슈가 있고 이를 해결하기 위해서는 어떻게 해야하는지

이 글은 'Inside look at modern web browser' 를 번역한 Naver D2 글을 일고 정리한 글이다.파트 2에서는 사용자가 사이트를 요청하고 브라우저가 페이지 렌더링을 준비하는 과정에 대해서 살펴보겠다.브라우저 프로세스가 있다는건 PART 1에

이 글은 'Inside look at modern web browser' 를 번역한 Naver D2 글을 일고 정리한 글이다.

이 글은 webpack과 babel의 세팅 방법에 대해 적은 글이 아니다. 왜 webpack과 bebel을 사용하는지에 대해서 이해하고 간단한 세팅에 어떤게 필요한지에 대해서 정리해보려고 한다. 왜 webpack과 bebel을 사용할까? > 출처: http://ka

사용자가 로그인을 하고 각 페이지마다 사용자의 로그인을 유지하는 부분에 대해서 고민이 됐다.로그인을 유지하려면 매 요청마다 요청 헤더에 jwt를 담아서 서버로 보내야 하는데 이 작업을 매번 api 요청마다 해주기에는 팀원들의 코드에 해당 코드를 반복적으로 적어줘야 해서

이 글은 엘리스에서 진행한 첫 번째 프로젝트후에 프로젝트 기간동안 고민했던 부분이나 새로 적용하고 싶은 기술등을 적은 글이다. 이상한나라의 책장수 책을 전문으로 취급하는 책 판매 쇼핑몰 프로젝트 기간 및 인원 개발 기간 2023-02-13 ~ 2023-02-0

드림코딩 React편을 보면서 심화 부분에 있는 부분을 정리한 글이다. React 연관있는 상태값 관리 만일에 마우스 움직임에 따라 dom요소가 따라서 움직이도록 구현 해보고 싶은 경우를 예로 들어보자 위 코드를 통해 구현이 가능하고 x와 y좌표를 따로 state

기본적으로 자바스크립트의 원시 타입이 아닌 객체 타입은 메모리의 값 자체를 저장하는게 아닌 참조값을 저장한다. 위 코드를 확인해보면 sameArray에 array를 할당했지만 결국 sameArray와 array는 같은 참조값을 갖고 있기 때문에 sameArray 값에

위에 코드를 보면 foo1은 객체의 메서드로 내부에서 this는 cat 객체에 binding이 되지만 foo1 메서드의 내부의 foo2 함수는 객체가 아닌 함수 호출이므로 this는 전역객체에 binding이 되어 버리기 때문에 결과는 undefined가 나온다.

1장. 왜 내 프로젝트에서 React를 사용하는걸까? virtual DOM이란 무엇이고 왜 사용되고 있는 걸까? 2장. 3장. jsx에서는 IIFE 문법을 사용해야 한다. 바로 실행을 해줘야하고 if문은 사용할 수 없다. 비지니스 로직 같은 경우는 jsx 내부

그래프를 탐색해서 구하는 전형적인 DFS, BFS 문제이다.최단 거리를 구하는거가 아니고 모든 경우의 수를 탐색해서 구하는 문제 이기 때문에 DFS를 사용해서 문제를 풀었다.이차원 배열을 (0,0) 부터 (n-1,n-1) 지점까지 모두 돌면서 각 지점이 1인지를 판단하

그래프의 모든 경우의 수를 탐색하면 되는 문제 이기 때문에 DFS로 풀었다.근데 잘 풀고 나서 모든 반례를 대입해도 값은 나오는데 문제가 틀렸다고 나왔다. 그 원인은 각 노드별로 시작을 인덱스로 놓고 도착점을 값으로 넣기만 했는데 자세히 보니 양방향 노드이기 때문에 끝