본문 바로가기

전체 글

채용 과제를 끝냈다! 지난 1주일간 취업 과제를 할 일이 있었다! 알바나 기타 다른일로 시간이 많이 있지 않았지만 무사히 끝낼 수 있었다. 과제내용! 디자인 파일과 기능에 대한 설명을 보고 화면을 만드는 과제였다. 구현할건 생각보다 간단해서 여러 일로 시간이 없는 내게는 적당했다. 디자인 디자인 파일은 공개하지 않는게 좋을것 같아 짧게 설명하자면 왼쪽에 사이드바가 있고 오른쪽에는 내용이 있는 모양이었다. 사이드바에는 대메뉴와 소메뉴가 있어 대메뉴를 누르면 소메뉴가 나오는 형식이었고 크기는 세로 100vh 가로는 전체 화면에 20%였다. 기능 화면을 열었을떄 정보를 get으로 가져와 화면에 뿌려야 했고 기능1~기능6 까지 있었다. 기능 2,4는 input 이었다. 그리고 저장을 누르면 post 요청을 보내야 했다. 이 외에도 .. 더보기
TypeScript 2편! (any, unknown) // ()는 선택사항이다. 하지만 해주면 좀 더 가독성이 좋아진다. let member : (number | string) = 'kim'; // 여러 숫자와 문자열이 들어갈 수 있기 때문에 이진법으로 이름을 넣어도 된다. member = 1101011000000100; // 배열이나 객체의 타입을 여러개 지정해주려면 아래처럼 let numString :(number | string)[] = [1,'2',3] let objs :{a:string | number } = { a : 123 } // 모든 자료형 허용이 가능하다. 타입 쉴드 해제 let anyType : any; anyType = 123; anyType = [] // any 말고 unknown도 있는데 any 보다 안전하다. let unknown.. 더보기
TypeScript 타입 지정법. TypeScript 를 공부하며 타입 지정법을 정리해놨는데 블로그에 공유하려 한다! // 타입 지정하는법 const num :number = 123; // mix 변수에는 string이나 number가 들어온다는 뜻이다. // array 타입 지정법 아래 예시의 string 부분 원하는걸로 변경 가능 // arr 변수에는 string인 array만 들어올 수 있다 const arr :string [] = ['kim', 'jung'] // object 타입 지정법 obj 변수에는 {drink : string}이런 object만 들어갈 수 있다. // 만약 :{drink? : string} ?추가하면 drink가 들어올 수도 아닐수도 있다는 뜻이다. const obj :{drink : string} = {".. 더보기
스터디 모임을 만들기! 친구와 카페에 갔을 때 개발 스터디를 하시는 분들을 보았다. 개발에 대한 얘기를 나누고 서로 지식을 나누는 모습을 보며 나도 스터디를 들어야겠다는 생각이 들었고 스터디를 찾아보았다. 하지만 이미 인원이 다 찼거나 거리가 멀어 적당한 것이 없었고 여러 사이트를 돌아다녀도 비슷했다! 그래서 내가 만들기로 결정했다! 먼저 가장 많은 글이 있던 Hola!라는 곳에서 일요일에 모집글을 올렸다. 저는 프론트엔드 부트캠프를 수료하고 취업을 준비하고 있습니다! 모각코를 찾아보다 원하는 곳이 없어 직접 만들기로 결심해 모각코 모임을 만들게 되었습니다. 분야는 상관 없습니다! 백엔드 공부를 하시거나 디자인을 하셔도 괜찮습니다 모여서 함께 공부하실 분이면 좋겠습니다! 이 모임은 아직 초기여서 모각코이지만 좋으신 분들과 취업.. 더보기
구글 검색 1등! 검색하면 바로 나오기! 영어로 juckgum이라고 치면 내 사이트가 가장 먼저 나온다! 더보기
Proptypes를 이용한 타입 체크 JavaScript를 사용하는데 TypeScript 처럼 타입 검사를 하고 싶을 때는 Proptypes를 쓸 수 있다. 예시를 들어보자. "use client" import React from "react" import PropTypes from 'prop-types'; export default function Home(props){ // 서버단에서 불러온 데이터를 props내려주기 했을때 const {data} = props; // 구조분해할당으로 원하는거 가져오고 const datamap = data.map((a,i) => ( {a.title} )) return( {datamap} ) } Home.propTypes = { data: PropTypes.array.isRequired, }; 자 여기서 .. 더보기
반응형 웹 구현하기 전에 알아야할것! 반응형이란 반응형 웹이란 크롬창을 줄이거나 늘릴 때 웹 페이지가 반응해서 사용자의 화면에 맞춰 크기가 변하는 것을 말한다. 미디어쿼리 미디어 쿼리는 사용자 화면의 크기에 맞춰 css를 보여주는데 조건문과 비슷하다. 조건문 같은 부분에는 max-width와 min-width를 쓰는데 max는 내가 설정한 것 이하일 때, min은 이상일 때 적용된다. 그렇기 때문에 주로 max는 데스크탑이 주요할 때 쓰고 min은 모바일이 주요할 때 사용한다. // max-width 에서 모바일 화면 구현할때 @media only screen and (max-width: 425px) { // 화면이 425px 이하인것에 이 css를 적용시킨다. .box{ display: flex; flex-direction: column;.. 더보기
DI! DI DI는 의존 관계 주입이라는 뜻으로 의존 관계를 외부에서 결정(주입)해주는 것을 말한다. 탕짬면에서 탕수육 고기가 돼지고기가 아니라 닭고기로 바뀌면 유린기가 되는데 이럴 때는 탕수육이 돼지고기에 의존성을 가지고 있다고 한다.(돼지고기가 아니면 탕슉이 안되기 때문) DI를 하려면? 탕수육에 DI라는 의존 관계 주입을 해줘서 DIP라는 의존관계역전을 만들어주는 것이다. 메뉴를 탕짜면이 아니라 튀김짜장면으로 바꾸면 닭고기를 튀겨도 돼지고기를 튀겨도 튀김짜장면이 된다. 주문한 사람, 튀김재료들이 '튀김'짜장면에 의존하게 된다. 하위에 의존하는 게 아니라 상위에 '튀김'짜장면이라는 것에 의존하게 된다! 더보기

티스토리툴바