심심한 개발공부

1 단계 : 우리가 브라우저 주소창 내용을 입력하면 어떻게 될까? 웹 브라우저는 당신이 원하는 것이 무엇인지 알고 있다. 웹 브라우저는 사용자가 주소 표시줄에 입력한 내용이 URL인지 검색어인지 확인하여 그게 알맞은 인터페이스를 보여준다. 검색어일 경우에는 바로 설정된 검색 엔진으로 검색하는 기능을, 그리고 사이트인 경우에는 해당 사이트로 넘어갈 수 있도록 조치해준다. 이 과정에서, 브라우저는 미리 준비된 DNS 혹은 서버와 통신함으로써 해당 내용이 URL인지 확인해낸다. (주소창에 입력 된 내용을 준비된 서버로 보내 내용이 URL인지 검색어인지 확인) 2단계 : 사이트의 진짜 주소를 알아낸다. 페이지의 모든 데이터들은 서버에서 오고, 그 서버는 IP주소로 되어있다. 하지만, 18.67.51.57 이런식..

모든 프로그램은 프로세스를 가지고 있다 모든 프로그램은 프로세스를 가지고 있다. Linux를 깔면 당연하게 나오는 CLI의 Shell 조차도 프로세스다. 그렇다면, 웹 브라우저도 프로그램이니 프로세스를 가지고 있을텐데 이 녀석의 아키텍처는 어떻게 될까? 하나의 프로그램이니까 하나의 프로세스만 가지고 있을까? 혹은 두개? 사실 브라우저가 몇 개의 프로세스를 사용하는지는 알 수가 없다. 왜냐하면, 이것은 브라우저마다 작성하기 나름이기 때문이다. 하나의 표준으로 만들어진 아키텍처는 없고, 각각의 브러우저들은 각기 다른 아키텍처를 가지고 있다. 어떤 웹 브라우저는 스레드를 많이 사용하는 프로세스 조금으로 만들어져있기도 하고, 어떤 녀석은 스레드를 조금 만들고 프로세스를 많이 만들어 IPC로 통신하며 작동하기도 ..

들어가면서 현대인들이 가장 많이 사용하는 프로그램은 무엇일까? 단순히 프로그램이라고 하면, 사용하는 휴대전화의 OS를 가장 많이 사용하겠지만, 응용단에서 가장 많이 쓰는 프로그램은 아마도 브라우저 일 것이다. 하지만, 웹 브라우저가 어떻게 돌아가는지 아는 사람은 몇 명이나 있을까? 나는 최근에 프론트로서 프로젝트에 참여하면서 이 신기하고 오묘한 웹브라우저라는 친구에게 꽂혀버렸다. 내가 만든 아주 바보 같은 코드들도 철석같이 알아듣고 내가 원하는 대로 그려주는 이 친구에게 개인적으로 호감이 생겼고, 이런 호감은 이 녀석이 어떻게 작동하는지 알아봐야겠다는 생각으로 이어졌다. 그런 마음을 바탕으로, 나는 웹 브라우저에 대해 잘 알지도 못했지만 수요지식회에 "브라우저는 어떻게 작동하는가?"라는 주제로 발표를 잡..

시도하기 전에는 당신이 무엇을 할 수 있는지 결코 알 수 없다. - 윌리엄 코베트 해보지 않으면 알 수가 없다 나의 첫 리액트 프로젝트, 시작하기 전에는 느낄 수 없었던 것들이 프로젝트가 어느정도 궤도에 오르니 보이기 시작했다. 백문이 불여일견이고 백견이 불여일행이라 역시 한번 해보는 것만큼 좋은 경험과 배움은 없는 것 같다. 이번에 배웠던 것들을 다음번에는 잘 써먹을 수 있게 하기위해서 기럭을 남겨본다. 늘 협업을 중점에 두자 스스로 위대해질 수 있는 사람은 없다. 프로그래밍을 할 때 협업이 가장 중요한 이유는 프로그램은 혼자 만들 수 없기 때문이다. 간단한 쉘을 만들거나 예제 프로그램을 만드는 것은 혼자서 할 수 있을지 몰라도 이렇게 누군가에게 제공해야되는 서비스를 제작할 때 혼자하는 것은 거의 불가..

