목차 Installation Cargo new hello_cargo 참고 Installation mac os 기준: $ curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh 를 설치하면 됩니다. 다른 OS는 Rust 공식 홈페이지를 참고해주세요. Cargo new hello_cargo 먼저 프로젝트를 생성해야겠죠? cargo new hello_cargo cd hello_cargo 를 하시면 됩니다. 그럼 src 폴더에 main.rs 파일이 보이실거예요. fn main() { println!("Hello, world!"); } 이제 이걸 실행 시켜볼까요? cargo run 참고 Rust 공식 홈페이지 문서
목차 render props pattern 이란? 왜 사용할까? 구현해보자! 비교해보자! render props pattern 이란? 이 패턴은 props로 다른 components를 랜터링하는 패턴입니다. 간단한 예제를 한번 볼까요? import { useState } from 'react' const Title = ({ render }) => render(); const Title2 = ({ children }) => { const [name, setName] = useState('Eddie'); return children(name); } function App() { return ( Hello Title!} /> {(name) => Hello {name} } ); } 이렇게 사용 하면 이제 Hel..
📌 목록 HOC 란? 간단한 HOC 구현 JSON Placeholder 데이터로 withLoader 만들기 HOC의 장점과 단점 📌 HOC 란? High Order Component는 공통 로직을 재사용 해서 사용하게 끔 만들어 줍니다. 마치 mixin과 같이요. 하지만 어떤 컴포넌트를 한번 감싸서 컴포넌트를 만들게 합니다. 그럼 한번 어떤 녀석인지 볼까요? 📌 간단한 HOC 구현 먼저 이런 withStyle 함수를 한번 정의해볼게요. const withStyle = (Component) => { return props => { return } } 그리고 버튼과 Text를 만들어 보겠습니다. import withStyle from "./hoc/withStyles"; const Button = ({ sty..
📌 목차 믹스인 패턴이란? 믹스인 패턴 믹스인 패턴 심화 결론 📌 믹스인 패턴이란? 재사용 가능한 함수들을 객체나 클래스에 추가하는 패턴입니다. Vue와 React에서도 비슷한 예제를 찾아볼수 있는데 Vue의 예시는 아래와 같습니다. // mixin.js export default { method: { greet() { console.log("Hello World!"); } } } import mixin from './mixin' export default { mixins: [mixin], created() { console.log(this.greet()); } } 그럼 자바스크립트에서 이걸 어떻게 표현할 수 있는지 한번 볼까요? 📌 믹스인 패턴 class Dog { constructor(name) { ..
목차 문제 정의 Cypress? Cypress hydration test 작성 Local에서 테스트 해보기 Github action 연동하기 작동 동영상 질문타임 문제 정의 문제가 뭐였길래? 🚨 우리의 개발 환경은 빠르게 개발을 하기 위해 CSR 환경이다. 배포 환경은 SSR 환경이다. 👉 개발 환경과 배포 환경이 다르기 때문에 빠른 머지를 할때 build test를 건너 뛰기 쉽다. 👉 다른 사람 코드를 건들이기 어렵다. 👉 hydration 테스트가 귀찮다. 그래 ! 😎 그럼 Cypress로 Hydration 테스트를 자동화를 하자! Cypress가 뭔가유? 먹는건가유? Cypress에 대해서 알아보자! Cypress는 Javascript End to End 테스트 프레임워크 입니다. 더 많은 정보를..
📌 목차 요약 서론 vite란? vite 회사 프로젝트 적용하기 결론 📌 요약 기존 vite 적용후 build time 34897ms 548ms re-build time 3310ms 100ms 이하 📌 서론 개인 프로젝트에서 vite를 사용하면서 느꼈던 장점들을 토대로 회사 프로젝트에 적용을 해보았습니다. 기존에 있는 프로젝트를 vite를 적용 하면서 힘들었던 점들과 그것을 어떻게 해결했는지를 기술을 하는 글 입니다. 그럼 재밌게 읽어주세요! 😎 📌 vite 란? 먼저 들어가기 전에 vite가 생소하실거 같아 간략하게 vite에 대해 설명해보겠습니다. vite는 바이트 라고 읽지 않고 비잍라고 읽어야 한답니다. (빠르다는 뜻의 불어라서 이렇게 읽어야합니다.) 그리고 vite는 기존 webpack, rol..
📌 목록 전환하는 화면에 data 넣기 돌아오는 화면에 data 넣기 📌 전환하는 화면에 data 넣기 코드로 push 혹은 present를 하였을때 먼저 전환될 화면에 넣어줄 data를 선언을 해줍니다. class CodePresentViewController: UIViewController { @IBOutlet weak var nameLabel: UILabel! var name:String? override func viewDidLoad() { super.viewDidLoad() if let name = name { // 화면에서 확인하기 위해 nameLabel에 text를 넣어줍니다. self.nameLabel.text = name self.nameLabel.sizeToFit() } } } 이제 전..
📌 목차 서론 viewDidLoad viewWillAppear viewDidAppear viewWillDisappear viewDidDisappear 📌 서론 각각의 라이프 사이클이 있습니다. 상세하게 알아보겠습니다. 📌 viewDidLoad 뷰 컨트롤러의 모든 뷰들이 메모리에 로드됐을 때 호출 보통 뷰와 관련된 추가적인 초기화 작업, 네트워크 호출을 합니다. override func viewDidLoad() { super.viewDidLoad() print("viewDidLoad") } 📌 viewWillAppear 뷰가 뷰 계층에 추가되고, 화면에 보이기 직전에 매 번 호출 다른 뷰로 이동했다가 돌아오면 재호출 override func viewWillAppear(_ animated: Bool) { s..
