본문 바로가기

개념정리

11/19[TIL]React React를 사용하는 이유? 유저와의 인터렉션이 별로 없다면 간단히 html와 css로 구현이 가능하나 유저와의 인터렉션이 많아질수록 관리해야 할 돔(DOM)이 많아질수록 힘들기에 해결책으로 상태 값 관리와 수많은 돔 관리를 해주고 오직 기능 개발에만 집중할 수 있도록 해주는 것인 프런트엔드 라이브러리(프레임워크)가 만들어졌다. 그중에 React가 존재한다. 우리는 이 React라는 것을 쓰면서 코드의 재사용성 증가 및 직관적인 코드를 짤 수 있게 해 준다 라는 장점이 있다는데 일단은 차근차근 공부해 나가면서 차차 느낄 예정(?)이다. 앞서 말한 장점을 부각해주는 것이 컴포넌트(?) 단위로 개발해서 그런 것이라고 한다. React는 기본적으로 ES6를 사용하는데 ES6에 있는 수많은 문법이 있는데 이 중.. 더보기
11/16[TIL]Server & Node 오늘은 서버를 구축하는 스프린트를 진행했다. 기존에 배웠던 것을 바탕으로 진행이 되었고 추가적으로는 api 문서들을 만들고 module.export 이용법을 반영하여 진행했다. 서버 즉, 무엇인가를 제공하는 주체이며 우리가 통상 많이 접하는 http 서버는 http라는 프로토콜을 통해 통신해서 api를 제공하는 주체이다. 앞서 배웠듯이 stateless와 connectionless 특성을 가지면서 말이다. 쉽게 말하면 요청에 대한 응답이 없으면 안 되고 반드시 요청과 응답이 1:1의 관계가 지속된다고 생각하면 될 것이다. 그렇게 서버를 구축하기 위해 진행하는 순서는 Step 1 http 서버를 만들고 Step2 각 요청 분기를 한다 Step 3 분기에 따른 api를 제공한다 여기서 api는 요청이 오면 .. 더보기
11/13[TIL]Server & Node Node.js 는 js를 컴파일해주는 엔진으로 빌드된 js가 구동중인 환경으로 유저의 클릭이나 네트워크에 리소스를 요청하는 이벤트가 논블로킹으로 이루어지는 input output model 특징을 가진다.(이벤트 기반 및 논블로킹 I/O 모델) 그렇기 때문에 속도가 빠르고 별도 설치를 하지 않아도 node 상에서 사용할 수 있는 모듈들이 존재한다. 앞서 require 방식으로 fs / http / url / path 등을 사용 해보았다. NPM은 세계에서 가장 큰 오픈소스 라이브러리 생태계 중 하나이다. npm init 이라는 명령어를 사용하고 각종 설정을 하게 되면 package.json이라는 파일이 생성되는데 여기에는 프로젝트 전반에 관한 정보가 들어있다. 이는 셋업하는 역할들이 담겨있는 정보들이며 .. 더보기
11/12[TIL]Browser Security 어제 정리했던 웹 아키텍처를 이어서 Browser Security를 다루어보고자 한다. 우리가 사용하는 브라우저는 javascript를 구동하기 때문에 공격을 받을 수 있다고 한다. 이러한 공격의 종류에는 XSS와 CSRF가 존재한다. XSS(Cross Site Scripting) 클라이언트가 서버를 신뢰하기 때문에 발생하는 이슈이며 지금은 기본적인 xss 공격은 브라우저에서 막혀있다. XSS는 보안이 약한 웹 애플리케이션에 대한 웹 기반 공격이며 공격의 희생자는 애플리케이션이 아닌 사용자이다. 보통 js를 통해서 전달되며 이는 해커가 서버에 코드를 심어 놓으면 사용자가 이를 아무 생각 없이 받아서 사용자의 브라우저 상에서 실행되어버리는 상황을 말한다. CSRF(Cross-Site Request Forg.. 더보기
11/11[TIL]Web architecture 웹 아키텍처를 오늘 공부하기 이전에 구글링으로 어떤 것인지 찾아보았는데 오늘 내가 이해하고 강의에서 다룬 내용은 정말 빙산의 일각이라고 생각된다. 웹 아키텍처를 논하는 데 있어서 사전에 큰 틀을 차지하고 있는 어떤 서버 프레임 워크들이 존재했는지 보았는데 정말 초기의 프레임 워크들은 이름을 한 번도 들어보지 못한 것들이 수두룩 했고 한 참 내 눈을 최근 프레임 워크 들로 돌렸을 때에 spring, django 등 이 것도 엄청 초기 버전이 눈에 들어왔다. 뭔가 웹 아키텍처를 공부하는데 구글링을 하면서 점점 Deep 하게 들어가게 되는... 구글링을 하게 되면 생기는 어쩔 수 없는 결과 같다. 웹 아키텍처는 웹 내에 내 / 외부의 구성 요소 간에 관계와 상호작용을 패턴화 한 것으로 오늘 배운 내용으로 보면.. 더보기
11/10[TIL]Asynchronous & Promise(2) 어제부터 진행한 비동기 부분에 관련하여 오늘도 진행했다. 확실히 알게 된 것은 node.js에서는 non-blocking은 비동기, blocking은 동기로 이해하면 될 것 같다는 것이다. 하지만 node.js가 아닌 다른 언어의 환경에는 그러지 않을 수 있다고 한다. 어제부터 진행한 스프린트에서 다룬 부분은 callback에서부터 promise, async await까지인데 중첩된 callback의 사례에는 먼저 애니메이션 동작 그리고 공식 문서를 처음 접했을 때 힘들었던 파일 입/출력 부분 마지막으로 fetch를 사용하는 네트워크 요청이 있다. callback의 단점인 callback Hell 어제 다뤘고 그 점을 보완한 promise까지 알아보았다. 좀 더 자세히 알아보자면... promise는 3.. 더보기
11/9[TIL] Asynchronous 비동기(Async) 부분을 callback을 통해 순서를 정해 줄 수 있다. 하지만 그 해당 부분이 많다면 일일히 지정해주어야 하는 상황이 벌어지기에 이른바 callback Hell 이 생기게 되고 이는 가독성의 불편 등 많은 단점이 발생된다. 이를 해결 해주기 위해서는 promise와 async await를 사용하면 된다. promise는 다음 task를 진행하는 .then과 error를 핸들링하는. catch 가 있고 앞서 말한 callback Hell 같은 경우 마지막 체이닝에서 error를 핸들링 하는 것에 있어서 강점을 가진다. 하지만. then사용 시 return 사용하지 않지 않는다면 callback 헬과 마찬가지로 promise 헬 또한 생기게 되니 꼭 return 사용하여 다음으로 넘겨주.. 더보기
11/3[TIL]AWS Deploy 프리코스부터 이머시브 코스까지 쉴 새 없이 달려오면서 팀 프로젝트로 넘어가기 이전의 마지막 스프린트에 도달했다. (HA를 보고 내가 아직 팀 프로젝트 갈 상황은 아닌 것을 자각..ㅠㅠ) 지금까지 로컬 환경에서 코딩을 하고 제대로 구동되는지 확인을 했고 이 것을 마지막으로 다른 환경에서도 제대로 구동이 되게 하는 것을 하는 과정 즉 배포를 이번 스프린트에서 알아보게 되었다. 배포란? 내 컴퓨터의 로컬 환경이 아닌 다른 사람들이 내 코드가 담긴 애플리케이션을 받아 이용 할 수 있게 해주는 것으로 쉽게 말해 내 컴퓨터가 아닌 다른 컴퓨터에서 내 코드를 구동하게 만드는 것이라고 보면 될 것 같다. 배포를 할 때 여러가지의 과정을 거쳐서 진행되는데 코드 입력 후 테스트과정인 Development, 컴플레인이 발생.. 더보기

티스토리툴바