웹 프론트엔드 공부를 계속하면서 다양한 라이브러리를 써보며 익숙해지는 연습을 계속하고 있다. 그런 와중에 정작 웹 개발의 기초가 되는 자바스크립트에 대한 공부를 소홀히 한 것 같아서 아쉬움을 계속 느끼고 있었다. 문법을 익히기에는 알고리즘 문제를 푸는 것이 가장 좋은 방법인 것 같아서 자바스크립트로 알고리즘 문제들을 풀기로 했다. 지금까지는 알고리즘 문제를 백준에서 풀었지만 백준에서 자바스크립트를 쓸려면 조금 복잡해서 이번엔 자바스크립트를 잘 지원해주는 프로그래머스에서 문제를 풀기로 했다. 프로그래머스는 코딩 테스트 문제를 입문 문제, 기초 문제, 모든 문제로 카테고리화 했는데, 일단은 입문 문제를 풀다가 넘어가도 되겠다싶으면 기초 문제로 넘어갈 것이다. 그리고 하루에 4문제씩 일일 도전 과제 문제들을 ..
https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad Coders React Firebase for Beginners nomadcoders.co 파이어베이스의 사용법을 익히고자 노마드코더의 ‘트위터 클론코딩’ 강의를 수강했다.(위 링크로 접속할 수 있다.) Firebase란 Firebase는 구글이 소유하고 있는 모바일 애플리케이션 개발 플랫폼으로, 직접 구현하기에는 복잡하고 어려운 기능들을 사용하기 쉽게 제공해준다. Authentication API를 통하여 계정 기능을 쉽게 만들 수 있다.(구글, 깃허브 로그인) Cloud FireStore로 데이터베이스를 사용할 수 있다. Hosting으로 웹 사이트를 배포할 수 있다. Cloud Storage로 사용자가..
이번에 프로젝트를 진행하면서 useState()를 활용한 상태관리를 하고 있는데, 상태관리에 대한 확실한 이해 없이 무작정 작업을 하다보니 코드가 내가 이해하기도 어려울 정도로 복잡해져 있었다. 그래서 상태관리에 대한 공부를 하고 다시 코드를 수정했다. 이번에 알게 된 내용을 한 번 정리해 보려 한다. 1. 상태 관리는 부모에서 이루어지고, 자식에게 props로 전달한다. 부모 컴포넌트 A와 자식 컴포넌트 B,C가 있다고 가정하자. 그렇다면 상태를 관리하는 로직은 부모 컴포넌트 A에 작성하고 이를 자식한테 props로 전달하면 된다. 만약 자식 컴포넌트에서 버튼을 클릭하면 상태가 업데이트되는 것을 부모한테 전달하고 싶다고 가정하자. (여기서 부모는 SearchResult.tsx이고, 자식은 BtmShee..
겨울, 본가 2023년 1월 1일에 나는 아마 본가에 있었을 것이다. 막 전역하고 친구들을 만나고 다니던 때였다. 코로나로 가지 못했던 대학을 다시 갈 수 있을 거라는 희망에 가득 차 있었다. 신나기만 한 것은 아니었고, 전공에 대해 아는 바가 거의 없었기에 유튜브로 알고리즘 강의를 들으며 백준 문제를 풀었다. 나름 도움이 되었던 것 같다. 그렇게 시간을 보내다 서울로 올라가서 집을 구했다. 집을 꾸미고 적응하는 과정은 나름 재밌었다. 웃기도 하고 당황하기도 하며 적응하다보니 학교에 가게 되었다. 2학년 2학기가 되어서야 도착할 수 있었던 캠퍼스는 바쁘고 활기찼다. 그 분위기가 처음에는 참 어색했다. 봄, 1학기 처음 듣는 대면 수업은 큰 강의실에서 진행되었다. 아는 사람 한 명 없이 편안하게 OT만 듣..
이제 곧 프로젝트를 시작하는데 Typescript를 활용한다고 한다. 그래서 노마드코더님의 타입스크립트 무료 강의를 듣고 개념을 정리해보았다. 강의 링크 https://nomadcoders.co/typescript-for-beginners 타입스크립트로 블록체인 만들기 – 노마드 코더 Nomad Coders Typescript for Beginners nomadcoders.co (타입스크립트를 입문하는 분들에게 추천한다!) Typescript 특징 TypeScript는 JavaScript에 추가적인 구문을 통해 단단한 통합을 제공하며 초기 오류를 감지할 수 있다. TypeScript 코드는 JavaScript로 변환되어 브라우저, Node.js, 앱 등에서 실행될 수 있다. JavaScript를 이해하며..
12월 19일 오전 10시부터 다음날 오전 10시까지 동아리에서 주최한 해커톤에 참여했다. 1. 해커톤이 뭐야? 사실 해커톤에 참여하기 전까지 ‘해커톤’이 무슨 뜻인지 잘 몰랐다. 친한 친구가 해커톤을 하고 와서 피곤하다는 말을 들었을 때도 ‘엥 그게 뭐지’하고 넘겼었던 기억이 있다. 해커톤(hackathon)이란 해킹(hacking)과 마라톤(marathon)의 합성어로 기획자, 개발자, 디자이너 등의 직군이 팀을 이루어 제한 시간 내 주제에 맞는 서비스를 개발하는 공모전이다.(출처: 나무위키) 이번에 열린 해커톤은 24시간 동안 웹, 안드로이드, 서버 부원들이 한 팀이 되어 앱을 구현하는 방식이었다. 24시간 동안 진행된다는 사실은 알고 있었지만, '진짜 24시간 동안 잠도 안자고 코딩만 한다고?'라..
ESLint와 같은 Linter 는 소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주는 소프트웨어 도구 Prettier와 같은 Formatter는 소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구 ESLint 설치 ‘npm install -D eslint 명령어 입력 -D를 입력하는 이유는 devDependencies에 설치하기 위함 → 실제 프로덕션에는 필요없기 때문 ‘npx eslint —init’ 명령어 입력 각 프로젝트마다 eslint 설정 ctrl+shift+p 입력해서 settings.json(User settings)에 들어가서 밑의 코드 입력 "editor.fontFamily": "D2Coding ligature", "editor.line..
Critical Sections(임계 구역) 상호 배타적으로 실행되어야 하는 코드 세그먼트 공유 장치(Shared devices)는 한 번에 한 프로세스에서 액세스해야 하므로 배타적 자원(exclusive resources)이라고 불림. 코드의 중요한 부분들 Entry Section(진입 구역) 공유 변수 또는 다른 자원을 수정할 권한을 요청하는 코드를 포함한다. Critical Section(임계 구역) 공유 자원에 액세스하거나 재진입할 수 없는 코드를 실행하는 코드를 포함한다. Exit Section(나가는 구역) Entry Section이 다음 실행 쓰레드가 임계 구역에 들어갈 수 있음을 알 수 있어야 해서 필요 Remainder Section(나머지 구역) 액세스를 해제한 후, 스레드는 실행할 다..
Busy waiting while( x != y ); Non-busy waiting 해결책 Mutex를 잠그기 조건 x == y를 테스트 참이면 mutex를 잠금 해제하고 루프를 종료 거짓이면 스레드를 일시 중단하고 mutex를 잠금 해제 Mutex는 데이터에 대한 스레드 액세스를 제어하여 동기화를 구현하지만 조건 변수는 실제 데이터 값에 기반하여 스레드를 동기화할 수 있게 함. 만약 조건 변수가 없다면, 프로그래머는 계속해서 조건이 충족되었는지 확인하기 위해 스레드를 폴링(가능하면 임계 구역에서) 이는 스레드가 이 활동에 계속해서 바쁘게 차지되어 매우 자원 소모적일 수 있음. 조건 변수는 폴링 없이 동일한 목표를 달성하기 위한 방법 조건 변수는 항상 Mutex 락과 함께 사용 조건 변수 : 임의의 조건..
Mutex는 스레드 동기화를 구현하고 여러 쓰기가 발생할 때 공유 데이터를 보호하는 주요 수단 공유 데이터 리소스에 대한 액세스를 보호하는 잠금 역할 한 번에 하나의 스레드만 mutex 변수를 잠그거나 소유할 수 있다. 따라서 여러 스레드가 mutex를 잠그려고 해도 하나의 스레드만 성공 소유한 스레드가 해당 mutex를 잠금 해제할 때까지 다른 스레드는 해당 mutex 소유 불가능 스레드는 보호된 데이터에 번갈아가며 액세스해야 Mutex는 race condition을 방지하는 데 사용 Mutex 소유 → 전역 변수 업데이트 업데이트되는 변수 → critical section에 속함 Mutex를 사용하는 것은 프로그래머의 책임! Mutex 실행 순서 Mutex 변수 생성 후 초기화 여러 스레드가 mute..
