본문 바로가기

전체 글

(347)
[취업] JS 기본 지식 팀프로젝트를 진행하는 중 멘토님께서 언급해 주신 JS를 공부하면 이 정도는 알아야 한다고 했습니다. 그렇기에 글을 작성해 두고 시간이 날 때 하나씩 답변을 달아보고 정보를 찾아보겠습니다.변수에 기본형과 참조형 데이터를 할당할 때 메모리에 어떻게 저장되는가[JS] 변수는 메모리에 어떻게 저장될까?(기본형, 참조형) 기본형과 참조형 변수값을 참조할 때 메모리 관점에서 어떤 흐름으로 해당 값을 참조하는가얕은 복사, 깊은 복사란 무엇인가 + 깊은 복사를 구현하는 코드 작성실행컨텍스트란 무엇인가this란 무엇이고 this의 값은 어떻게 결정되는가비동기를 다루는 3가지 방식클로저란 무엇인가프로토타입이란 무엇인가객체지향이란 무엇인가
[CSS] Tailwind 후기 tailwindcss는 간단한 설정을 마친 뒤 지원하는 class name을 사용하면 해당 style이 적용되는 도구입니다. 장점기존에 style을 적용하기 위해서 고민하던 class name에 대한 고민이 줄어든다는 점입니다. class name을 통해 style을 지원하기 때문에 기존에 고민하던 부분이 사라집니다.익숙해진 경우 빠른 style 적용 가능합니다. 또한 VSCode를 사용하는 경우 Extension을 사용하면 자동 완성이 도와주기 때문에 더 빠른 작업이 가능합니다.단점inline css를 사용하는 것처럼 html 태그 내부 class name이 길어지기 때문에 html 문서의 가독성이 떨어진다는 단점이 있었습니다.익숙해지는데 시간이 좀 걸립니다. 가이드를 따라 설정하고 간단하게 Tailw..
[HTTP] Bearer Token? 그게 뭔데 사용하는 거야 🅱️배경웹 서비스를 개발하다 보면 인증과 인가를 다루게 됩니다. 그때 다양한 방법 중 HTTP Request Header에 Authorization에 Bearer Token을 담아서 보내는 방법이 있습니다. 실제로 구현을 하면,const token = getToken();// HTTP Header Authorization 옵션 추가Authorization: `Bearer ${token}`;위 코드처럼 단순하게 Bearere 문자열로 추가하면 문제없이 동작됩니다. token 앞에 Bearer 하나를 추가해서 뭐가 달라지나? 하는 궁금증이 생겨 찾아봤습니다. 🅰️그렇구먼Bearer Token의 경우 OAuth에서 Access Token을 담아서 보내는 걸로 사용되는 것이라고 합니다. 이렇게만 말하면 뭐지..
프로그래머스 데브코스 106일차 with. TS 웹 풀스택 📚요약지난 시간까지는 CS 지식의 기초를 배웠습니다. 이번 시간은 웹서비스 풀사이클에서 나올 수 있는 이론을 배우겠습니다. 📖풀사이클 개발 기반의 통합 웹서비스 구축 이론📄목차소프트웨어 개발 프로세스웹서비스 아키텍처백엔드와 프론트엔드 연동📄 소프트웨어 개발 프로세스해당 과정이 통해 `품질 향상, 일정 준수, 의사소통 촉진, 생산성 향상, 고객 만족도 향상`을 얻을 수 있어 중요한 과정입니다.더보기📑요구사항 수집 및 분석요구사항 수집 → 요구사항 분류 → 요구사항 분석 → 문서화 → 요구사항 검증 및 확인 📑시스템 설계상위 설계시스템 아키텍처 설계모듈화데이터 설계인터페이스 설계하위 설계데이터베이스 설계클래스 설계알고리즘 설계에러 처리 방식 및 로깅 방식🍯tip! 설계를 하기 위한 핵심 원칙은 ..
[Vercel] 배포해보기 📄CRA로 만든 프로젝트 배포해 보기npm i -g vercel우선 vercel cli를 전역으로 설치합니다.vercel --version 설치가 끝났다면 버전을 확인하며 설치가 잘 되었는지 확인합니다. 버전 확인까지 끝났다면 프로젝트의 최상위 디렉토리(파일)로 이동해 vercel 명령어를 실행합니다. Production 배포 링크로 이동하면 성공적으로 배포가 됩니다. 또한 vercel에 들어가 보면 새로운 프로젝트가 생성된 것을 확인할 수 있습니다. 📑배포 에러vercel 명령어를 통해 배포를 진행할 때 project의 name을 변경한다면 배포가 안 됩니다. 아직까지 원인은 모르지만 git repository의 이름과 달라지는 경우 다른 설정이 추가적으로 필요한 것으로 예상됩니다. 참고create..
개인 프로젝트 - 카페 메모 vercel 배포 Cafe Counter cafe-fe-phi.vercel.app github.io 배포 POS_TEST nulzi.github.io 목표카페에서 일할 때 카운터에서 손님들의 이용 정보를 메모장에 기록하기 싫다. 편하게 기록하고 텍스트 파일로 저장할 수 있는 보드판 만들기설계디자인색상 https://mycolor.space/?hex=%23FAD200&sub=1더보기 더보기 구현 계획FEinput type time 기본값 설정https://hianna.tistory.com/318오프라인 온라인이 모두 가능하도록 최종적인 형태는 PWA로 전환.https://chatgpt.com/c/e1654a03-3afb-4c65-a6e3-9f4de6f41cad BE다른 날짜의 데이터를 저장하고 불러오기 기..
프로그래머스 데브코스 105일차 with. TS 웹 풀스택 📚요약 지난 시간에 이어 CS 지식을 배워가겠습니다. 📖CS 지식 기초📄클라우드 컴퓨팅📑클라우드 컴퓨팅의 기반기술과 주요 원칙과거 패러다임메인프레임: 터미널, 시분할 시스템클라이언트-서버그리드 컴퓨팅클라우드 컴퓨팅장점: 민첩성, 탄력성, 비용 절감, 가용성단점: 고비용, 활용(학습) 난이도개방형 클라우드/폐쇄형 클라우드핵심 원칙공유된 컴퓨티 자원컴퓨팅 자원의 가상화자원 수요 증감에 대한 탄력성자원 활용 방식의 자동 제어사용량에 따른 과금📑클라우드 서비스 모델과 경제적 타당성IaaS, PaaS, SaaSCAPEX → OPEXIn-house, On-prem/Colocation/Managed Service/Cloud클라우드 활용 부적합: 레거시 시스템, 미션-크리티컬 시스템, 기밀 데이터 사용 📑마..
프로그래머스 데브코스 104일차 with. TS 웹 풀스택 📚요약 지난 시간에 이어 CS 지식을 배워가겠습니다. 📖CS 지식 기초📄컴퓨터 네트워크📑컴퓨터 통신망 기초Analog vs Digital: 적은 정보 손실, 암호화의 용이성직렬 전송, 병렬 전송동기식 전송, 비동기식 전송전송 방향: 단방향 전송, 반이중 전송, 전이중 전송회선 접속 방식: 점대점 방식, 다지점 방식망 구성 범위: LAN, MAN, WANOSI 7계층 모델 📑OSI 7계층 모델과 프로토콜Physical: 허브/리피터Data Link: 스위칭 허브/브릿지, Frames이더넷: CSMA/CD, Exponential backoff, MAC 주소와이파이: CSMA/CANetwork: Packets, IP/ICMP/IPSec/IGMPTransport: TCP/UDPSessionPresent..