전체 글34 yarn JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. yarn dlx @yarnpkg/sdks vscodeyarn으로 nextjs 설치 후 JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 에러가 있을 경우 아래 명령어를 쳐주자 2022. 3. 26. [컴포넌트 재활용하기] - Button 오늘은 재활용 가능한 컴포넌트 중에 가장 많이 사용되는 Button을 만들어 보자. 개발 환경 - react 17.0.2 - typescript 4.4.2 - styled-component 5.3.3 1. styled-components를 적용한 기본적인 버튼 컴포넌트 생성 src/components/Button.tsx import React, { ReactElement } from "react"; import styled from "styled-components"; function Button(): ReactElement { return Button; } const ButtonStyled = styled.button``; export default Button; 우리는 여기서 고민을 해야 한다. 버튼.. 2022. 2. 19. 나는 리액트를 어떻게 설계할 것인가? 들어가며 나는 작년부터 지금까지 리액트를 이용해서 여러 프로젝트들을 했다. 리액트를 배운 지 얼마 안 됐을 때는 책에서 배운 대로, 인강에서 배운 대로만 따라 하느라 큰 고민을 하지 않았었다. 그러나 어느 정도 경험이 생기고, 여러 팀 프로젝트를 참여하면서 팀원들과 의견을 나누다 보니, 프로젝트를 시작할 때 어떤 리액트 패턴을 사용할지, 폴더구조는 어떻게 가져갈지에 대한 고민을 하게 되었다. 이런 고민을 하는 과정에서 배운 내용들을 토대로 포스팅을 작성해보려고 한다. ❓ 리액트 컴포넌트 패턴은 뭐가 있고 어떤걸 사용할까 리액트는 정말 자유로운 라이브러리 이기 때문에, 다양한 패턴들이 존재한다. 그중에서 어떤 방식을 사용할지는 개발자가 정하는 것이기 때문에, 우리는 새로운 프로젝트를 시작할 때 이런 고민을.. 2022. 2. 14. 원티드 프리온보딩 과제 - 견적 요청서 페이지 내가 맡은 역할 - figma 명세에 따라 반응형 디자인 구현 - 필터링 기능 구현 반응형 세팅 Breakpoints는 크게 PC(xlarge), Tablet(medium), Mobile(small)로 나누고, 중간 pc -> tablet으로 가는 과정 중에 필요한 사이즈인 1130px도 추가했다. enum Breakpoints { xlarge = 1440, large = 1130, medium = 748, small = 360, } export default Breakpoints; 방금 만든 Breakpoints를 기반으로 아래와 같이 mediaQuery 함수를 만들었다. import Breakpoints from "./breakpoints"; const mediaQuery = (maxWidth: nu.. 2022. 2. 12. IT 연합동아리 YAPP 19기 활동 후기 들어가며 작년 9월부터 진행했던 YAPP 동아리가 끝이 났다. 5개월이라는 시간 동안 진행이 되었는데, 되돌아보면 정말 많이 성장한 거 같다. 이번 포스팅에는 개발 관련된 내용보다는 Yapp 동아리가 어떤 식으로 진행되었고, 우리가 만들려고 했던 서비스를 어떻게 기획부터 개발까지 진행이 되었는지를 남겨보려고 한다..! YAPP 동아리 면접 후기 포스팅 보러 가기 첫 세션 두근두근 설레는 마음으로 첫 세션에 참여했다. 세션에서는 동아리 진행 일정과, 수료 조건에 대해서 설명을 해주시고, 배정된 팀에 대해서 발표를 해주셨다. 팀은 Android 2팀, iOS 2팀, Web 2팀 해서 총 6팀이 있었고 나는 그중에 Web2팀으로 배정되었다. 각 팀은 기획자 1명, 디자이너 1명 프론트 3명, 백앤드2명 해서 .. 2022. 2. 5. 원티드 프리온보딩 과제 - 환율 계산기 들어가며 원티드 프리온보딩이 시작되었다. 첫날이라서 가볍게 오리엔테이션을 진행하고 끝날 줄 알았는데, 첫날부터 바로 과제가 주어졌다. 😢 원티드 프리온보딩 시간표를 보면 3일마다 과제가 주어지는데, 그게 오늘부터였다니.. 원티드 프리 온보딩을 지원할 당시에는 시간표상에 있는 스케줄이 할만할 줄 알았는데,,, 원티드 프리온보딩을 합격하고 나니 갑자기 해야 할 일이 너무 많아졌다... 우선 Yapp 19기에서 진행했던 북마크 서비스의 2차 개발이 시작되었고, 이번 Yapp 20기에 운영진을 하게 되어서 공식 Yapp 홈페이지를 개편하는 업무를 하게되었다. 또 예전에 진행했던 개발자의 품격2기 멤버들과 개발자 Qna 서비스를 만들기로 했는데, 그게 이번 주부터 시작이다.. 오전 8시부터 오후 4시 30분까지는.. 2022. 1. 30. 원티드 프리 온보딩 선발과제 후기 원티드 프리온보딩 프론트엔드 코스에 지원했을 당시에 제출했던 선발 과제에 대해서 포스팅해보려고 한다. 과제를 그대로 포스팅해도 될지 몰라서 멘토님께 여쭤봤는데, 마음껏 가능하다고 하셨다! 💡 과제 요구사항 [선발 과제]: 원티드 페이지 상단 영역을 React 기반으로 클론해주세요. 💡 요구사항 분석 원티드 상단 영역을 분석해보면 다음과 같다. 슬라이드 되어야 할 이미지가 어떠한 반응형에도 항상 페이지의 정중앙에 유지되도록 설정 슬라이드 이미지가 3~4 초마다 자동으로 슬라이드 되어야 함 슬라이드 이미지에 마우스를 hover 하게 되면 슬라이드를 멈춤 이미지가 무한 루프로 연결되어 있음 브라우저 배율을 500%로 최대한 줄여도 이미지가 끊이지 않고 계속 보여야 함 페이지를 새로 고침 할 때마다 나오는 이미.. 2022. 1. 26. 원티드 프리 온보딩 지원 후기 💡 원티드 프리 온보딩 소개 원티드 공식 소개 내용은 다음과 같다. 원티드 X 위코드 X 임팩트캠퍼스 프리온보딩 프론트엔드 코스는 전공자, 주니어 경력자, 부트캠프등을 통해 일정 수준 이상의 기술역량을 갖춘 인재들의 graduate school로서, 단기간에 참가기업의 실전 과제와 팀 단위 동료 학습을 통한 역량 향상과 취업을 목표로 하고 있습니다. 채용 목적의 참가 기업은 1. 참가자 분들의 Pre-온보딩을 위해 자사의 기술과제를 제공합니다. 2. 채용설명회를 통해 서비스, 팀, 직무에 대해 소개합니다. 3. 참가자를 채용합니다. 취업목적의 후보자는 1. Free로 Pre-온보딩에 참여합니다. 2. 참가기업의 제출 과제로 문제 정의, 해결 그리고 피드백을 통해 기술역량을 성장시킵니다. 3. 팀 과제 수.. 2022. 1. 26. Recoil에서 Redux로 마이그레이션 하게 된 이유 배경 현재 나는 IT 연합동아리 Yapp에서 활동을 하고 있다. 우리 팀은 북마크를 좀 더 쉽고 편리하게 관리하기 위한 서비스를 기획하게 되었는데, 첫 기획 당시에는 단순히 북마크 관리 페이지(검색, 휴지통), 로그인, 회원가입 페이지 이게 전부였다. 그래서 기술 스택을 정할 당시에 전역 상태가 그렇게 많을 거 같지 않아서, 러닝 커브가 매우 적고 상태를 react의 useState처럼 쉽게 관리할 수 있는 recoil을 하기로 정했었다. 동아리에서 진행하는 1차 기획캠프를 하게 되었는데, 기획 캠프는 각 팀별로 기획 내용을 발표한 후에 현업 기획자 분들에게 피드백을 받을 수 있는 시간이었다. 우리가 기획한 북마크 관리 서비스에 대해서도 피드백을 많이 받았는데, 다른 북마크 관리 서비스와의 차별점이 없다.. 2022. 1. 16. 리액트 라이프 사이클 - useEffect 라이프 사이클(Lifecycle) 이란? 라이프 사이클은 말 그대로 생명 주기이다. 그렇다면 리액트에서의 라이프 사이클은 무엇일까? 리액트에서의 라이프 사이클은 바로 컴포넌트의 수명 주기를 말한다. 컴포넌트의 수명 주기는 총 3단계가 있다. 1. 컴포넌트가 생성될 때 (마운트) 2. 컴포넌트가 업데이트 될 때 (업데이트) 3. 컴포넌트가 제거 될 때 (언마운트) 이 3단계의 수명 주기에 관해서 알아보자 컴포넌트가 생성될 때 (마운트) 다음과 같이 useEffect hooks를 이용하여 안에 코드를 넣어주면 컴포넌트가 생성(마운트)될 때 해당 코드가 실행이 된다. useEffect(() => { console.log("첫 랜더링") }, []) 컴포넌트가 업데이트될 때 (업데이트) 컴포넌트가 업데이트될 때.. 2022. 1. 8. WebRTC 란? (개념정리) 요즘 코로나로 인해서 많은 회사들이 비대면으로 회의를 진행하고 있다. 나 같은 경우는 IT 동아리를 참여하고 있는데, 원래는 대면으로 진행했던 동아리였지만 코로나로 인해서 게더타운 이라는 서비스를 이용해서 비대면으로 매주 세션을 진행하고 있다. 이러한 비대면 회의를 진행할 수 있게 도와주는 여러 플랫폼들이 있는데 그중 대표적으로 Google Meet, Discord, Gather Town, Zoom 같은 것들이 있다. 이 서비스들 중 Zoom을 제외하고는 모두 웹 브라우저에서 화상회의를 진행할 수 있다. 이렇게 어떠한 소프트웨어 설치 없이 웹 브라우저만 있으면 화상회의를 가능하게 해주는 기술이 바로 webRTC 기술이다. webRTC란? 그렇다면 이 webRTC 기술은 정확히 어떤 것일까 ?? MDN의 .. 2022. 1. 5. [리얼월드 HTTP] 스터디 시작 리팩터링 2판 스터디가 끝난 후 다음 스터디는 리얼월드 HTTP 책으로 하기로 하였다. 스터디는 리팩터링 때와 마찬가지로 매주 수요일 오후 7시에 진행하기로 하였다. 스터디를 하지 않았으면 그저 다른 날과 다를 거 없이 평범하게 지나갔을 텐데, 스터디를 하게 되니 강제성(?)이 생겨서 틈틈이 책을 읽는 습관이 생기고 있다. 아마 혼자 공부를 했더라면 책 한 권 읽는데 1년이 걸렸을 거 같다.. (1년도 부족할지도..?) 포스팅에는 책 내용을 요약해서 정리하는 것도 좋겠지만, 스터디 중에 다른 개발자 분과 얘기하면서 알고 가면 좋을 것 같은 얘기들도 함께 작성하겠다. 스터디를 하다 보면 책 내용 외적으로도 개발 관련 좋은 얘기들을 많이 하게 되어서 개발 의지도 더 불타오르고 좋은 거 같다. 리팩터링 스터디.. 2022. 1. 4. 이전 1 2 3 다음
