[React] Proxy

개발을 하다가 서버에서 api를 받아와야 할 때가 있다. 이 때 브라우저의 주소와 api의 주소가 일치하지 않으면 데이터를 받아올 수가 없다. 이는 CORS를 설정해 해결해야 하는데 이런 문제가 발생하는 이유는 보안 때문이다. 소중한 라이브 데이터의 유출을 막기 위해 CORS로 허가되지 않은 도메인에서는 데이터를 받을 수가 없도록 되어있다. 이런 문제를 임시로 해결할 수 있는 방법이 proxy를 이용하는 것인데, 중요한 것은 proxy는 주소를 우회하여 데이터를 받아오는 방식이라 개발할 때에만 사용할 수 있고 배포 환경에서는 보안상의 이유 등으로 사용할 수 없다. 배포 시에는 결국 서버쪽 사람들과의 소통을 통해 해결해야 하는 것. proxy의 흐름은 이렇다. 브라우저에서 앱을 통해 데이터를 요청하고, 앱..

• format_list_bulleted SW공부/React
• · 2023. 6. 7.
• textsms

[CI/CD] CI/CD와 자동화

CI/CD : 지속적인 통합과 지속적인 배포(또는 지속적인 서비스 제공). Continuous Integration, Continuous Deployment(Continuous Delivery). 코드의 병합부터 빌드까지의 단계를 자동화하여 더 자주, 빠르게 어플리케이션 서비스를 제공하는 것. CI/CD 파이프라인은 이러한 배포 과정을 자동화 시키는 것 CI/CD 파이프라인 구성 요소 빌드 (소프트웨어 컴파일) 테스트 (호환성 및 오류 검사) 릴리스 (버전 제어 저장소의 애플리케이션 업데이트) 배포 (개발에서 프로덕션 환경으로의 변환) 규정 준수 및 유효성 검사 상기 사항들이 실무에서는 계속 반복해야 하는 작업이기에 자동화하여 빠르게, 휴먼에러 없이 진행할 수 있도록 파이프라인으로 만든다. Github ..

• format_list_bulleted SW공부/그 외
• · 2023. 6. 5.
• textsms

[TypeScript] TypeScript란? (2/2)

Enum '열거형'이라는 것인데 이걸로 숫자나 문자의 집합체를 만들 수 있다. enum을 사용하면 값을 읽기 쉽고 오타를 미연에 방지할 수 있다. 하지만 enum은 컴파일러가 ts를 js로 변환할 때 객체를 생성하는데, enum을 많이 사용하지 말아야 할 이유가 이 블로그에 잘 정리되어있다. -숫자형 enum enum Animal { Cat = 1, Dog = 2, Rabbit = 5, } auto-incrementing 으로 자동으로 0에서부터 1씩 증가하며 적용된다. 위처럼 직접 지정할 수도 있다. -문자형 enum enum Animal { Cat = 'cat', Dog = 'dog', Rabbit = 'rabbit', } http 요청 방식과 같은 외부에서 가져온 값을 다루기 위해 많이 사용한다. ..

• format_list_bulleted SW공부/TypeScript
• · 2023. 5. 31.
• textsms

[TypeScript] TypeScript란? (1/2)

타입스크립트란? 공식 문서에 따르면 javascript에 typescript 구문을 추가함으로서 에디터의 성능을 향상시켜주는 도구 정도 되겠다. 다른 언어를 손 대 본 사람이라면 금방 알겠지만 javascript의 가장 큰 단점이 타입에 대해 엄격하지 않다는 것이다. javascript를 배우기 전에 c언어에 발가락만 살짝 담궈봤던 나도 느낄 정도로 javascript는 타입에 관대하다. 예를 들면 javascript는 string 더하기 number 같은것도 해준다('abc' + 10 => 'abc10'). 그리고 값이 string이었던 변수에 number를 재할당 할 수도 있다. 기억이 많이 사라졌지만 c언어에서는 사용할 값의 자료형에 맞게 변수를 선언해줬어야 했다 (int num =1, char s..

• format_list_bulleted SW공부/TypeScript
• · 2023. 5. 30.
• textsms

[Error Note] Expected an assignment or function call and instead saw an expression

Expected an assignment or function call and instead saw an expression onClick 함수 안의 삼항연산자가 true 일 때 두 가지 기능을 수행하게 하려 했더니 오류가 생겼다. 삼항연산자 안에서 두 가지 이상의 기능을 하게 하려면, 괄호로 묶고 쉼표로 연결해주면 된다. 똑바로 했는데 오류가 생겨 이것저것 시도하다 아래처럼 return()으로 감싸주니 해결되었다. 함수에서 (), {} 등의 사용이 어렵지만 잘 안 되면 한 번쯤 고려할 필요가 있다.

• format_list_bulleted SW공부/Error Note
• · 2023. 5. 29.
• textsms

[Error Note] 리액트에서 이미지가 보이지 않는 문제

에러 문구는 뜨지 않지만 이미지가 보이지 않는다. img 태그의 src에 바로 이미지 주소를 넣어준 것이 문제였다. 리액트에선 컴포넌트 안에 바로 이미지 링크 적으면 안 된다. 이미지는 상단에 import해서 사용하기. 아래와 같이 해결.

• format_list_bulleted SW공부/Error Note
• · 2023. 5. 29.
• textsms