📌 대학생 코딩캠프란? 코드잇에서 제공하는 코딩캠프로, 4주동안 하루 10분! 원하는 분야의 코딩 강의를 수강하고 인증하면서 매일 공부하는 습관을 기를 수 있는 프로그램이에요. 100% 온라인으로 진행됩니다. 📌 참여 방법 코딩 캠퍼가 되면 수강기간을 2배로 늘릴 수 있어요. 이렇게 되면 두 달동안 무제한 강의를 들으며 학습할 수 있어요 ! 📌 참여 혜택 보너스 수강 기간 기존에 코드잇 멤버십에서 보너스 수강기간을 최대 14일 받을 수 있어요 활동 기간동안 미션을 성공하면 추가로 14일을 더 준다고 하네요! 활동 인증서 & 강의 수료증 코드잇만의 인증서와 수료증을 제공해요. 이력서 꿀팁노트 코딩 캠프에서 배운 것들을 활용할 수 있도록 실무자들의 꿀팁이 담긴 노트를 제공해줘요 디지털 플래너 & 손코딩 노트..
안녕하세요 오늘은 코딩 교육 서비스 '코드잇'에 대해서 소개해볼까하는데요. 코드잇, 이미 유명해서 아실 분들은 많이들 알고 계실거라 생각해요! 😀 요즘 코딩 교육 서비스가 정말 많이 늘어나고 있는 것 같아요. 저도 신입생 때 컴퓨터공학부에 입학하고, 인터넷 강의를 통해서 코딩을 학습하는게 효율적이고 무엇보다 재밌다는 걸 알게되면서 코딩 교육 서비스를 정말 많이 찾아다녔던 것 같아요! 저는 사실 중고등학생 때부터 프로그래밍을 해오신 분들과는 달리 대학교에 입학하고 처음 코딩이라는 걸 접했었는데요. 신입생 때 개발동아리에 들어가서, 선배들에게 웹 프로그래밍에 대해서 처음으로 배워보면서 직접 웹사이트를 코딩하는게 너무 신기해서 재미를 붙이게 된 케이스 같아요. ⬆️ 1학년 때 태어나 처음으로 만들어본 웹페이지..
지난 7, 8월에 '서울시우먼테크해커톤' 이라는 해커톤에 참여했었다. 단톡방에 공유가 되길래 흥미가 생겨서 개인으로 지원을 해보았다. 어차피 팀매칭을 자동으로 해준다고 하더라! 주제는 이미 나와있었고, 공모 분야를 따로 지원서에 작성해서 그 공모 분야를 기준으로 팀매칭을 해주는 식이었다. 예를 들어 내가 개발(프론트)와 '아이 키우기 좋은 도시' 라는 주제로 지원을 했다면 '아이 키우기 좋은 도시' 주제를 선택한 다른 기획, 디자인, 백엔드 분들과 팀매칭이 되는 식이다. 4개 공모 분야 중에서 한가지를 선택하면 되었고 신청서에는 참여 동기, 계획, 참여목표, 아이디어 구체화 계획을 작성해서 내면 됐다. 아이디어 구체화 계획은 공모 분야 중에서 하나를 선택해 자신의 아이디어를 적어서 내는 것이다. 근데 이..
이번 프로젝트 로그인 부분을 내가 담당하게 됐는데, 로그인 방식 중에서 카카오 로그인을 구현하게 됐다. 리액트 카카오 로그인에 관련해서 정리된 글들이 많아 개발할 때 참고하면서 진행할 수 있었다. 하지만 까먹지 않고자 한번 정리하려 포스팅해본다. 방식 프론트엔드와 백엔드가 협업하면서 카카오 로그인을 구현하는 방식이 다를 수 있다. 나는 이런 방식으로 했다- 라는 정도로 참고하시면 좋을 것 같다. 나는 프론트엔드 담당이어서 프론트엔드 입장에서 서술해보려고한다. 프론트엔드에서 카카오 로그인 요청 / 인가 코드 받기 요청을 한다 카카오에서 redirect url 로 인가코드를 프론트엔드로 보내준다. 받은 인가코드를 백엔드에게 보낸다. 백엔드는 이 인가코드를 받아 처리해서 AccessToken 을 응답으로 프론..
로그인 여부에 따라서 접속할 수 있는 페이지를 제한하는 방법에 대해서 포스팅해보려한다. 나 같은 경우에는 '/' 경로는 홈 페이지 여서 로그인을 해도, 안해도 접근이 가능해야했고 그 외에 나머지 페이지들은 isLogin 상태가 true 일 경우에만 접근가능하도록 구현하고 싶었다. 전체 코드부터 보자 ... import { userInfoState } from "./recoil/atoms/userState"; import { useRecoilState } from "recoil"; function App() { const [userInfo] = useRecoilState(userInfoState); const isLogin = userInfo.isLogin; return ( {isLogin ? ( ) : ..
문제 프로젝트를 개발하면서 이렇게 여러개의 이미지 슬라이드를 구현할일이 생겼다. (백엔드랑 연동하기전이라 예시 데이터를 넣고 테스트하고 있었다.) 한번에 5개까지 보여줄 수 있도록 설정하고 데이터를 8~9개 정도 넣어놓고 테스트를 하고 있었다. 이때 settings 는 다음과 같았다. const settings = { dots: false, infinite: true, speed: 500, slidesToShow: 5, slidesToScroll: 3, arrows: true, // autoplay: true, }; 근데 예시 데이터를 2개로 줄이고 테스트하니 다음과 같이 이상하게 중복되어 나온다. 해결 구글링을 해보니까 나같은 문제를 겪는 사람들이 있는 것 같아 보였다. react-slick 레포지터리..
문제 axios 로 post 요청을 보내는데 자꾸 api 호출을 두번하는 문제가 생겼다. 다른 api 면 모르겠지만 내가 사용하는 api 는 두번 호출하면 중복된 code 여서 유효한 code 로 동작하지 않았기 때문에 문제를 해결해야했다. 해결 구글링을 하다보니 src/index.js 에서 React.StrictMode 를 지워보라는 말에 따라했더니 중복 호출을 막을 수 있었다.
개발을 하다가 날짜를 선택하는 기능을 구현할 일이 생겼다. 어떤걸 쓸까 찾아보는데 react-datepicker 라는 게 있었다. 근데... 좀 못생겼다? 물론 커스텀을 할 수는 있지만 지금 당장은 커스텀 없이도 좀 더 예쁜걸 사용하고 싶었다. 그러다 mui x 라는 걸 찾았다. https://mui.com/x/react-date-pickers/date-picker/ React Date Picker component - MUI X The Date Picker component lets the user select a date. mui.com 대충 이런식으로 생겼다. 설치 npm install @mui/x-date-pickers // Install date library (if not already ins..
안녕하세요. 데보션영 2기 서다원입니다! 데보션영의 활동 중 하나는 바로 영들과 함께하는 밋업! 인데요. 한달에 한번씩 온라인으로 만나 세미나를 듣고 현직자분들과 Q&A를 할 수 있는 시간을 가진답니다. 하지만 이번 7월 밋업은 데보션영의 지인들도 참여할 수 있는 밋업이었어요! 주변 지인들에게 밋업관련해서 공유해주니까 다들 좋아하시더라구요🥹 이번 7월 밋업 발표는 다음과 같았는데요~ 1. 영업맨 왕대리는 어떻게 데보션 전문가가 되었을까? (왕태웅님) 2. 개발자의 성장과 오픈소스, 그리고 커뮤니티 (박정환님) 3. 컴공 후배들이 3~4학년때 가장 많이 하는 질문 Top 10 (김한성님) 4. 생생한 취업 준비 과정과 팁 (심재훈님) 대학생들이 다들 궁금해하고 관심가질만한 내용이죠? 정말 데보션은 데보션영..
안녕하세요. 데보션영 2기 서다원입니다! 오늘은 SKT T타워에서 진행된 티움 투어 체험과 SKT 본사를 방문해본 후기를 포스팅해볼까합니다.저는 데보션영 활동의 일환으로 티움투어를 진행하게 되었는데요.직접 사이트에서 예약하고 방문할 수도 있어요. 예약할 수 있는 사이트는 아래 링크를 참고해주세요!https://tum.sktelecom.com/reservation/registReservation.do 미래기술 체험관 T.um(티움)SK텔레콤 미래기술 체험관, 시설 안내, 방문예약, 전시관 정보, 체험 서비스 등 제공.tum.sktelecom.com투어 유형에는 유튜브 라이브 투어와 현장 투어가 있는데 현장 투어를 선택해주시면 될 것 같아요. 먼저 을지로에 있는 SKT T타워에 도착을 했어요.데보션영담당자님..
union type 변수에 들어올 값이 string 또는 number 이라면 아래와 같이 작성이 가능하다. let 이름: string | number = 'kim'; let 나이: (string | number) = 100; 괄호를 작성하게 되면 A | B | C 처럼 여러개를 작성할 수도 있다. 저렇게 할당하는 순간 타입은 string 또는 number 중 하나로 변한다. array 나 object 를 만들 때 union type 을 쓰는 법에 대해서 알아보자. var 어레이: (number | string)[] = [1,'2',3] var 오브젝트: {data : (number | string) } = { data : '123' } 하지만 다른 점이 있다면 변수에 정의된 union 타입은 할당을 하면..
기본 타입 기본 타입을 정리해보자 string, number, boolean 등이 있다. 저렇게 변수 옆에 : 를 붙이고 오른쪽에 타입을 작성해주면 된다. (null, undefined 도 있다) let 이름 :string = 'kim'; let 나이 :number = 20; let 결혼여부 :boolean = false; array 와 object 여러 자료를 한번에 저장하고 싶을 때 array 나 object 를 쓴다. 예를 들어 string 이 들어가는 array 를 작성하고 싶으면 다음과 같이 작성한다. let 회원들 :string[] = ['kim', 'park'] 만약에 string 만이 아닌 string 또는 number 가 들어가는 array 를 작성하고 싶다면 다음과 같이 작성하는데 이건..
tsconfig 파일 생성하기 프로젝트 폴더에 tsconfig.json 이라는 파일을 생성한다. 여기에는 ts 파일을 js 파일로 변환할 때에 어떻게 변환할지 세부설정을 작성할 수 있다. { "compilerOptions": { "target": "es5", "module": "commonjs", } } target : ts 파일을 어떤 버전의 js 로 바꿔줄지 정하는 부분 module : js 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 부분 (예를 들어 commonjs 는 require 를 쓰고, es2015 는 import 를 쓴다) 그 밖에 추가로 넣을 수 있는 것들이 몇가지 있는데 다음과 같다. { "compilerOptions": { "target": "es5", "modul..
실시간 소통을 하고 싶으면 서버와 유저간 Web Socket 을 뚫으면 된다. socket.io 라이브러리를 설치해서 한번 사용해보자. 사용 방법 npm install socket.io npm 을 이용해서 설치를 완료한 후에 server.js 에 3줄의 코드를 추가한다. (const app = express() 보다 아래에 위치해야한다.) 그리고 app.listen 코드를 http.listen 으로 바꿔준다. 이전에는 express 를 이용해서 서버를 띄웠던 걸 http 라는 node.js 라이브러리 + socket.io 를 이용해서 띄우는 것이다. socket.ejs 라는 파일을 하나 새로 만든다. https://cdnjs.com/libraries/socket.io socket.io - Librarie..
채팅기능을 만들어보자 채팅메세지도 결국 게시물 발행기능과 똑같다. 새로운 점이 있다면 채팅메세지는 채팅방 게시물에 종속이 되어야한다. 댓글 만드는 법 댓글은 댓글 collection 을 하나 새로 만들어서 모든 댓글을 저장하면 된다. 하지만 그러면 그 댓글들 하나하나가 어떤 글에 달린 댓글인지 확인할 수 없게될 것이다. 때문에 모든 댓글은 부모 게시물이 무엇인지 를 명시해야한다. 따라서 게시물 collection 과 댓글 collection 을 만들고 댓글 1의 부모게시물은 게시물 2고, 댓글 2의 부모 게시물은 게시물 4이다... 이런식으로 collection 끼리 관계를 맺어야한다. 채팅방 만드는 POST api 만들기 채팅 버튼을 누르면 chatroom 이라는 collection 에 document..
원티드 프리온보딩 챌린지 7월 과제로 CSR과 SSR의 이해란 주제로 포스팅을 하게되었다! 1. CSR이란? 이것의 장단점은 무엇인가요?CSR이란 Client-side Rendering 의 줄임말이다.말 그대로 '클라이언트 쪽에서 렌더링을 한다' 라는 말인데,여기서 클라이언트는 브라우저이기 때문에 브라우저가 렌더링을 처리하는 방식이다. 서버에서 HTML을 받아와서 JS주소를 서버로 요청해 동적으로 사용자에게 최종적인 어플리케이션을 보여준다.위 그림은 CSR 의 순서이다.유저는 웹사이트에 요청을 보낸다.Edge Caching 은 HTML 파일과 JS에 접근할 수 있는 링크를 빠르게 보낸다브라우저는 HTML, JS를 다운로드 받는다.브라우저는 JS를 다운로드 받는다.모두 다운로드가 되면 JS가 실행되고, 데..
카페에서 이것저것 할일을 하다가 갑자기 받게된 전화 한통 'ai 교육원입니다. SW중심대학 공동해커톤 참가자로 선정되셔서 연락드렸어요.' 얼떨떨하고 기쁜 순간이었다! 사실 해커톤에 참여하기 전에 내적으로 힘이 많이 부족한 상태였다. 졸업을 반년 앞두고 할 건 너무 많아보이고, 마음은 급하고. 무언가 힘을 내서 할 에너지가 스스로 많이 떨어졌다고 느꼈다. 그래서 더더욱 걱정이 됐다. 이 해커톤은 내가 처음 나가보는 해커톤이고, 무려 무박 3일인데 잘 버티고 민폐를 안 끼칠 수 있을 지 말이다. 하지만 어쩌면 내가 이 대회에서 조금이라도 긍정적인 결과를 받는다면 내가 다시 힘을 낼 수 있는 원동력이 될 수도 있겠단 생각을 했다. 그러다 해커톤 당일이 가까워지고, 결국 잠을 별로 못 잔 상태로 캐리어를 끌고 ..
안녕하세요! DEVOCEAN YOUNG 2기 서다원입니다. 저는 이번 학기가 4학년 1학기였는데요. 저희 학교에서는 졸업 조건으로 4-1에 캡스톤 졸업 프로젝트를 수행해야해요. (1,2 학년 때에는 멀게만 느껴지던 졸업 프로젝트를 직접하게 되었다니, 그리고 벌써 마무리하고 후기를 쓰고 있다니 시간이 정말 빠른 것 같아요.) 이 과목은 기업과제랑 팀을 매칭해주고, 한 학기동안 과제를 수행하는 방식이었는데요. 저희는 한 기업의 AI CS 담당 챗봇 서비스를 구현하는 것이 과제였어요. 저는 팀에서 FE 개발자를 맡았고, FE 파트를 맡은 사람은 저 혼자였기에 이 부분이 정말 부담스러웠던 것 같아요. 한 파트에 사람이 두명 이상이면 같이 문제를 해결해나갈 수 있는데 만약에 제가 문제를 해결하지 못하면 팀원 모두..
안녕하세요! 데보션 영 2기 '데보션시스터즈'팀의 서다원입니다. 이번 포스팅에서는 6월 테크세미나 [웹 프론트엔드 성능 최적화 방법 및 적용 사례] 후기를 공유해보려합니다. 저는 프론트엔드 개발자를 진로로 희망하고 있는데요. 그만큼 이번 테크 세미나에 관심이 가득했어요! 확실히 채용 공고를 보면 우대 사항에 ‘성능 최적화’ 개념이 나오곤 했거든요. 저 또한 사이트의 성능이 좋아야 좋은 사용자 경험을 제공할 수 있다- 라는 것은 머리로 알고 있지만 정확히 어떻게 하는지, 어떤 사례가 있는지는 잘 모르고 있었던 것 같아요. 한국의 사용자들은 로딩 타임이 2초동안 뜨지 않으면 사이트를 나가버린다고 합니다. 정말 충격이었어요. 아무리 사이트 백엔드 상의 로직을 잘 짜놓았다고 하더라도, 프론트엔드의 성능을 최적화..
개발을 하다보면 매번 주소를 바꿔야해서 귀찮은 경우가 많다. 그래서 환경변수를 만들어보기로 했다. 사용법 오른쪽 위에 눈모양 버튼을 클릭한다. variable 에는 환경변수의 이름, Initial value 와 Current value 에는 환경변수의 값을 써주면된다. 나는 dev 라는 이름의 변수를 만들어 local 에서 개발하기 편하도록 만들고 bookmark 라는 변수에는 실제 서비스 url 을 넣어줬다. 실제로 사용할 때에는 {{변수명}} 처럼 작성하여 사용할 수 있다. ref: https://velog.io/@kkl4846/postman-%ED%8F%AC%EC%8A%A4%ED%8A%B8%EB%A7%A8-%EA%BF%80%ED%8C%81team-workspace-%ED%99%98%EA%B2%BD%..
https://stack94.tistory.com/entry/React-%EC%B9%B4%EC%B9%B4%EC%98%A4Kakao-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EA%B8%B0 느린 개발자 프론트엔드 백엔드 학습정리 및 정보공유 블로그입니다. stack94.tistory.com 위의 글을 참고하면서 따라해보았다. https://developers.kakao.com/docs/latest/ko/kakaologin/common Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao..
통계 페이지를 개발하려하는데 차트를 그릴일이 필요했다. 내가 사용한 건 react-chartjs-2 ! 구글링을 해보다가 유명하다고 해서 한번 써봤다. 사용방법을 정리해봐야겠다 사용방법 npm install --save chart.js react-chartjs-2 https://react-chartjs-2.js.org/examples Examples | react-chartjs-2 List of react-chartjs-2 usage examples. react-chartjs-2.js.org 난 이 페이지에서 내게 필요한 차트 모양을 찾아서 들어갔다. 예를들어 나는 Line Chart 를 찾아 들어가서 예시 코드를 살펴봤다. App.tsx에 있는 코드들을 가져와준다. tsx 코드라서 js 파일에서 쓰기엔..
상태관리 라이브러리 없이 프로젝트를 하다가 아, 이건 안되겠다. 전역으로 상태관리해야겠다! 싶은 부분이 있었다. 근데 오늘 아침 다른 개발자분 티스토리 피드를 보다가 Recoil 을 추천하시는 글을 읽고 이 참에 Recoil을 써보자 생각했다. 설치 먼저 설치한다 npm install recoil Recoil을 사용하기 위해서는 애플리케이션의 최상위 컴포넌트에 컴포넌트를 사용해야한다. index.js 의 파일을 다음과 같이 수정해준다. index.js // index.js import React from 'react'; import ReactDOM from 'react-dom'; import { RecoilRoot } from 'recoil'; import App from './App'; ReactDOM..
채팅을 하다보면 내가 직접 스크롤을 내리지 않아도 새로 추가된 메세지에 대해서 아래로 자동 스크롤이 된다. 이 기능을 구현해보려고 한다. 방법 useRef, useEffect 훅을 사용하여 구현했다. const scrollRef = useRef(); useRef 훅을 사용하여 스크롤할 요소에 대한 scrollRef 라는 것을 만든다. 이 scrollRef는 스크롤할 컨포넌트를 가리키는데 사용된다. useEffect(() => { scrollToBottom(); }, [isTyping]); const scrollToBottom = () => { if (scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight; } };..
README에 이미지/gif(움짤)을 올려보자 만약 영상 -> gif 변환을 원하는 사람은 아래 사이트에서 gif 변환을 하고 오면된다. https://cloudconvert.com/mov-to-gif MOV to GIF | CloudConvert Compress Merge Capture Website Create Archive Extract Archive Convert MOV Converter MOV MOV is a video format that is commonly associated with QuickTime. This video extension is developed by Apple. It uses an algorithm to compress video and audio. Although cl..
문제 채팅 리스트들을 보여주고, 채팅을 삭제할 수 있는 기능을 구현 중이었다. 채팅 리스트를 클릭하면 채팅을 확인하러 상세페이지로 이동하고, 삭제 버튼을 누르면 채팅 기록이 삭제가 되어야한다. {chats.map((chat) => ( handleChatItemClick(chat.chatId)} className="border-2 border-t-gray-300 p-5 flex justify-between text-sm" > {/* 채팅 생성 시간 */} {formatDate(chat.created_date)} handleDeleteOneChat(chat.chatId)} className="px-4 py-2 overflow-hidden" > 삭제 ))} 근데 삭제 버튼을 눌렀을 때 삭제가 되긴하지만 동시에..
React에서 fetch는 JavaScript의 내장 API인 fetch() 함수를 사용하여 서버와 데이터 통신을 수행하는 방법이다. fetch 함수는 ES6부터 기본적으로 제공되는 함수이며, React 애플리케이션에서 AJAX 요청을 보낼 때 많이 사용된다. AJAX 란? AJAX는 "Asynchronous JavaScript and XML"의 약자로, 웹 애플리케이션에서 비동기적으로 서버와 데이터를 교환하기 위한 기술입니다. AJAX를 사용하면 페이지 전체를 새로 고치지 않고도 서버로부터 데이터를 가져오거나 서버에 데이터를 보낼 수 있습니다. 기존에는 웹 페이지에서 사용자의 요청에 따라 새로운 페이지를 서버로부터 전체적으로 다시 받아오는 방식인 전통적인 동기적인 요청 방식이 일반적이었습니다. 하지만 ..
이렇게 마우스를 올려다 댔을 때 이게 어떤 버튼인지 미리 알 수 있는 문구가 나오게 하려면 tooltip 이라는 기능을 구현하면 된다. React에서 tooltip 을 구현하려면 여러 라이브러리를 활용해서 구현할 수 있는데 나는 그중에서도 react-tooltip 이라는 라이브러리를 사용해보려고 한다. https://react-tooltip.com/docs/getting-started Getting Started | React Tooltip This docs is related to V5, if you are using V4 please check here. react-tooltip.com 자세한 설명은 위에 나와있다. 본인도 공식문서를 보고 적용했기 때문에 빠르고 적용법만 보고싶은 분은 아래를 참고하시..
캡스톤 프로젝트 중에 특정 구역 내에서 스크롤을 기능할 일이 생겨서 작성해보는 포스팅! 채팅창을 만드는데 채팅창에 있는 채팅 메세지 내용들만 스크롤이 가능하도록 할 것이다. 방법 tailwindcss 버전 import React from 'react'; function MyComponent() { return ( {/* 스크롤이 필요한 컨텐츠 */} ); } overflow-y-scroll 을 이용해서 스크롤이 필요한 컨텐츠를 감싸준다. 기본 css 버전 import React from 'react'; function MyComponent() { return ( {/* 스크롤이 필요한 컨텐츠 */} ); } 마찬가지로 overflow-y : 'scroll' 속성을 추가해준다. 스크롤이 넘치지 않도록 하고..
useDebugValue 란 React Hooks 중 하나로 개발자 도구 Dev Tools 에서 컴포넌트의 상태를 디버깅할 때 사용하는 함수이다. 사용법 useDebugValue 는 두개의 인자를 받음 첫번째 인자는 디버깅에 사용할 값(value) 두번째 인자는 옵션 객체이다. 예시 import { useDebugValue, useState } from 'react'; function useCounter(initialValue) { const [count, setCount] = useState(initialValue); useDebugValue(count, count => `Count: ${count}`); function handleIncrement() { setCount(count + 1); } fu..
