전체 글

GET과POST

오늘은 HTTP통신에서 대표적으로 사용되는 GET과 POST에 대해 알아보도록 하겠습니다 GET GET은 클라이언트에서 서버로 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 메소드 입니다 간단히 게시판의 게시물 조회나, 쇼핑몰 사이트에 상품 리스트 조회 같은 요청을 할 때 GET이 사용이 됩니다 GET을 통한 요청은 URL 주소 끝에 파라미터로 포함이 되어 전송이 되며 이 부분을 쿼리 스트링이라고 합니다 쿼리 스트링에 방식은 URL끝에 '?'를 붙이고 다음 변수명=값과 같은 형식으로 이어 붙입니다 (www.naver.com?name=1&name2=가나다) 위와 같이 쿼리 스트링을 전달을 하면 서버에서는 name, name2라는 파라미터명으로 해당 값들을 받을 수 있습니다 GET의 특징 1. GET의 ..

자바스크립트 this

오늘은 자바스크립트의 this에 대해서 알아보도록 하겠습니다 자바 혹은 C++와 같은 언어에서 this는 자기 자신을 가리킵니다 그러나 자바스크립트에서 this는 자기 자신을 가리키는 게 아닌 this가 가리키는 대상이 계속 변경이 됩니다 this의 정의를 정리해보면 아래와 같습니다 this this는 '자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수'입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있습니다 즉 this는 고정된 값에 바인딩되지 않고, 함수가 호출되는 방식에 따라 '동적'으로 결정됩니다 이러한 자바스크립트에서 this가 참조하는 것을 함수가 호출되는 방식에 따라 결정이 됩니다 그리고 이것은 'this bind..

상태 관리 및 Redux

오늘은 프론트 개발이라면 가장 많이 듣고 중요한 상태 관리에 대한 내용과 React 프레임워크에 대표적인 상태 관리 라이브러리인 Redux에 대해 알아보도록 하겠습니다 우선 상태 관리에 대해 알기 전에 상태(state)에 대해 먼저 알아보도록 하겠습니다 상태(State) 상태란 동적으로 표현되는 데이터입니다. 즉 변하는 데이터이며 서비스마다 다르겠지만 쇼핑몰 서비스를 예로 든다면 '결제 금액'과 같은 데이터가 상태라고 볼 수 있습니다 상태의 조건 이러한 상태는 컴포넌트단에서 관리가 됩니다. 그러나 프로젝트의 규모가 커지게 되면 컴포넌트들이 많아지게 되고 컴포넌트들끼리 상태를 전달하게 되는 경우가 있습니다 이때 상태는 자식 컴포넌트들 간에 직접적인 전달은 불가능하며, 부모 컴포넌트를 통해서 주고받아야 합니..

자바스크립트 클로저

자바스크립에 클로저에 대해 알아보도록 하겠습니다 클로저 클로저란 함수와 그 함수가 선언되었을 때의 렉시컬 환경의 조합니다 이런 정의로는 무슨 의미 인지 크게 이해가 되지는 않습니다 저희는 우선 클로저를 알기 전에 렉시컬 환경이라는 것부터 알아보고 클로저를 한번 알아보도록 하겠습니다 렉시컬 환경 렉시컬 환경의 정의는 특정 코드가 작성, 선언된 환경을 의미하며 모든 함수, 코드 블록, 스크립트는 렉시컬 환경을 가집니다 아래 코드로 예시를 보도록 하겠습니다 let test = "a" function study(){ let num = 1; } 자바스크립트 코드를 실행하게 되면 우선 전역 렉시컬 환경이 생성이 됩니다 이러한 전역 렉시컬 환경에는 저희가 작성한 변수와 함수들이 자리 잡게 되는데 저희는 test라는 ..

백준 4375 1(C++)

* 해당 문제 풀이는 '큰돌'님의 문제풀이에서 제가 이해한 부분을 재작성한것입니다 백준 4375 1 입니다 문제 풀이 이문제를 처음 봤었을때 살짝 이해가 안되었습니다 우선 n은 2 와 5 로 나누어 떨어지지 않는 정수 즉 (n % 2) && (n % 5) 라는 부분은 쉽게 이해가 되었습니다 그러나 그 다음부분인 1로만 이루어진 n의 배수를 찾는 프로그램을 작성하시오 에서 이해가 잘안되었습니다 1로만 이루어진... 처음에는 소수인가?.. 라는 생각이 들었지만 풀이를 확인해보니 정말로 1 로만 이루어진 숫자였습니다.. 즉 1 - 11 - 111 - 111 ... 와 같이 모든 자리수가 1로만 이루어진 숫자입니다 이러한 숫자가 n의 배수일때 이숫자의 자리수를 출력하면 되는 문제입니다 그러면 첫번째 1로만 이루..

이벤트 루프 와 마이크로태스크큐 와 매크로 태스크 큐

