전체 글

[TypeScript] 타입스크립트 입문(1)

타입스크립트란? TypeScript는 Microsoft사에서 개발한 자바스크립트 기반 언어이다. 과거에는 JavaScript의 Superset(상위 개념)으로 여겨졌으나 최근에는 타입 구문이 있는 JavaScript로 정착하고 있다. 실제로 Microsoft는 ECMA에 자바스크립트에 타입스크립트의 병합을 정식으로 건의하였다. Why TypeScript? JavaScript는 너무 많은 것을 허용해준다(무분별한 undefined, 너무 관대한 타입 추론 등) -> 안전성 보장이 어려움 JavaScript에 추가 구문이 붙는 것이기 때문에 JavaScript를 이해하고 있다면 배우기가 쉽다. MS에서 개발한 Visual Studio Code와 완벽하게 통합되기 때문에 오류 통제가 용이하다. 컴파일러를 통해..

[Mac] 맥북 '확인되지 않은 개발자가 배포했기 때문에 열 수 없습니다' 해결법

맥을 사용하다보면 가끔 인터넷으로 다운로드한 파일(특히 은행, 공공기관 등)을 실행시키면 위와 같은 오류를 볼 수 있다. 해결 방법은 간단하다. 해당 파일을 마우스 오른쪽 버튼으로 클릭하거나 ⌃(control) 키를 누른채 클릭하면 다음과 같은 메뉴가 뜬다. 여기서 '열기'를 누르면 해결된다! 해결 완료! 궁금한점 있으시면 댓글 남겨주세요!

제로베이스 프론트엔드 스쿨 8월 후기

제로베이스 프론트엔드 스쿨 나는 현재 제로베이스 프론트엔드 스쿨에 참여하고 있다. 5월 말 개강이었으니 벌써 3달이나 수강한 상태다. 국비 지원 부트캠프인 코드S사와 제로베이스 사이에서 고민하였으나 돈이 조금 들더라도 강사진이 확실하고 백엔드 수강생들과 함께하는 프로젝트가 있다는 점이 마음에 들어 제로베이스를 선택해 수강하게 되었다. 얼마 전 제로베이스에서 우수 수강생을 대상으로 진행하는 오프라인 과정(구 네카라쿠베 현 커넥TO)에 대한 면접 제의가 들어왔으나 사정상 6개월동안 10 to 10 과정을 수행하기는 어려워 아쉬운 마음을 뒤로하고 면접을 포기했었다. 오프라인 과정은 가지 못했지만 혼자 공부하는 것도 오프라인 과정만큼 열심히 공부해나갈 생각이고 지금도 그렇게 하고 있다🔥 HTML/CSS 강의 제..

[옥소폴리틱스 인턴십] 옥소폴리틱스 FAQ 페이지 구현하기 (2)

