코딩응애의 개발블로그

이거 구현할려고 하는데 처음에는 이걸 뭐라고 부르는지 몰라서 한참을 찾다가 select 태그를 찾게되고 구현을 시작을 하게 됨 내가 최종적으로 구현을 할려는건 지역에 따른 군/구를 선택할수 있도록 구현하는게 목표였다 예를들어 네이버 카페처럼 게시판에 따라서 말머리가 달라지는 그러니까 이렇게 구현을 할려고 하는데 처음엔 이런식으로 하니까 서울특별시 부산광역시 인천광역시 대구광역시 대전광역시 광주광역시 울산광역시 강남구 강동구 강북구 남구 관악구 광진구 구로구 금천구 노원구 도봉구 앞에 select box가 서울이든 경기도든 간에 2번째 select box가 지역에 맞게 안바뀌고 들어가 있어서 지역에 따라서 다르게 나오게 어떻게 구현을 해야할까 엄청 오래 걸렸다 그러다가 https://imivory.tist..

CORS 브라우저의 현재 주소와 API 의 주소의 도메인이 일치해야만 데이터를 접근 할 수 있게 되어 있다. 만약 다른 도메인에서 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요하다. 근데 주소가 다르다면 CORS에러가 나는데 이러한 CORS정책을 우회할수 있음 proxy 기능을 사용해서 (원래 CORS 에러를 해결하는 정석적인 방법은 프론트엔드 개발자가 백엔드 개발자에게 프론트엔드 개발 서버 도메인을 허용해달라고 요청을 해야하고, 백엔드 개발자는 응답 헤더에 필요한 값들을 담아서 전달을 해줘야 함.) proxy webpack dev server proxy webpack dev server에서 제공하는 proxy 기능을 사용하는 방법 전역적인 설정이기 때문에, 종종 해당 방법이 충분히 ..

CI/CD CI/CD란 간단하게 말해서 어플리케이션 개발 단계부터 배포때까지 모든 단계들을 자동화하여 좀더 효율적이고 빠르게 사용자에게 빈번이 배포할 수 있도록 만드는것 CI(Continuous Integration) 개발자를 위한 자동화 프로세스인 지속적인 통합을 의미 Code - Build - Test 단계에서 사용. Code : 개발자가 코드를 원격 코드 저장소 (Ex. github repository)에 push하는 단계. Build : 원격 코드 저장소로부터 코드를 가져와 유닛 테스트 후 빌드하는 단계. Test : 코드 빌드의 결과물이 다른 컴포넌트와 잘 통합되는 지 확인하는 과정. 지속적 통합으로 보안 이슈, 에러 등을 쉽게 파악할 수 있어 해당 이슈를 빠르게 개선할 수 있음 지속적 통합이 ..

Performance의 Opportunities 항목에 Properly size images 라는 것이 있는데 이미지 사이즈를 최적화하라는 의미이다 가져오는 이미지의 용량이 현재 보여지는 화면의 용량보다 크기 때문에 과도하게 많은 용량을 가져온다는 의미로 이미지의 사이즈를 줄이라는 뜻 해결 방법 화면에 표시되는 사이즈와 실제 이미지의 용량을 일치시켜야 하는데 용량을 어떻게 줄이냐면 image cdn을 사용해야 한다 image cdn 서버로 부터 이미지를 불러오면 image를 크게하거나, 줄이거나, 직사각형을 둥글게 만들어주는 회사에 이미지를 의뢰해서 원하는 형태로 이미지를 바꾸는 방법 출처 : https://kyounghwan01.github.io/React/optimize-performance/prop..

번들링 원래 의미는 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미함 예를 들어 시리얼을 사면 게임CD를 같이주는거와 같은것 근데 개발자에게 번들링이란 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음이다. 번들링 작업에서는 필연적으로 용량을 줄이고 파일을 통일하는 툴링 작업이 필요하게 된다. 즉, 소프트웨어를 잘 만들어도 사용자에게 배포하기 위해 번들링이 꼭 필요하다. webpack 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러이다. 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미함. 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이고 Webpack에서..

이것도 재귀문제 일단 코드부터 보자면 const fs = require('fs'); const filePath = process.platform === 'linux' ? '/dev/stdin' : './input.txt'; let input = fs.readFileSync(__dirname + '/input.txt').toString().split('\n') const testcase = []; for (let i = 1; i +value)); } const cnt = [0, 0, 0]; // 각각 -1,0,1 종이의 개수가 들어갈 배열 solution(0, 0, +input[0]); function solution(r, c, N) { const first = testcase[r][c]; // 다른 수들..

재귀 문제 일단 코드부터 const fs = require('fs'); const filePath = process.platform === 'linux' ? '/dev/stdin' : './input.txt'; let input = fs.readFileSync(__dirname + '/input.txt').toString().split('\n') input = input[0].split(' ').map(value => +value) let quard; // 사분면을 나타내는 변수 let result = 0; // 결과값을 나타낼 변수 function solution(N, r, c, result) { let half = 2 ** (N - 1); if (N === 0) { return result; } if..

웹과 인터넷은 다른 개념 인터넷이 더 포괄적인 개념이다. 웹이란 공간이다. 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간 웹표준 웹에서 표준적으로 사용되는 기술이나 규칙 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고있다. 웹표준에 맞춰 웹 페이지를 작성했을때 장점들이 있다. 유지 보수의 용이성 - 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과 웹 호환성 확보 - 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나온다. 검색 효율성 증대 - 검색 엔진에서 더 높은 우선 순위로 노출됨 검색 효율성과 관..