자바스크립트의 특징 중에 단일 스레드라는 특징이 있습니다 단일 스레드랑 한 번에 하나의 작업만을 처리할 수 있다는 뜻입니다 하지만 실제로 자바스크립트로 코딩을 하고 구동을 해보면 여러 작업을 이 동시에 처리되는 것을 확인할 수 있습니다 그러면 단일 스레드인 자바스크립트가 어떻게 동시성을 구현했을까?라는 의문점이 생기게 됩니다 오늘은 그 의문점을 풀 수 있는 자바스크립트에 이벤트 루프와 마이크로 태스크 큐, 매크로 태스크 큐를 알아보도록 하겠습니다 이벤트 루프를 알기 전 자바스크립트 엔진에 구성에 대해서 먼저 알아보도록 하겠습니다 자바스크립트 엔진 자바스크립트는 위에서 설명했듯이 단일 스레드로 구성되어있는 언어입니다 즉 콜백을 처리할 공간이 한 가지만 존재한다는 뜻입니다 아래 사진에 JS 부분을 보게 되면..

자바스크립트 호이스팅

자바스크립트를 배우다면 호이 스팅이라는 단어가 필수적으로 등장을 합니다 면접을 볼 때도 호이 스팅이 무엇이냐고 질문이 들어올 수도 있습니다 오늘은 자바스크립트에서 중요한 호이 스팅에 대해서 알아보도록 하겠습니다 호이스팅 호이스팅에 대해 정의를 하자면 '자바스크립트 코드가 실행되기 전 변수 선언/함수 선언이 해당 스코프의 최상단으로 올려진 거 같은 현상'을 의미합니다. 여기서 중요한 부분은 최상단으로 올려진 것 이 아니라 최상단으로 올려진 것 같은 현상이 중요합니다 이런 정의로는 이해하기가 쉽지는 않기 때문에 코드로 보도록 하겠습니다 var test = "abc"; console.log(test); //abc 위와 같은 자바스크립트 코드를 실행하면 콘솔에 정상적으로 abc가 찍히게 됩니다 하지만 아래와 같..

백준 1629 곱셈(C++)

* 해당 문제 풀이는 '큰돌'님의 문제풀이에서 제가 이해한 부분을 재작성한것입니다 백준 1629 곱셈입니다 문제 해석 일단 이문제 같은경우는 문제만 봤을때는 매우 쉽게 느껴질수도있습니다 예제에 나온대로 10을 11번 곱해서 나온값을 12로 나눈 나머지를 출력하라고 나와있듯이 10의11승 나누기 12를 해서 나온 나머지를 출력하면됩니다 단순히 구현을 한다면 B만큼 반복문을 돌리면서 A를 계속 곱해주고 마지막에 C로 나눈 나머지를 출력하면 되는문제입니다 하지만 이렇게 문제풀면 시간초과 도 발생을하고 오버플로우도 같이 발생합니다 우선 시간초과 같은경우는 현재 입력되는 값에 가장 최대값은 약 21억입니다 하지만 시간 제한은 0.5초 이기 때문에 21억번의 반복문은 시간초과를 발생시킵니다 이러한 문제를 해결하기위..

브라우저 렌더링 과정

개인 노션에만 프론트 CS에 대하여 정리를 하고 있었는데 복습하는 겸 블로그에도 정리한 내용을 올려봅니다 첫 번째는 브라우저 렌더링 과정입니다 브라우저 렌더링 과정을 알아보기 전 '브라우저의 주요 기능', '브라우저의 기본 구조', '렌더링 엔진의 역할', '렌더링 엔진의 종류', '브라우저 렌더링 과정' 순으로 알아보도록 하겠습니다 브라우저 브라우저는 저희가 흔희 사용하는 소프트웨어 중에 하나이며 웹 서버에서 이동하며 쌍방향으로 통신하고, HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스(GUI) 기반 응용 소프트 웨어입니다 이렇게 설명을 하면 되게 어렵기 때문에 간단히 정리를 하자만 웹 정보를 화면에 표시하는 소프트웨어를 의미합니다. 주로 크롬, 사파리, 파이어폭스, 웨일 등과 같은 대표적인 ..

백준 3986 좋은단어 (C++)

* 해당 문제 풀이는 '큰돌'님의 문제풀이에서 제가 이해한 부분을 재작성한것입니다 백준 3986 좋은단어 입니다 문제 해석 이문제를 처음보았는데 저는 감이 정말로 안잡혔습니다 단어가 주어지면 그 단어에 단어 위로 아치형 곡선을 그어 같은 글자끼리 쌍을 지을수있다면 좋은단어 이고, 이 좋은단어의 개수를 세는 문제 인데 ABAB 와 같이 들어올때 어떻게 처리를 해야될지 감이 안잡혔습니다 우선 예제중 AABB 를 보면 AA가 붙어 있고 BB가 붙어있습니다. 그래서 A는 A끼리, B는 B끼리 쌍을 짓을수있고, 곡선을 그어도 선이 교차하지 않습니다 AABB만 보게 되면 뭔가 감이 안잡힐수도있습니다, 이럴때 큰돌님이 주어진 문자열을 뒤집어 보고(BBAA), 한개 더 붙여보고(AABBAABB), 그리고 90도로 회전..