현인

OSI 7계층이란? OSI(Open System Interconnection), 개방형 시스템 상호연결 개방형 시스템이란 정해진 규약에 따르기를 원하는 어떠한 업체라도 그 개방형 시스템의 명세(spec.)을 사용하도록 허락된 것이다. 개방형의 반대 개념은 독점적, 폐쇄형이라는 뜻의 Proprietary 이다. OSI는 이러한 개방형 시스템들 간에 연결이라는 뜻이다. 계층을 나눈 이유는? 시스템들의 계층을 나눠서 관리함으로써 통신이 일어나는 과정을 단계별로 파악할 수 있다. 또 흐름을 한 눈에 알아보기 쉽고, 사람들이 이해하기 쉽다. 계층을 분리함으로써 각 계층은 독립적인 역할을 할 수 있다. 따라서 계층을 분리하여 독립적으로 자신의 일을 처리하고, 다른 계층으로 interconnection 할 때에 규약..

6장 데이터 타입 데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 가지며 ES6 기준 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입과 객체 타입으로 분류할 수 있다. 구분 데이터 타입 설명 원시 타입 숫자(number) 타입 숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열(string) 타입 문자열 불리언(boolean) 타입 논리적 참(true)과 거짓(false) undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌(symbol) 타입 ES6에서 추가된 7번째 타입 객체 타입 객체, 함수, 배열 등 타입에 따라 확보해야할 메모리 공간의 크기도 다르고..

개념을 이해한다는 것은 바로 용어를 정확히 이해하고 설명할 수 있다는 것이다. 이 책에 등장하는 대부분의 용어는 자바스크립트만의 전유물이 아닌 컴퓨터 공학 전반에서 사용하는 용어이다. 용어에 대해 정확히 이해하고 개발자 간의 의사소통 능력을 향상할 수 있도록 하자! 5장 표현식과 문 값 값(value)은 식(표현식, expression)이 평가(evaluate)되어 생성된 결과를 말한다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 10+20 이라는 식은 평가 되어 숫자 값 30을 생성한다. 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리의 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공..

4장 변수 변수란 무엇인가? 왜 필요한가? 10 + 20 위와 같은 코드를 실행하면 컴퓨터는 10과 20을 메모리 상의 임의의 위치(메모리 주소)에 저장하고 CPU를 통해 연산한다. 연산 결과로 생성된 숫자 값 30도 메모리 상의 임의의 위치에 저장된다. 연산도 끝났고 연산 결과도 메모리에 저장되었지만 문제가 있다. CPU가 연산해서 만들어낸 숫자 값 30을 재사용할 수 없다는 것이다. 연산 결과를 한 번만 사용한다면 문제가 없지만, 재사용하고 싶다면 메모리 주소를 통해 연산 결과 30이 저장된 메모리 공간에 직접 접근하는 것 외에는 방법이 없다. 하지만 메모리 주소에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 있는 매우 위험한 일이다. 만약 운영체제가 사용하고 있는 메모리 값을 변경하게 된다면..

들어가며 SSAFY에서 프로젝트들을 하면서 자바스크립트 개념에 대해 놓치고 있는 부분들이 많다는 것을 느꼈다. 마침 SSAFY도 끝났으니 그동안 놓치고 있었던 개념들을 학습하는 시간을 가져 볼 것이다. 현재 5월 25일이고 6월 안에 정리를 마치는 것이 목표이다. 학습자료는 위 책을 선택하였으며 책의 모든 내용을 기록한다기 보다는 개인적으로 책을 보며 중요하다고 느껴지는 부분들이나 몰랐던 개념들 위주로 정리할 예정이다. 상세한 내용을 참고하고 싶다면 위 책을 구매해서 보는 것을 추천한다. 1장 프로그래밍 프로그래밍 프로그래밍이란 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이다. 따라서 우리는 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 바라봐..

기존 코드 import type { AppProps } from "next/app"; import { ThemeProvider } from "next-themes"; import wrapper from "@/store/configureStore"; // React-Query import { ReactQueryDevtools } from "react-query/devtools"; import { QueryClient, QueryClientProvider } from "react-query"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import "@/styles/globals.scss"; c..

API 요청을 보낼 때 공통적으로 access_token을 헤더에 담아서 보내야 해서 BaseURL도 묶을 겸 모듈화를 하려고 했다. 현재 access_token을 redux에 저장하고 있어서 redux에 접근하여 데이터를 가져오려고 했다 // axios 사용 import axios from "axios"; // Redux 관련 import { RootState } from "@/store/configureStore"; import { useSelector } from "react-redux"; //redux에서 access token 받아오기 const {userInfo} = useSelector((state : RootState) => state.auth); // 남사친 API 커스텀 export c..

import { useEffect, useState } from "react" import { setAccessToken } from "@/features/authSlice"; import { RootState, useAppDispatch } from "@/store"; import { useSelector } from "react-redux"; import { useRouter } from "next/router"; import axios from "axios"; export default function AuthRedirect() { //로그인 완료 페이지니까 리덕스에 state 저장해주고 이동할 수 있도록 const dispatch = useAppDispatch(); const [authCode, ..

호이스팅(hoisting)이란? "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것" 호이스팅은 인터프리터가 변수와 함수의 메로리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 쉽게 말해, 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장 할 수 있다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의해야 한다. 선언만 호이스팅 대상 Javascript는 초기화를 제외한 선언만 호이스팅한다. 변수를 먼저 사용하고 그 후에 선언 및 초기화가 나타나면, 사용하는 시점의 ..

들어가며 Next.js는 프레임워크이고 React는 라이브러리이다. 노마드코더 강의에서 프레임워크와 라이브러리의 차이에 대해 간략히 설명해주었는데, 제대로 된 차이점을 이해하고 싶어서 더 알아보려한다. 프레임워크란? 프레임워크는 말 그대로 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술이다. 소프트웨어에서의 프레임워크는 '소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합' 이라 할 수 있다. 따라서 완성된 어플리케이션이 아닌 추상화된 어플리케이션이라고 볼 수 있다. 개발자는 이 추상화된 부분들을 완성하면 된다. 프레임워크의 특징 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성되어 있다 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 ..