블로그

코파

인프런 워밍업 클럽 1기 FE 1번 과제 (음식 메뉴 앱)

1번 과제 (Day2) (음식 메뉴 앱)깃허브 저장소 주소 :https://github.com/devellybutton/frontEnd_warmingUp_study/tree/master/01.%EC%9D%8C%EC%8B%9D%EB%A9%94%EB%89%B4%EC%95%B1 과제 GIF: 간단한 후기 :자바스크립트를 사용해서 createMenuItem 함수로 HTML 요소를 생성하였습니다. fiterMenuItems 함수로 메뉴 행목을 필터링한 후, insertMenuItem 함수로 필터링된 항목을 DOM에 삽입하도록 하였습니다.이런식의 코드를 얼마 전 부트캠프의 1차 프로젝트에서 쓴 적이 있는데(이와 같이 자바스크립트로 html DOM을 생성하여 삽입), 이게 효율적인 방법인지는 잘 모르겠습니다. 안타깝게도 효율적인 방법이 떠오르지 않습니다. 해당 프로젝트에서 저는 백엔드 작업을 담당하였기 때문에, 프런트엔드 구현에 대한 고민은 깊게 하지 못했습니다.개인적으로 mock data만 넣으면 대충 만드는 경향이 있어서 단골카페에 있는 메뉴들을 직접 넣어보았습니다. 이미지 출처 :https://shesbagel.com/mainhttps://map.naver.com/p/search/%EC%89%AC%EC%A6%88%EB%B2%A0%EC%9D%B4%EA%B8%80/place/1834199837?c=15.00,0,0,0,dh&placePath=/home개발할 때 참고한 링크 :https://www.daleseo.com/css-object-fit/#google_vignettehttps://blog.naver.com/esc5411/221559783778https://velog.io/@rondido/Css-transform-scale

웹 개발워밍업클럽FE과제

