코로 넘어져도 헤딩만 하면 그만

프리 팀8: 일어나, 코딩해야지! 에서 Stackoverflow 를 유사하게 구현하는 프로젝트를 맡았다. 들어가보면 알겠지만 굉장히 기본적인 sign up, log in, CRUD기능을 갖춘 게시판식 질문 사이트다. 유명하긴 한데...평소 문제 해결법 엿볼 때만 슬쩍 슬쩍 들여가다보니 이렇게 각 잡고 사이트를 둘러본 건 처음이었다. 그렇게 자세히 보니까 태그 등의 잡다한 기능이 꽤 많아 당황하기도 했다. 다같이 살펴보고, 팀원들과 기능에 대해 논의한 뒤 검소하게 목표를 잡고 진행하기로 했다. 회고를 하는 현재로선 중요도 2-3으로 뒀다가 전혀 만져보지 못한 기능들(구글인증이라던가...검색이라던가...탈퇴...)이 마음에 걸려서 조금 아쉽기도 하다. 그래도 아예 완성을 못하면 어쩌지? 하는 걱정과 달리 배..

🚩 CORS에러와 프록시? 브라우저에서 API를 요청할 때, 현재 주소와 API 주소의 도메인이 일치하지 않을 시 CORS 에러를 띄웁니다. 자세히 읽어보면 CORS라고 막혔다는 에러 문구가 보입니다. 따라서 이런 경우를 해결하기 위해서는 CORS설정을 따로 해주어서 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주어야 합니다. 여기서 출처는 '프로토콜, 도메인, 포트'로 정의되며 이 셋이 모두 일치해야 동일 출처라고 말할 수 있습니다. 모든 도메인을 허용해버린다면, 보안상 심각한 결과가 나올 수 있습니다(애초에 CORS 정책이 보안을 위해 마련된 거니까요). 따라서 미리 허가한 출처만 접근이 허용될 수 있게 관리해야 합니다. 이를 위해서 프론트엔드 개발자가 백엔드 개발자에게 프론트..

- CI, CD - Github Action을 통한 workflow 구현 - YAML 🚩개발 프로세스 및 CI/CD 개발 프로세스란, 개발에 대한 전체적인 가이드라인과 같습니다. 일종의 '절차'를 말하는데요. 개발 및 유지 보수의 과정에서 어떤 식으로 업무가 분담 진행되고 있는지 알기 위해서는 개발 프로세스의 발전을 알아보아야 합니다. 우선 소프트웨어 개발 생명주기(SDLC, Software Develpment Life Cycle)를 한번 볼까요? 대략적으로 SDLS는 다음과 같은 절차를 따릅니다. 요구분석+시스템 명세 작성(문제분석 단계)→설계→구현→테스트→배포→유지보수→요구분석 요구분석+시스템 명세 작성 단계 : 개발할 소프트웨어의 기능과 조건, 목표 등을 사용자와 함께 정의합니다. 개발하고자 하는 ..

npm install를 하려다가 다음과 같은 에러와 마주쳤다. 다른 문구보다 no such file or directory가 눈에 띈다. npm ERR! code ENOENT npm ERR! syscall open npm ERR! path /home/user/coding-files/fe-sprint-practice-deploy/package.json npm ERR! errno -2 npm ERR! enoent ENOENT: no such file or directory, open '/home/user/coding-files/fe-sprint-practice-deploy/package.json' npm ERR! enoent This is related to npm not being able to find ..

1. 열거형Enum 2. 인터페이스Interface 3. 타입 별칭Aliases 4. 타입 추론Inference 5. 클래스Class 🚩열거형 흔히 Enum이라고 부르는 열거형에 대해서 알아봅시다. JS에는 없는 기능인데, TS에는 문자형/숫자형 열거형을 지원하고 있습니다. 그래서 열거형이 무엇이냐... 하면 아래와 같은 모습을 하고 있죠. 숫자형 열거형의 예시입니다. enum Color { Red, Green, Blue, } //기본적으로 0부터 시작해서 1씩 증가, 하지만 다음과 같이 수를 지정할 수도 있다. enum Color { Red = 1, Green = 2, Blue = 4, } //아래처럼 산술 계산도 가능합니다. enum Color { Red = 1, Green = 2, Blue = 4,..

리액트 파일을 구성하다가 Router을 쓰기 위해 import 했는데, 갑자기 아래와 같은 에러가 출몰했다. "Cannot read properties of undefined (reading 'pathname')" 강의 영상에 나온 대로 Router을 쓰려다가 발생한 에러였는데 검색을 해본 결과 제시된 가설은 다음과 같았다. 1) Router 6 버전이 에러가 많아서 그렇다, 다운그레이드 해라 2) Link 에 to를 쓰지 않아 발생한 에러다 일단은 1번을 따라서 버전 6을 삭제하고 5버전으로 깔아주었다. json파일 내부에서 "react-router-dom": "^5.3.0", 이렇게 버전을 낮춰두고 npm i 하기만 해줘도 수정은 된다. 직접 삭제하고 다시 까는 법도 있다. 그러나 이 방법으로는 해결..