Search Bar 구현하기 대부분 검색엔진은 외부 라이브러리 등을 사용하는 것으로 알고 있다. 하지만 이번 프로젝트에서의 검색 기능은 다른 자료를 참고하지 않고 직접 구현해보고 싶었다. 검색 기능은 Category 영역의 정보를 받고 Answer 영역에도 영향을 주어야했기 때문에 Search Bar에서는 검색어를 state로 받고 초기화 기능만 구현하였다. const SearchBar = ({ search, setSearch }) => { const handleChange = (e) => { setSearch(e.target.value); }; const handleClear = (e) => { e.preventDefault(); console.log('clear'); setSearch(''); }; ..

[옥소폴리틱스 인턴십] 옥소폴리틱스 FAQ 페이지 구현하기 (1)

FAQ페이지 구현하기 이전의 옥소폴리틱스 메인페이지 클론코딩을 성공적으로 마치고 다음 과제에 대해 회의하는 시간이 있었다. 옥소 사 멘토분들과 팀원들과의 회의에서 나온 의견으로는 다른 페이지 클론 코딩, 현재 구현한 메인페이지에 Firebase 적용하기, 아예 새로운 제품 개발해보기, notion으로 구현된 페이지 React로 구현하기 등이 있었다. 새로운 제품을 개발해보기에는 시간이 빠듯했기에 현재 옥소폴리틱스에서 notion으로 구현되있는 페이지 중 하나를 React를 이용해 웹페이지로 구현해보기로 하였다. 현재 옥소폴리틱스의 FAQ 페이지는 다음과 같이 노션으로 구현되어 있다. 노션 페이지 자체의 디자인은 나쁘지 않지만 기존 옥소폴리틱스의 다른 페이지들과는 이질감이 많이 느껴졌다. Figma를 이용..

[Cloning] (Nomad Code) Twitter clone code with Firebase & React (2) - Firestore, Firebase storage, FileReader API

데이터 베이스 - Firestore Firestore는 파이어베이스에서 제공하는 NoSQL 데이터베이스 서비스이다. NoSQL NoSQL은 말 그대로 SQL이 아닌 방식의 데이터베이스다. SQL형 데이터베이스는 '관계형 데이터베이스'라고도 부르며, 이름처럼 모든 데이터들이 관계로 연결되어있다. 가장 간단하게는 행-열 형태의 데이터를 갖는 엑셀도 SQL과 비슷한 데이터베이스라고 볼 수 있다(실제로 연동하여 사용하기도 한다). 반면 NoSQL 방식은 데이터 간의 관계를 통해 데이터를 구조화하는 것이 아니라, key를 통해 데이터를 접근한다. Javascript 객체의 key, value 모델이 대표적인 NoSQL 형식의 데이터 저장 방식이다. SQL 방식은 인덱스와 데이터 관계를 통해 데이터에 접근해야 하기..

[Cloning] (Nomad Code) Twitter clone code with Firebase & React (1) - Firebase, React Router, Vice 최신 버전으로 사용하기

리액트 복습과 파이어 베이스 연습이 필요하여 노마드 코더(Nomad Coder)에 있는 트위터 클론 코딩 코스를 수강하였다. 이런 코스를 무료로 제공하고 있다는 점이 놀랍다. 이 강좌에서는 Firebase와 React Router의 이전 버전을 사용하고 있었고, 해당 버전의 설치 후 수강이 권장되었다. 하지만 나는 호기롭게 공식문서와 함께 최신 버전을 사용해보기로 하였고 이것은 큰 고난의 서막이었다.... React Router 리엑트 라우터가 최근 업데이트에서 크게 바뀌었다. 나는 입문자이기 때문에 애초에 이전 버전을 접해본적이 없어 잘 모르지만 강의와 비교하여 달라진 점을 찾아내느라 애를 먹었다. Upgrading from v5 - React Router 대신 Switch로 Route들을 감싸던 방식..

[글쓰기 수업 #1] 주제 글쓰기 - 영화

영화 명사 1. (영상) 일정한 의미를 갖고 움직이는 대상을 촬영하여 영사기로 영사막에 재현하는 종합 예술. - 표준국어대사전 표준국어대사전에 따르면 영화는 예술이다. 예술을 정의할만큼 내 견식이 깊지는 않지만, 내가 예술에 바라는 것은 명확하다. 일상에서 얻을 수 없는 새로운 경험을 예술을 통해 얻을 때 나는 너무나도 큰 기쁨을 느낀다. 이런 취향 때문인지 영화도 장르 영화만 보게 된다. 마블 영화나 매드맥스와 같은 영화를 여러 번 보게 되는 것도 이런 이유 때문이다. 스토리 구성이나 음향이 조금 부족하더라도 소재나 장면에서 새로움을 준다면 재미있었던 영화로 기억된다. 그렇다면 종합은 무엇일까. 영화는 서사와 영상, 음향으로 이루어져있다. 하지만 사람들은 '영상'만을 즐기기 위해 영화를 보는 것이 아니..