개발자 경제신문 읽기 12일차

 머스크 깜짝 방중한 날... 테슬라, 중국 완전자율주행 시동테슬라, 외국기업 중 처음으로 데이터안전검사 통과. FSD 도입 가능? (원래 데이터규제로 FSD 도입 못했음)차량 밖 안면정보 등 익명화 처리, 운전석 데이터 수집 차단, 운전석 데이터 차내 처리, 개인정보 처리 통지 등비야디, 리오토, 로터스, 호존, 니오 등 중국 업체들이 자율주행 기술을 가오하하고 있어 경쟁이 치열하다 1분기 외국인 관광객 340만명... 팬데믹 후 최다1분기 한국을 찾은 외국인 관광객 340만명. 코로나 19 이후 분기 최대 (2019년 1750만명)중국인 관광객 101.5만명, 특히 무비자 입국 가능한 제주도 선호. 일본인 관광객 66.5만명. 미국 메이저리그 개막식 서울에 오타니 선수가 출전한 영향 등대만(30.5만), 미국(24.4만), 베트남(10.9만) 등일본 골든위크, 중국 노동절 연휴로 반짝 상승세  비틀대는 비트코인, 9000만원 붕괴홍콩 비트코인 현물 상장지수펀드(ETF) 거래 앞두고 가격 하락비트코인 약세 : 지정학적 불확실성의 확대, 금리 상승 등 "AI 패권 뺏기면 끝장" ... 동맥국 기업도 독점땐 벌금 폭탄각국 정부가 AI 기술 선점을 위ㅐ 보호무역 장벽을 높이는 중일본 : 스마트폰경쟁촉진법안 발의, 검색 결과에 자사 서비스 우선 표시 금지. 위반 시 매출 최대 20% 과징금. 네이버에게 "라인 팔아 시스템, 네트워크 업무 위탁사 네이버에 의존하면서 이용자 관리 제대로 안해서 유출됨!"소프트뱅크 생성형 AI 개발에 필요한 슈퍼컴퓨터 구입 등 465억원 보조금 지급, AI 관련 지식재산권 라이선스 소득 및 양도 소득 최대 30% 공제EU : 고위험 AI 시스템의 데이터 공개와 위험평가 요구 법안 통과. 위반시 매출의 최대 7% 과징금 부과외부에 공개되는 오픈소스 모델을 활용한 AI 파운데이션 모델은 제외 - 미스트랄, 알레프알 등 제외시킴중국 : 생성형 AI 서비스 제공 기업 대상 보안지침 발표, 사회주의 체제 관련 내용도 포함. -> 사실상 출시 불가미국 : 중국 배제 위주. 틱톡 매각 법안 등한국 : 오히려 국내 플랫폼 기업 규제 강화 <- 니네뭐함  세계 포퓰리즘 광풍... 기업들 '로비 없이' 생존 어렵다인도 : '메이드 인 인디아' 정책. 반도체 생산시설 유치를 위해 13조원 보조금 약속, 해외 컴퓨터/태블릿 수입 허가하여 제조업 육상 전략멕시코 : '국영기업 우선' 기조. 집권여당 대통령 후보 "국영 에너지기업 강화할 것". 현직 대통령이 외국기업에 줬던 채굴권 회수 및 리튬 국유화한 것을 계승인도네시아 대통령 당선자, "전임 대통령의 희귀광물 원광 수출 금지 정책 확대, 계승할 것", 원광 형태 니켈 수출 금지미국 : '보호무역' 정책 경쟁 : 트럼프, 중국산 수입품에 60% 이상 고율 관세 부과할 것. 바이든, 중국산 철강, 알루미늄 관세 3배 인상정치자금 연구단체 '오픈시크릿', 인텔 로비 비용 94억만원, 미국내 로비 규모 증가 고금리에 대출 정체... 미국 은행들, 이자로 나간 돈이 더 많았다1분기 미국 대형 은행들, "예금 이자 비용 > 대출 이자 수익" - 웰스파고, JP모건 중국, 지방은행 채권쏠림 경고... "미국 SVB 파산 남 일 아냐"국채 투자 과열 현상, 채권 금리 역대 최저 수준SVB 는 미국 장기 국채 비율이 높은 포트폴리오 유지하다가 기준 금리 인상의 직격탄으로 파산함.많은 자금이 수익률이 낮은 장기 채권에 묶여있고 부채 비용이 대폭 증가하면 급격한 가격 재조정으로 자산이 크게 감소할 수도 있다."  

교양신문읽기

한국 IT 용어 이야기 (4) - 깎다/쳐내다/굽다

