아마 내 인생 가장 바빴던 일주일을 보내지 않았나 싶다. 처음만난 팀원들과 적응도 하고, 수업도 듣고나니 어느새 1주차가 끝났다. 지난 1주일 동안 내가 어떻게 했고, 앞으로는 어떻게 해야할지 그 성장 과정을 기록해보려고 한다. 사실 여러 제약적인 부분때문에 합격을 할거라고 예상 못했는데, 그래서 더 기뻤고 열심히 해야겠다는 마음 가짐을 가지게 되었다. 1. 원티드 프리 온보딩 합격 원티드 프리 온보딩은 참여를 희망한다고 해서 다 참여가 가능한 것은 아니었다. 사전과제와 이력서를 제출하고, 통과가 되면 참여할 수 있다. 사전 과제는 간단한 로그인/회원가입과 TODO를 구현하는 것이였다. 조건(ex. React사용 허가, 기능과 관련된 직접적인 라이브러리 사용 불가), 요구사항 10가지가 약간은 까다로웠지..

재조정이란? 리액트에서 재조정은 VDOM에서 발생하는 변경 사항을 반영하는 과정입니다. VDOM은 메모리 상에 존재하는 가상의 DOM으로, 리액트에서 컴포넌트를 업데이트할 때 변경된 부분만 실제 DOM에 반영하려고 사용됩니다. 이 과정은 리액트의 성능과 효율성을 결정하는 중요한 요소 중 하나입니다. *재조정 알고리즘 리액트는 재조정 알고리즘을 사용하여 최소한의 업데이트만 수행합니다. 이는 성능을 향상시키는데 중요한 역할을 합니다. 재조정 알고리즘은 다양한 최적화 기술을 사용하여 성능을 향상시킵니다. 예를 들어, 컴포넌트의 props나 state가 변경되었을 때, 해당 컴포넌트와 그 자식 컴포넌트만 다시 렌더링하고 나머지는 그대로 유지합니다. Diffing 알고리즘 리액트의 재조정 알고리즘에서 핵심적인 역..

🚨 본 글에서 프론트엔드는 Nex.js + Typescript, 백엔드는 Node.js + Express를 나타냅니다. 해결 방법은 맨 아래 '내가 해결한 과정' 부분 부터 봐주세요. :) 사용자 API를 구축한 후 테스트를 하기 위해 임시로 코드를 작성하고 로그인이 되는 지 확인하기 위해 API 연결을 해줬다. 하지만 에러가 발생하는데 ... Uncaught (in promise) SyntaxError: Unexpected token '

계절에 맞춰 적는 글 🚨 본 글은 Promise를 알고있다는 전제하에 작성한 글입니다. :) 1. 등장 배경 우리는 동적 웹 사이트를 만들기 위해 서버로 부터 데이터를 받아온다. Javascript에서 HTTP 통신을 위해 *XMLHttpRequest 객체를 사용하는 등의 방식이 일반적이었다. Json이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다는 장점이 있었지만, 반대로 사용자에게 아무런 진행정보를 주지 않기 때문에 사용자가 요청이 완료가 안되었는데 페이지를 떠날 수도 있다는 점과 복잡한 구조를 제공한다는 단점이 있다. * XMLHttpRequest에 대해 더 알고 싶다면 아래 링크를 참고하길 바란다. [JavaScript] Ajax 정리 - Azderic..

개요자바스크립트는 싱글스레드 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 이로 인해 블로킹(blocking)이 발생하면 다른 작업이 차단되어 웹 애플리케이션의 성능과 사용성이 저하될 수 있습니다. 이러한 문제를 해결하기 위해 자바스크립트는 비동기 처리를 통한 논 블로킹(non-blocking) 방식을 지원하고 있습니다. 이를 위해 async/await과 Promise가 도입되었습니다.블로킹 vs 논블로킹블로킹은 작업이 완료될 때까지 다음 작업이 진행되지 않는 상태를 말합니다. 예를 들어, 네트워크 요청이 끝날 때까지 다음 코드가 실행되지 않는 경우 블로킹이 발생합니다. 이로 인해 웹 애플리케이션의 응답성이 떨어질 수 있습니다. 반면, 논 블로킹은 작업이 진행 중일 때도 다음 작업이 계속..

