누워서 코딩하기 - 떡 먹는 것처럼 쉽고 재밌게! 🤭

env란? 어플리케이션 및 웹 개발 중 외부에 공개되면 안되는 정보 (예: 포트 번호, 데이터베이스 관련 정보, 토큰, API 키 등)가 존재하게 될텐데, 이러한 정보가 하드 코딩으로 구성 파일에 포함되면 깃허브나 기타 오픈소스에서 관련 정보들이 노출될 위험이 있습니다. 또한, 서버나 토큰 정보가 수정될 경우 하드코딩을 하였기 때문에 코드를 다시 수정하여 배포해야 하는 문제점도 발생합니다. 이때 이러한 문제를 해결하기 위해 env 파일을 사용합니다. env 파일을 사용하게 되면 외부에 공개되면 안되는 정보들을 구성 파일에 하드코딩하지 않고 사용할 수 있게 됩니다. 외부 파일(.env)에 환경 변수를 정의하여 변수로 받아오는 이유는 보안성과 유지보수성을 높이기 위함입니다. React에서 .env 파일 생성..

브라우저란 ? 쉽게 말해, 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고 문서 검색을 도와주는 응용 프로그램이다. 브라우저의 종류로는 Google Chrome, Apple Safari, Nava Whale, Microsoft Edge 등이 있다. 사용자가 특정 웹사이트를 접근한다고 가정할 때 다음과 같은 과정을 거칠 수 있다. 사용자가 브라우저를 실행 접속하고 싶은 사이트의 url를 주소창에 입력 브라우저는 입력된 url의 서버에게 사이트 정보를 받아와 이를 화면에 표시 표현된 정보를 사용자가 활용 즉, 사용자가 보고자 하는 페이지를 서버에 요청하고 서버로부터 받은 응답(HTML, CSS, Javascript 등)을 브라우저에 표시하는 것이다. 브라우저의 랜더링 원리 브라우저가 화면에 나타나는 요..

AJAX란? 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 로드하지 않고 필요한 일부 페이지의 데이터만을 로드하는 기법 자바스크립트를 사용하여 웹 서버와 클라이언트 간 비동기적으로 XML 데이터를 교환하고 조작하기 위한 웹 기술 하이퍼텍스트 표기 언어(HTML)만으로는 어려운 다양한 작업을 웹 페이지에서 구현해서 이용자가 웹 페이지와 자유롭게 상호 작용할 수 있도록 구현하는 기법 비동기란 ? 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미 AJAX의 동작 원리 클라이언트에서 서버로 데이터 요청, 그에 대한 결과를 반환받음 = 서버와 클라이언트의 통신 사용자에 의한 요청 이벤트 발생 요청 이벤트가 발생하면 이벤트 핸들러에 의해..

HTTP란? HTTP(Hyper Text Transfer Protocol): 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약이며 브라우저로 데이터를 전송해주는 용도로 많이 사용 기본 포트인 80번 포트에서 서비스 대기 중이며, 클라이언트가 TCP 80 포트를 사용해 연결하면 서버는 요청에 응답함 HTTP는 정보를 "텍스트"로 주고 받음. 따라서 전송 신호를 인터셉트하는 경우 데이터 유출이 발생할 수 있음. 프로토콜이란 ? : 컴퓨터 내부에서 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계를 의미한다. HTTP의 구조 HTTP는 애플리케이션 레벨의 프로토콜로 TCP/IP 위에서 작동함 HTTP는 상태를 가지고 있지 않는 Stat..

Swift 란? https://developer.apple.com/kr/swift Swift - Apple Developer Swift는 iOS, iPadOS, macOS, tvOS 및 watchOS를 위한 강력하고 직관적인 프로그래밍 언어입니다. Swift 코드 작성은 대화식으로 재미있고, 구문은 간결하면서도 표현력이 풍부하며, Swift에는 개발자들이 좋 developer.apple.com Swift는 Apple에서 개발한 프로그래밍 언어로, iOS, macOS, watchOS 및 tvOS 앱을 개발하는 데 사용된다. Swift는 C 및 Objective-C와 호환되며, 안전하고 빠른 코드 작성을 위해 설계되었다. Swift의 특징 안전 중심 설계(SAFE) 안전하게 코드를 작성할 수 있는 기능 제공..