개인적으로 영어가 잘 준비되지 않은 상태로 외국계 회사에서 서바이벌 모드로 일을 배웠던 내용들 중에서, 그럴 듯하게 한글로 번역되어 쓰이고 있는 경험들이 있었기에 가벼운 마음으로 모아 본다. 특히 동사 부분이 조금 더 두리뭉실했던 기억인데, 영어로는 make, build 면 어지간하면 다 되는 게 굳이 한글로 번역되면 의미가 다양해져서 그랬겠다 싶다.표준어 사전 같은 게 있는 게 아니기도 하고, 나 말고 다들 잘 쓰고 있는 모르는 걸 배워 가는 나름의 즐거움이 있기도 했었는데, 이게 한글 영어 차이인지 세대 차이인지 등을 살짝 헷갈리긴 했었다. (요구사항을) 깎다sharpening requirement 에 가깝다 하겠다. 주로 non-tech 분들이 ticket / issue 를 만들어서 tech 쪽에서 가져가 해결해 주기를 기다리며 이것저것 자세히 풀어 주는 행동이 여기에 해당하겠는데, 결과물을 나타내는 '깎아진' 이라는 표현은 한글로도 영어로도 잘 들어보진 못했다. 열심히 하는 과정을 나타내는 추상적인 단어였으리라..sharpening 의 뜻 중에 칼을 간다는 느낌은 좀 과하고, 연필을 깎아서 준비한다 정도가 적당하니 좋은 번역이라 싶었다. 실제로 잘 다듬어진 product spec 이나 product requirement document 등이 과제에 끼치는 영향이 크기에 좋은 기억들이 남아 있다. (티켓 or 이슈를) 쳐내다JIRA 와 같은 이슈 트래커 툴들과 일하는 방식에 따라 ticket 이라 부르기도, issue 라 부르기도 하는데( 구글에서는 한동안 buganizer-id 혹은 bug id 라고만 불렀던 기억이다. 지금은 issue tracker 라고 본 거 같은데.. ). 이것을 resolved / done / closed 상태로 만들어 내는 것을 쳐낸다고 많이들 불렀다. 아마도 개인 혹은 팀의 TODO list 에서 쫓아내는 개념이라 생각하면 이해가 한번에 된다. 그리고 이게 입에 붙을 때 꽤 찰진 느낌이 나서 좋았던 기억이다. 주로 일을 시키는 입장에서 '그거 쳐내면 좋잖아요..?', 'Good. 잘 쳐 내셨어요.' 등... 한글의 격음이 주는 자그마한 쾌감 같은 것들이 있었다.  (이미지를) 굽다/말다docker / k8s / container 등이 널리 쓰이면서 deploy / rollout / launch 등의 단어들과 함께 구워서 내보낸다 라는 의미로 꽤 들었던 기억이다. 분명히 이건 CD-ROM 을 굽는 burn 에서 왔을 것이고, 영어로는 그냥 무심하게 build an image 로 쓰이고 있을테니 시대를 살짝 역행하는 느낌의 간극이 있다 하겠다. 비슷한 context에서 '말다' 도 들어 본 기억인데, 이것저것 섞어서 이미지 만들 때 상황을 나타냈었던 기억인데, 워낙 '굽다'가 강해서 굽는 것을 보조해 주는 역할 정도라서 기억이 강하게 남지 않고 있는 거 같다. 김밥을 말다에서 왔다는 설과 밥을 국에 말다에서 왔다는 설 둘 다 설득력이 있다.. 

교양한글영어용어

역직렬화

[인프런 워밍업 스터디 1기] 1일차 진도표