안녕 AWS 작은 서비스를 배포하기 위해서 가장 좋은 방법은 무엇일까? 작은 서버를 사서, 처음부터 올리는 것도 좋은 공부가 되겠지만, 많이 배울 수는 있어도 나중에 써먹기는 힘들다. 프로그래밍의 분야가 세분화되고 있는 지금 그렇게까지 리눅스를 파서 공부할 필요가 있을까? 오히려 클라우드를 경험해보는 것이 더 좋지 않을까? 물론 아키텍처쪽으로 지망하면 처음부터 올려보는 것이 좋겠지만, 나는 웹 백 혹은 프론트할 생각이고 다른 팀원들도 아키텍처는 관심이 없다. 고맙게도, 42서울은 훌륭한 보상제도(발표 혹은 봉사시 주는 달러)를 가지고 있고, 그 보상제도 안에는 AWS 크레딧이 존재한다. GCP, Azure 등등 거의 모든 클라우드 플랫폼의 크레딧을 구매할 수 있지만, 우리는 접근성 및 학습을 이유로 AW..

구해줘 카뎃이란? 구해줘 카뎃(SaveCadet)이란 42 서울 구성원을 구하는 모임이다 (42 교육생을 카뎃이라고 부름) 원래 코로나 시절 집에서 원격공부를 하는 카뎃들이 공부에 집중을 못해서 그런 사람들을 구하기 위해 만든 동아리이다. 동아리 룰은 오전 10시 그리고 오후 5시 반에 Gather 42 서울 플랫폼에서 서로 오전에는 무엇을 할지 이야기하고, 저녁에는 오늘 무엇을 했는지 그리고 오늘 공부한 내용을 발표하는 건설적인 룰을 가지고 있다. 나는 8월 군복학 후 어느곳이라도 소속되고 싶다는 마음으로 홍보물을 보고 가입하게 되었다. 어쩌다가 대표를 맡게 되었는가? 내가 본 구해줘 카뎃은 매우 포텐셜이 높은 동아리였다. 하지만, 동아리의 생명은 점점 꺼져가는 상태였다. 내가 들어간 8월에도 인원은 ..

첫 회의 이후 우리 팀은 고뇌를 거쳐 어떻게 API를 만들 것인지 설계했다. 우리는 제작자이면서도 가장 열성적인 사용자가 될 것이기에, 어떻게 제작해야 인원 확인(페이지의 목적)을 잘 처리할 수 있을지 고민했고, FIGMA에 오른쪽 사진처럼 열심히 구현하려 노력했다. 모두 좋은 계획에 좋은 제품이 나온다고 믿었기에, 계획을 짜는 과정은 매우 순조로웠다. 주 3회 이상 총 7회의 회의를 진행했고 운영진의 입장과 사용자의 입장에서 가장 효율적이고 인지하기 쉬운 디자인을 짜냈다. 아직 완벽하지는 않지만, 사용하면서 더욱 더 잘 해낼 수 있을 것이라 믿으며 우리 팀은 UI/UX에 대한 논의를 마쳤고, 이제는 어떻게 짤 것인가에 대한 고민으로 넘어갔다. 어떻게 구현할 것인가? 목표는 이제 정해졌다. 그렇다면 백엔..

JSX 변종인가!? const element = Hello, world!; 위의 코드를 보면 무슨 생각이 드는가? 오른쪽만 보면 평범한 HTML코드이다. 그런데, 언제부터 HTML을 변수에 집어넣을 수 있었지?! 나와 같은 의문을 품었다면, 당신도 나와같은 동류다. (??? : 도대체 왜 마크업 언어를 변수에 집어넣는거야!!) 이렇게 의문을 품었더라도, 이 글을 다 읽을 때 쯤 아 그래도 JSX가 뭔지 알겠다 싶을 수 있도록 아래 열심히 설명해보겠다. 그래서 JSX가 뭐냐 JSX == JavaScript + XML 말 그대로, JSX는 JavaScript에 XML을 얹은 친구이다. XML이 무엇인지 궁금한 분들은 이 링크를 한번 읽고오면 좋다. 그렇다면, 이 친구는 어떤 특징 그리고 장단점을 가지고 있을..