MobX란? 전역 상태 라이브러리 모든 상태 변화가 일어나는 부분을 자동으로 추적해주는 역할 유지보수가 쉬워지도록 상태 로직을 분리하여 모듈화할 수 있음 상태 관리의 단계를 간결하게 해줌 MobX 특징 React에 종속적인 라이브러리가 아님 redux와 다르게 store에 제한이 없음 절대적으로 필요한 경우에만 state 변경 Typescript를 기반으로 만들어짐 기본 동작 원리 및 개념 상태를 변경하기 위한 action이 발생하면 observable(상태)가 update되고, 상태가 변경되었음을 notify해서 필요에 따라 연산된 값(compute values)을 계산하거나 적절한 reaction(반응)을 수행한다. action이 state를 변경하는 단방향 데이터 흐름을 사용 영향을 받는 모든 vi..

[RN] React Native의 정의와 장단점 React Naitve란? 2015년 3월 페이스북에 의해 공개된 오픈소스 모바일 어플리케이션 프레임 워크 사용자 인터페이스를 만드는 React에 기반을 두고 제작 웹 브라우저가 아닌, iOS와 Android에서 동작하는 suji-sw.tistory.com 위의 포스팅을 통해 React Native의 정의와 장점, 단점 등을 알아보았다. React Native 개발자라면 해당 프레임워크가 어떻게 작동 하는지 알 필요성이 있기 때문에 해당 포스팅을 작성하도록 하겠다. React Native의 작동 방식 React Naitve는 크로스 플랫폼 앱 (Cross-Platform App)으로, javascript 언어로 iOS와 Android 플랫폼을 동시에 개발할..

MVC 패턴이란? MVC란 Modal-View-Controller의 약자로, 애플리케이션을 세 가지 역할로 구분한 개발 방법론이다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있게 된다. Modal - 애플리케이션의 정보(데이터) View - 텍스트, 체크박스, 항목 등과 같은 사용자 인터페이스 요소 Controller - 데이터와 비즈니스 로직 사이의 상호동작을 관리 MVC 구조에서의 입력은 모두 Controller에서 발생하게 되며, 관리되게 되는 구조이다. 이벤트가 발생하면 Control에 의해 각 모듈의 정의와 View의 사용 용도가 달..

디자인 패턴이란? 디자인 패턴은 건축학 및 컴퓨터 과학에서 사용되는 용어로, 설계 문제에 대한 해답을 문서화하기 위해 고안된 형식 방법이다. 컴퓨터 과학에서의 디자인 패턴이란 "프로그램 개발에서 자주 나타나는 과제를 해결하기 위한 방법 중 하나" 과거의 소프트웨어 개발 과정에서 발견된 설계의 노하우를 축적하여 이름을 붙여, 이후에 재사용하기 좋은 형태로 특정의 규약을 묶어서 정리한 것이다. 즉, 개발자들끼리 협업을 잘 할 수 있도록 코드들의 패턴을 정해 코드의 질, 효율성을 높히는 것을 뜻한다. => 효율적인 코드를 만들기 위한 방법론 디자인 패턴의 장단점 장점 개발자 간의 원활한 의사소통 소프트웨어 구조 파악 용이 재사용을 통한 개발 시간 단축 설계 변경 요청에 대한 유연한 대처 불필요한 리소스 낭비 ..

Redux(리덕스)란? Redux는 Javascript 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 상태를 관리할 수 있다. 예를 들어 회원가입 시 사용자가 입력한 정보를 가지고 다른 화면으로 이동해야 한다고 가정했을 때 이를 props로 넘기는 것은 매우 비효율적이다. 따라서 상태 관리 라이브러리인 Redux를 사용하여 쉽게 상태 값을 전달하거나 업데이트 할 수 있다는 것이다. 즉 전역 상태를 관리할 때 굉장히 효과적이다. Redux의 특징 1. Single source of truth Redux는 한 곳에서 데이터를 전역적으로 관리하고, 관리하는 이곳을 store라고 부른다. 즉, 하나뿐인 데이터 공간이 있다. 2. State..