어노테이션을 사용하는 이유 (효과) 는 무엇일까?어노테이션은 사전적 의미로 주석이라는 뜻을 가지고 있다. 자바에서 어노테이션은 소스 코드에 추가해서 사용할 수 있는 메타 데이터의 일종이다. 메타 데이터란 애플리케이션이 처리해야 할 데이터가 아니라 컴파일 및 런타임 과정에서 코드를 어떻게 처리해야 할지 알려주기 위한 추가 정보이다. 자바 어노테이션은 JDK 1.5 버전 이상에서부터 사용가능하며, 자바 어노테이션은 클래스 파일에 임베드되어 컴파일러에 의해 생성된 이후 JVM에 포함되어 동작한다. 어노테이션이 나오기 이전에는 XML 및 마커 인터페이스를 통해 추가적인 정보를 제공할 수 있었다. [ 어노테이션 장점 ]코드 가독성 : 어노테이션은 코드와 설정을 같은 위치에 배치하므로 읽고 이해하기 쉽다. 클래스, 메서드, 필드, 파라미터 등 연관된 코드와 가까이 있기 때문에 흐름을 따라가기 쉽다.설정의 간소화 : 별도의 설정 파일 작성 없이 어노테이션 적용을 통해 설정을 간소화할 수 있다.중복 코드 제거 : 공통적인 코드 패턴이나 설정을 재사용할 수 있기 때문에 코드의 중복을 줄이고 효율적으로 코드를 작성할 수 있다.커스텀 어노테이션 : 직접 커스텀 어노테이션을 정의함으로 필요한 기능이나 제약 사항을 정의하여 사용할 수 있다.프로세서를 통한 검증 및 코드 생성 : 어노테이션 프로세서를 이용해 컴파일 시점에 어노테이션을 처리하고 검증할 수 있다. 또한 코드를 자동으로 생성하거나 수정할 수 있기에 효과적으로 기능을 구현할 수 있다.나만의 어노테이션은 어떻게 만들 수 있을까?메타 어노테이션의 종류는 다음과 같다.@Retention : 컴파일러가 어노테이션을 다루는 방법을 기술, 어느 시점까지 영향을 미치는지를 결정RetentionPolicy.SOURCE : 컴파일 전까지만 유효RetentionPolicy.CLASS : 컴파일러가 클래스를 참조할 때까지 유효RetentionPolicy.RUNTIME : 컴파일 이후 런타임 시기에도 JVM에 의해 참조가 가능(리플렉션)@Target : 어노테이션 적용할 위치 선택ElementType.PACKAGE : 패키지 선언ElementType.TYPE : 타입 선언ElementType.ANNOTATION_TYPE : 어노테이션 타입 선언ElementType.CONSTRUCTOR : 생성자 선언ElementType.FIELD : 멤버 변수 선언ElementType.LOCAL_VARIABLE : 지역 변수 선언ElementType.METHOD : 메서드 선언ElementType.PARAMETER : 전달인자 선언ElementType.TYPE_PARAMETER : 전달인자 타입 선언ElementType.TYPE_USE : 타입 선언@Documented : 해당 어노테이션을 Javadoc에 포함시킴@Inherited : 어노테이션의 상속을 가능하게 함@Repeatable : Java8 부터 지원하며, 연속적으로 어노테이션을 선언할 수 있게 함ㅁ사용자 정의 어노테이션 정의import java.lang.annotation.*; // 메타 어노테이션을 활용하여 사용자 정의 어노테이션 선언 @Target(ElementType.TYPE) // 어노테이션 적용 대상 Type으로 설정 @Retention(RetentionPolicy.RUNTIME) // 런타임 시까지 어노테이션을 사용 public @interface CustomAnnotation { int age() default 20; // default로 20 설정 String name(); } 출처: https://ittrue.tistory.com/158 [IT is True:티스토리]ㅁ사용자 정의 어노테이션 사용import java.lang.annotation.*; // 메타 어노테이션을 활용하여 사용자 정의 어노테이션 선언 @Target(ElementType.TYPE) // 어노테이션 적용 대상 Type으로 설정 @Retention(RetentionPolicy.RUNTIME) // 런타임 시까지 어노테이션을 사용 public @interface CustomAnnotation { int age() default 20; // default로 20 설정 String name(); } 출처: https://ittrue.tistory.com/158 [IT is True:티스토리]

백엔드어노테이

김동찬

인프런 워밍업 클럽 1기 BE 1일차 과제

