Next.js를 사용하며 항상 디자인 패턴과 아키텍처에 대한 고민을 떨칠수 없었다. 좋은 영상이 있어 개인 프로젝트에 반영하기 전정리글을 남긴다.API 호출 코드로 비대해진 Store를 목적에 맞게 분리리액트 훅과 비슷한 직관적인 사용성여러 인터페이스 & 옵션을 제공해

원티드에서 진행하는 코스로 신입, 이직 개발자를 대상으로 팀 협업 중심의 프로그램. 프론트엔드 , 백엔드 등 분야별로 나뉘어 있다.그 중 내가 수료한 코스는 프론트엔드 6차!기간은 : 22.08.29 ~ 22.09.30 5주가량주 2회 3시간씩 있는 세션에서 클린코드

클로저는 함수와 함수가 선언된 어휘적 환경의 조합으로 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효 범위를 지정하는지(lexical scoping)을 먼저 이해해야 한다.init은 지역 변수 name과 함수 displayName을 생성. displayName 내

💡 Context API란? 일반적인 React에서 prop 전달의 흐름은 하향식이다. (부모에서 자식으로) 전달되는 prop이 많아지고 컴포넌트 깊이가 깊어지면 관리가 번거로워 질 수 있다. Context Tree는 컨텍스트 안에 포함된 모든 레벨에서 명시적으로

바로 이전 글에서 JS에서 불변성에 대한 글을 남겼고 이번 글은 참조형 데이터가 불변성을 유지할 수 있는 방법 2가지를 알아본다.얕은 복사란 한 단계까지만 복사하는 것을 의미하며 객체 안에 객체가 담겨 있는 객체의 경우 참조 값을 복사한다.얕은 복사의 방법으로는 우리가

자바스크립트에서 불변성이란 객체가 생성된 이후 그 상태를 변경할 수 없는 것을 의미한다.여기서 상태를 변경할 수 있는 것과 값을 재할당하는 것은 다르다는 것이다.위 코드에서 a에 10을 할당, b는 a가 가리키는 주소를 가르킨다.이때 a의 값을 20으로 바꾸면?값이 직

ex)위 예시코드에 이벤트는 div에 할당되어 있지만, em이나 code 태그를 클릭해도 동작한다. 왜 동작하는 걸까??버블링(bubbling)의 원리는한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상

원티드 프리온보딩 과제 진행 중 인피니티 스크롤을 라이브러리 없이 구현하여야 했다. 고민끝에 intersection observer API를 사용하여야 했고 하루만에 완성을 해야 했던지라 완벽한 기능 구현은 못했다. 그래서 블로그에 한번 더 정리를 한다.무한 스크롤을

javascript 관련 책이나 코드를 보다보면 var로 변수 선언을 한 코드들을 아직도 종종 볼 수 있다. var로도 변수 선언이 가능한데 왜 let과 const가 ES6에 추가되었을까? 이를 알기 위해서는 변수의 선언과 할당 과정, 호이스팅, 스코프에 대해 알아야

Javascript를 처음 배울때 promise에 대해 한번에 이해하기는 쉽지 않았다. 이해가 어려운 만큼 사용하기도 어려웠으나, async await라는 promise를 쉽게 대체 할 수 있는 방법이 있어 다시 한번 정리한다.async 키워드의 사용법 function

자바스크립트에서 비동기를 처리할 때 callback과 promise를 사용하게 된다. 이둘의 차이점을 callback hell 뿐만 아니라 명확하게 알기 위해 정리한다.async 함수는 첫번째 인자로 callback을 받고, callback이 실행될 때 첫 번째 인자를

HTTP 프로토콜의 한계를 보안하기 위해 쿠키 또는 세션을 사용.기본적으로 HTTP 프로토콜 환경은 비연결지향(connectionless), 무상태(stateless)한 특성을 가지기 때문에 요청만으로 서버는 클라이언트를 구별할 수 없다.비연결성지향(connection

자신의 state가 변경 될 때부모 컴포넌트가 리렌더링 될때부모에서 전달받은 props가 변경될때useMemo는 바로 전 작성글에서 다룬 내용으로 Reack Hook의 한 종류이다.컴포넌트내의 어떤 함수가 값을 리턴하는데 하나의 변화에도 값을 리턴하는데 많은 시간을 소

useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해서 짚어보면 memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장! 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 뜻함.memoi

원티드 프리온보딩 일정을 기다리며 리액트와 자바스크립트를 되돌아본다. 왜??인간은 망각의 동물이니까!!자바스크립트의 확장 문법브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 자바스크립트 형태의 코드로 변환됨.JSX는 자바스크립트의 공식적인 문법이

react에서 컴포넌트를 선언하는 방법은 두가지가 있다. (클래스형, 함수형)현재 점점 더 사용안하는 추세이나 과거 프로젝트 유지보수시 사용 가능성 있음.클래스형 컴포넌트의 핵심class라는 키워드가 들어가며 Component로 상속을 받아야함.render() 메소드가

기술면접 준비 중 가장 기초적이면서도 중요한 내용들이 머릿속에서 잊혀져가는 것을 느껴다시한번 정리하게 되었다. 실제 DOM에 접근하여 조작하는게 아닌, 추상화한 자바스크립트 객체를 구성하여 사용가상 DOM은 DOM의 상태를 메모리 위에 올려두고, DOM에 변경이 있을

12주간의 위코드 커리큘럼이 종료되었다. 마지막 12주차는 코로나 확진으로 자가격리 중 많은 생각을 하며 위코드 과정을 돌아보게 되었다. 개발을 시작하계 된 계기로는 지금까지 내가 해왔던 직무들을 통하여 사람들과의 커뮤니케이션에 자신이 있었고, 틀에 맞춘 업무가 아닌

기술진보가 소득 격차에 미치는 영향이 세계화나 제도 등 다른 요인에 비해 크다는 IMF 분석을 보더라도 기술 진보와 격차 문제에 관심을 기울이지 않을 수 없게 된다. 사실 기술 진보는 인류의 삶을 좀 더 안락하고 풍요롭게 하는 장점이 있다. 생산성 향상을 통해 경제 성

2016년 8월 백악관 국가안전보장회의와 국립표준기술연구소를 통해 양자내성 암호체계를 만들기 위한 공고문을 전 세계 수학계와 암호학계에 내보내는 작업을 시작했다. 그리고 올해 5월 조 바이든 미국 대통령은 직접 '양자컴퓨터를 막을수 있는 국방 암호체계를 만들라'는 지시