탕스로그

졸업 프로젝트를 위해 VS Code 내에 React Native 개발환경을 세팅하였다! 그 과정은 다음과 같다. 1. Homebrew 설치 https://brew.sh/ 에 방문하면 다음과 같은 명령문이 나온다. 이를 터미널에서 실행하면, 와 같이 다운로드가 진행된다. 2. VSCode 설치 brew install cask brew install --cask visual-studio-code 를 순서대로 터미널에 실행하면 된다. 필자는 VSCode가 설치되어 있어서 패스했다. 3. Node.js 설치 brew install wget touch $HOME/.zshrc wget -q0- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | ba..

이 글은 2021-2 ~ 2022-1 의 두 학기에 걸쳐 이화여자대학교 캡스톤디자인프로젝트A/B 과목에서 개발한 졸업프로젝트에 대한 개요이다. organization : https://github.com/E-Albatross 우리 팀이 설계한 앱 '바른글씨'는 다음과 같은 기능을 제공한다. 1. 다양한 필기체, 연습지의 제공을 통한 다양한 모바일 필기 기능 2. 사용자의 글씨를 바른글씨만의 기준을 통해 점수를 매겨 제공 3. 사용자의 글씨 연습 내용 이미지로 저장해 어플 내 갤러리에 저장 4. 사용자의 글씨 점수를 그래프화 나는 팀의 리더와 프론트엔드 개발자를 맡아 프로젝트를 진행하였다. 1. Figma 2. 개발환경 3. 어플 소개

이번 미션은.. 지난주 netflix 프로젝트 업그레이드 버전!! 이번에 구현해야 할 것은 다음과 같았다. 1. 동적라우팅을 이용한 상세페이지 이동 2. 검색페이지에서 검색어를 입력하면 실시간으로 결과화면 반환 그럼.. 각각 어떻게 구현했는지 알아보자!!!! 1. 동적라우팅을 이용한 상세페이지 이동 동적 라우팅이란?? /detail/[id].tsx 와 같이 [ ] 로 감싼 파일명을 정의해준 후, link를 이용해서 'detail/12345' 와 같은 주소로 이동하면, nextJS가 알아서 query.id 에 12345 를 담아서 /detail/[id].tsx 화면을 띄워준다!!! 한마디로, 내가 /detail/[id]의 주소를 따로 지정해주지 않아도 /detail/[임의의어떤값] 으로 이동하고 싶어하는 ..

5주차 미션은 무려 팀 미션!!! 후에 한달동안 프로젝트를 같이 하게 될 나의 프론트메이트.. 채연이와 개발을 하게 되었다. 그리고 이번 미션은 nextJS를 이용해서 SSR을 적용한 netflix 페이지를 만드는 것이었는데..! 난 nextJS를 말만 들어봤지 전.혀 써본 적이 없기 때문에 ㅎㅎ 엄청난 시련을 겪게 되었다... 우리의 야무진 개발 타임라인은 다음과 같았다. 개발 타임라인 11/7 ( 월 ) : 첫 회의.. 파트 나누기 11/8 ( 화 ) : 페이지, 컴포넌트 레이아웃 잡기 완료 11/9 ( 수 ) : nextJS 공부 -> 서버 연결 완료 (?) 이렇게만 보면 우리의 일이 수월했겠지만.. 난 nextJS만 쓰면 얘가 알아서 SSR을 해주는 줄 알고 그냥 fetch를 박아서 서버 연결을 ..

CEOS의 세번째 스터디에서는 채팅페이지 하나를 만드는 것이었다면, CEOS의 네번째 스터디에서는 그 연장선으로 라우터를 사용해서 메인, 채팅방, 설정 화면을 오가는 SPA 만들기! 를 해보았다. 사실.. 3주차 때 나름 구조를 잘 잡아놨다고 생각했기 때문에.. 라우터만 좀 하면 수월하겠다! 고 생각한 나를 매우 친다.. 생각보다 힘들었다. 이번 글은 바로 Key Questions 부터 시작하겠다! 조사해야할 개념은 다음과 같다. 1. Routing 이란? 네트워크적인 개념으로 설명하자면, '어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정'이라고는 하는데, 좀 더 풀어서 쓰면 하나의 페이지에서 다른 주소로 이동하면 다른 페이지를 보여주는 것을 의미한다. 보통 프론트엔드에서 라우터..

