TS - Type, Interface, Generic, React에서 TS 정리 Type Test해보는 사이트 각 Component 폴더에서 types.ts 를 분리해 import로 사용함. 1. 함수 function formatDate(d : Date) : string{ ... return ... } 매개변수에 대한 타입(Date) : 으로 지정 Return Type(string) : 으로 지정 const formatDate = (d : Date | number, delimiter?: string) => { ... } ? 는 Optional | 는 Date or number 2. 타입 let value : any; //타입을 지정합니다. value = 'abc'; value = 123; ... enum..

이전글에서는 자바스크립트 엔진이 js를 어떻게 읽고 해석하는지에 다뤘습니다. 해당 글은구성요소와 이벤트루프가 어떻게 돌아가는지에 대한 글입니다. ? 자바스크립트 엔진이 또 다른 일을 해 ? V8은 single thread으로 되어있는 실행 엔진이고 상당히 많은 일을 한다. js코드를 해석, 실행도 하며 callStack을 다루며 memory 할당도 관리하고 GC도 하며 .. 등등을 담당한다. 뭐 엄청나게 많은 일을 하지만 여기선 이벤트루프 관련 글이기에 해당 부분만 다룬다. 자바스크립트 엔진의 구성요소 메모리들을 저장하는 영역인 Heap, 함수의 호출시점을 기억하는 Call Stack으로 이루어져있다. Memory Heap 함수나 변수들을 저장하는 공간. C의 경우 개발자가 할당한 메모리에 대해선 해제를..

이전 글에서 다루지 않았던 자바스크립트 엔진에 대한 글입니다. HTML이 parsing될 때 script태그를 만나면 parsing이 일시중지되고 script를 해석, 실행한다. 이 해석, 실행되는 것이 어떻게 이루어지는가에 대한 정리를 시작해보자. 앞서, 컴파일러, 인터프리터, JIT 컴파일러에 대해 간단히 알아보자. 알아야 아래 내용 이해하기 편하다. 컴파일러 ? 프로그래밍언어로 작성된 것을 실행파일로 만들기 위한 목적파일로 만드는 언어 번역 프로그램을 컴파일러라고 한다. CPU는 0,1만을 읽는 단순한 계산기다. 영어로 이루어진 코드를 컴퓨터는 절대 알 수 없다. 0, 1로 번역시켜주어야한다. Source code가 실행파일로 만들어지는 과정_출처 C로 예를 들었을 때 영어로 작성된 a.c 라는 s..

브라우저의 동작을 정리한 원문 , d2 포스팅를 참고한 포스팅입니다. Rendering Engine이 UI를 그려내기까지의 과정을 다루고 있으며, 이전_랜더링과정을 정리해놓은 글 에서 추가적인 사항을 보완해서 작성했습니다. 브라우저 구성요소 브라우저는 크게 다음 요소들로 구성되어있다. 이 중 아래서 계속 다룰 내용은 Rendering Engine에 대한 내용이다. 사진출처 user Interface : 뒤로가기, 북마크등을 나타냄 rendering engine: 서버로부터 응답받은 콘텐츠가 HTML일 때 HTML, CSS를 parsing, 해당 콘텐츠를 화면에 그려냄 - 브라우저마다 다른 엔진을 사용 (크롬 : blink, 파이어폭스: gecko) Browser engine : User interface..

관련 면접질문 Callback 패턴, 문제점 Promise, callback의 차이점 ? 각각 장단점 ? promise란? Promise.all은 언제 쓰임? async/await와 promise의 차이는 ? 동기 위에서 아래로 순서대로 실행되는 흐름 각 라인마다 실행되고 완료될 때까지 blocking 비동기 실행 중인 코드가 완료되지 않아도 다음 코드를 실행함 비동기처리가 필요한 이유 - 싱글스레드는 여러 task를 동시에 할 수 없으므로, 비동기적으로 task를 처리해 오래걸리는 작업을 기다리지 않고 다음 작업을 수행함. non-blocking 실행 순서가 보장되지 않는다. 비동기를 처리하기 위해 callback 패턴을 사용한다. 콜백함수 매개변수로 함수를 받거나 인자로 전달되는 함수 매개변수로 함수..

