과거의 내가 미래의 나에게

프론트엔드 아키텍쳐를 짜는 부분에 대해서 고민을 많이 하고 있다. 점점 더 커지는 애플리케이션의 규모, 예상할 수 없는 요구사항으로 언제 어떻게 변경될 지 모르는 코드 등 맞닥뜨리게 되는 여러 상황을 최대한 유연하게 대처하기 위해 다양한 방식을 공부하고 있고 공부한 내용을 정리하여 기록해놓겠다. 참고로 아래에 정리한 내용은 프론트엔드 소스를 설계한다 가정하고 학습하였음을 사전에 알린다. 1. 가장 전통적인 형태, 모놀리스 아키텍쳐 Monolith는 사전적 의미로는 하나의 거대한 암석으로 된 기둥따위로 거대한 하나의 조직을 나타내기도 한다. 이런 의미와 같이 모놀리스 아키텍처는 단일 단위로 구성되어 있는 아키텍처로 모든 로직이 한 곳에 존재한다. 하나의 코드베이스가 존재하고, 하나의 배포 단위를 거치며, ..

현재 진행중인 프로젝트의 방대한 코드를 MFA 방식으로 나누기 위해 여러가지 방법을 알아보다 Iframe을 활용한 방식이 있음을 발견하여 iframe에 대해 공부할 필요성을 느껴서 이 글을 쓴다. HTML iframe이란 inline frame의 약자로, 웹 페이지 안에 또 다른 웹페이지를 보여주고자 할 때 사용한다. 사용 방법은 src 태그를 활용하여 원하는 주소를 연결시키면 된다. iframe을 사용한다면 새로운 컨텐츠를 쉽게 추가 할 수 있으며, 별도의 페이지 이동이 없으므로 사용자한테 더 풍부한 화면을 보여줄 수 있다. 하지만 HTML 코드량이 너무나도 방대해지고, 또한 iframe으로 삽입된 컨텐츠는 크롤링하지 못하는 검색엔진도 존재하기에 SEO 측면에서 좋지 않다. 이 밖에도 사용성에 불편함이..

화면 개발 시 주로 Vuejs를 사용했는데 실제로 부딪혀보며 사용하다가 모르는 게 있으면 그 때 그 때 구글링하여 학습하곤 했다. 그러다 Vuejs 문서를 함께 보는 스터디에 참가했는데 문서를 전체적으로 훑고나니 몰랐던 방식도 많았고 잘못된 사용 방식도 많았다는 것을 알았다. 그 뒤로 무언가 학습할 때 먼저 사용해보고 어느정도 맛을 봤다 싶으면 시간을 내어 문서를 처음부터 끝까지 정독하려고 한다. 이번에 개인 프로젝트 및 그룹 프로젝트를 진행하면서 Next.js를 몇 번 사용하게 되었다. 그리고 이제 Next.js를 의도에 맞게 효율적으로 사용하기 위해 문서를 읽고 이 곳에 기록해보려고 한다. Next.js는 리액트를 기반으로 만든 프레임워크이다. 그리고 리액트는 자바스크립트 라이브러리로써 UI를 구축하..

저번 글에서는 개발자란 무엇인지 그리고 웹이란 무엇인지 살펴보았다. 이번 글에서는 웹이란 무엇인지 정의내리고, 웹의 동작 원리는 어떤 과정인지 살펴봄으로써 앞으로 배워야 할 것이 무엇이 있을 지 살펴보는 것이 목적이다. 그래서 웹은 뭔데? 웹이 탄생하게 된 과정을 살펴보면서 웹이 어떤 것인지 어렴풋이 알게되었지만 그래서 웹이 무엇이냐? 라고 질문한다면 어떻게 대답해야할까. 웹은 단순하게 인터넷을 통한 서비스들 중 문서(=웹페이지)를 공유하고 정보를 검색 할 수 있는 서비스 제품이다. 수많은 컴퓨터 프로그램 중에 하나의 프로그램일 뿐인 것이다. 인터넷 서비스에는 WWW(줄여서 Web), E-Mail, Telnet(원격접속), FTP(파일송수신), IRC(채팅) 등이 있다. 위의 서비스들은 보통..

본 글은 CSS 설계 기법 책을 읽고 단순하게 정리하고 나열한 글이다. 추후에 이러한 지식을 바탕으로 프로젝트의 CSS 체계를 직접 고려해보고 적용시키는 과정을 거쳐보려고 한다. OOCSS 기초 중의 기초인 CSS 설계 기법이다. 가장 밑바탕이 되어준다. 스트럭처와 스킨을 분리 구조(width ,height ,margin ,padding 따위)와 스킨(background, font, color 따위)을 분리하여 css를 설정한다. 이는 상황에 따라 적절히 구분해야할 것이다. 컨테이너와 콘텐츠 분리 한 영역에만 적용될 콘텐츠 만드는 것을 지양하자. SMASSS 느슨한 개발을 원할 경우에 적합하다. 다른 기법과 조합해도 좋은 기법. 1. 베이스 규칙 프로젝트의 표준 스타일을 정의한다. ID 셀렉터나 clas..

HTTP 프로토콜의 비연결성 서버와 클라이언트 통신규약인 HTTP 프로토콜은 비연결을 지향한다. 서버와 클라이언트는 통신을 할 때 연속적으로 이어지지 않고 한 번 통신이 되면 끊어진다. 클라이언트가 서버에 요청을 했을 때, 서버는 그 요청에 맞는 응답을 보낸 후 연결을 끊는 처리방식인 것이다. 따라서 서버에게 클라이언트가 누구인지 그 때 그 때 알려주어야하는데 이러한 번거로움을 해결하기 위한 것이 cookie와 session이다. Cookie 쿠키는 HTTP의 일종이다. HTTP에서 클라이언트의 상태 정보를 PC에 작은 기록 정보 파일 형태로 저장해두었다가 필요 할 때 참조하거나 재사용할 수 있다. 웹사이트는 쿠키를 통해 접속자의 장치를 인식하고 접속자의 설정과 과거 이용내역에 대한 일부 데이터를 저장한..

여러 방법의 electron 시작 일렉트론으로 개발할 일이 생겼다. 평소처럼 잘 정리된 블로그를 참고하려다 저번 vue 스터디를 통해 깨달은 공식 문서의 중요성을 생각하고 공식문서를 바탕으로 일렉트론에서 Hello World를 띄우는 법을 기록해본다. 또한 이외에도 한 블로그를 참고하여 보일러 플레이트를 활용한 시작, 기존 react 프로젝트에서 일렉트론 추가하기도 기록해볼 것이다. Electron은 무엇인가? 일렉트론은 HTML,CSS,JS를 사용하여 데스크탑 애플리케이션을 구축하기 위한 프레임워크이다. 크로니움과 node.js를 바탕으로 제작하여 js 코드베이스를 유지하며 windows, mac, linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있다. 공식문서와 함께 시작하기 0. 목적 Hello..