어노테이션을 사용하는 이유 (효과) 는 무엇일까?우리는 프로그래밍을 진행하면서 주석을 자주 사용한다 주석을 사용하는 이유는 개발의 과정에서 더 직관적이고 코드를 이해하기 쉽게 하고, 다른 사람에게 내 코드를 보일 때 에도 쉽게 이해할 수 있게 정보를 제공 하기 위해 제공한다 이와 마찬가지로 어노테이션도 비슷한 기능을 한다고 볼 수 있다 다만 주석은 타 프로그래머나 사람에게 정보를 제공하는 것 이라면 어노테이션은 특정 코드에 대해 프로그램에 추가 정보를 전달해 프로그램을 유용하게 개발 할 수 있다어노테이션의 활용런타임 과정에서 특정 기능을 실행하게 해준다프로그램을 빌드할 때 코드를 자동으로 생성할 수 있게 해준다컴파일러에게 문법 에러를 체크하게 정보를 제공한다어노테이션의 종류표준 어노테이션:자바에서 기본적으로 제공하는 어노테이션@Override컴파일러에게 오버라딩하는 메소드라는 것을 알린다. @Deprecated앞으로 사용하지 않을 것을 권장하는 대상에 붙인다. @SuppressWarnings컴파일러의 특정 경고 메시지가 나타나지 않게 해 준다. @SafeVarargs제네릭 타입의 가변 인자에 사용한다.메타 어노테이션: 어노테이션을 위한 어노테이션으로, 어노테이션을 정의할 때 사용된다@Target어노테이션이 적용 가능한 대상을 지정한다.@Retention어노테이션이 유지되는 기간을 지정한다.나만의 어노테이션은 어떻게 만들 수 있을까?1. 어노테이션 생성 어노테이션은 다음과 같이 인터페이스 앞에 @를 붙여서 생성할 수 있다. public @interface RestControllerWithSwagger { }       2. 메타 어노테이션 추가 메타어노테이션중 그 중에서 필요한 것들을 적용하면 된다. @Retention(RetentionPolicy.RUNTIME) @Inherited @Documented @Target(ElementType.TYPE) public @interface RestControllerWithSwagger { }     3. 적용할 어노테이션 추가 추가적으로 적용할 어노테이션이 있으면 추가해준다. 우리는 @Api와 @RestController라는 어노테이션을 공통으로 묶을 것이므로 이를 추가해준다. @Api @RestController @Retention(RetentionPolicy.RUNTIME) @Inherited @Documented @Target(ElementType.TYPE) public @interface RestControllerWithSwagger { String name() default "RestController"; String value(); }         4. 변수 추가 어노테이션에 값을 부여하기를 원한다면 변수를 다음과 같이 선언해줄 수 있다. @Api @RestController @Retention(RetentionPolicy.RUNTIME) @Inherited @Documented @Target(ElementType.TYPE) public @interface RestControllerWithSwagger { String name() default "RestController"; String value(); }         5. 적용하기 위와 같은 과정으로 어노테이션을 생성하였으면 이제 다음과 같이 적용할 수 있다. @RestControllerWithSwagger(value = "RestMemberController", name = "RestMemberController") @RequiredArgsConstructor @Test1 @RequestMapping("/member") public class RestMemberController { private final MemberService memberService; @ApiOperation("멤버 목록 반환") @GetMapping("/list") public ResponseEntity<String> upload() { return ResponseEntity.ok(memberService.getList()); } }출처: https://mangkyu.tistory.com/130 [MangKyu's Diary:티스토리]참초:GPT,https://steady-coding.tistory.com/614 

백엔드

김호집

인프런 워밍업 클럽 스터디 1기 FE 과제 - 1번 과제

1번 과제깃허브 저장소 : https://github.com/Hojip-Kim/javascript_study/tree/main/subject-1학습 범위 : Section 1 ~ 3아래와 같은 json객체를 받았을 시 데이터를 통해 메뉴를 생성합니다.const data = { hamburger: [ { img: 'https://d3af5evjz6cdzs.cloudfront.net/images/uploads/800x0/hamburger_7fc7027f97ceb265ec92b41177d215fd1709173118.jpg', title: '햄버거', content: '100% 순 쇠고기 패티에 상큼한 피클과 양파, 기본에 충실한 맥도날드 햄버거.', price: 4800, }, { img: 'https://d3af5evjz6cdzs.cloudfront.net/images/uploads/800x0/cheeseburger_03074fb9705045bb2b77f6374406804c1709173180.jpg', title: '치즈버거', content: '고소하고 부드러운 치즈와 100% 순 쇠고기 패티, 맥도날드만의 심플한 클래식 치즈버거.', price: 5100, }, { img: 'https://d3af5evjz6cdzs.cloudfront.net/images/uploads/800x0/double-cheeseburger_9bf4c71eb84baf9addf29ef927d547e51709173239.jpg', title: '더블 치즈버거', content: '고소하고 부드러운 치즈와 100% 순 쇠고기 패티가 두개 맥도날드만의 더블 치즈버거!!', price: 7000, }, ], fries: [ { img: 'https://d3af5evjz6cdzs.cloudfront.net/images/uploads/800x0/french-fries_eced7c573f1c8306dcbfe5cd000e0f6f1709175350.jpg', title: '후렌치 후라이', content: '통으로 썰어낸 감자를 맥도날드만의 노하우로 튀겨낸 남다른 맛과 바삭함! 맥도날드의 역사가 담긴 월드 클래스 후렌치 후라이', price: 3500, }, { img: 'https://d3af5evjz6cdzs.cloudfront.net/images/uploads/800x0/golden-mozzarella-cheese-sticks_3cd90be25480b6c8fae70072d93af37d1709175416.jpg', title: '골든 모짜렐라 치즈스틱', content: '속이 꽉 찬 황금빛 바삭함! 자연 모짜렐라 치즈로 빈틈 없이 고소한 맥도날드 치즈스틱을 2조각과 4조각으로 다양하게 즐겨보세요!', price: 4800, }, { img: 'https://d3af5evjz6cdzs.cloudfront.net/images/uploads/800x0/mcnuggets_97f56eac3df59bd5669a2fa7a1c7ae771709175486.jpg', title: '맥너겟', content: '바삭하고 촉촉한 치킨이 한 입에 쏙! 다양한 소스로 입맛에 맞게 즐겨보세요!', price: 4900, }, ], juices: [ { img: 'https://d3af5evjz6cdzs.cloudfront.net/images/uploads/800x0/coca_23ca083f1d9cf06e0387ae006ae2134b1709176046.jpg', title: '콜라', content: '코카-콜라', price: 3400, }, { img: 'https://d3af5evjz6cdzs.cloudfront.net/images/uploads/800x0/fanta_8efa322e5ea92b08969b5f7eb45de75f1709176318.jpg', title: '환타', content: '환타', price: 3400, }, ], };

