꿈이 많은 어른 아이

REST API REST의 원칙을 기반으로 서비스 API를 구현한 것이다. 최근 OpenAPI(누구나 사용할 수 있도록 공개된 API ex. 구글맵, 공공 데이터 등), 마이크로 서비스(하나의 큰 어플리케이션을 여러 개의 작은 어플리케이션으로 쪼개어 변경과 조합이 가능하도록 만든 아키텍처) 등을 제공하는 기업 대부분은 REST API를 제공한다. 그렇다면 REST, API는 뭘까? REST(Representational State Transfer) 자원을 이름으로 구분해 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 즉, 자원(resource)의 표현(representaion)에 의한 상태 전달을 뜻한다. 자원 : 해당 소프트웨어가 관리하는 모든 것 (문서, 그림, 데이터, 해당 소프트웨어 ..

Padding, Margin Padding : 안쪽 여백 Margin : 바깥쪽 여백 Position static : 요소를 일반적인 문서 흐름에 따라 배치한다. relative : static + 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다. absolute : 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다. fixed : 요소를 일반적인 문서 흐름에서 제거하고, 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다. sticky : static + fixed 특징을 동시에 가진다. - 오프셋(offset) : top, left, right, bottom 값을 의미하고 기준이 되는 곳으로 부터 얼마만큼..

클로저(Closure) 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. - 어휘적 범위 지정 (Lexical scoping) function init() { var name = "test"; function displayName() { console.log(name); } displayName(); } init(); 여기서 주의할 점은 displayName() 내부에는 자신만의 지역 변수가 없다는 점이다. 하지만 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 displayName() 역시 부모 함수 init() 에서 선언된 변수 name에 접근할 수 있다. 만약 displa..

호이스팅(Hoisting) 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. 컴파일러는 자바스크립트 엔진이 인터프리팅을 하기전에 컴파일을 한다. - 인터프리팅(Interpreting) : 컴파일과 다르게 소스 코드를 한 번에 읽어서 번역하지 않고, 런타임 상태의 소스코드를 한 줄 한 줄 번역하면서 프로그램을 구동하는 방식이다. 한 줄씩 번역한 코드가 바로 기계어가 되는 것은 아니고 중간 코드(intermediate code)로 번역된다. 이 중간 코드는 다른 프로그램에 의해 기계어로 번역되어 실행된다. 예를 들어보자 console.log(a); var a = 2; 컴파일 단계에서 자바스크립트 엔진은 이를 2개의 구문으로 확인한다. var a a = 2 var..

인터넷에 www.google.com 또는 www.naver.com 을 검색했을 때 어떤 과정을 거쳐 화면에 보이게 될까? 웹 페이지를 움직이는 그 본질을 찾아서 알아보자. 주소창에 google.com을 입력하면 일어나는 일 브라우저의 렌더링 원리 Reflow와 Repaint가 실행되는 시점 웹 브라우저 (Web borwser) : HTML 문서와 그림, 멀티미디어 파일 등 월드 와이드 웹을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램의 총칭이다. 익스플로러, 파이어폭스, 사파리, 크롬, 오페라 등이 있다. 월드 와이드 웹 (World Wide Web, WWW, W3) : 인터넷에 연결된 컴퓨터를 이용해 사람들과 정보를 공유할 수 있는 거미줄(Web)처럼 얼기설기 엮인 공간을 뜻하는..

리액트를 이용한 웹앱 프로젝트를 시작할 때 늘 언제나 CRA(Create React App)을 사용했다. 분명 다른 툴도 있는데 CRA만 사용한 이유는 잘 몰랐기 때문에 선택지에 아예 없었다. 그렇게 프로젝트를 진행하면서 "그럼 나는 CRA가 뭔지 잘 알고 사용하고 있나?" 라는 생각이 들었다. 리액트 측에서 추천하는 툴체인은 다음과 같다. React를 배우고 있거나 아니면 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App. 서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js을 시도해보세요. 고정적인 콘텐츠 지향적 웹사이트를 만들고 있다면 Gatsby를 시도해보세요. 하나씩 정리해보자. React 리액트는 메타에서 개발한 오픈 소스 라이브러리다. 메타는 페이스북에서 이름..

7월 6일, 정보처리기사 필기 시험을 보고 왔다. 비전공자로써 CS지식 공부가 필요하다고 생각하여서 공부를 시작하였는데, 이게 참 쉽지만은 않더라. 모르는 용어는 기본이고, 조금 알겠다 싶었으나 또 어렵게 다가오는 것들이 생각보다 힘들게 했다.😅 결과는 나와봐야 알겠지만, 이번 시험을 시작으로 cbt 시험 형식으로 바뀌어서 시험 보고 나오면 바로 합격/불합격 을 알려주었는데 그 결과에서 합격이 나왔기에 공부했던 것을 적어두려 한다. 0. 정보처리기사 1과목 : 소프트웨어 설계 2과목 : 소프트웨어 개발 3과목 : 데이터베이스 구축 4과목 : 프로그래밍 언어 활용 5과목 : 정보시스템 구축 관리 총 다섯가지의 과목으로 이루어져있다. 주변에서 "대학만 나오면 딸 수 있다던데?" "어렵지 않대 내 친구는 85..

Git pull 에러가 또 발생했다. Fatal: Not possible to fast-forward, aborting 원인을 알아보니, 원격 저장소를 업데이트 한 후 pull 이 전에 로컬 저장소를 편집하여 commit을 한 경우에 발생한다. draw.io를 이용해보려고 웹에서 수정하는 과정에서 원격 저장소를 건드렸던 것이 원인이었다. 그냥 이럴 경우에는 rebase를 이용해서 pull을 다시 해주면 된다. git pull --rebase

Git Pull을 진행하려는데 오류가 생겼다. fatal: Need to specify how to reconcile divergent branches. repo를 pull 하여 받아올 때, rebase, merge, fast-forward 3가지 방법이 있는데 이를 명시해 달라는 에러이다. pull 할 때 rebase를 하지 않고 merge 한다 git config pull.rebase false pull 할 때 rebase를 한다 git config pull.rebase true fast-forward 일 때만 pull 한다 git config pull.ff only 이 때 fast-forward 란, Merge 커밋을 남기지 않고 기존 커밋을 따라가는 것으로 충돌 없이 따라갈 수 있는 관계를 의미한..

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com --- 홈페이지를 만들기 위해 간략하게나마 전체적인 그림을 머리 속에 정리하고 진행하려한다.개인 프로젝트로 진행되지만 컴포넌트를 나누거나 틀을 나눌 때도 머리속에 그려지기 쉽게 나눌 수 있다. 프로토타입(prototype)은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. 시제품이 나오기 전의..