들어가며 모든 프로그래밍 언어를 배울 때 가장 귀찮은 것은 바로 개발환경 구성이다. 하지만, 그 귀찮음도 React에서는 예외일 것이다. 아주 간단하게 React를 키는 과정을 한번 살펴보겠다. 설치과정은 npm 설치(node.js 설치) -> Create React App 설치 -> 개발환경 구성 순으로 진행하겠다. 1. Node.js 설치 가장 먼저 Node.js에 들어가서 Node.js를 설치하자 Node.js 설치링크 Node.js에는 npm이라는 패키지 관리자가 포함되어 있는데, 우리는 npm을 사용하기 위해 그것을 포함하고 있는 node.js를 설치할 예정이다. 설치를 할 때에는 LTS설치를 권장한다. LTS란, Long Term Support를 의미하는데 즉, 이 버젼을 설치하면 장기간에 걸..

들어가며 무엇을 공부하거나 알아볼 때 가장 중요한 것은 자신이 배우는 것에 대한 개괄적인 그림을 그리고 들어가는 것이다. React는 뭐라고 정의할 수 있을까? 라이브러리? 인터페이스를 위한 도구? 둘 다 맞는 말이지만 정확하게 표현하면 아래와 같다. 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리 - 리액트 Tutorial 중 처음 컴퓨터를 공부하는 사람들을 위해서 조금 풀어서 해석하면 아래와 같다. 사용자 인터페이스 (UI, UserInterface 즉, 당신이 보고 있는 이 웹브라우저 환경)을 구축하기 위한 선언적이고 (React는 어떻게가 아니라 무엇을 정의하는 프로그래밍이다) 효율적이고 유연한 JS 라이브러리이다! (그걸 위해 미리 만들어 놓은 JS에..

개발은 어디에서 시작해야 하는가? 누구에게나 처음은 있다. 엄청 잘해 보이는 대단한 사람도 그것이 무엇이든 간에 잘하기 위해서는 수많은 반복과 숙달이 있었을 것이다. 하지만, 열심히 노력하면 어느 정도의 경지에 이를 수 있다 하더라도 그 속도는 다를 것이다. 내 몸은 하나고 내 인생 또한 유한하기에, 나는 가장 빠르게 그리고 좋은 길을 찾아 나섰고 아래와 같은 사진을 찾아냈다. 로드맵 나는 C언어 그리고 파이썬에 대해서는 어느 정도 중급 개발자 언저리라고 생각한다. 하지만, 그것이 프런트엔드라면 다르다. 나는 프엔 경험이 없고, 비슷한 것도 해본 적이 없다. 아는 것이 없으면 더더욱 겸손해야 되는 법 나는 미리 이 길을 걸은 사람들의 지혜를 구하기 시작했고, 이 로드맵이 그 결과다. 나는 리액트 관련한 ..

수 수를 생각하면 기본적으로 사람들은 자연수를 생각하게 된다. 코딩을 좀 해본 사람들은 Int 형같은 정수를 생각하겠지만, JS에서는 조금 다르다. JS에서 "수는 실수다" 즉 기본적으로 64비트의 floating Type 라고 보면된다.(binInt제외) JS 에서 기본적인 수의 범위는 (-(2^53 − 1) and 2^53 − 1)으로 정의된다. 즉, +/- 9,007,199,254,740,991 이 범위이며 영어로 nine quadrillion seven trillion one hundred ninety-nine billion two hundred fifty-four million seven hundred forty thousand nine hundred ninety-one 되시겠다. 메모리 기반 ..

JS는 어디에서 왔는가? JS는 왜 JavaScript일까? 이름이 자바스크립트인 것을 보면, 무언가 자바와 큰 관계가 있는 것처럼 느껴지지만 사실은 그렇지 않다. JavaScript는 1995년 Netscape의 엔지니어 Brendan Eich에 의해 만들어졌으며 1996년 초에 Netscape2와 함께 처음으로 배포되었다. 원래 이 친구의 이름은 LiveScript였지만, 당시에 썬 마이크로시스템의 Java성공에 힘입어 마케팅을 위해 이름을 바꿔버리게 된다.(같은 C언어 계보니까 같은 식구인 건가..? 쟤는 객체 지향이고 얘는 기반었지만.. 이제는 의미가 있나) 원래 첫 이름은 Mocha였다 이후 자바스크립트는 Ecma International에서 표준으로 제정되고, 지속적으로 개정을 거쳐 현재는 2..