과제설명 이번 과제는 자란다의 기업과제이다. 구현해야 할 사항은 크게 다음과 같았다. 회원가입 / 로그인 - 유효성체크 관리자계정에서 사용자 검색, 권한 수정, 페이지네이션 권한에 따른 페이지 접근 분기 2번 기능을 본인 포함 3명의 팀원과 페어프로그래밍으로 진행했다. 사용자데이터를 필터링하고, 검색하는 기능이 서로 연결되는 부분이 많다고 생각되었고, 해당 부분에 대해 설계 후 기능분담하는쪽 || 같이 구현해보지 못했던 것들을 함께 하는 방법 중 후자의 방법으로 진행했다. 1. 필터링, 검색기능 :: 담당부분 기능시연 영상 권한필터와, 검색기능 코드 //Admin.js const [searchConditions, setSearchConditions] = useState({ searchType: "name..

일과 공부는 다르다. 지식을 쌓으려면 공부를 해야한다. 강의 및 서적 추천 ! 리액트의 아버지ㅋㅋ-udemy 벨로퍼티님 강의 책 - 실전 리액트 프로그래밍 추천스 클래스, hooks에 대한 명확한 이해가 필요 그 회사의 CSS의 클래스명 어떻게 썼는지 분석도 필요. 눈에 익숙하다. Case ROUTE도 상수다. 이런 식으로 빼는 것 좋다! 파일 컴포넌트이름 - 카멜케이스 + 대문자 시작 js로만 해도 누구나 jsx로 된다는건 알 수 있음. 굳이 안써도됨 Page 하위의 이름은 굳이 뒤에 Page 안 붙임- 왜 ? 이미 Page라는건 알 수 있으니 개발자도구의 어느 파일에서 에러가 있다고 확인할 때 파일명만 나옴 - 마우스 hover하면 경로까지 보이긴 하지만, 디버깅 편하게 하려고 붙이는 경우도 있긴 함..

지난 달 26일부터 프리온보딩 과정에 참여하게 되었다. 이전부터 프론트엔드를 하겠다고 생각하고, 공부를 시작했다. 그러나 독학하는게 생각보다 쉽지않았다. 혼자하는게 일정에서는 자유로울수 있지만 그만큼 늘어지기 십상이었다. 또한 문제가 발생했을 때 이를 해결하는 방법이 맞는 방법인지 더 좋은 방법이 있는지 남들과 공유할 수 없었다. 그래서 이런 needs를 충족시키고자 개발동아리에 지원했었지만, 면접을 진행하는 내내, 이 동아리는 현직자들을 더 요하는 것 같다고 느꼈다. 붙었냐고 ? 뭐 어떻게 됐겠는가,, ㅋㅋ; 뭐, 이런 여러 방황아닌 방황. 풀기 힘든 실처럼 꼬여버린 생각들을 갖고 있던 중 해당 프로그램의 설명회를 듣게 되었다. 무엇보다 사람들과 함께하는 것이 매력적이었다. 사실 그거 하나보고 지원했다..

공유해주신 개발자 커뮤니티 질문에 대해 답변도 남기거나 토론도 할 수 있음 ! React Korea 프론트엔드개발그룹 자바스크립트 개발자 포럼 Node.js Korea React Native Seoul 리액트 네이티브[React Native] 한국 사용자 그룹 React Native Community TypeScript Korea AWSKRUG- AWS한국사용자모임 GDG Seoul Facebook Developer Circle: Seoul OSS 개발자 포럼 Chapter : 1 팀 과제 정리 1. Structure : 폴더구조를 정형화하지말자 다른 분들의 구조를 많이 보고 8주간 최대한 여러개를 사용해보며 맞는 것을 적용하자 팀플할 때 내 것만을 고집하지말자. 이렇게 했을 때 어떤 것이 좋고 어떤 점..