CEOS의 세번째 스터디는 무려 타입스크립트로 채팅방 구현하기..ㅎ 1주차 바닐라자바스크립트 -> 2주차 리액트 -> 3주차 리액트 with 타입스크립트...? 진짜 진도가 급발진이 따로 없다... 죽을 맛이다. 먼저 이번 주차의 미션 목표는 다음과 같다. 여기서 내가 죽을 맛이었던 포인트는... 바로 redux, context API 등 상태관리를 하는 것이 좋다는 것이었다. 왜냐면 이번에는 밑의 화면과 같이 채팅하는 사람이 한명에서 끝나지만, 이어지는 다음 스터디는 채팅하는 유저가 추가된다고...ㅎ 그래서 이번 프로젝트에서 상태관리 라이브러리를 써봐야 편하다는 것이었다. 밑은 내가 구현한 채팅방 화면이다... 무려 셀프 채팅이 가능하다.. 찌부된 커비로 말을 하면 아이스커비에서 해당 내용이 보이는 그..

내가 전역상태로 관리해야하는 값 1. 현재 채팅방 아이디 2. 현재 채팅을 치고 있는 유저 아이디 3. 채팅 input을 채팅 배열에 반영 이 세가지이다. 원래는 redux를 쓰려고 하였으나... recoil이 훨씬 간단하다고 하여 recoil을 도전해본다 Recoil 설치 with typeScipt npm install recoil 로 설치하면 된다. -> 이제 리코일이 타입스크립트를 지원한다고 한다!! RecoilRoot로 루트파일 감싸주기 index/App.tsx import { RecoilRoot } from 'recoil'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRo..

CEOS의 두번째 스터디! 1주차에 바닐라 js로 짠 투두리스트를 react로 리팩토링하기!!!! 1주차에 바닐라로 짜면서, 와 난 react로 편하게 살았더니 이렇게 자바스크립트를 못하네...?라는 생각을 했었는데, 이번 주차에 react로 리팩토링하면서 느낀 것은, react도 그닥 잘하진 않네... 였다. 아직 갈 길이 멀다. 일단 먼저, 이번 주차의 스터디 목표는 다음과 같다. 미션 목표를 본 후에 바로 react로 투두리스트 짜기에 돌입했다. 프로젝트 진행 중 힘들었던 부분 1. map을 쓸 때는 괄호에 주의하자. 이번에 제일 에러를 찾기도 힘들었고, 에러를 찾고나서도 현타가 왔던 부분은 {doingList.map((list) => ( moveList(doingList, list.id, list..

CEOS의 첫 스터디! 바닐라 js로 투두리스트 작성하기... React로만 얼레벌레 구현해온 나는 이번 미션을 받자마자 상당히 막막했었다. 이번 스터디의 목표는! 다음과 같다고 한다. 미션을 진행하기 앞서, Key Questions에 대한 구글링을 진행해보았다. Key Questions 1. DOM은 무엇인가요? 웹 브라우저가 HTML 페이지를 인식하는 방식. 트리 구조로 이루어진 객체이며 이 객체를 이용해 js가 html/css로 이루어진 웹페이지에 접근할 수 있다. 2. HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요? 1) insertAdjacentHTML : 타겟 HTML Element의 특정 위치에 원하는 노드를 추가할 수..

⭐️ CEOS란? 신촌 유일!! IT 창업 동아리로 신촌 소재 4곳의 대학교 ( 이화, 연세, 서강, 홍익 ) 가 함께한다. 기획, 디자인, 개발 ( 프론트 / 백 ) 네 파트를 나눠서 뽑으며 나는 프론트 개발 파트로 지원하였다. CEOS의 홈페이지는 아래와 같다. 매 학기 새로운 기수를 뽑고 난 16기 지원자였다. https://www.ceos.or.kr/ ⭐️ 지원동기 이미 수차례 팀프로젝트로 개발 능력을 애매하게 키운 이후라, 내가 하던 걸 또 하지 않는 동아리! 새로운 지식을 배우고 성장할 수 있는 동아리! 가 포인트였다. 그런 점에서 유일하게 '타입스크립트'도 다룬다는 점. 에자일 방법론, next.js 를 이용한 서버사이드렌더링 등 요즘 스타트업에서 많이 요구하는 역량들을 공부한다는 점, ' ..