wecode에서의 두번째 팀 프로젝트를 마치며 느꼈던 점들을 기록하고자 회고록을 작성해보고자 한다. infLearn Clone Coding 서비스 소개 : 프로그래밍 관련된 강의 영상 스트리밍 서비스를 제공하는 웹사이트 필수 구현 사항 : 소셜 로그인, 강의 목록,

처음에 뭔가 했는데 공개되면 안되는 민감한 정보를 저장하는 환경변수 (숨김파일 같은) 이다.env 파일은 루트 경로에 만들어줘야 한다. 만들게 되면 아래와 같이 뜨게 될 것이다. 배포할 용도가 아니기 때문에 .env.development로 만들어준다.이 파일에 변수와

CSS → SCSS → styled-component???처음에는 SCSS에 익숙해져서 와 편하다. 네스팅 기능으로 인해 CSS보다 가독성도 좋아지고, 겹치는 부분이 없어져서 너무 좋다!! 했는데 갑자기 새로운 기술을 접하게 되면서 혼란스러웠다.. 그런데 조금씩 써보면

처음 소셜로그인을 찾아보면서 많은 사람들이 다양한 방법으로 하는 것으로 보았다. 이 글은 React를 활용하여 JSX 문법으로 REST API 카카오 소셜로그인을 구현하는 방법이다. (프론트엔드 입장에서 인증토큰까지 받아서 진행하는 방법으로 작성됨) Basic flow 인증코드 요청해서 받기 상수데이터로 URL를 만들어서 소셜로그인할 버튼에 링크를 걸어...

Parent & Child Component 를 활용하여 속성 값 전달하여 활용하기

Drop Down을 구현하려고 찾아보니 대게 어려운 방법이 많았다.. 그래서 찾은 방법 중에서 나에게 제일 알맞는 방법으로 구현해냈다.state 값으로 boolean(false)를 지정함수를 만들어서 button 클릭 시 state boolean 값이 true ↔ fa

내 인생에서 개발자로서 첫 프로젝트를 마쳐서 감격스러운 마음으로 회고록을 작성해보고자 한다. 우선 같이 프로젝트를 진행하며 많은 고민과 문제 해결을 함께해준 팀원들에게 감사의 마음을 먼저 전한다! Nonfiction Clone Coding 서비스 소개 : 심플하고 모

복소수 문제 두 개의 input에 복소수(complex number)가 string 으로 주어집니다. 복소수란 a+bi 의 형태로, 실수와 허수로 이루어진 수입니다. input으로 받은 두 수를 곱해서 반환해주세요. 반환하는 표현도 복소수 형태의 string 이어야 합니다.복소수 정의에 의하면 (i^2)는 -1 이므로 (i^2) 일때는 -1로 계산해주세...

조건과 반복을 잘 써야 좋은 개발자가 될 수 있다! (조건에 따른 UI 구현 등) Life Cycle constructor : 태어나기 전에 정해주는 속성을 정해주는 곳 (state 등 / 예를 들어 붕어빵 처음 태어날 때 속은 팥이야 하는 것처럼) componen

드디어 기다리고 기다리던 1차 프로젝트를 하게 됐다! 프로젝트를 하기에 앞서 도움이 될 방식을 살펴보자. 프로젝트는 혼자서 하는 것이 아닌 여러명의 팀원들과 팀을 이뤄 한가지의 결과물을 만들어내는 것이기에 평소에 하던 것과는 다르게 생각하고 코딩을 해야 한다. Scrum 방식 (프로젝트 관리론) 프로젝트를 시작하기에 앞서 어떤 식으로 프로젝트를 진행할...

인증은 무엇이고 왜 해야 하는가? 인증 (Authentication) 인증은 회원가입과 로그인을 의미한다. 인증은 우리 서비스를 누가 쓰는지, 어떻게 사용하는지, 추적이 가능하도록 하기 위해 필요하다. 인증에 피요한 것은 아이디, 비밀번호 등이 필요하다. 비밀번호, 바이오정보, 주민번호 등과 같은 주요 정보는 법규상의 강제로 인해 따로 관리해야 한다. ...

State component는 본인의 상태(state)를 갖을 수 있고, 변경될 수 있다. (추상적으로 내 상태가 배고팠다가 배불러지듯이) 사용자에게 보이지 않는 상태를 의미한다. 상위 컴포넌트의 state 값은 하위 컴포넌트의 props 값으로 얼마든지 줄 수 있다. state를 활용하면 state 내용이 변경된다고 해도 페이지 새로고침 없이 페이지가 ...

이전에 React를 왜 사용하는지, 어떻게 초기에 셋팅하는지에 대해 알아봤다. 오늘은 해당 라이브러리를 사용할 때 제일 기본이 되는 Component에 대해 알아보자. Component? 간단하게 말하자면 재활용이 가능한 UI 구성 단위이다. (복잡한 코드를 획기적으로 단순화시키기 위해서 React를 활용하여 컴포넌트를 만들고, 똑같은 내용을 다른 곳에...

JavaScript 문제가 갈수록 어려워지고 있다.. 개발자로 입문한지 얼마 안 된 나에겐 매일이 도전이다. 오늘 문제는 그래도 로직대로 구현을 하다보니 문제가 잘 풀렸다. 아래에 다시 구현해보고자 한다. Replit 문제 문제 해석 우선 받는 숫자 인자를 뒤집어야 한다. 만약 숫자가 음수면 뒤집었을 경우 마이너스 기호가 제일 뒤에 오게 됨으로 제일 ...

React는 무엇일까? 🧐 > ✅ 간략한 정의 : 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리 그럼 React를 사용하게 된 이유는? Web이 초기에는 정적인 웹으로 사용되다가 시간이 지나면서 점점 HTML, CSS, JavaScript가 복잡해지고 양이 방대해지면서 동적인 웹으로 변화되어왔다. 1 세대 Web : HTML, C...

HTTP란 무엇인가? 컴퓨터가[웹브라우저 웹서버] 통신할 때 사용하는 공통 언어이다. (주로 HTML 문서를 주고 받을 때 사용되는 프로토콜) HTTP의 2가지 특징 Request / Response 메세지의 형태로 유저 컴퓨터와 서버 컴퓨터는 서로 요청과 응답을 하며 소통을 한다. (user : request, server : response) 1...

Git은 무엇일까? 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템이다. 소프트웨어 개발에서 소스 코드 관리에 주로 사용되지만 어떠한 집합의 파일의 변경사항을 지속적으로 추적하기 위해 사용될 수 있다. Git은 여러 버전의 폴더를 만들 필요 없이, 분산 버전을 관리하는 프로그램이다. ...

오늘 JavaScript 중간 시험을 봤다.. 이번주에 계속 westagram을 만들면서 html과 css만 해와서 JavaScript가 기억이 안 나서 걱정되었는데 그래도 무사히 시험을 마치고 실수했던 부분을 회고하려고 한다. replit 문제 해결한 방법 split을 활용하여 띄어쓰기를 포함한 모든 문자를 배열로 받아서 sentenceArray에 ...

CSS 레이아웃 (flex)