개인저장

에어비앤비 클론코딩을 하면서 해당 버튼들을 만들어야할 상황이 생겼고 그 당시의 나는 이 버튼 한줄을 만드는데5시간이라는 시간이 걸렸다.하지만 나는 저 버튼을 무슨일이 있어도 map함수를 사용해서 만들고 싶었고,그 당시의 나는 처음 접근을 true false로 접근을 했

'항해 99에서의 나의 역할' 이라는 질문에 답을 해야 하는 상황이 생겼다.우리 조에서의, 프론트 팀에서의, 보다는 좀 더 넓은 '항해 8기 교육생'으로서의 역할을 물어보는것 이였다.세부적인 질문으로는 a. 팀구성 & 팀내 나의 역할 b. 나의 목표, 비전과 능력치 향

사용자가 회원가입 모달에서 진행상황을 알 수 있게 장치를 넣어놨는데 변할때 애니메이션을 넣고싶었다.해야하는 작업1\. 클릭 시 다음 모달로 넘어가면서 그 모달에 해당하는 점이 선으로 바뀐다.2\. 바뀔때 늘어나는 애니메이션을 주어야한다.일단 모달의 분기처리는 state

toast 알림을 쓰던중, 하나의 스타일과 하나의 토스트컨테이너를 사용해서 페이지를 만들던중 글자 크기에 비해 토스트의 스타일이 너무 컸고 유동적으로 스타일을 변경하고 싶어서 state값을 하나 지정하고 그 스테이트값에 따라서 스타일과 포지션을 변경하게끔 구현해보았다

진행하고 있는 프로젝트의 로그인 화면에서 풀페이지를 구현해야했고 아주아주 정리가 잘 되어있는 글을 찾아서덕분에 구현을 했다.참고 링크정말정말 유용했습니다.하지만 해당 기능을 위해서는, html의 body의 스크롤을 막아야했고,모든 페이지에서 막을수는 없었기 때문에 특정

진행하고 있는 프로젝트에서 구조는 아예 똑같지만 다른페이지를 만들어야 할 상황이 생겼고파일을 나누지 않고 작업할 수 있는 방법이 고안하다가 선택한 방법이해당 아카이브 페이지로 입장할때 param값을 certification , post 로 나눈다음 useEffect로

직접 만든 토글버튼이다.용도는 나의 사진이 카카오톡에서 설정한 프로필 사진일 경우인지를 판단해서 활성화를 하고눌렀을때 프로필 사진의 연동을 끊거나 연동을 시켜주는 기능을 한다.check 값으로는 연동의 유무(유저의 현재 프로필 사진이 카카오톡 프로필 사진과 일치여부)를

그린스텝 프로젝트의 피드페이지 입니다1\. 랭킹데이터를 불러와 상위 3명의 유저를 보여준다.2\. 피드를 불러와서 보여준다. (무한스크롤)2-1 카테고리를 선택해서 해당 카테고리에 맞는 피드들만 받아올 수 있다.3\. 다른 유저의 피드에 박수를 쳐줄 수 있다.3-1 박

상태관리란 것을 찾아보니 3가지의 종류가 있었다.다른 컴포넌트와 데이터를 공유하지 않는 지역 상태관리(form input등)컴포넌트간 상태관리(props Drilling) 내가 이번 프로젝트에서 제일 많이 사용한 방법그 다음이 redux나 recoil같은 상태관리툴을

페이지에서 순차적으로 애니메이션을 발동하고 싶을 때 나같은 경우에는animation-duration의 시간을 props를 통해 다르게 주면서 해결했다.animation-duration은 얼마의 시간에 걸쳐서 애니메이션을 실행할건지의 옵션인데위와 같이 설정한 후 time

참고영상위 영상을 토대로 공부한 내용을 정리해보았다.자바스크립트는 싱글 스레드 언어이다.하나의 스레드는 하나의 콜스택을 의미하고 하나의 콜스택은 한번에 하나의 작업을 처리하는것을 의미한다.콜스택은 데이터 스트럭쳐로 실행되는 순서를 기억하고 있다.함수를 실행하려면 스택에

