본문 바로가기

전체 글120

[면접 복기] 24.08.13 면접 방식 : 비대면진행 : 면접 전에 30분 필기 테스트, 이후에 면접관 세 분과 면접 진행필기 테스트의 직접적인 내용은 쓰지 않겠습니다.프로그래머스 0레벨 정도 풀이 문제 1개제공한 코드를 보고 실행 결과를 적는 문제 1개제공한 코드를 보고 실행 결과와 실행 과정을 적는 문제 3개기술적인 질문? 4개필기 테스트는 30분이었는데총 9문제에서 사실상 실행 결과와 과정을 적는 문제 문항 내용이 누락되어 8문제라고 생각한다.그 중에 6문제를 풀었는데 문제 중 하나에 블록 레벨 스코프 관련해서 예제 코드를 적게 되었는데 마지막 문제와 겹치는 부분이 있어서 좀 정상참작을 안해주려나 생각을 한다.. (var, let, const 차이에 대해 설명하면서 함수 레벨 스코프와 블록 레벨 스코프에 대해서 언급을 하면서 .. 2024. 8. 14.
[BROWSER] CORS (Cross-Origin Resource Sharing) 먼저, CORS는 웹 애플리케이션이 다른 도메인에서 리소스를 요청할 수 있도록 허용하는 보안 기능이다.기본적으르, 브라우저는 보안상의 이유로 스크립트가 다른 출처(도메인, 프로토콜, 포트)에서 리소스를 요청하는 것을 제한한다. 이를 Smae-Origin-Policy라고 한다.하지만 CORS는 이를 우회하는 방법을 제공한다.1. URL의 구성https://codingbear-boza.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F#1234https는 프로토콜(protocol)codingbear-boza.tistory.com는 호스트(host)현재 포트(port)는 생략되어있으나 https의 경우 기본 포트는 443이다./manage.. 2024. 8. 2.
[AWS] amplify 일단 무작정 해보기 일단 뭐라도 할려면 펠리컨적 사고가 필요한거 같다.일단 맨땅에 헤딩부터.내가 이때까지 해오던 배포 방식은 98% vercel을 이용한 배포 방식이었다.서버? 그냥 백엔드에서 api만들어주면 서버에 올려서 내가 갔다 쓰는 줄만 알았지.그런데 뭐 EC2, amplify, lambda 이런 것들이 있었다.그중에 이번엔 기존에 vercel에서 배포했던 프로젝트들을 amplify에서 배포해보기로 했다.AWS Amplify란 무엇인가요?AWS Amplify는 안전하고 확장 가능한 모바일 및 웹 애플리케이션을 구축하기 위한 포괄적인 개발 플랫폼입니다. 백엔드 구성, 호스팅 및 배포를 포함하여 애플리케이션 개발의 여러 측면을 간소화합니다.주요 특징들1. 간소화된 배포 : 몇 번의 클릭만으로 정적 웹사이트와 단일 페이지.. 2024. 8. 1.
[JS] 웹팩이란? 웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.모듈 번들러란 웹 애플리케이션을 구성하는 자원 (HTML, CSS JS, Image 등)을 모두 각각의 모듈로 보고 이를 조합해서 하나의 결과물을 만드는 도구를 의미한다.모듈이란?모듈은 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다.const sum = (a, b) => { return a + b}const substract = (a, b) => { return a - b}export {sum, substract}이 코드의 경우 하나의 모듈에 sum과 substract 2개의 기능을 가지고 있다.왜 웹팩이 필요할까?모듈 시스템 지원 웹팩은 CMJ, AMD, ESM 등 다양한 모듈 시스템을 지원하여 모듈화된 개발을.. 2024. 7. 29.
[Browser] 브라우저에 url을 입력했을 때 브라우저 주소창에 url을 입력 했을 때 과정1. 브라우저 주소창에 url입력브라우저는 url을 해석하여 프로토콜, 도메인 이름, 경로, 쿼리 매개변수 등을 추출2. DNS 조회브라우저는 입력된 도메인 이름을 기반으로 DNS 서버에 질의하여 해당 도메인 이름에 대응하는 IP주소를 탐색3. TCP 연결IP주소가 확인되면 브라우저는 서버와 TCP연결을 설정, 신뢰성 있는 데이터 전송을 보장하기 위해서3-way 핸드셰이크 과정을 통해 브라우저와 서버 간 연결을 설정4. HTTP/HTTPS 요청TCP 연결이 설정되면, 브라우저는 웹 서버에 HTTP 또는 HTTPS 요청을 보냄.요청에는 사용자가 입력한 url 경로와 필요한 추가 헤더 정보들이 포함.5. 서버 응답서버는 요청을 받아들이고, 요청된 자원을 준비한 후.. 2024. 7. 24.
[JS] Babel 바벨이란,구형 브라우저나 환경에서 ES6 이상의 기능들을 사용하기 위해서 이전 버전의 자바스크립트 버전으로 변환해주는 는 도구.es6는 2015.06년도에 등장,브라우저들은 언제 적용?크롬 - 2016.05파이어폭스 - 2017.03마소 엣지 - 2016.08사파리 - 2016.09오페라 - 2016.06IE - X1년에서 2년 정도의 기간 소요되었는데 이 기간 동안 사용을 못 했을까?babel을 이용해서 브라우저들의 환경에 맞게 es6를 es5 로 다운그레이드하여 사용.babel 사용법,const fn = () => "바벨";​위 화살표 함수를 트랜스파일링을 하려면 3가지 필요.@babel/core : 바벨의 핵심적인 기능@babel/cli : 터미널로 바벨을 사용@babel/plugin-transfo.. 2024. 7. 24.
[JS] Promise Promise는 callback, async/await와 마찬가지로 비동기 작업을 처리하는 자바스크립트 객체이다.es6에서 callback 지옥을 해결하기 위해 도입되었다.Proimise는 비동기 작업을 실행할  fulfilled (이행), pending (대기), rejected (거부) 이 3가지의 상태를 가진다.then, catch, finally 메서드를 이용해 체이닝 형태로 작업이 처리가 가능하며, Promise가 fulfilled상태에서 resolve가 호출되면 then 블록이 실행된다.반대로 Promise가 rejected가 되면 catch 블록이 실행된다.마지막으로 finally는 반드시 실행되는 블록이다.Promise의 메서드로는 all, race, allSettled, reject, a.. 2024. 7. 22.
[JS] 클로져 (Closure) 클로져란, 함수와 그 함수가 선언된 렉시컬 환경의 조합이다.클로져의 특징으로는 정보 은닉, 상태 유지, 데이터 무결성 유지 등이 있고,외부 함수가 내부 함수에 접근 하지 못 하는데 이를 통해 정보 은닉, 데이터 무결성 유지가 가능하다.내부 함수는 외부 함수에 접근할 수 있고, 외부 함수가 동작이 끝나도 내부 함수는 외부 함수에 접근이 가능하다.이를 통해 상태 유지가 가능하다.내가 알고 있던 클로져의 내용클로져란, 함수와 그 함수가 선언된 렉시컬 환경의 조합이다.클로져의 특성으로는 정보 은닉, 상태유지, 데이터 무결성 유지 등이 있다.외부 함수가 내부 함수에 접근 하지 못 하기 때문에 정보 은닉이 가능하고,내부 함수는 외부 함수에 접근할 수 있고, 외부 함수가 동작이 끝나도 내부 함수는 외부 함수의 변수에.. 2024. 7. 17.