목차 이전 게시물에서는 CSS의 역사, Normal flow(IFC, BFC, Relative Position) 등을 정리했습니다. 현재에는 flex, grid와 같이 레이아웃을 잡을 때 편리한 CSS모듈이 있습니다. 하지만 이전에는 float를 이용해서 레이아웃을 잡았습니다(고전 레이아웃) IE의 서비스 종료가 된 시점에 이것을 배워야 하는 이유는 제 개인적인 생각으로는 두가지가 있습니다. 1. 이전의 레이아웃 방식을 배움으로써 현재의 문법에 대한 이해가 더 깊게 될 수 있다. 2. IE가 사라졌다곤 하지만, 내가 나중에 이직할 회사에 가면 float가 존재할 수 있다. 그걸 유지보수하려면 알아야 할 것 같다. 라는 생각으로 공부를 했습니다. FLOAT float를 처음 배울 때는 화면에 둥둥 떠 있..
목차 코드 스피츠라는 유튜브를 보고 나서 여태까지 내가 깊게 공부하지 않았다는 느낌을 받았습니다. 그래서 이제부터라도 깊게 공부하기 위해서 코드 스피츠에 올라온 영상들을 차근 차근 정리해보는 시간을 가지려고 합니다. CSS 배경 지식 CSS를 배우기 전에 알아야할 배경 지식에 대해서 설명을 해주셨다. Graphics System Graphics System은 한마디로 점 찍는 방법에 대한 것입니다. X, Y, Width, Height, Color로 표현할 수 있습니다. 어떻게 이루어져 있든 마지막에는 점으로 이루어져 있습니다. Graphics System 발전 과정 Fixed Number -> Abstract Calculator(추상화된 계산) -> Components -> FrameWork Fixed..
목차 브라우저에서 API를 콜할 때 xhr객체를 이용해서 API를 호출합니다. 그런데 리액트에서 사용하는 테스팅 환경은 Node.js 기반입니다. 그러면 xhr객체를 지원하지 않을텐데, 과연 호출이 될까 궁금했습니다. 결론부터 말하면 일단 호출이 안되었습니다. 어떻게 확인을 했는 지 궁금하시면 아래를 읽어주세요. 수정) 호출이 됩니다! 제가 useEffect 내부에서 호출을 해서 호출이 안되는 것처럼 느껴졌는데, 호출이 되네요. 잘못된 정보 전달 죄송합니다. 테스트 환경에서 API가 호출 되는 것이 좋을까? 안좋을까? 우선 호출이 되는 것이 좋을 지, 안좋을 지에 대해서 생각해보았습니다. UI를 구성할 때 클라이언트 상태를 이용할 수 있지만, 서버에서 받아와서 뿌려주는 경우가 대다수입니다. 그런데 프론트..
자바스크립트에도 데이터 타입이 있다. 데이터 타입에는 원시타입(Primitive type) 과 객체타입( Object/ Reference type)이 있다. 원시타입 - 숫자 -> 정수, 실수 구분없이 하나의 숫자 타입만 존재한다. 배정밀도 64비트 부동소수점으로 해석된다. 즉 모든 수를 실수로 처리한다는 뜻이다. 3 / 2를 하면 1.5로 처리된다는 뜻이다. 숫자 타입에는 추가적으로 Infinity, -Infinity, NaN(Not a Number)가 있다. - 문자열 다른 언어와는 달리 문자열을 생성할 때 ""(큰 따옴표)와 ''(작은 따옴표) 구분 없이 사용할 수 있다. ES6에는 템플릿 리터럴이 추가되었다. 템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿의 기능을 제공한다. 템플릿..
변수란? 기존에 변수란 메모리의 위치를 기억하는 저장소의 이름, 값을 담을 수 있는 그릇이라고 막연하게만 생각해왔다. 하지만 내 생각과 조금은 달랐다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 조금 더 자세히 알아보자 우리의 뇌는 연산과 기억을 둘다 할 수 있지만, 컴퓨터는 연산(CPU)과 기억(메모리)을 수행하는 부품이 나누어져 있다. 메모리란? -> 데이터를 저장할 수 있는 메모리셀의 집합체이다. 메모리셀 하나의 크기는 1바이트(8bit)이다. 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽어들인다. 각각의 메모리셀은 고유의 메모리주소를 갖는다. 메모리 공간의 위치 0~메모리 크기 만큼 정수로 표현된다. 예를 들어 4GB메모리는 ..
프로그래밍이란? 문제 해결을 위해서는 문제 상황의 복잡함을 단순하게 분해(Decomposition)하고 자료를 정리하고 구분(modeling)해야하며 순서에 맞게 행위를 배열해야한다. 컴퓨터는 0과1밖에 모르기 때문에 0과 1을 이용해서 직접 프로그램을 작성하기에는 어려운 점이 있다. 그래서 프로그래밍 언어를 사용해서 프로그램을 작성한 후 그것을 컴퓨터가 이해할 수 있도록 변환을 하는 일종의 번역기를 통해서 기계어로 컴퓨터에게 전달해야한다. (컴파일러 or 인터프리터) 자바스크립트는 우선 인터프리터 언어이다. 컴파일러 언어와 인터프리터 언어의 차이는 무엇이 있을까?? (대표적으로 C언어는 컴파일러언어, 자바스크립트는 인터프리터언어이다.) 컴파일러언어 인터프리터언어 코드가 실행되기 전 단계에 소스 코드 전..
저는 신입 개발자로 일한지 약 6개월이 되어 가고 있습니다. 회사 다니는 동안 큰 프로젝트 1개, 작은 프로젝트2개를 했습니다. 나의 첫 야근 회사로 출근하고 한달 뒤, 회사에서 새롭게 런칭하는 서비스의 프론트엔드를 저에게 맡겼습니다. 저는 큰 규모의 프로젝트를 해결해본 경험이 없었고, 회사에서 사용하는 라이브러리에 대한 기본 지식이 없었습니다. 그래도 코드를 짜야 했기 때문에 검색하고, 공부하고, 구현하고 를 반복하면서 진행했습니다. 하지만 정해진 시간안에 코드를 구현하기에는 제 실력이 너무 부족했고 또한 시간을 기준으로 잡으니 마음은 급한데 결과물이 나오지 않는 문제가 있었습니다. 그래서 주변 선임분들에게 ‘코드를 구현할 때 보통 시간을 어느정도 잡고 하시나요?’ 라고 질문 하거나 ‘코드를 구현할 때..
목차 자바스크립트로 웹사이트를 개발하다 보면 규모가 점점 커져서 파일을 분리하고 싶은 욕구가 생길 때가 종종 있습니다. 그래서 파일을 기능별로 분리시킵니다. 이럴 때 각각의 파일 하나를 모듈이라고 부릅니다. 공부를 하다보면 모듈을 내보내고 가져오는 예제를 자주 만나고는 합니다. 그런데 예제마다 가져오는 방식이 다릅니다. 그 차이는 무엇이고 모듈이란 무엇인지 알아보겠습니다. 아래 코드부터 보겠습니다. // import로 가져오는 경우도 있습니다. import {example} from 'example.js'; // require로 가져오는 경우도 있습니다. const example = require('example.js'); 이 둘의 차이가 무엇이길래 가져오는 방식이 다를까요? 이것을 알려면 우선 역사를 ..