상태관리란 것을 찾아보니 3가지의 종류가 있었다.다른 컴포넌트와 데이터를 공유하지 않는 지역 상태관리(form input등)컴포넌트간 상태관리(props Drilling) 내가 이번 프로젝트에서 제일 많이 사용한 방법그 다음이 redux나 recoil같은 상태관리툴을

가상돔과 리얼돔은 내가 기존에 알고 있던 지식은 불필요한 렌더링을 방지하기 위해서 변화가 일어났을때,리액트가 리얼돔과 가상돔을 비교하여서 다른 부분을 찾아내서 해당 부분만 변화시켜서 페이지 전체가새로 갱신되는것을 막는것으로 알고있었다.기존에 알고있었던 내용이 이렇고,

변수를 선언하는 세가지의 방법이고, ES6로 넘어오면서 let과 const가 생겼다.기존 var 의 문제점이 3가지가 있었는데중복선언이 가능하며 그로 인해 예기치 못한 값을 반환할 수 있다.함수 외부에서 선언한 값이 전역으로 선언된다.함수 외부에서 a를 전역으로 선언하

일단 내가 알고있는 지식으로는기본적으로 의존배열에 값을넣고, 의존배열안의 값이 변화하면 변화를 감지하고 1번째 인자의 함수가 발동하는구조로 알고있었고 변화를 감지한다는것은 변화가 일어난 후에 발동을 한다는것이고 변화가 일어난 후 라는것은 렌더링이 끝난 후에 useEff

일단 공식문서에는“A closure is the combination of a function and the lexical environment within which that function was declared.”클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환

GET 방식은 요청을 전송할때 필요한 데이터를 URL에 쿼리스트링으로 전송한다.또한 GET요청은 불필요한 요청을 줄이기위해 요청이 캐시될 수 있다.A 요청에 대해 B 라는 응답을 받는다고 가정했을때, 응답값을 C로 변경해도 캐시를 지우지않으면 똑같이 A요청을 해도 이미

처음 이 개념을 접했을때는 react를 한창 열심히 배우면서 서버와 통신을 할 때 접했었다."서버와 통신은 비동기처리를 해야해""프로미스 객체를 사용하거나 async/await방식을 사용해야해"등등 그 당시 state를 다루기도 힘들었던 나에게는 다른 나라 언어만 같았

참고링크렌더링에는 두가지 종류가 있는데 클라이언트 사이드 렌더링과(CSR) 서버사이드 렌더링이(SSR) 있다.클라이언트 사이드 렌더링은 클라이언트에서 모두 처리하는 방법으로 처음에 서버에서 전체 페이지를 렌더링해서 보여주고사용자가 요청할 때 마다 리소스를 클라이언트가

참고링크Model, View, Controller 의 약자로 프로젝트를 구성하는 요소들을 세가지 역할로 구분한 디자인 패턴이다.모델은 컨트롤러에게 , 컨트롤러는 뷰에게, 뷰는 다시 유저에게, 유저는 다시 컨트롤러에게이러한 구조를 가지고 있다.애플리케이션의 정보, 데이타

아토믹 디자인 패턴은 컴포넌트의 재사용성을 높이기 위해 고안된 패턴 중 하나로인터페이스를 작고 단순한 요소로 나누는 방식이다.아토믹 디자인 패턴은 Atoms(원자), Molecules(분자), Organisms(유기체), Templates(템플릿) 최종적으로 Pages

참고링크 웹 스토리지 (web storage)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 기능이다. 지금까지는 로그인할때 토큰값을 로컬스토리지에 넣어서 로그인 확인을 할 때 사용을 많이 했었다. 웹 스토리지와 쿠키가 항상 비교의 대상이 되는데

참고링크웹에서 쓰이는 통신 규약, 통신 규약이란 통신을 할 때의 서버와 클라이언트 간의 일종의 약속?? 같은 개념자문자답에서도 가볍게 다루었지만 좀 더 깊게 파보면HTTP 는 브라우저가 웹 서버와 통신하기 위해 사용하는 주요 프로토콜이다. HTTP 4가지 요청 형식은

