개발 공부/웹 개발 7

왜 Call by reference가 필요할까?

면접에서 call by value와 call by reference의 차이를 물어보시는 질문에는 잘 답했지만, 이어지는 후속 질문인 '왜 call by reference를 쓰는 지 아나요?' 란 질문에는 답변을 못했다. 메모리 주소만 복사되기 때문에 변수를 복사해 수정하면 원본 값에도 손상이 가는 call by reference는 과연 왜 쓴는 걸까? 어떤 상황에서 쓰게 되는 걸까? 를 조사해봤다. 1. 함수 내부에서 변수가 가리키는 메모리 그 자체를 변화시킨 것이 반영된다. (참고로 JS에서 함수에 값을 넣으면, 그 변수에 담긴 메모리에 대한 참조값이 원시값처럼 복사되므로, 함수 안에서 메모리의 값 자체를 변경한건 적용되나, 함수에 아예 다른 메모리 주소를 할당하면 함수 외부의 원래 변수와는 연결이 아..

[TIL] 함수형 프로그래밍과 람다에 대해

러닝 리액트 56 ~ 64p 함수형 프로그래밍의 역사는 람다 계산법으로 거슬러 올라가야 한다. 람다 계산법을 이후 존 맥카시가 리스프란 이름의 프로그래밍 기법으로 바꾼 것이 오늘날의 함수형 프로그래밍이다. 함수형 프로그래밍은 선언형 프로그래밍의 일종이다. 선언형 프로그래밍 vs 명령형 프로그래밍 선언형은 what 에 집중, 명령형은 how 에 집중. 선언형 프로그래밍은 함수명을 통해 다음에 처리할 일을 추론하기 쉬워 주석을 많이 안달아도 된다. 또 각 함수의 구현 방식은 추상화로 감출 수 있다. 함수형 프로그래밍의 핵심 개념은 5가지이다. 불변성, 순수성, 데이터변환, 고차함수, 재귀 (++ 이 부분부터는 직접 코드를 따라치며 익혀보기) 컬리 기술블로그 람다 (http://thefarmersfront.g..

[가장 쉬운 웹개발 with Boaz] 브라우저 렌더링 최적화

https://youtu.be/G4eQziVzCTE FPS란 : Frame per Seconds. 기기에 1초당 몇 프레임이 그려지는지를 표현. 대부분의 기기들은 스크린을 1초에 60번을 screen을 refresh한다. 만약 화면 전환 시에 애니메이션이 있다거나, 유저가 스크롤링으로 페이지를 내린다던가 할 때 브라우저는 이 디바이스의 refresh rate에 맞추어서 1개의 새로운 그림이나 프레임을 띄워줘야 한다(스크린이 refresh 될 때 마다!) 60fps는 1초에 60장의 프레임이 그려진다는 의미이다. 그래서 16.6ms만에 1프레임이 그려져야, 즉 브라우저 렌더링이 16.6ms 만에 무사히 수행되어야 애니메이션이 끊김 없이 보일 수 있다.(실제로 브라우저는 다른 하는 일이 많기 때문에 화면에 ..

브라우저에 URL을 입력하면 어떤 일이 일어날까?

https://youtu.be/T2WqQcqssoE [가장 쉬운 웹개발 with Boaz] https://youtu.be/T2WqQcqssoE 브라우저에 URL을 입력하면 일어나는 일 - 기본 CS 지식 브라우저에 URL을 입력하면 크게 2가지 일이 일어난다. 1) 브라우저에서 파일을 가져오고, 가져온 파일을 브라우저에서 렌더링 한다. 우선 1) 브라우저에서 파일을 가져오는 과정부터 OS와 메모리와 연결지어 확인해보자. 하드웨어 종류 1. CPU: GPU에 비해 좀 더 커다랗고 복잡한 일을 처리하는 유닛(크기가 크고, 개수가 적다) - Core: 각종 연산을 수행하는 핵심 요소, 스레드 단위로 Core 단위에 맵핑 2. Memory(ROM, RAM): 기억 장치. 3. 연산장치 4. Control Uni..

브라우저 동작 원리 - 브라우저는 어떤 순서로 동작하는가?

https://www.youtube.com/watch?v=oLC_QYPmtS0 출처: [가장 쉬운 웹개발 with Boaz] Browser Elements 7가지와 그 역할 1. 사용자 인터페이스 : 주소표시줄, 홈버튼, 새로고침 버튼 등 브라우저 상에서 페이지 외에 사용자가 컨트롤할 수 있는 부분 2. 브라우저 엔진 : 1) 사용자 인터페이스의 요청(주소창에 URI 입력, 새로고침 버튼 누르기 등)을 렌더링 엔진에 전달 2) 사용자 인터페이스에서 입력받은 URI 요청에 대한 자료를 자료 저장소에 접근해 찾아봄(캐싱 기법) 3. 렌더링 엔진 : 브라우저 엔진이 요청한 URI를 받아서 서버에 요청한 후, 응답받은 데이터를 받아 통신 레이어, 자바스크립트 해석기, UI 백엔드에 파싱 후 전달한다.(보다 자세..

[Git] GitHub Action 공부

엘리의 드림코딩으로 공부하는 GitHub Action(https://youtu.be/iLqGzEkusIw) 깃허브 액션 5가지 키워드 1) Event: main 브랜치로 머지하거나, 커밋 푸쉬하거나, 이슈 누군가 여는 등 이벤트 실행 시 2) Workflow: 특정 이벤트 발생 시 이 워크 플로우의 Job들이 실행. 3) Jobs Workflow 안의 여러가지 Job들 병렬 처리됨(필요하면 순차처리 하도록 지정 가능) Job 안에는 step1>step2>.. 이렇게 순차적으로 처리되도록 명령어(step) 저장. 4) Actions 재사용할 수 있는 명령문 가장 먼저 action check out 을 step에 집어넣은 후, 이후 step에서 활용 가능. 5) Runner Job을 실행하는 것 / VM 머..

[Git] Git Dependabot Alerts 문제 해결

SSAFY에서 진행했던 프로젝트들을 드디어 gitlab에서 github으로 옮겼는데 뭔가 이상한게 떴다..! 알고보니 package-lock.json에 저장된 애들 중에 업데이트가 안돼 보안 취약 위험이 있는 애들이 있었던 것. 그래서 다음과 같이 고쳐줬다. npm audit npm audit fix (강제로 다 고치겠다면) npm audit fix --force 블로그 글 참고: https://velog.io/@hssarah/Github-Dependabot-alerts-%ED%95%B4%EA%B2%B0 Github Dependabot alerts 해결 간단하게 해결할 수 있다. package-lock.json에서 보안이 취약하다고 뜨는 걸 upgrade 해주면 된다.해결 방법은 다음과 같다.1\. vs..