웹 개발워밍업클럽FE1기

수희

[워밍업클럽] BE 1기 #과제1

[질문] 어노테이션을 사용하는 이유 (효과) 는 무엇일까?어노테이션이란? 프로그램의 소스코드안에 다른 프로그램을 위한 정보를 저장하고, 이 기능을 응용하여, 프로그램의 소스코드안에 다른 프로그램을 위한 정보를 미리 약속된 형식으로 포함시킨 것이다. '@Test'는 '이 메서드를 테스트해야한다'라는 것을 테스트 프로그램에게 알리는 역할을 한다.(주석처럼 프로그램자체에는 아무런 영향을 미치지 않음 , 해당 프로그램에 미리 정의된 종류와 형식으로 작성해야만 의미가 있다.) 그렇다면, 어노테이션은 왜 사용할까?어노테이션을 활용하면 코드의 가독성을 높이고 개발 과정을 간소화할 수 있다.어노테이션이 등장하기 이전에는 코드와 설정파일을 따로 작성하였는데 프로그램 규모가 커질수록 설정파일을 관리하기에 어려움이 있었다. 어노테이션을 사용하여 이러한 어려움을 해결할 수 있게 되었다. 또한 리플렉션을 사용하여 런타임시에 동적으로 어노테이션 정보를 처리할 수 있다. 작성시점에는 어떠한 클래스를 사용해야 할지 모르지만, 런타임 시점에 클래스를 가져와 실행해야 할 경우 리플렉션이 활용되며 대표적으로 스프링 프레임워크의 어노테이션이 동적으로 클래스 정보를 가져온다. [질문] 나만의 어노테이션은 어떻게 만들 수 있을까?@interface 인터페이스 선언@Retention(RetentionPolicy.RUNTIME) 컴파일 이후에도 JVM에 의해 참조 가능@Target(ElementType.TYPE) 타입 선언 시 어노테이션을 적용import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target; @Retention(RetentionPolicy.RUNTIME) @Target(ElementType.TYPE) public @interface MyAnnotation { String value() default ""; } @MyAnnotation(value = "Hello MyAnnotationClass") public class MyClass { }import java.lang.annotation.Annotation; public class MyAnnotationTest { public static void main(String[] args) { myAnnotation(); } public static void myAnnotation(){ Annotation[] annotations = MyClass.class.getDeclaredAnnotations(); for(Annotation annotation: annotations) { if(annotation instanceof MyAnnotation){ MyAnnotation myAnnotation = (MyAnnotation) annotation; System.out.println(myAnnotation.value()); } } } } 강의- 자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지], https://inf.run/XKQg 출처자바의정석 12장 애노테이션https://geunskoo.com/blog-2024-04-16/study-for-annotation/https://ahnyezi.github.io/java/javastudy-12-annotation/https://mysterlee.tistory.com/74https://blog.naver.com/zzang9ha/222090490272