Ajax(Asynchronous JavaScript and XML)말 그대로 자바스크립트와 XML 을 이용해서 비동기식으로 서버와 통신하는 방식이다.promise는 promise 객체에 비동기작업의 결과값을 저장할 수 있다.callback함수에 비해 코드가 간결하다.(

참고링크브라우저 호환성 이슈가 발생했을 때, 이를 런타임 환경에 맞게 최적화 하는 과정을 크로스 브라우징 이라고 하는데자바스크립트의 호환성 문제를 해결하기 위해서는 Babel 이라는 도구를 사용한다.babel은 다른 언어로 변환하는것이 아닌브라우저의 스펙과 호환성에

참고링크객체, 배열의 값을 추출해서 변수에 바로 할당할 수 있는 문법배열 값 state를 다룰때 arr,setArr = useState( )의 state가 있을때값을 추가하고 싶을때 setArr(...arr,any)의 형식으로 추가하곤했었다.배울때는 "배열을 풀어서 넣

참고링크타입스크립트는 자바스크립트의 상위 집합으로서 타입이라는 특징을 가지고 ES7이하의 표준을 포함하고 있다.ES5의 자바스크립트 문법과 ES6의 새로운 기능들도 별도의 트랜스파일러 없이 기존의 자바스크립트 엔진에서 사용할 수 있다.타입스크립트의 장점은 정적 타입 언

참고링크이벤트 버블링은 특정 엘리먼트에서 이벤트가 발생했을 때 그 이벤트가 해당 엘리먼트의 조상한테까지 전달되는 현상이다.이벤트 버블링을 멈추기 위해서는 최초로 일어나는 이벤트 핸들러에 event.stopPropagation() API를 추가해주면 된다.이벤트 캡쳐링은

둘의 비교를 정리해놓은 사진나는 리액트만 써보았고 솔직히 나에게 언어의 선택지는 없었지만 그래도 내가 사용하는 언어의 특징이나비슷한 다른언어는 무엇이 있는지, 그것들과 무슨점이 다르고 리액트만의 장점은 무엇인지는 알고 써야한다고 생각한다.Angular는 특징을 보자면

둘의 비교를 정리해놓은 사진나는 리액트만 써보았고 솔직히 나에게 언어의 선택지는 없었지만 그래도 내가 사용하는 언어의 특징이나비슷한 다른언어는 무엇이 있는지, 그것들과 무슨점이 다르고 리액트만의 장점은 무엇인지는 알고 써야한다고 생각한다.Angular는 특징을 보자면

RESTful하다는것은 무엇일까 REST API는 무엇일까 그러면 REST는 무엇일까?? 참고링크 Rest (Representational State Transfer) 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든것을 의미한다. HTTP 프로토콜

참고링크사진 출처http 프로토콜은 기본적으로 connectionless, stateless의 특성을 가지고 있다.클라이언트가 요청을 한 후 응답을 받으면 연결을 끊어버리는 특징통신이 끝나면 상태를 유지하지 않는 특징연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며

반복 가능한 객체를 이터레이터라고 하며내장된 생성자들 중 이터레이터는StringArrayTypedArrayMapSet등이 있다.어떠한 객체가 iteratable이라면 for...of 루프 (처음보는 문법이라 찾아봤는데의 모양으로 B의 인자를 하나씩 반복하면서 대입하는

참고영상참고영상2(둘다 노마드코더)SQL과NoSQL도 개발자의 기본적인 소양이라고 한다. 찾아보니 DB관련 언어인 것 같고 글들을 읽어보니 백엔드 분들이 하시던스키마라던지 테이블 등등의 단어가 나왔고 노마드코더님의 강의를 보며 정리를 해보았다.(스키마가 무슨 뜻인지 몰

참고링크나는 기존에 URL이란 단어만 존재하는줄 알았는데 REST API를 다시 복습하는데URI란 단어가 나왔다. 오타는 아닌 것 같고 찾아보니 명백한 차이점이 있는 다른 (다르다기 보다는 범주가 더 큰?) 단어였다.URI의 범주 안에 URL이 속하는 형태이다.URI는

개발을 하면서 "쿼리를 날린다"는 표현을 종종 들었고 그것 외에도 정말 자주 마주치는 단어인데이 단어가 무슨뜻인지 제대로 알지 못하였다.실제로 이번 프로젝트에서도 react-query라는 기능을 사용했지만비동기 작업에서의 결과값을 받아오는 기능 중 하나 라는 정도로 사

모의면접때 해당 질문에 대해 답을 못해버려서 따로 정리하기로 했다.axios는 모듈의 설치가 필요, fetch는 내장 함수속도는 fetch가 아주 약간 더 빠름axios는 브라우저 호환성이 뛰어나지만 fetch는 호환되지 않는 브라우저가 있음(익스플로러)axios가 상

react뿐만 아니라 vue, angular등 여러 프레임워크에서 사용이 가능하다.store라는 하나의 중앙 저장소로 관리액션 객체가 존재하고 이를 활용한 에러 핸들링이 가능하다.코드의 양이 상대적으로 많다리덕스와 달리 여러개의 저장소가 존재 가능react에서만 사용

기존 개인 브랜치에서 공용 브런치로의 merge 전략에서 두 브랜치 간의 마지막 커밋과 공통 조상의 3개의 커밋을 이용해서 새로운 커밋을 만들어 충돌병합을 잡는 방법이다.나도 지금까지 작업 하면서 각각 개인 브랜치로 나누고 총 배포를 하는 main 혹은 master 브

참고한 블로그!조금씩 타입스크립트를 공부하기로 했다.일단 리액트에서 타입스크립트를 시작하려면yarn create react-app 프로젝트명 --template typescript 으로 생성하면 된다.일단 만들고 나니 tsx라는 확장자명이 제일 먼저 눈에 띄었다.뭐만

SPA는 기본적으로 single page application 으로서 하나의 페이지로(html파일로)클라이언트 사이드 렌더링 방식을 사용하는것으로 알고있고 그렇게 공부했다.그래서 저 질문에서 첫번째에만 html을 받아오고 그 후 바뀌는 정보를 통해 페이지를 새로 그리는

CSS 애니메이션은 모든 동작을 CSS에서 관리하고 JS는 이벤트 감지를 위해서만 사용한다(크로스 브라우징 면에서는 JS가 더 유리)애니메이션을 세밀하게 제어하는 경우 JS가 유리 (동작 정지 등등 )CSS는 반응형으로 구현하기에 좋다. (미디어쿼리)

사진출처 : https://velog.io/@nrudev/JSXjsx가 무엇인지 궁금해서 찾아보니 javascript XML 의 약자라고 한다.XML을 찾아보니 Extensible Markup Language 의 약자라고 했고확장 가능한 마크업언어?? 라는 뜻

리액트에서 사용하는 방식이고 코드량이 상대적으로 많은 대신 코드의 흐름을 따라가기가 쉽다고 알고 있다.(데이터의 추적과 디버깅이 쉬운편)추가적으로 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신 가능써본적은 없지만 Angular에서 양방향 데이터 바인딩을 사용하는

then catch만 쓰다가 await의 실행순서를 마주치니 정말 머리가 하얘졌다.. 아직 많이 모자란걸로 알고 배워야겠다.참고영상 : 생활코딩 async&await위함수를 실행시키면 어떤 결과값이 나올까??결과값은이렇게 나온다.그럼 다시 코드를 뜯어보면await 아래

구현해야 하는 기능input이 focus 되었을때 테두리의 색을 변경사진의 인풋은 div 안에 아이콘과 인풋이 일렬로 정렬되어있는 형식인데쉽게 말해 파란색 input이 포커스 되었을때 검정색 div의 색이 변경이 되어야 하는것이다.빨간색 돋보기를 클릭했을때 파란색 인

위와 같이 a와b를 정의한 후 더하면문자열 12가 반환된다.자바스크립트가 자체적으로 a를 문자열 취급을 하여 계산을 했기 때문인데 타입스크립트는 이러한 것을 막기위해 사용한다.변수명에 콜론과 함께 타입을 정의한다.number로 지정을 하고 문자열을 할당하려고 하자 에러

지난번 배열을 선언하는걸 공부하고 생각해보니 배열안에 여러 타입이 있을 수 있는데 그런경우에는 어떻게 선언하지?? 라는 생각이 들어서 찾아보았다.여러가지 시도해보다가 해당 방법을 쓰니까 정의되었다. 제너릭으로 선언하는 방법이라고 한다.제너릭만 나중에 따로 공부해서 정리

enum이란 자료구조가 있다고 해서 찾아보았다.의 형식으로 지정을한다.아무 값도 지정을 하지 않으면 자동으로 0부터 순차적으로 값을 할당한다.처음 값에만 5를 할당하면 그 뒤부터 순차적으로 6 7 8... 의 숫자가 할당된다.enum의 값들은 Name.data의 형식으

공부영상인터페이스는 공부하고 나니 일종의 타입자체를 만드는?? 그런 개념이라고 생각이 들었다.일단 interface Name {} 의 형식으로 선언한다. 그 후 변수명과 해당 변수의 타입을 선언하고객체에 인터페이스를 할당하면 선언한 변수는 필수로 들어가야한다.Test

항상 듣기도 엄청 많이 들었고 진짜 중요한 문법이라고는 들었는데 막상 내가 만들어서 사용해본적은 없었다.이번에 타입스크립트 인터페이스 공부를 하면서 클래스관련 얘기가 나오길래 이번 기회에 확실히 정리하고 가면 좋을것 같아서 정리하기로 결정했다.

extends는 말 그대로 확장한다는 의미로 class를 상속할 수 있다.Child에 Test를 상속한 뒤 Child로 인스턴스를 만들면 상속받은 함수를 쓸 수 있다.상속받은 클래스에서 재정의를 할 수도있다.이때 하위클래스에서의 정의는 반드시 상위클래스의 constru

클래스의 extends 처럼 인터페이스도 확장이 가능하다.인터페이스를 정의하고 물려줄 인터페이스를 extends 하면 조상의 인터페이스 요소들을 그대로 물려받는다.기존 부모의 틀에 새로운 요소들을 추가할 수 있다.또한 확장은 여러 인터페이스로부터 받을 수 있다.필요한

사진출처면접을 보러가서 늘 공통적으로 물어보면서도 내가 너무 대략적으로 짚고 넘어간 부분이 REST 에 관한 부분이였다.자원(resource)을 이름으로 구분지어서 주고 받고, HTTP 프로토콜을 이용한다. 정도로만 알고있고 디테일한 부분을 몰랐는데 막상 질문들어오니

항해 시작 전 나름 사전지식 공부한다고 사놓고 반정도 읽은 후 항해 시작 후 항해에서 진행하는 다른 책읽고 여러가지 과제하느라 밀려있던책이였는데 최종발표도 끝났고 해서 다시 꺼내들었다.책 자체는 양도 많지않고 내용도 그렇게 복잡하고 깊이 파고들지는 않는데 하지만 핵심적

let과 const 로 선언한 두 변수에 대해const 는 변경이 불가능하기 때문에 고유한 값으로 읽히고 let으로 선언한 객체는 string으로 읽힌다.두 인터페이스에 대해color은 공통값이라 에러가 뜨지않지만 bow를 실행시켰을때는 Human이 먼저 인식되어서 에

드래그 이벤트를 공부해보고 싶어져서 라이브러리 없이 순수하게 만든 코드를 뜯어다보았다.원본코드그림과 같이 Drag on 혹은 Or me! 를 드래그해서 Drop Zone에 가져다대면 글자 굵이와 색이 변한다.코드는 이런 모양모르는 개념이 너무 많이 나와서 정리하고 가

개발 방법론중에 하나로 질문을 받았었는데 대답을 하지 못했었다'테스트코드를 작성하면서 개발하는것' 정도만 알고있었는데 어떻게 테스트 코드를 작성하죠? 라는 한단계 나아간질문에머리가 멍해졌다'테스트코드란 말 그대로 테스트하면서 코드를 짜는게 테스트가 아니였었나??'테스트

코드를 실행할 때 필요한 환경정보들을 모아놓은 것컨텍스트가 활성화되는 시점에호이스팅 발생외부 환경 정보 구성this값 설정실행과 동시에 전역 컨텍스트가 수집되고 그 다음 순차적으로 함수가 호출되면 그 함수의 정보를 수집한 후 실행 컨텍스트를 생성하고 모든 작업이 끝났을

참고링크스코프체인이란 말 그대로 각각의 스코프가 어떻게 연결되어있는지 나타내는 것이다.코드가 실행 되기 전에 전역 실행 컨텍스트가 생성 되고 그 다음 함수 실행 컨텍스트가 실행된다.자바스크립트가 해당 코드를 실행하면 다음과 같은 방식으로 콜스택에 쌓인다 맨 마지막으로

참고링크공부를 하면서 많이 접해봤지만 정확히 뭔지는 몰랐고 최근에 클래스의 컨스트럭쳐를 가리키는 것이라고는 배웠으나실행 컨텍스트 공부중 this값을 설정한다는 문구를 보고 더 찾아보았다.꼭 클래스가 아니더라도 자바스크립트에서의 this는 '누가 호출했냐'를 뜻한다고 한

터미널에expo init Project의 형식으로 프로젝트 생성다른점은 일단 태그들을 import 해와서 사용한다는점view가 일종의 div인것같다.style을 적용시킬때 styleSheet로 적용을 한다는 점 정도강의 보면서 간단한 앱 한번 만들어보고 여건이 된다면

참고링크 react-native에서 가장 중요하면서 기본이 되는 navigation을 공부했다. 처음에는 단순히 router-dom이랑 비슷한줄 알았는데 생각보다 복잡했다. 뭐가 막히는지 계속 들여다 보고 시도해보면서 나름대로의 규칙을 파악하려고 최대한 노력했다.

버튼을 누르면 의존배열의 count값이 true가 되면서 타이머가 실행된다.리턴값으로 함수를 호출해서 마운트가 해제되었을때 타이머를 해제해준다.

stack-navigation이랑 같이 응용해서 만들어보았다.detail Screen에서 input에 분과 초를 입력해서 버튼을 누르면params값으로 Timer Screen로 넘어가고 입장과 동시에 받아온 params값으로 state를 갱신버튼을 눌러서 불린값이 tr

실행 컨텍스트에 관해 공부하면서 두 단어에 대해 간략히 짚고 넘어가서 정리해보려고한다. Variable Environment Variable Environment 은 세가지 프로퍼티로 이루어져있다 environment record outer environment

공식 사이트 예제express객체를 만든다.port번호 지정app.listen() 의 1번째 인자로는 포트번호를 지정한다.실행하면 2번째 인자의 콘솔이 찍히면서 실행된다. (2번째 인자의 기능적인 부분은 없다고함)그 뒤에 app.get( HTTP 메서드 ) ('/' (

참고링크위와 같이 작성하면 JSON 데이터 안의 KEY를 바로 지정해줄 수 있다.req.params = { name : 'cat' } 일때 req.params.name 으로 지정하는 것 보다 훨씬 간결하다.영상에는 이런 방식으로 동물 울음소리 api를 만들었다.일일이

공식문서참고링크파이어 베이스 로그인 후 프로젝트를 만든 후 웹을 누른다.기본 형식이 나오고 미리 복사해둔다.realtime data base 선택기본 형식을 잡고 app 객체를 만들어준다.

사용자가 페이지에 접속해서 HTML을 서버로부터 내려받으면 브라우저 엔진이 이를 파싱한다(파싱이라는 단어를 찾아보니 그냥 구문분석 이라고 나온다. 그냥 엔진이 읽는다 정도인듯)파싱을 하면서 DOM트리를 만든다. Link태그를 만나서 stylesheet를 내려받을경우 c

참고링크웹 페이지에서는 모든 요소를 Document 객체가 관리한다.(document.@@ 를 통해서 HTML 요소에 접근 할 수 있던것도 이것때문)Document 객체는 트리의 자료구조로 HTML문서를 관리한다.(이런 구조)트리를 구성하는 객체의 단위를 노드라고 한

그린스텝도 PWA로 제작이 되었고 처음 도입 과정은프로젝트를 구상하던 도중 웹보다는 모바일에 최적화 되어있는 서비스였고 당장 리액트 네이티브를 배울 시간은 없었고 선택한 방법이 PWA였다.대표적으로는 트위터가 이 방식을 사용하고 있다.분명히 웹이지만 핸드폰에 아이콘을

참고링크eclips기준으로 file - New - Other 항목에 들어가준다Spring Starter Project 선택 후 빌드 해준다.처음 깔기만 하면 아마 저 항목이 없고 이클립스 마켓 플레이스에서 sts4를 인스톨해야 저 항목이 생긴다.나는 참고링크 따라서 저

겪었던 시행착오 처음에 406에러와 cors에러가 동시에 발생

gitlab CE를 사용하기로 회사에서 결정이 나서 ncp를 설정해야했다. ACG 설정 해당 탭에서 ACG를 생성 후 설정에서 모든 접근을 허용해주었다. 서버 생성 및 설정 server탭에서 서버 생성을 누르면 다음과 같은 화면이 나온다. 옵션을 설정해주고

특정 위치를 클릭하면 점이 찍히고 위치정보를 저장해야 하는 기능을 만들어야 하는 일이 생겼다.더 정확히는 클릭하면 위 사진처럼 빨간점이 찍히고 빨간점이 네모로부터 얼마나 떨어져있는지에 대한 값을 구해야했다.위 처럼 클릭 이벤트의 절대좌표에서 네모 엘리먼트의 절대좌표를

ScrollView를 사용할때는 style대신에 contentContainerStyle 을 사용해야한다.기본값이 수직이고 수평으로 방향을 설정하고 싶을때 horizontal 옵션을 준다.강의 중 모르는 문법이 나와서 정리하는데 const { key : value } =

다음과 같이 useEffect로 접근 권한을 요청하는 함수가 발동되게끔 작성하면 권한 요청이 뜨고 다음과 같이 permission의 값이 선언된다. granted의 값이 true여야 권한이 부여된다.

현재 만드는 입력기 프로그램에서 랠리 정보를 전송 후스코어가 갱신이 안되는,정확히는 되다 안되다 하는 문제가 발생했다.아예 일괄적으로 안되면 코드문제인가 싶겠는데 분명히 비동기 처리도 제대로 했고 왜 되는경우가 있고 안되는 경우가 따로 발생하는지 고민하다가 네트워크 탭

날씨 정보 오픈 api를 사용해서 정보를 받아온다. 강의에서 사용한 api는 에러가 나서 무료 라이센스에서 제공되는 3시간단위 날씨를 가져오는 api를 사용했다. 잘 안보이긴 하지만 큰 Object 형식에 우리가 원하는 날씨에 대한 정보는 list라는 키에 담

상황은 새로운 Thunk를 만들어서 테스트 하는데뭔가 이상해서 해당 디스패치에 주석까지 쳤는데 계속 해당 Thunk의엑스트라리듀서가 발동을 하고 기존에 사용하던 다른 값도 이상해져서 찾아보니Thunk 코드를 긁어 쓰다가 name을 바꾸는것을 잊으면서 발생한 문제였다.아

공식 문서 기본적으로 NCP에서 서버를 생성하고 putty를 통해 접속 한 후의 배포 과정은

jdk 11버전 다운로드 (무조건 11버전이여야함) 만약 기존에 다운되어 있던 자바가 있을경우 선택까지 되어있는지 확인 젠킨스 다운로드 NCP에서 제공되는 application jenkins인스턴스가 있길래 그걸로 새로 파서 하기로함 만약 서버를 따로 두지 않거

item 설정 화면에서build when a change is pushed to Gitlab.Gitlab webhook체크한 뒤에사진처럼 체크(기본으로 체크 되어 있음밑에 고급 버튼 누른 후 맨 아래 Secret token 항목에서generate 누르면 토큰이 생성된다

성공 케이스 (키 인증 방식 아님)publish over ssh 공란하단 ssh severName : 임의의 이름Hostname : 서버 접속용 공인 IP (putty 로그인 ip)Username : rootremote directory : 작업 경로 (공란도 가능)고

비동기 작업을 처리할때 무조건 적으로 async await을 사용하고 있었다. 하지만 프로젝트 도중 특정 모달을 오픈할때 2초정도의 딜레이가 발생하였고 해당 부분을 개발할때는 로딩중에 로딩 스피너를 표출하면서 넘어갔었는데 당장에 바쁜 부분이 지나가고 리팩토링을 할 시간