🚨 본 글은 callback의 개념을 알고있다는 전재하에 작성한 글입니다. 1. Callback 지옥 거기서 나오시라니까요, JavaScript에서 비동기 처리를 위해 콜백(callback) 함수를 사용한다. 콜백 함수는 비동기 함수가 처리를 마친 후 실행되는 함수로, 해당 비동기 함수가 처리를 마친 후에 실행될 코드를 인자로 전달받는다. 하지만, 콜백 함수를 중첩해서 사용하다 보면 코드의 가독성이 떨어지고 유지보수가 어려워지는 문제가 발생할 수 있다. 이러한 상황을 "Callback Hell"이라고 한다. 예를 들어, 웹사이트에서 사용자가 주문한 상품을 서버로부터 받아와 화면에 출력하는 기능을 구현하고자 한다면, 이를 콜백 함수를 사용하여 구현하면 다음과 같이 중첩된 구조를 가지게 된다. functio..

목표 인터페이스의 개념을 이해하고, 어떻게 활용하는 지 알아보기 인터페이스(Interface) 상호 간에 정의한 약속 혹은 규칙이다. 객체 모양의 타입을 정의할 때 유용한 문법이고, 프레임워크에서는 주로 API응답, Props, 변수, 함수를 정의할때 자주 사용한다. interface Person { name: string; age: number; } const vision: Person = { name: '비전', age: 3 }; 선택적 프로퍼티 인자를 넘길때 그 여부를 선택적으로 할 수 있도록 '?'를 활용해 명시해줍니다. interface Person { name: string; age: number; favoriteColor?: string } const vision: Person = { nam..

함수 자바스크립트 형태의 함수에 인자에 대한 타입과 반환하는 값의 타입을 붙여주면 된다. 인자(넘기는 값 == 파라미터) 리액트에서 이벤트를 지정할 때 아래와 같이 사용함. function updateTodo(event: ChangeEvent) { setTodo(event.target.value); } 반환하는 값(리턴 값) 반환되는 값에 대한 타입을 지정함. function updateTodo(event: ChangeEvent):void { setTodo(event.target.value); console.log(e.target.value); } 선택적 파라미터 파라미터를 옵셔널하게 지정할 수 있음 function updateTodo(event: ChangeEvent, todoId?: string):v..

🚨 본 글은 필자가 정보보안 수업을 들은 후 정리한 생각을 풀어낸 글입니다 :) 요즘 보안은 정말 다양한 곳에서 쓰이고 있다. 작게는 우리가 사용하는 휴대폰 부터 크게는 우리가 생활하는 집까지. 정보화 시대가 되면서 보안의 역할이 더 중요해졌다. 보안은 사회 안전과 질서를 유지하는 것을 목표로 하기 때문에 다양한 분야에서 일하며, 경찰, 소방관, 군인 등이 있다. 보안인이라 함은 사회 질서 유지에 기여하는 사람으로, 다양한 위협에 대응하고 사회의 안전과 질서를 보호하는 역할을 수행한다.  보안 철학 & 보안인보안인은 기본적으로 "보안 철학"을 가지고 있다. 보안 철학이란, 안전과 질서를 유지하는 데 집중하는 보안과 개인의 경험과 신념에 기반한 철학적 원리를 결합한 개념이다. 그 중 현대 시대에 가장 중..

🚨 본 글은 javascript 변수 선언 키워드 var, let, const를 정리한 글입니다. 프로그래밍에서 변수 선언은 중요한 개념 중 하나다. 변수를 잘못 사용할 경우 예기치 않은 버그 혹은 보안 위협이 발생할 수 있다. 그렇기 때문에 우리는 적절한 키워드를 잘 사용해서 변수를 써야한다. 그래서 오늘은 var, let, const이 뭔지, 각각의 차이점과 어떤 키워드를 사용해야하는지에 대해 이야기해 볼것이다. 1. 개념 var var은 ES6 이전에 사용되던 변수 선언 방식으로 JavaScript에서 가장 오래된 변수 선언 방법이다. var은 블록 스코프(block scope)를 지원하지 않고 함수 스코프(function scope)만을 지원한다. 이는 변수가 선언한 함수 내에서만 유효하며, 함수..