전체 글
-
CI/CD란Etc/WEB 2021. 8. 31. 20:53
- 시장과 고객의 요구에 빠르게 반응하여 제품을 출시, 업데이트 하는 것이 중요 세계적으로 많은 기업들이 ci/cd를 개발 프로세스로 활용하고있다. - CI/CD란 어플리케이션 개발부터 배포까지 모든 단계들을 자동화하여 사용자에게 빈번히 배포할 수 있도록 만드는 것이다. CI: continuous integration CD: continuous delivery (혹은 deployment) CI는 버그 fix나 새로 추가한 기능들이 main repository에 주기적으로 merge되고, 빌드, 테스트되는 프로세스를 의미한다. CI가 중점적으로 둔 사항은 1. 개발자들은 코드 변경사항을 주기적으로, 빈번하게 merge해야 한다. => 동일한 소스파일을 서로 다른 개발자들이 너무 오랜기간동안 변경을 할 경우..
-
웹 기초 용어 정리Etc/WEB 2021. 8. 27. 15:42
브라우저 브라우저란? - 브라우저는 서버에 자원을 요청(request)하고 그걸 응답(response)해 윈도우에 표시하는 역할을 한다. - HTML 파일이나 CSS 파일, 이미지 등이 서버에서 넘어오면 파싱(Parsing)이란 작업을 거쳐 화면에 그려낸다. - 이 과정에서 '어떻게 해석할까?'의 방식은 브라우저마다 조금씩 다르다. 브라우저의 구조 사용자 인터페이스 - 웹 URL을 보여주는 주소 표시 줄, 앞/뒤로 가기, 새로고침, 북마크 표시 줄 등을 뜻합니다. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다. 주어진 URL을 읽어들이며, 앞/뒤 페이지로 가거나 새로 고침을 하는 등의 기초적인 액션을 담당합니다. 렌더링 엔진 - HTML, CSS 등을 해석해주는 엔진입니다. ..
-
directives 기능 사용하여 http 요청 https로 일괄 변환하기Etc/WEB 2021. 8. 22. 14:09
directive - directive 기능은 schema와 operation에 추가적인 configuration을 적용하는 기능이다. - Apollo server와 client는 graphql document에 적힌 directive들을 읽고 적절하게 해당 기능을 수행 해준다. - directive는 자체적인 arguments를 가질 수 있다. 자신이 configure하고자 하는 것의 뒤에 작성이 된다.(field, arguments, query, mutation 등) directive 적용하기 - 먼저, 적용 할 로직을 작성한다. - 해당 로직(새로 만들어진 익명 함수)은 서버가 시작될 때 해당 directives가 명시된 필드마다 한 번씩 실행이 된다. 자세한 과정을 보면 해당 필드의 resolve..
-
프로젝트 환경분석3(ApolloServer, ApolloClient)Etc/WEB 2021. 7. 20. 19:17
server/graphql/aplloServer.ts 이 모듈은 ApolloServer 객체를 생성을 하는데, 인자로 schema, context, dataSources, plugins를 전달한다. schema 스키마는 데이터 타입의 집합으로, 일종의 API 문서의 역할도 한다. 어떠한 데이터 객체를 반환할지, 특정 요청을 어떻게 처리할 지 등이 작성되어 있다. 같은 폴더의 schema.ts는 정의된 type과 resolver를 묶어서 반환한다. context 일종의 전역변수 개념으로, context 필드에는 객체 혹은 객체를 반환하는 function이 들어간다. 해당 config 설정 시 resolver에서 해당 context의 객체를 인자로 받아서 사용이 가능하다. req.clientHeader 프로..
-
fetch와 axiosEtc/WEB 2021. 6. 14. 10:53
둘 모두 ajax 라이브러리이다. (return값은 Promise type이다.) - fetch는 웹 API로써 기본적으로 제공하는 비동기 요청 함수이다. - 응답 및 요청 데이터를 자동으로 json형식으로 변환해주지 않는다. 따라서, 응답한 데이터를 response.json() 처리를 한 후에 사용할 수 있다. - 또한, 일부 익스플로어 버전에서는 지원하지 않는다. https://www.daleseo.com/js-window-fetch/ [자바스크립트] fetch() 함수로 API 호출하기 Engineering Blog by Dale Seo www.daleseo.com response.json() 후 data로 전달하면 object로 사용할 수 있다.(근데 설명상으로는 json형태로 되어있다) axio..
-
자바스크립트 코딩테스트 주요 문법Algorithm/Grammar 2021. 6. 11. 13:29
array.push() / array.pop() / array.shift() -> 각각 맨 끝에 삽입, 맨 끝 요소 삭제, 맨 앞 요소 삭제 , pop과 shift는 삭제된 요소 return Number.MIN_SAFE_INTEGER / Number.MAX_SAFE_INTEGER -> 최댓값을 구할 때 : 가장 작은 값으로 초기화 해야 하므로 Number.MIN_SAFE_INTEGER -> 최솟값을 구할 때 : 가장 큰 값으로 초기화 해야 하므로 Number.MAX_SAFE_INTEGER 배열의 원본 변경 X => slice / 원본 변경 O => splice https://im-developer.tistory.com/103 [JS/Array] slice()와 splice()의 차이점 slice()와 s..
-
C++ Container, 유용한 함수Algorithm/Grammar 2021. 6. 8. 13:13
문자열 - 문자열 부분 추출시 => substr(인덱스, 글자 수) -> 문자열 추출에 매우 유용하다. -> 글자 수에 인자를 넣어주지 않으면 index부터 문자 끝까지를 반환한다. - 숫자를 문자열 전환 => to_string(숫자) int a = 123; string str1 = to_string(a); // 123이 string "123"로 변환되어 str1에 저장된다. - 문자열을 숫자로 변환 => stoi(str) string str_a ="7"; string str_b ="7.02"; string str_c ="3.14"; string str_d = "2300000000"; int after_a = stoi(str_a); // "7"을 int형 7로 바꿔줌 double after_b = sto..
-
Redux의 필요성Etc/WEB 2021. 5. 17. 08:10
오늘 React의 Virtual Dom의 생성 과정 및 컴포넌트의 생명주기를 공부하다가, 바탕화면에 있는 내가 전에 만들어두었던 To Do List 어플리케이션을 구경했다. 근데 하위 컴포넌트로 props를 거의 10개가 넘게 전달하는 것을 보면서 정말 놀랐다. 이전에 Redux로 상태관리를 했던 프로젝트 코드에 익숙해졌다보니.. 게다가 클래스형 컴포넌트 형태로 작성을 한 것도 오랜만에 보니 또 낯설었다.(함수형 컴포넌트의 소중함?) To Do List의 toDos를 업데이트 해야 되서 input을 담당하는 컴포넌트까지 계~속 얘를 전달하다보니 정말 가독성이 엉망이었다. 리덕스를 사용하면(react-redux기준) 그냥 useState로 새로운 상태 input 만들고, input에 추가된 내용을 디스패치..