- Typescript 환경 구성하기 - tsconfig.json 파일의 세부 내용 - Typescript 문법(타입, 함수, 연산자 활용) 간단하게 배운 걸 정리하기 위한 포스팅입니다. 사실 자세한 건 이미 주말에 쓴 포스팅에 담아둬서 ... 복습 개념으로 짧게 중요한 점만 짚고 넘어가겠습니다. 🚩1) Typescript 환경 구성하기 타입 스크립트는 브라우저에서 읽히기 어렵습니다. 브라우저는 js파일만 읽거든요. typescript는 개발자들이 여러모로 편해서 사용하는 부가적인 언어라는 점! 따라서 ts.파일을 js.파일로 바꿔주는 컴파일 과정이 반드시 필요합니다. 예전에 scss로 작성한 파일도 css로 바꿔주는 과정이 필요했다는 게 기억나네요. 여하튼 타입 스크립트 파일 환경을 구성하는 절차는 다..

바닐라 자바스크립트로 간단한 투두 리스트 추가 감소를 만들어보는 실습이다. add 버튼을 눌러 추가된 리스트들을 관리해주기 위해서 리덕스를 사용하기로 하였다. 우선 store를 만들고 적절한 액션 타입 별로 분기된 reducer도 만들었다. 이후 submit이 일어날 때 불러지는 함수에서, dispatch를 통해 action을 넘겨준다. (type명 외에도 들어온 text도 함께 준다.) To Dos Add import { createStore } from "redux"; const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ul")..

리덕스 개념이 영 안 잡히길래 팀원이 추천해준 강의를 들어보았다. 그 결과, store에서 dispatch를 통해서 action객체를 보내고, 이 action이 reducer에 들어온 뒤 return 된 값이 새로 store의 data가 된다는 일련의 흐름을 이해하게 되었다. 가벼운 예제를 만들어보면서 흐름을 살펴보니(그것도 vanilla js로!) 쉽게 이해가 되는 부분이 있었다. 이건 무료로 제공되는 강의니까 리덕스가 대체 어떻게 돌아가는지 감이 안 온다면 한번쯤 들어보는 것을 추천. #0.1 ❤️ 무료 강의 ❤️ – 노마드 코더 Nomad Coders All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 우선..

es7 검색하면 나오는 아래와 같은 익스텐션을 깔아주면 rfce 네 글자만 입력해도 컴포넌트 기본 세팅이 생성된다! 직접 해보니 rafce는 화살표 함수로 나오고, rfce는 그냥 함수로 나온다. 이 외에도 명령어에 따라 여러 버전이 있으니 편한 걸로 쓰면 될 것 같다. 리액트에서 새 컴포넌트 파일 만들 때마다 일일이 써주는 것이 은근히 귀찮던데 어느 영상에서 쓰는 거 보고 바로 유용해보여서 깔아봤다. 직접 파일명과 똑같은 컴포넌트를 만들어주니 반복 작업을 안 해도 되어서 시간이 절약된다.

Typescript는 javascript 개선한 업그레이드 버전이라고 보면 된다. 따로 타입을 지정 안 해도 되는 포용력이 과하게 높은 자바 스크립트보다, strict하게 에러를 잡아주는 타입 스크립트의 중요성이 높아진다. 1) 자바스크립트는 dynamic typing 가능하기 때문에 5-'3'도 계산이 가능하다. 그러나 프로젝트 사이즈가 커지게 되면 이러한 자유도는 단점이 될 뿐이다. 타입 스크립트에서는 type error을 쓰면 이상하다고 말해준다. 2) 타입 스크립트로 엄격하게 타입을 체크하면서, 에러 메세지의 퀼리티가 올라가게 된다. "자바스크립트가 아직까지 살아 남은 이유는 타입 스크립트가 산소 호흡기를 붙여두었기 때문이다." -개발자 선배님 왈 🚩Typescript 적용하기 1) 파일은 무조건..

출시되자마자 사용했던 발표가 있다기에 적극적으로 신청했다. 누가, 어떤 방식으로, 어떤 사람들이 모여 재미난 프로젝트를 진행했는지 궁금했고 sns를 통해 전해 들었던 문제의 해결방식도 궁금했기 때문이다. 그때 한창 악성 공격 때문에 서버비를 폭탄 맞으셨다는 소식이 들려 안타까워했는데.....크리스마스를 맞아 따뜻한 마음을 전하고 싶다는 선의에서 시작한 프로젝트가, 악의로 망쳐진다는 점에 몹시 화가 났던 기억이 있다. 그러나 오늘 뵌 개발자분들은 그 당시 경험을 딛고 일어서서 3년차에 접어든 프로젝트를 즐겁게 진행 중이신 것 같아서 마음이 한층 놓였다. 발표 내용을 짧게 간추려 요약하자면 다음과 같다. 2021년-2022년을 거치며 개선된 점 아이디 잊어버리는 문제(나도 이 문제가 핫했던 기억이 난다. 다..

프로젝트 처음부터 styled-component로 하는 습관을 들이려고 react를 깔자마자 함께 깔아줬는데, npm run start를 시켰더니 아예 화면이 먹통이 되면서 Babel 에러라는 게 잔뜩 뜨는 현상이 발생했다. 그런데 에러를 해결하려 찾다가 문득 돌이켜보니 일전에 이 현상에 관해 동기분들이 얘기 나누던 걸 스치듯 본 기억이 났다. 급하게 스터디 방에 들어가서 검색했고, 이제 전과 달리 styled-component를 쓰기 위해서 npm install styled-components@latest 꼭 이 명령어로 깔아줘야 한다는 것을 깨달았다. ...언제 또 바뀔 지 모르겠지만... 적어도 지금은... https://github.com/styled-components/styled-compone..