고급 프로젝트를 앞두고 팀원들과 기술 스터디를 진행 중인데, 이번 주제는 Plain React App이 아닌 Next.js를 프로젝트에서 사용해야하는 이유였다. 그 과정에서 프레임워크와 라이브러리의 차이를 공부하게 되어서 정리해보려 한다. 라이브러리와 프레임워크 쉽게 이해하기나는 헷갈리는 개념은 비유를 통해서 이해하는 것을 좋아하는데, 프레임워크와 라이브러리의 차이 또한 집이라는 비유를 통해 알아보고자 한다. 먼저 라이브러리는 집을 설계부터 건축까지 모든 것을 도맡아 하는 것과 비슷하다. 따라서 내가 원하는 대로 집을 설계할 수 있고 어디를 안방으로 할 지 어디를 거실로 할 지와 같이 각 방을 원하는 대로 배치할 수 있다. 반면 프레임워크는 새 집을 구입하는 것과 같다. 따라서 집을 직접 설계하지 못하는..
CORS 정의 로그인, 회원가입 시 만나게 되는 CORS! 어떤 건지 정의를 정보통신용어 사전에 검색해봤는데, 개념이 난해하고 이해하기 쉽지 않다😮 CORS 는 웹 브라우저를 통해 서로 웹 서버에서 다른 도메인간 리소스 접근을 허용하도록 하는 웹 브라우저 기술 표준을 말한다. (출처: 정보통신용어사전) 아래처럼 일상적인 상황에 대입하면 좀 더 이해하기 쉬울 것 같아 정리해보았다. 1. A라는 사람이 있다고 가정해보자. A는 아주 바쁜 사업가다. 그래서 자신의 연락을 대신 관리해주는 사람인 B를 고용하게 된다. 2. A는 B에게 누군가 A의 사무실에 전화를 하면 통화를 바탕으로 발신자에 대한 정보(누구, 왜 등)를 수집하고 대기하라고 말해둔다. 3. B는 이후에 A에게 전화를 걸어 발신자에 대한 정보를 공..
원시 값은 변경 불가능한 값이기 때문에 값을 직접 변경할 수 없다. 따라서 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장 후, 변수가 참조하던 메모리 공간의 주소를 변경한다.(값의 이러한 특성을 불변성 이라 한다) 다음의 예제를 보자. "hello" + "world"; // "helloworld" 위의 예제를 보면 "hello"와 "world"가 결합되어 좌항의 값이 변경되는 것 같이 보인다. 그러나 실제로는 두 문자열을 합친 새로운 값이 생성된다. 때문에 빈번한 원시형 값의 수정으로 인한 성능 저하를 막기 위해서는 버퍼(Buffer)를 사용하는 것이 권장된다. 1. 버퍼(Buffer) Buffer의 영단어 뜻은 완충제, 완화하다 라는 의미이다. 뜻만 보..
1. 멱등성이란? 수학에서 사용하는 용어에서 유래한 것으로. 연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질을 뜻한다. 2. HTTP Method 의 멱등성 멱등성의 개념은 HTTP 에서도 동일하게 적용될 수 있다. 동일한 요청을 한 번 보내는 것과 여러번 보내는 것이 서로 동일한 효과를 지니고, 서버의 상태도 동일하게 남을 때 해당 HTTP Method가 멱등성을 갖는다고 이야기한다. 멱등성을 따질 때에는 서버의 상태만 바라보면 되며, HTTP 응답 Status는 신경쓰지 않아도 된다. 올바르게 구현된 REST API 의 GET, HEAD, OPTIONS, PUT, DELETE 메소드는 통계 기록(e.g. 게시물 조회수의 증가 등)을 제외하였을 경우 멱등성이 보장된다 어떤 이유로 GET, HEA..
하드코딩의 뜻은 값을 고정시켜 놓는 것 이다. 반대로 소프트코딩은 값이 고정되지 않고 가변적인 것을 의미한다. 하드코딩의 문제는 값을 고정시켜놓기 때문에 유지보수가 어렵고 유연성이 부족하다. 다음의 예제를 보자. // 하드코딩된 예시: 숫자를 직접 사용 function calculateCircleArea() { const radius = 5; // 반지름을 하드코딩 const area = Math.PI * Math.pow(radius, 2); console.log('원의 넓이:', area); } calculateCircleArea(); 이 코드에서는 반지름을 5로 하드코딩해서 사용하고 있다. 만약 반지름을 변경하려면 함수 내부의 코드를 수정해야 한다. 더 좋은 방법은 함수에 인자로 전달해서 사용하는 것..
- Total
- Today
- Yesterday
- GitHub
- react
- tanstackquery
- js
- innerhtml
- map
- 동기
- 코드잇 스프린트
- 제어 컴포넌트
- Next.js
- 코드잇스프린트
- 유사배열객체
- javascript
- Target
- arguments
- 배열
- 프론트엔드
- hydrationboundary
- 비동기
- rest parameter
- 리액트
- 스프린트프론트엔드6기
- currentTarget
- 객체
- Git
- 비제어 컴포넌트
- 취업까지달린다
- CSS
- html
- 중급 프로젝트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |